/* ==========================================================================
   Estilos base del gestor.
   Solo se incluye aquí lo que Tailwind (CDN) no resuelve cómodamente:
   animaciones, skeletons, scrollbar y la tipografía global.
   ========================================================================== */

:root {
  --tinta: #1c1917;      /* stone-900  */
  --carbon: #17161a;     /* sidebar     */
  --oro: #c69749;        /* acento      */
  --oro-claro: #e3c07d;
  --crema: #faf8f5;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Barra de desplazamiento discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(120, 113, 108, .35);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(120, 113, 108, .55); background-clip: padding-box; }

/* --- Animaciones ---------------------------------------------------------- */
@keyframes app-aparecer {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.app-aparecer { animation: app-aparecer .45s cubic-bezier(.22,.61,.36,1) both; }

@keyframes app-toast-entrada {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.app-toast { animation: app-toast-entrada .3s ease both; }
.app-toast-salida { opacity: 0; transform: translateX(20px); transition: all .3s ease; }

/* --- Skeleton (carga) ----------------------------------------------------- */
@keyframes app-brillo {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: #ece9e4;
  background-image: linear-gradient(90deg, #ece9e4 0px, #f6f4f1 200px, #ece9e4 400px);
  background-size: 800px 100%;
  animation: app-brillo 1.3s linear infinite;
  border-radius: .5rem;
}

/* Fondo con textura sutil para las pantallas de acceso */
.malla-acento {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(198,151,73,.18), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(198,151,73,.10), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(227,192,125,.14), transparent 45%);
}

/* Transición genérica para botones/enlaces */
.transicion { transition: all .18s ease; }

/* Fundido al cambiar de imagen (carruseles y lightbox) */
@keyframes app-fade-img {
  from { opacity: .3; }
  to   { opacity: 1; }
}
.app-fade-img { animation: app-fade-img .28s ease; }

/* =========================================================================
   TEMA 2 · Dark inmersivo (frontend público)
   ========================================================================= */
.t2-mesh {
  background-color: #0b0b0f;
  background-image:
    radial-gradient(circle at 12% 8%,  rgba(139, 92, 246, .22), transparent 40%),
    radial-gradient(circle at 88% 12%, rgba(198, 151, 73, .16), transparent 42%),
    radial-gradient(circle at 50% 108%, rgba(56, 189, 248, .12), transparent 45%);
}
/* En el body, el fondo queda fijo para un efecto más inmersivo. */
body.t2-mesh { background-attachment: fixed; }

/* Tarjeta "glass" del Tema 2 */
.t2-glass {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.t2-glow { box-shadow: 0 22px 60px -24px rgba(139, 92, 246, .45); }

/* Barra de scroll oscura para el Tema 2 */
body.t2-mesh::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); background-clip: padding-box; }

@keyframes t2-flotar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.t2-flotar { animation: t2-flotar 5s ease-in-out infinite; }

@keyframes t2-pulso {
  0%,100% { box-shadow: 0 0 0 0 rgba(198,151,73,.55); }
  50%     { box-shadow: 0 0 0 6px rgba(198,151,73,0); }
}
.t2-pulso { animation: t2-pulso 2.2s ease-out infinite; }