/* ════════════════════════════════════════════════════════
   css/base.css — Presumela.com
   Fuente única de verdad para todos los estilos globales.
   Para cambiar colores, tipografía o efectos de TODA la app
   solo modifica las variables en :root — nada más.
   ════════════════════════════════════════════════════════ */

/* ── Fuente principal */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* ════════════════════════════════════════
   VARIABLES GLOBALES
   ════════════════════════════════════════ */
:root {

  /* ── Colores principales (del logo) */
  --morado:          #7C3AED;
  --morado-dk:       #5B21B6;
  --morado-light:    #F3EEFF;
  --morado-border:   rgba(124, 58, 237, 0.2);
  --morado-glow:     rgba(124, 58, 237, 0.15);

  --naranja:         #F97316;
  --naranja-dk:      #EA580C;
  --naranja-light:   #FFF3E0;
  --naranja-border:  rgba(249, 115, 22, 0.2);

  /* ── Gradiente de marca */
  --gradiente:       linear-gradient(90deg, var(--morado), var(--naranja));
  --gradiente-135:   linear-gradient(135deg, var(--morado), var(--naranja));

  /* ── Fondos y superficies */
  --fondo-app:       #F7F7F5;
  --fondo-card:      #FFFFFF;
  --fondo-input:     #FAFAFA;
  --fondo-hover:     #F3F3F3;

  /* ── Textos */
  --texto-principal: #1A1A1A;
  --texto-secundario:#666666;
  --texto-muted:     #AAAAAA;
  --texto-hint:      #BBBBBB;

  /* ── Bordes y divisores */
  --borde-suave:     #E8E8E8;
  --borde-input:     #E0E0E0;
  --borde-divisor:   #EBEBEB;
  --borde-focus:     var(--morado);

  /* ── Estados del sistema */
  --exito:           #10B981;
  --exito-light:     #F0FDF4;
  --exito-borde:     #BBF7D0;
  --exito-texto:     #16A34A;

  --error:           #EF4444;
  --error-light:     #FEF2F2;
  --error-borde:     #FECACA;
  --error-texto:     #DC2626;

  --aviso:           #F59E0B;
  --aviso-light:     #FFFBEB;
  --aviso-borde:     #FDE68A;
  --aviso-texto:     #92400E;

  --info:            #3B82F6;
  --info-light:      #EFF6FF;
  --info-borde:      #BFDBFE;
  --info-texto:      #1D4ED8;

  /* ── Rangos de mascota */
  --rango-novato:    #9CA3AF;
  --rango-conocido:  #C0C0C0;
  --rango-popular:   #F59E0B;
  --rango-estrella:  #7C3AED;
  --rango-leyenda:   #06B6D4;

  /* ── Susurros */
  --susurro-trofeo:  #F97316;   /* 🏆 Se presume solo */
  --susurro-pata:    #7C3AED;   /* 🐾 Lo amo          */
  --susurro-brillo:  #F59E0B;   /* ✨ Está increíble  */

  /* ── Moneda FAMAS */
  --famas-color:     #F97316;
  --famas-nombre:    "FAMAS";   /* Cambia aquí si decides renombrar */

  /* ── Tipografía */
  --fuente:          'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fuente-size:     15px;
  --fuente-size-sm:  13px;
  --fuente-size-xs:  11px;
  --fuente-size-lg:  18px;
  --fuente-size-xl:  22px;

  /* ── Radio de bordes */
  --radio-sm:        6px;
  --radio-md:        10px;
  --radio-lg:        14px;
  --radio-xl:        20px;
  --radio-pill:      999px;

  /* ── Sombras */
  --sombra-card:     0 4px 24px rgba(0, 0, 0, 0.06);
  --sombra-modal:    0 20px 60px rgba(0, 0, 0, 0.15);
  --sombra-btn:      0 4px 16px rgba(124, 58, 237, 0.3);
  --sombra-focus:    0 0 0 3px var(--morado-glow);

  /* ── Transiciones */
  --transicion:      all 0.18s ease;
  --transicion-lenta:all 0.3s ease;

  /* ── Espaciado base */
  --espacio-xs:      4px;
  --espacio-sm:      8px;
  --espacio-md:      16px;
  --espacio-lg:      24px;
  --espacio-xl:      32px;

  /* ── Z-index layers */
  --z-base:          1;
  --z-dropdown:      10;
  --z-sticky:        50;
  --z-modal:         100;
  --z-toast:         200;
}

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

