/* ===========================================================================
   Cava Club — Panel admin. Capa de diseño (blanco + sombras + animaciones
   tipo Linear/Slack). Complementa las utilidades de Tailwind (CDN browser).
   =========================================================================== */

:root {
  --cc-night: #17121d;
  --cc-gold: #c9a45c;
  --cc-gold-dark: #a8853f;
  --cc-ink: #1e1824;
  --cc-line: #ececf1;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px rgba(16, 24, 40, .06);
  --shadow-pop: 0 6px 16px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .06);
  --shadow-float: 0 12px 32px rgba(16, 24, 40, .16), 0 4px 10px rgba(16, 24, 40, .08);
}

body { font-feature-settings: "cv11", "ss01"; }

/* Sombra "pro" para todas las tarjetas (sube el nivel sin tocar templates) */
.shadow-sm { box-shadow: var(--shadow-card) !important; }
.shadow-2xl { box-shadow: var(--shadow-float) !important; }

/* Tarjetas clicables: hover-lift sutil (solo enlaces, no contenedores) */
a.shadow-sm, .lift { transition: transform .18s ease, box-shadow .18s ease; }
a.shadow-sm:hover, .lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop) !important; }

/* Foco accesible y consistente (dorado) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cc-gold);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Scrollbar clara */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d7d7de; border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #c2c2cc; background-clip: padding-box; }

/* ---------------------------------------------------------------------------
   Sidebar / overlay (móvil)
   --------------------------------------------------------------------------- */
.sidebar { transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
.overlay { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.overlay.is-open { opacity: 1; pointer-events: auto; }

/* Item de navegación */
.navlink {
  position: relative;
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .7rem; border-radius: .6rem;
  font-size: 13px; font-weight: 500; color: #5b6270;
  transition: background-color .15s ease, color .15s ease;
}
.navlink:hover { background: #f5f5f7; color: var(--cc-ink); }
.navlink svg { transition: transform .15s ease; }
.navlink:hover svg { transform: scale(1.08); }
.navlink.is-active { background: rgba(201, 164, 92, .12); color: var(--cc-gold-dark); }
.navlink.is-active::before {
  content: ""; position: absolute; left: 0; top: 50%;
  height: 0; width: 3px; border-radius: 0 4px 4px 0; background: var(--cc-gold);
  transform: translateY(-50%); animation: nav-grow .22s ease forwards;
}
@keyframes nav-grow { from { height: 0; } to { height: 60%; } }

/* Menú de usuario (topbar) */
.menu-panel {
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  transform-origin: top right; box-shadow: var(--shadow-float);
}
.menu-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* ---------------------------------------------------------------------------
   Toasts (flash messages)
   --------------------------------------------------------------------------- */
.toasts { position: fixed; top: 1rem; right: 1rem; z-index: 60; display: flex; flex-direction: column; gap: .6rem; max-width: min(92vw, 380px); }
.toast {
  display: flex; align-items: flex-start; gap: .6rem;
  border-radius: .8rem; padding: .8rem 1rem; font-size: 14px;
  background: #fff; box-shadow: var(--shadow-float); border: 1px solid var(--cc-line);
  animation: toast-in .28s cubic-bezier(.2, .8, .2, 1) both;
}
.toast--hide { animation: toast-out .22s ease forwards; }
.toast .bar { width: 3px; align-self: stretch; border-radius: 4px; }
.toast--success .bar { background: #10b981; }
.toast--error   .bar { background: #ef4444; }
.toast--warning .bar { background: #f59e0b; }
@keyframes toast-in  { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { to   { opacity: 0; transform: translateX(16px); } }

/* ---------------------------------------------------------------------------
   Entrada de contenido + transición entre páginas
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .page { animation: fade-up .34s cubic-bezier(.2, .7, .2, 1) both; }
  .page tbody tr { animation: fade-in .4s ease both; }
  .page tbody tr:nth-child(1) { animation-delay: .02s; }
  .page tbody tr:nth-child(2) { animation-delay: .05s; }
  .page tbody tr:nth-child(3) { animation-delay: .08s; }
  .page tbody tr:nth-child(4) { animation-delay: .11s; }
  .page tbody tr:nth-child(5) { animation-delay: .14s; }
  .page tbody tr:nth-child(n+6) { animation-delay: .16s; }

  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .18s ease both; }
  ::view-transition-new(root) { animation: vt-in .26s cubic-bezier(.2, .7, .2, 1) both; }
}

@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vt-out  { to { opacity: 0; } }
@keyframes vt-in   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Botones: leve feedback al presionar */
button, .btn, a[role="button"] { transition: transform .08s ease, background-color .15s ease, box-shadow .15s ease; }
button:active { transform: scale(.985); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}