/* public/app-estilo.css
   Mejora visual de la app de socios (inicio + Rita).
   Se carga al FINAL del <body> para que gane sobre los estilos de cada página:
     <link rel="stylesheet" href="/app-estilo.css">
   Colores de marca: azul marino, azul, rojo Santa Rita y blanco. */

:root {
  --sr-marino: #0f1d47;
  --sr-azul: #1e3a8a;
  --sr-azul-medio: #2b4bb0;
  --sr-rojo: #dc2626;
  --sr-rojo-oscuro: #9f1515;
  --sr-fondo: #eef1f7;
  --sr-tinta: #0f172a;
  --sr-gris: #64748b;
  --sr-linea: #e3e8f2;
}

/* ═══════════════ BASE ═══════════════ */
html body {
  background:
    radial-gradient(1200px 500px at 50% -200px, rgba(30,58,138,0.06), transparent 70%),
    var(--sr-fondo);
}

/* ═══════════════ HEADER ═══════════════ */
html body .header {
  background:
    radial-gradient(500px 300px at -10% -20%, rgba(59,91,219,0.45), transparent 60%),
    linear-gradient(165deg, #0c1a42 0%, #142554 45%, #1e3a8a 100%);
  padding-bottom: 56px;
}
/* Trama sutil de puntos */
html body .header::before {
  top: 0; right: 0; left: 0; bottom: 0;
  width: auto; height: auto; border-radius: 0;
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1.2px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
html body .header-bienvenida { letter-spacing: 3px; font-size: 11px; opacity: 0.75; }
html body .avatar {
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
  border: 2px solid rgba(255,255,255,0.35);
}

/* ═══════════════ TARJETA DE PUNTOS ═══════════════ */
html body .puntos-card {
  background:
    radial-gradient(300px 160px at 100% 0%, rgba(255,255,255,0.22), transparent 60%),
    linear-gradient(135deg, #ef3b3b 0%, var(--sr-rojo) 40%, var(--sr-rojo-oscuro) 100%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px;
  box-shadow:
    0 18px 40px -12px rgba(159,21,21,0.55),
    inset 0 1px 0 rgba(255,255,255,0.35);
  margin-top: -28px;
}
/* Brillo diagonal */
html body .puntos-card::before {
  top: -60%; left: -30%; right: auto;
  width: 60%; height: 220%;
  border-radius: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.14) 50%, transparent 100%);
  transform: rotate(18deg);
}
html body .puntos-label { letter-spacing: 2.5px; font-size: 11px; opacity: 0.85; }
html body .puntos-valor {
  font-size: 72px;
  letter-spacing: -3px;
  text-shadow: 0 6px 24px rgba(0,0,0,0.18);
  font-variant-numeric: tabular-nums;
}
html body .puntos-equiv { opacity: 0.92; }

/* ═══════════════ ACCESOS RÁPIDOS ═══════════════ */
html body .acceso {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  padding: 18px 10px 16px;
}
html body .acceso.verde { background: linear-gradient(150deg, #22c55e 0%, #16a34a 45%, #0f7a37 100%); box-shadow: 0 12px 26px -12px rgba(22,163,74,0.7); }
html body .acceso.azul  { background: linear-gradient(150deg, #3657c8 0%, var(--sr-azul) 45%, var(--sr-marino) 100%); box-shadow: 0 12px 26px -12px rgba(30,58,138,0.75); }
html body .acceso.rojo  { background: linear-gradient(150deg, #f04848 0%, var(--sr-rojo) 45%, var(--sr-rojo-oscuro) 100%); box-shadow: 0 12px 26px -12px rgba(220,38,38,0.7); }
html body .acceso-icon {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
  border-radius: 14px;
}
html body .acceso-titulo { font-size: 13px; }

/* ═══════════════ NÚMEROS (compras / gastado) ═══════════════ */
html body .stat {
  border-radius: 18px;
  border: 1px solid var(--sr-linea);
  box-shadow: 0 6px 18px -12px rgba(15,23,42,0.25);
  position: relative;
  overflow: hidden;
}
html body .stat::before {
  content: "";
  position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--sr-azul);
}
html body .stat:last-child::before { background: var(--sr-rojo); }
html body .stat-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--sr-gris);
  font-weight: 600;
}
html body .stat-valor { font-size: 22px; color: var(--sr-tinta); font-variant-numeric: tabular-nums; }

/* ═══════════════ SECCIONES Y TARJETAS ═══════════════ */
html body .section-title { font-size: 17px; color: var(--sr-tinta); letter-spacing: -0.4px; }
html body .section-link { color: var(--sr-rojo); }

html body .premio-card,
html body .proximo-card,
html body #actividadContainer {
  border-radius: 18px !important;
  border: 1px solid var(--sr-linea);
  box-shadow: 0 6px 18px -12px rgba(15,23,42,0.25) !important;
}
html body .premio-icon {
  border-radius: 14px;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
}
html body .premio-pts {
  background: linear-gradient(135deg, var(--sr-azul) 0%, var(--sr-marino) 100%);
  box-shadow: 0 6px 14px -6px rgba(30,58,138,0.6);
}
html body .progress { height: 8px; background: #e8ecf5; }
html body .progress-bar {
  background: linear-gradient(90deg, var(--sr-azul) 0%, #4f6fe0 55%, var(--sr-rojo) 100%);
  box-shadow: 0 0 12px rgba(220,38,38,0.35);
}

html body .oferta-card {
  border-radius: 20px;
  border: 1px solid var(--sr-linea);
  box-shadow: 0 10px 24px -14px rgba(15,23,42,0.35);
}

html body .referidos-card {
  border-radius: 22px;
  background:
    radial-gradient(260px 160px at 100% 0%, rgba(220,38,38,0.35), transparent 65%),
    linear-gradient(150deg, var(--sr-azul) 0%, var(--sr-marino) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 16px 34px -16px rgba(15,29,71,0.7);
}

html body .canje-card { border-radius: 20px; border: 1px solid rgba(255,255,255,0.12); }

/* ═══════════════ BARRA DE ABAJO ═══════════════ */
html body .tab-bar {
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 -10px 30px -18px rgba(15,23,42,0.35);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
html body .tab-item { position: relative; color: #94a3b8; }
html body .tab-item.activo { color: var(--sr-azul); }
html body .tab-item.activo::before {
  content: "";
  position: absolute; top: -9px; left: 50%;
  width: 26px; height: 3px; border-radius: 0 0 3px 3px;
  transform: translateX(-50%);
  background: var(--sr-rojo);
}

/* ═══════════════ BOTÓN DE RITA ═══════════════ */
html body .rita-fab {
  background: linear-gradient(140deg, #f04848 0%, var(--sr-rojo) 50%, var(--sr-rojo-oscuro) 100%);
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 10px 26px -6px rgba(220,38,38,0.65), 0 0 0 6px rgba(220,38,38,0.12);
}
html body .rita-fab::after {
  content: "";
  position: absolute; top: 4px; right: 4px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #22c55e; border: 2px solid #fff;
}

/* ═══════════════ CHAT DE RITA ═══════════════ */
html body .rita-panel {
  background:
    radial-gradient(rgba(30,58,138,0.07) 1px, transparent 1.2px) 0 0 / 18px 18px,
    linear-gradient(180deg, #f4f6fb 0%, #eef1f7 100%);
}

html body .rita-header {
  background:
    radial-gradient(260px 140px at 100% 120%, rgba(220,38,38,0.45), transparent 65%),
    linear-gradient(160deg, #0c1a42 0%, #142554 50%, var(--sr-azul) 100%);
  padding-bottom: 16px;
  box-shadow: 0 10px 30px -16px rgba(15,29,71,0.8);
  position: relative;
  z-index: 2;
}
html body .rita-avatar {
  position: relative;
  width: 44px; height: 44px;
  background: linear-gradient(140deg, #f04848, var(--sr-rojo-oscuro));
  box-shadow: 0 0 0 2px #142554, 0 0 0 4px rgba(255,255,255,0.5);
  font-size: 18px;
}
html body .rita-avatar::after {
  content: "";
  position: absolute; bottom: -1px; right: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #22c55e; border: 2px solid #142554;
}
html body .rita-header-name { font-size: 17px; letter-spacing: -0.3px; }
html body .rita-header-sub { opacity: 0.85; }
html body .rita-header-sub::before {
  content: "En línea · ";
  color: #86efac;
  font-weight: 700;
}
html body .rita-close {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
}

html body .rita-body { padding: 20px 16px 12px; }

html body .rita-msg {
  font-size: 15px;
  line-height: 1.55;
  padding: 12px 15px;
  max-width: 86%;
  border-radius: 20px;
}
html body .rita-msg.bot {
  background: #fff;
  border: 1px solid var(--sr-linea);
  border-bottom-left-radius: 6px;
  box-shadow: 0 8px 20px -14px rgba(15,23,42,0.35);
  color: var(--sr-tinta);
}
html body .rita-msg.user {
  background: linear-gradient(140deg, var(--sr-azul-medio) 0%, var(--sr-azul) 45%, var(--sr-marino) 100%);
  border-bottom-right-radius: 6px;
  box-shadow: 0 10px 22px -12px rgba(30,58,138,0.7);
}
html body .rita-msg.error {
  background: #fff1f1;
  border: 1px solid #fecaca;
  border-bottom-left-radius: 6px;
}

html body .rita-sugerencias { gap: 8px; margin-top: 12px; }
html body .rita-chip {
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--sr-linea);
  color: var(--sr-azul);
  box-shadow: 0 4px 12px -8px rgba(15,23,42,0.3);
  padding: 10px 14px 10px 12px;
}
html body .rita-chip::before {
  content: "✦";
  color: var(--sr-rojo);
  margin-right: 6px;
  font-size: 11px;
}
html body .rita-chip:active { background: #eef2ff; border-color: #c7d2fe; }

html body .rita-typing {
  background: #fff;
  border: 1px solid var(--sr-linea);
  border-radius: 20px;
  border-bottom-left-radius: 6px;
}
html body .rita-dot { background: var(--sr-azul); }
html body .rita-dot:nth-child(2) { background: #4f6fe0; }
html body .rita-dot:nth-child(3) { background: var(--sr-rojo); }

html body .rita-footer {
  background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(15,23,42,0.06);
  box-shadow: 0 -10px 24px -18px rgba(15,23,42,0.4);
}
html body .rita-input {
  background: #f4f6fb;
  border: 1.5px solid transparent;
  border-radius: 24px;
}
html body .rita-input:focus {
  background: #fff;
  border-color: var(--sr-azul);
  box-shadow: 0 0 0 4px rgba(30,58,138,0.1);
}
html body .rita-send {
  width: 46px; height: 46px;
  background: linear-gradient(140deg, #f04848, var(--sr-rojo-oscuro));
  box-shadow: 0 8px 18px -6px rgba(220,38,38,0.6);
}
html body .rita-send:disabled { background: #cbd5e1; box-shadow: none; }

/* Entrada suave de los mensajes */
@keyframes srMsgEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html body .rita-msg, html body .rita-sugerencias { animation: srMsgEntra 0.22s ease-out; }

@media (prefers-reduced-motion: reduce) {
  html body .rita-msg, html body .rita-sugerencias { animation: none; }
}