html {
  font-size: var(--fuente-size);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--fuente);
  font-size: var(--fuente-size);
  color: var(--texto-principal);
  background: var(--fondo-app);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ════════════════════════════════════════
   TIPOGRAFÍA
   ════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente);
  font-weight: 800;
  color: var(--texto-principal);
  line-height: 1.3;
}

h1 { font-size: 26px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

p { color: var(--texto-secundario); line-height: 1.7; }

a {
  color: var(--morado);
  text-decoration: none;
  transition: var(--transicion);
}
a:hover { color: var(--morado-dk); }

/* ════════════════════════════════════════
   CARDS
   ════════════════════════════════════════ */
.card {
  background: var(--fondo-card);
  border-radius: var(--radio-lg);
  border: 1px solid var(--borde-suave);
  box-shadow: var(--sombra-card);
  padding: var(--espacio-lg);
}

.card-accent {
  height: 3px;
  background: var(--gradiente);
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
  margin: calc(-1 * var(--espacio-lg)) calc(-1 * var(--espacio-lg)) var(--espacio-lg);
}

/* ════════════════════════════════════════
   BOTONES
   ════════════════════════════════════════ */

/* Botón principal — morado */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-sm);
  width: 100%;
  padding: 13px var(--espacio-lg);
  background: var(--morado);
  color: #fff;
  border: none;
  border-radius: var(--radio-md);
  font-family: var(--fuente);
  font-size: var(--fuente-size);
  font-weight: 800;
  cursor: pointer;
  transition: var(--transicion);
  text-decoration: none;
}
.btn-primary:hover   { background: var(--morado-dk); color: #fff; }
.btn-primary:active  { transform: scale(0.99); }
.btn-primary:disabled{ opacity: 0.6; cursor: not-allowed; transform: none; }

/* Botón secundario — outline morado */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-sm);
  padding: 11px var(--espacio-lg);
  background: transparent;
  color: var(--morado);
  border: 1.5px solid var(--morado);
  border-radius: var(--radio-md);
  font-family: var(--fuente);
  font-size: var(--fuente-size);
  font-weight: 800;
  cursor: pointer;
  transition: var(--transicion);
  text-decoration: none;
}
.btn-secondary:hover  { background: var(--morado-light); color: var(--morado-dk); }
.btn-secondary:active { transform: scale(0.99); }

/* Botón naranja */
.btn-naranja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-sm);
  padding: 13px var(--espacio-lg);
  background: var(--naranja);
  color: #fff;
  border: none;
  border-radius: var(--radio-md);
  font-family: var(--fuente);
  font-size: var(--fuente-size);
  font-weight: 800;
  cursor: pointer;
  transition: var(--transicion);
  text-decoration: none;
}
.btn-naranja:hover  { background: var(--naranja-dk); color: #fff; }
.btn-naranja:active { transform: scale(0.99); }

/* Botón gradiente — para CTAs principales */
.btn-gradiente {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-sm);
  width: 100%;
  padding: 13px var(--espacio-lg);
  background: var(--gradiente);
  color: #fff;
  border: none;
  border-radius: var(--radio-md);
  font-family: var(--fuente);
  font-size: var(--fuente-size);
  font-weight: 800;
  cursor: pointer;
  transition: var(--transicion);
  text-decoration: none;
}
.btn-gradiente:hover  { opacity: 0.92; color: #fff; }
.btn-gradiente:active { transform: scale(0.99); }

/* Botón pequeño */
.btn-sm {
  padding: 7px 14px;
  font-size: var(--fuente-size-sm);
  border-radius: var(--radio-sm);
}

/* Botón icono circular */
.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--borde-suave);
  background: var(--fondo-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transicion);
  font-size: 18px;
}
.btn-icon:hover { background: var(--fondo-hover); border-color: var(--borde-input); }

/* ════════════════════════════════════════
   FORMULARIOS
   ════════════════════════════════════════ */
.campo { margin-bottom: 1.1rem; }

.campo label,
.campo-grupo label {
  display: block;
  font-size: var(--fuente-size-sm);
  font-weight: 700;
  color: #444;
  margin-bottom: 6px;
}

.campo input,
.campo textarea,
.campo-grupo select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--borde-input);
  border-radius: var(--radio-md);
  font-size: var(--fuente-size);
  font-family: var(--fuente);
  color: var(--texto-principal);
  background: var(--fondo-input);
  outline: none;
  transition: var(--transicion);
}

.campo input:focus,
.campo textarea:focus,
.campo-grupo select:focus {
  border-color: var(--borde-focus);
  background: var(--fondo-card);
  box-shadow: var(--sombra-focus);
}

.campo input:hover,
.campo textarea:hover,
.campo-grupo select:hover {
  border-color: #CFCFCF;
}

