/* ============================================================
   MILLARES - Sistema de seguimiento de pedidos
   Archivo: style.css
   Descripción: Estilos globales, diseño oscuro premium con
   detalles en rojo y blanco, animaciones y responsive.
   Editar las variables en :root para cambiar colores globales.
   ============================================================ */

/* ─── RESET Y BASE ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ── Paleta de colores ─────────────────────────────────── */
  --color-bg:          #0a0a0a;
  --color-surface:     #111111;
  --color-surface-2:   #181818;
  --color-surface-3:   #202020;
  --color-border:      #2a2a2a;
  --color-border-glow: #3a3a3a;

  --color-red:         #e02020;
  --color-red-bright:  #ff3030;
  --color-red-glow:    rgba(224, 32, 32, 0.35);
  --color-red-dim:     rgba(224, 32, 32, 0.12);

  --color-white:       #ffffff;
  --color-white-dim:   rgba(255,255,255,0.85);
  --color-white-mute:  rgba(255,255,255,0.45);
  --color-white-faint: rgba(255,255,255,0.10);

  /* ── Tipografía ────────────────────────────────────────── */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Espaciado (sistema 8px) ───────────────────────────── */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;

  /* ── Radios de borde ───────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* ── Transiciones ──────────────────────────────────────── */
  --transition-fast:   0.18s ease;
  --transition-normal: 0.32s ease;
  --transition-slow:   0.55s ease;

  /* ── Footer fijo ───────────────────────────────────────── */
  --footer-height: 60px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-white-dim);
  min-height: 100vh;
  padding-bottom: var(--footer-height);
  -webkit-font-smoothing: antialiased;
}

/* ─── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-red); border-radius: 3px; }

/* ─── LOGO ANIMADO ──────────────────────────────────────────── */
#logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--sp-6) var(--sp-2) var(--sp-4);
  will-change: transform;
}

#logo-text {
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(3rem, 14vw, 6.5rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Animación: aparece grande, se reduce hasta tamaño normal */
  animation: logoEntrance 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  filter: drop-shadow(0 0 16px rgba(255,255,255,0.12));
  cursor: default;
  user-select: none;
  line-height: 1;
}

/* "MILLAR" blanco */
#logo-millar { color: var(--color-white); }

/* "ES" rojo con brillo */
#logo-es {
  color: var(--color-red-bright);
  text-shadow:
    0 0 18px var(--color-red-glow),
    0 0 40px var(--color-red-glow);
}

/* Keyframe: aparece a escala 2.8 y se reduce a 1 */
@keyframes logoEntrance {
  0%   { transform: scale(2.8); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ─── FECHA Y HORA ──────────────────────────────────────────── */
#datetime-container {
  text-align: center;
  padding: 0 0 var(--sp-4);
  animation: fadeInUp 0.5s 1.3s both ease;
}

#clock-date {
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--color-white-mute);
  margin-bottom: 4px;
}

#clock-time {
  display: block;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-white);
  text-shadow: 0 0 12px rgba(255,255,255,0.18);
}

/* ─── PANTALLAS (secciones JS) ──────────────────────────────── */
/* Todas parten ocultas; JS agrega .active para mostrar */
.screen {
  display: none;
}

.screen.active {
  display: block;
  animation: fadeInUp 0.4s ease both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── CONTENEDORES ──────────────────────────────────────────── */
.container {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 var(--sp-2);
}

.container--wide {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--sp-2);
}

/* ─── CARD ──────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  transition: border-color var(--transition-normal);
}

.card:hover {
  border-color: var(--color-border-glow);
}

/* Título de card */
.card-title {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-white-mute);
  margin-bottom: var(--sp-2);
}

/* ─── INPUTS ────────────────────────────────────────────────── */
.form-group {
  margin-bottom: var(--sp-2);
}

.form-group label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white-mute);
  margin-bottom: 6px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 13px var(--sp-2);
  color: var(--color-white);
  font-size: 1rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type="text"]:focus,
input[type="password"]:focus {
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px var(--color-red-dim);
}

input::placeholder {
  color: var(--color-white-mute);
  opacity: 0.55;
}

