/* ParaYA! - estilos compartidos (livianos, sin librerías extra) */

/* =========================================================
   [v26] Paleta de marca ParaYA! (rebranding, ver BRD).
   Psicología del color aplicada a propósito:
   - Rosa (#ED147C) como color principal de acción: el rosa/rojo intenso
     estimula apetito y sensación de urgencia -- se usa en CTAs como
     "Pedir", "Aceptar", "Confirmar", donde interesa que el cliente sienta
     ganas de actuar YA.
   - Coral (#FF7B72) como acento cálido secundario: refuerza esa misma
     sensación de hambre/urgencia sin saturar de rosa toda la pantalla.
   - Carbón oscuro (#1C1C1C) en la barra de navegación y como color
     "success": transmite seguridad, solidez y profesionalismo -- contraste
     serio frente al rosa/coral, que son los colores "calientes".
   - Celeste claro (#D4E2F0) y rosa suave (#F99FF9) como acentos de fondo,
     para que la paleta cálida no resulte agobiante en pantallas con mucho
     texto (ej. historiales, tablas).
   ========================================================= */
/* [v31] Acento rosa reutilizable para "YA!" en el nombre de la marca,
   antes solo vivía dentro de registro.php -- ahora está disponible en
   cualquier pantalla (ej. el modal de bienvenida de index.php). */
.ya-rosa { color: #ED147C; }

:root {
  --rayo-amarillo: #ED147C;
  --rayo-amarillo-oscuro: #C10F63;
  --rayo-indigo: #1C1C1C;
  --rayo-indigo-oscuro: #000000;
  --rayo-fondo: #FFF7FA;
  --rayo-texto-suave: #4A4A4A;
  --rayo-borde: #FADCE9;
  --rayo-coral: #FF7B72;
  --rayo-cielo: #D4E2F0;
  --rayo-rosa-claro: #F99FF9;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: var(--rayo-fondo);
}

.navbar {
  background: linear-gradient(135deg, var(--rayo-indigo), var(--rayo-indigo-oscuro)) !important;
}

.btn-primary {
  background-color: var(--rayo-amarillo);
  border-color: var(--rayo-amarillo);
  color: #fff;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--rayo-amarillo-oscuro);
  border-color: var(--rayo-amarillo-oscuro);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(237,20,124,0.35);
}
.btn-primary:active { transform: translateY(0); }

.btn-success {
  background-color: var(--rayo-indigo);
  border-color: var(--rayo-indigo);
}
.btn-success:hover { background-color: var(--rayo-indigo-oscuro); border-color: var(--rayo-indigo-oscuro); }

.card {
  border: 1px solid var(--rayo-borde);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.badge {
  font-weight: 500;
  padding: 0.4em 0.75em;
  border-radius: 20px;
}

.kpi {
  border: 1px solid var(--rayo-borde);
  border-radius: 14px;
  transition: box-shadow .15s ease;
}
.kpi:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }

.list-group-item {
  border-color: var(--rayo-borde);
}
.list-group-item-action:hover {
  background-color: var(--rayo-fondo);
}

.text-muted { color: var(--rayo-texto-suave) !important; }

a { color: var(--rayo-indigo); }
a:hover { color: var(--rayo-indigo-oscuro); }

/* --- Animaciones ligeras (solo CSS, sin librerías) --- */
@keyframes rayo-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.card, .list-group-item {
  animation: rayo-fade-in .25s ease-out;
}

@keyframes rayo-brillo {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(237,20,124,0)); }
  50% { filter: drop-shadow(0 0 6px rgba(237,20,124,0.7)); }
}
.navbar-brand {
  animation: rayo-brillo 3s ease-in-out infinite;
}

/* Barra de progreso del registro por pasos */
.rayo-progreso {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 4px;
}
.rayo-progreso .paso {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: var(--rayo-borde);
  transition: background .3s ease;
}
.rayo-progreso .paso.activo,
.rayo-progreso .paso.completado {
  background: var(--rayo-amarillo);
}

.rayo-paso-form {
  animation: rayo-fade-in .3s ease-out;
}

/* --- Íconos Lucide (v22): tamaño y alineación consistentes en todo el sistema --- */
[data-lucide] { width: 16px; height: 16px; vertical-align: -3px; stroke-width: 2px; }
.icono-nav [data-lucide], [data-lucide].icono-nav { width: 20px; height: 20px; vertical-align: -5px; }
.icono-tab [data-lucide] { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.icono-info { cursor: help; color: var(--rayo-texto-suave); }
.btn-icono { border: none; background: none; padding: 0 .3rem; line-height: 1; color: #495057; }
.btn-icono:hover { color: #000; }
.btn-icono.text-danger:hover { color: #b02a37 !important; }

/* Estrella de calificación (reemplaza los emoji ⭐/★/☆ en todo el sistema) */
.estrella-llena [data-lucide] { color: var(--rayo-amarillo-oscuro); fill: var(--rayo-amarillo); }
.estrella-vacia [data-lucide] { color: #ced4da; }

/* Punto de estado abierto/cerrado (reemplaza el emoji 🔴) */
.punto-estado { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: 1px; }
.punto-estado.cerrado { background: #dc3545; }
.punto-estado.abierto { background: #28a745; }

/* Selector de estrellas para calificar (radio buttons ★ -> ícono Lucide).
   Mismo truco de siempre (color en el <label>, hermanos con ~), pero
   agregando fill:currentColor para que el ícono se pinte sólido igual
   que se pintaba el carácter de texto. No cambia el comportamiento. */
.rayo-estrellas [data-lucide] { width: 32px; height: 32px; fill: currentColor; stroke: none; }

/* [v23] Botones "Calle / Satélite" sobre el mapa de selección de
   dirección (mismo patrón visual en checkout y en Mis direcciones). */
.rayo-toggle-vista-mapa { position: relative; }
.rayo-toggle-vista-mapa .btn.active { background: var(--rayo-amarillo); border-color: var(--rayo-amarillo); color: #fff; }
.rayo-tarjeta-direccion { border: 1px solid #e9e9e9; border-radius: 10px; padding: .9rem 1rem; transition: box-shadow .12s; }
.rayo-tarjeta-direccion.predeterminada { border-color: var(--rayo-amarillo); background: var(--rayo-fondo); }

/* [v24] Banner de invitación a activar notificaciones push */
.rayo-banner-push {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: var(--rayo-amarillo-oscuro); color: #fff; padding: .6rem 1rem;
  font-size: .9rem; position: sticky; top: 0; z-index: 1050;
}
.rayo-banner-push [data-lucide] { vertical-align: -3px; }
.rayo-banner-push .btn-icono { color: #fff; }