.campo input.valido,
.campo-grupo select.valido { border-color: var(--exito); }

.campo input.error,
.campo-grupo select.error  { border-color: var(--error); }

.campo .hint {
  font-size: var(--fuente-size-xs);
  color: var(--texto-muted);
  margin-top: 5px;
}

/* Selects custom */
.campo-grupo { margin-bottom: 1.1rem; }

.campo-grupo select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='%23999' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}

.campo-grupo select:disabled {
  background-color: var(--fondo-hover);
  color: var(--texto-muted);
  cursor: not-allowed;
}

/* Textarea */
.campo textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

/* ════════════════════════════════════════
   ALERTAS / NOTIFICACIONES INLINE
   ════════════════════════════════════════ */
.alerta {
  border-radius: var(--radio-md);
  font-size: var(--fuente-size-sm);
  line-height: 1.5;
  margin-bottom: 1.1rem;
  display: none;
  padding: 11px 14px;
  font-weight: 600;
}
.alerta.error  {
  background: var(--error-light);
  border: 1px solid var(--error-borde);
  color: var(--error-texto);
  display: block;
}
.alerta.exito  {
  background: var(--exito-light);
  border: 1px solid var(--exito-borde);
  color: var(--exito-texto);
  display: block;
}
.alerta.aviso  {
  background: var(--aviso-light);
  border: 1px solid var(--aviso-borde);
  color: var(--aviso-texto);
  display: block;
}
.alerta.info   {
  background: var(--info-light);
  border: 1px solid var(--info-borde);
  color: var(--info-texto);
  display: block;
}
.alerta ul { padding-left: 1.25rem; margin-top: 4px; }
.alerta li { margin-bottom: 2px; }

/* ════════════════════════════════════════
   TOAST (notificación flotante)
   ════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--texto-principal);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radio-pill);
  font-size: var(--fuente-size-sm);
  font-weight: 700;
  z-index: var(--z-toast);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  white-space: nowrap;
  max-width: 90vw;
}
.toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.toast.exito  { background: var(--exito); }
.toast.error  { background: var(--error); }
.toast.aviso  { background: var(--aviso); }

/* ════════════════════════════════════════
   BADGES / ETIQUETAS
   ════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radio-pill);
  font-size: var(--fuente-size-xs);
  font-weight: 800;
}
.badge-morado  { background: var(--morado-light);  color: var(--morado-dk);  border: 1px solid var(--morado-border); }
.badge-naranja { background: var(--naranja-light); color: var(--naranja-dk); border: 1px solid var(--naranja-border); }
.badge-exito   { background: var(--exito-light);   color: var(--exito-texto); border: 1px solid var(--exito-borde); }
.badge-error   { background: var(--error-light);   color: var(--error-texto); border: 1px solid var(--error-borde); }
.badge-aviso   { background: var(--aviso-light);   color: var(--aviso-texto); border: 1px solid var(--aviso-borde); }

/* ════════════════════════════════════════
   RANGOS DE MASCOTA
   ════════════════════════════════════════ */
.rango-novato   { color: var(--rango-novato);   }
.rango-conocido { color: var(--rango-conocido); }
.rango-popular  { color: var(--rango-popular);  }
.rango-estrella { color: var(--rango-estrella); }
.rango-leyenda  { color: var(--rango-leyenda);  }