/* ─── BOTÓN PRIMARIO ────────────────────────────────────────── */
.btn-primary {
  width: 100%;
  background: var(--color-red);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px var(--sp-3);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  transition:
    background var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.btn-primary:hover {
  background: var(--color-red-bright);
  box-shadow: 0 0 24px var(--color-red-glow);
  transform: translateY(-2px);
}

.btn-primary:active { transform: translateY(0); }

/* ─── BOTÓN RETIRO (animado) ────────────────────────────────── */
.btn-retiro {
  width: 100%;
  background: linear-gradient(135deg, var(--color-red), #a00);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  padding: 18px var(--sp-3);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  position: relative;
  overflow: hidden;
  animation: btnPulse 2.4s ease-in-out infinite;
  transition: transform var(--transition-fast);
}

/* Brillo que cruza el botón */
.btn-retiro::before {
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-18deg);
  animation: btnShine 2.8s ease-in-out infinite;
}

.btn-retiro:hover { transform: translateY(-3px); }

@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 18px var(--color-red-glow); }
  50%       { box-shadow: 0 0 38px rgba(224,32,32,0.55); }
}

@keyframes btnShine {
  0%   { left: -70%; }
  100% { left: 130%; }
}

/* ─── BOTÓN WHATSAPP ────────────────────────────────────────── */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #25d366;
  border: 1px solid rgba(37,211,102,0.4);
  border-radius: var(--radius-sm);
  padding: 11px var(--sp-2);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  width: 100%;
  transition:
    background var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.btn-whatsapp:hover {
  background: rgba(37,211,102,0.08);
  box-shadow: 0 0 18px rgba(37,211,102,0.2);
  transform: translateY(-1px);
}

/* ─── MENSAJES ERROR / ÉXITO ────────────────────────────────── */
.msg-error {
  background: rgba(224,32,32,0.1);
  border: 1px solid var(--color-red);
  border-radius: var(--radius-sm);
  padding: 10px var(--sp-2);
  color: var(--color-red-bright);
  font-size: 0.84rem;
  text-align: center;
  margin-top: var(--sp-1);
  animation: fadeInUp 0.22s ease;
}

.msg-success {
  background: rgba(37,211,102,0.08);
  border: 1px solid rgba(37,211,102,0.4);
  border-radius: var(--radius-sm);
  padding: 10px var(--sp-2);
  color: #4ade80;
  font-size: 0.84rem;
  text-align: center;
  margin-top: var(--sp-1);
  animation: fadeInUp 0.22s ease;
}

/* ─── PANEL CLIENTE ─────────────────────────────────────────── */
.client-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.data-item {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-2);
}

.data-item__label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white-mute);
  margin-bottom: 4px;
}

.data-item__value {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-white);
}

.saldo-ok      { color: #4ade80; }
.saldo-pending { color: var(--color-red-bright); }

/* ─── BARRA DE PROGRESO ─────────────────────────────────────── */
.progress-section { margin-bottom: var(--sp-3); }

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.progress-title {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white-mute);
}

.progress-pct {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-white);
}

/* Pista */
.progress-track {
  width: 100%;
  height: 13px;
  background: var(--color-surface-3);
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

/* Relleno */
.progress-fill {
  height: 100%;
  border-radius: 7px;
  background: linear-gradient(90deg, #a00, var(--color-red-bright));
  /* La transición animará el ancho cuando JS cambie el valor */
  transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  min-width: 4px;
}

/* Luz que recorre la barra */
.progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
  animation: progressShine 2.8s ease-in-out infinite;
}

@keyframes progressShine {
  0%   { left: -80%; }
  100% { left: 150%; }
}

.progress-note {
  font-size: 0.7rem;
  color: var(--color-white-mute);
  margin-top: 10px;
  line-height: 1.6;
  font-style: italic;
}

/* Badge "listo para retirar" */
.ready-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.3);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: 0.95rem;
  font-weight: 600;
  color: #4ade80;
  animation: fadeInUp 0.4s ease;
}

.ready-badge__icon { font-size: 1.6rem; }

