/* Carga Inteligente — estilos táctiles v2 */

/* ══════════════════════════════════════
   PALETA CORPORATIVA
   Verde: #00A651  Azul: #0066CC
   Verde hover: #006B3B  Azul hover: #004FA3
══════════════════════════════════════ */

/* Botones primarios (Calcular, Cargar) */
.btn-primary {
  background: #00A651;
  color: white;
  border: none;
  cursor: pointer;
}
.btn-primary:hover  { background: #006B3B; }
.btn-primary:active { background: #005530; }

/* Botones secundarios / outline */
.btn-secondary {
  background: transparent;
  color: #0066CC;
  border: 1.5px solid #0066CC;
  cursor: pointer;
  border-radius: 8px;
}
.btn-secondary:hover { background: #eff6ff; }

/* Links principales */
.link-primary  { color: #0066CC; }
.link-primary:hover { color: #004FA3; }

/* Links secundarios */
.link-secondary { color: #0066CC; }
.link-secondary:hover { color: #004FA3; }

/* ── Range slider más grueso y táctil ── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 9999px;
  background: #e2e8f0;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #00A651;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #00A651;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* accent-brand ahora es verde */
.accent-brand { accent-color: #00A651; }

/* ── Celdas de precio en tabla ── */
.celda-precio {
  transition: transform .08s ease;
  cursor: default;
  min-width: 28px;
}
.celda-precio:active { transform: scale(1.15); }

/* ── Strip de días (selector precios) ── */
#diasStrip {
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll !important;
  scroll-behavior: auto;
}
#diasStrip::-webkit-scrollbar { display: none; }

.dia-btn {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: #f8fafc;
  cursor: pointer;
  transition: all .15s ease;
  min-width: 60px;
  -webkit-tap-highlight-color: transparent;
}
.dia-btn .dia-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #94a3b8;
}
.dia-btn .dia-fecha {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
}
.dia-btn .dia-badge {
  font-size: 0.65rem;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 600;
  margin-top: 1px;
}

/* Pasado */
.dia-btn.pasado { opacity: 0.6; }
.dia-btn.pasado .dia-badge { background: #f1f5f9; color: #94a3b8; }

/* Hoy */
.dia-btn.hoy { background: #f0fdf4; border-color: #00A651; }
.dia-btn.hoy .dia-label { color: #006B3B; }
.dia-btn.hoy .dia-badge { background: #00A651; color: #fff; }

/* Futuro */
.dia-btn.futuro { background: #eff6ff; }
.dia-btn.futuro .dia-badge { background: #93c5fd; color: #1e40af; }

/* Seleccionado */
.dia-btn.seleccionado {
  background: #0066CC;
  border-color: #0066CC;
  opacity: 1;
}
.dia-btn.seleccionado .dia-label,
.dia-btn.seleccionado .dia-fecha { color: #fff; }
.dia-btn.seleccionado .dia-badge { background: #00A651; color: #fff; }

/* Badges Real / Estimado */
.dia-badge.badge-real     { background: #dcfce7; color: #16a34a; }
.dia-badge.badge-estimado { background: #e5e7eb; color: #6b7280; }
.dia-badge.badge-pasado   { background: #f1f5f9; color: #94a3b8; }
/* Verde = precio real. Mañana real también en verde (no en el azul de los estimados) */
.dia-btn.futuro .dia-badge.badge-real { background: #dcfce7; color: #15803d; }
/* Día seleccionado: real en verde intenso; estimado en verde claro para distinguirlos */
.dia-btn.seleccionado .dia-badge.badge-real     { background: #00A651; color: #fff; }
.dia-btn.seleccionado .dia-badge.badge-estimado { background: #bbf7d0; color: #166534; }

/* ── Inputs táctiles ── */
input[type="number"],
input[type="time"],
select {
  min-height: 44px;
  font-size: 1rem;
}

/* ── Botones táctiles ── */
button, .btn {
  min-height: 44px;
}

/* ── Links del menú móvil más altos ── */
#mobileMenu a {
  min-height: 48px;
  display: flex;
  align-items: center;
}

/* Botones de día compactos en escritorio */
@media (min-width: 1024px) {
  .dia-btn {
    padding: 5px 8px;
    min-width: unset;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    border-radius: 8px;
    gap: 6px;
  }
  .dia-btn .dia-fecha  { font-size: 0.8rem; }
  .dia-btn .dia-label  { font-size: 0.7rem; width: 28px; }
  .dia-btn .dia-badge  { font-size: 0.6rem; padding: 1px 4px; }
}

/* Chart.js responsive dentro del contenedor */
#chartWrap canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Safe-area: evita que la barra de estado (hora/camara) tape la cabecera.
   En navegador web estos valores valen 0, asi que no afecta. Requiere
   viewport-fit=cover en el meta viewport (ya presente en layout.php). */
body {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Domingos y festivos nacionales: puntito rojo a la izquierda del dia (app.js marcaDia).
   Flota con position:absolute para no mover el texto ni la fecha. */
.marca-festivo {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 1px #fff;
}
.con-marca, .dia-btn .dia-label { position: relative; }
.marca-festivo.marca-sabado { background: #00A651; } /* sábado: verde CuandoCargo */

/* Indicador de carga de toda la web: una batería que se va llenando (sustituye al disco que giraba) */
.cc-bateria{position:relative;width:58px;height:30px;border:4px solid #334155;border-radius:9px;box-sizing:border-box}
.cc-bateria:after{content:"";position:absolute;right:-10px;top:7px;width:5px;height:9px;background:#334155;border-radius:0 3px 3px 0}
.cc-bateria i{position:absolute;left:3px;top:3px;bottom:3px;width:0;border-radius:3px;background:#ef4444;
  animation:ccLlenar 1.8s linear forwards,ccParpadeo .9s ease-in-out 1.8s infinite}
/* Se llena una vez en 1,8 s (rojo, amarillo y verde corporativo desde el 25 %); si aún no ha cargado, parpadea al 100 % */
@keyframes ccLlenar{0%{width:0;background:#ef4444}12%{background:#ef4444}12.5%{background:#facc15}24.5%{background:#facc15}25%{background:#00A651}100%{width:calc(100% - 6px);background:#00A651}}
@keyframes ccParpadeo{50%{opacity:.3}}
html.oscuro .cc-bateria{border-color:#CBD5E1} html.oscuro .cc-bateria:after{background:#CBD5E1}
@media (prefers-reduced-motion:reduce){.cc-bateria i{animation:none;width:60%;background:#00A651}}
/* Sobre mapas o fotos: la batería en una pastilla para que se vea */
.cc-cargando-caja{padding:14px 22px 14px 16px;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.16)}
html.oscuro .cc-cargando-caja{background:#141D2C}

/* Botón de lectura de la cabecera (partials/menu_leer.php): icono, punto rojo de novedad y menú */
.cc-leer{position:relative;display:inline-flex}
.cc-leer-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:0;background:transparent;color:#0066CC;cursor:pointer}
.cc-leer-btn:hover,.cc-leer-btn[aria-expanded="true"]{background:#EFF6FF}
.cc-leer-punto{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;background:#EF4444;box-shadow:0 0 0 2px #fff}
.cc-leer-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:9990;width:min(290px,calc(100vw - 32px));padding:6px;border-radius:16px;box-shadow:0 14px 34px rgba(15,23,42,.16)}
.cc-leer-menu a{display:flex;text-decoration:none;border-radius:11px}
.cc-leer-ult{flex-direction:column;gap:2px;padding:10px 12px;margin-bottom:4px;background:#F0FDF4}
.cc-leer-etq{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#006B3B}
.cc-leer-etq.nuevo{color:#DC2626}
.cc-leer-tit{font-size:14px;font-weight:700;line-height:1.3}
.cc-leer-op{align-items:center;gap:10px;min-height:44px;padding:0 12px;font-size:15px;font-weight:700}
.cc-leer-op:hover{background:#F1F5F9}
.cc-leer-op svg{color:#0066CC;flex-shrink:0}