.badge-rango {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radio-pill);
  font-size: var(--fuente-size-xs);
  font-weight: 800;
}
.badge-rango.novato   { background: #F3F4F6; color: var(--rango-novato);   border: 1px solid #D1D5DB; }
.badge-rango.conocido { background: #F8F8F8; color: #888;                  border: 1px solid var(--rango-conocido); }
.badge-rango.popular  { background: var(--aviso-light); color: #92400E;    border: 1px solid var(--rango-popular); }
.badge-rango.estrella { background: var(--morado-light); color: var(--morado-dk); border: 1px solid var(--morado-border); }
.badge-rango.leyenda  { background: #ECFEFF; color: #0E7490;               border: 1px solid var(--rango-leyenda); }

/* ════════════════════════════════════════
   SUSURROS
   ════════════════════════════════════════ */
.susurro-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radio-pill);
  border: 1.5px solid var(--borde-suave);
  background: var(--fondo-card);
  font-family: var(--fuente);
  font-size: var(--fuente-size-sm);
  font-weight: 700;
  color: var(--texto-secundario);
  cursor: pointer;
  transition: var(--transicion);
  user-select: none;
}
.susurro-btn:hover { border-color: var(--morado); color: var(--morado); }

.susurro-btn.trofeo.activo  { background: var(--naranja-light);  border-color: var(--susurro-trofeo); color: var(--naranja-dk); }
.susurro-btn.pata.activo    { background: var(--morado-light);   border-color: var(--susurro-pata);   color: var(--morado-dk); }
.susurro-btn.brillo.activo  { background: var(--aviso-light);    border-color: var(--susurro-brillo); color: var(--aviso-texto); }

/* ════════════════════════════════════════
   SPINNER DE CARGA
   ════════════════════════════════════════ */
.spinner {
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.6s linear infinite;
  display: none;
  flex-shrink: 0;
}
.spinner-morado {
  border-color: var(--morado-glow);
  border-top-color: var(--morado);
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════
   BARRA DE PROGRESO (FAMAS / rangos)
   ════════════════════════════════════════ */
.progress-bar {
  height: 6px;
  background: var(--borde-suave);
  border-radius: var(--radio-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--gradiente);
  border-radius: var(--radio-pill);
  transition: width 0.5s ease;
}

/* ════════════════════════════════════════
   AVATAR DE MASCOTA
   ════════════════════════════════════════ */
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--borde-suave);
  background: var(--fondo-hover);
}
.avatar-lg { width: 80px;  height: 80px;  border-width: 3px; }
.avatar-xl { width: 110px; height: 110px; border-width: 4px; }
.avatar-sm { width: 36px;  height: 36px;  border-width: 2px; }

/* ════════════════════════════════════════
   FAMAS (moneda)
   ════════════════════════════════════════ */
.famas-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--naranja-light);
  border: 1px solid var(--naranja-border);
  border-radius: var(--radio-pill);
  padding: 3px 10px;
  font-size: var(--fuente-size-sm);
  font-weight: 800;
  color: var(--naranja-dk);
}

/* ════════════════════════════════════════
   MODAL
   ════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.modal-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.modal {
  background: var(--fondo-card);
  border-radius: var(--radio-xl);
  padding: 2.25rem 2rem;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--sombra-modal);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s ease;
}
.modal-overlay.visible .modal {
  transform: translateY(0) scale(1);
}

/* ════════════════════════════════════════
   NAVEGACIÓN BOTTOM (móvil)
   ════════════════════════════════════════ */
.nav-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--fondo-card);
  border-top: 1px solid var(--borde-suave);
  display: flex;
  z-index: var(--z-sticky);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 4px 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--texto-muted);
  cursor: pointer;
  transition: var(--transicion);
  text-decoration: none;
  gap: 3px;
}
.nav-item.activo { color: var(--morado); }
.nav-item:hover  { color: var(--morado); }
.nav-item-icon   { font-size: 22px; line-height: 1; }

/* ════════════════════════════════════════
   SKELETON LOADER (mientras cargan datos)
   ════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.5s infinite;
  border-radius: var(--radio-md);
}
@keyframes skeleton-shine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════
   DIVISOR
   ════════════════════════════════════════ */
.divisor {
  border: none;
  border-top: 1px solid var(--borde-divisor);
  margin: var(--espacio-md) 0;
}
.divisor-texto {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
  font-size: var(--fuente-size-xs);
  color: var(--texto-muted);
  font-weight: 700;
  margin: var(--espacio-md) 0;
}
.divisor-texto::before,
.divisor-texto::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--borde-divisor);
}

/* ════════════════════════════════════════
   UTILIDADES
   ════════════════════════════════════════ */
.texto-morado   { color: var(--morado); }
.texto-naranja  { color: var(--naranja); }
.texto-muted    { color: var(--texto-muted); }
.texto-error    { color: var(--error-texto); }
.texto-exito    { color: var(--exito-texto); }
.texto-center   { text-align: center; }
.texto-sm       { font-size: var(--fuente-size-sm); }
.texto-xs       { font-size: var(--fuente-size-xs); }
.negrita        { font-weight: 800; }

.fondo-morado   { background: var(--morado-light); }
.fondo-naranja  { background: var(--naranja-light); }

.w-full         { width: 100%; }
.oculto         { display: none !important; }
.visible          { display: revert !important; }
.flex           { display: flex; }
.flex-center    { display: flex; align-items: center; justify-content: center; }
.flex-between   { display: flex; align-items: center; justify-content: space-between; }
.flex-gap-sm    { gap: var(--espacio-sm); }
.flex-gap-md    { gap: var(--espacio-md); }

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media (max-width: 480px) {
  :root {
    --fuente-size:    14px;
    --fuente-size-lg: 17px;
    --fuente-size-xl: 20px;
  }
  .card { padding: var(--espacio-md); }
}

@media (min-width: 768px) {
  .nav-bottom { display: none; }
}