/* ─── MULTIMEDIA ────────────────────────────────────────────── */
.media-section {
  margin-bottom: var(--sp-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  transition: border-color var(--transition-normal);
}

.media-section:hover { border-color: var(--color-border-glow); }

.media-section img,
.media-section video {
  width: 100%;
  display: block;
  max-height: 400px;
  object-fit: cover;
}

.media-placeholder {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white-mute);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ─── BOTÓN VOLVER ──────────────────────────────────────────── */
.back-btn {
  background: transparent;
  border: none;
  color: var(--color-white-mute);
  font-size: 0.82rem;
  font-family: var(--font-body);
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition-fast);
}

.back-btn:hover { color: var(--color-white); }

/* ─── DIVISOR DECORATIVO ────────────────────────────────────── */
.divider {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-red), transparent);
  margin: var(--sp-2) auto;
}

/* ─── FOOTER FIJO ───────────────────────────────────────────── */
#footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--footer-height);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  /* Línea luminosa roja arriba */
  box-shadow: 0 -1px 0 var(--color-red), 0 -6px 24px rgba(224,32,32,0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-3);
  z-index: 1000;
}

.footer-brand {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-white-dim);
}

.footer-brand span { color: var(--color-red-bright); }

.footer-info {
  font-size: 0.7rem;
  color: var(--color-white-mute);
  text-align: right;
  line-height: 1.6;
}

.footer-info a {
  color: var(--color-red-bright);
  text-decoration: none;
}

.footer-info a:hover { text-decoration: underline; }

/* ─── PÁGINA RETIRO ─────────────────────────────────────────── */
.retiro-header {
  text-align: center;
  padding: var(--sp-5) var(--sp-2) var(--sp-4);
  animation: fadeInUp 0.5s ease;
}

.retiro-header h1 {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--color-white);
  margin-bottom: 6px;
}

.retiro-header h1 span { color: var(--color-red-bright); }

.retiro-header p {
  color: var(--color-white-mute);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
}

/* Google Maps iframe */
.map-wrapper {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-bottom: var(--sp-3);
  background: var(--color-surface-2);
}

.map-wrapper iframe {
  width: 100%;
  height: 300px;
  display: block;
  border: none;
  filter: grayscale(0.25) brightness(0.9);
}

/* Filas de información */
.info-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.info-row__icon {
  font-size: 1.1rem;
  min-width: 22px;
  margin-top: 2px;
}

.info-row__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-white-dim);
}

.info-row__text strong {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white-mute);
  margin-bottom: 2px;
  font-weight: 600;
}

/* Bloque de pago pendiente */
.payment-block {
  background: var(--color-surface-2);
  border: 1px solid var(--color-red);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.payment-block h3 {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-red-bright);
  margin-bottom: var(--sp-2);
}

.payment-amount {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--color-white);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.02em;
}

.payment-details {
  font-size: 0.86rem;
  line-height: 2;
  color: var(--color-white-dim);
}

.payment-details span {
  color: var(--color-white-mute);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 6px;
}

.payment-note {
  font-size: 0.78rem;
  color: var(--color-white-mute);
  margin-top: var(--sp-2);
  font-style: italic;
  line-height: 1.6;
  border-top: 1px solid var(--color-border);
  padding-top: var(--sp-1);
}

/* Contacto */
.contact-section {
  text-align: center;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--color-border);
  margin-top: var(--sp-2);
}

.contact-section p {
  font-size: 0.86rem;
  color: var(--color-white-mute);
  margin-bottom: var(--sp-2);
  line-height: 1.65;
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --footer-height: 50px; }

  #logo-text { font-size: clamp(2.4rem, 18vw, 3.5rem); }

  #clock-time { font-size: 1.7rem; }

  .card { padding: var(--sp-3) var(--sp-2); }

  /* Ocultar info del footer en móviles pequeños */
  .footer-info { display: none; }

  .btn-retiro { font-size: 0.85rem; padding: 15px var(--sp-2); }

  .payment-amount { font-size: 1.7rem; }
}

@media (max-width: 360px) {
  .client-data-grid { grid-template-columns: 1fr; }
}