/* File: /assets/css/layout.css
 * El esqueleto: barra fija arriba, menú lateral en escritorio y barra inferior
 * en celular.
 *
 * Se piensa primero el celular. En daClic la mayoría va a crear su página desde
 * el teléfono, y el escritorio es lo que se añade después —no al revés—: por eso
 * la barra inferior es la navegación de verdad y el lateral aparece cuando hay
 * sitio de sobra.
 */

/* ── Estructura ───────────────────────────────────────────────────────────── */

body.app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.main {
  flex: 1 1 auto;
  padding-top: calc(var(--nav-h) + 20px);
  /* El hueco de abajo cuenta la barra inferior Y la zona segura del iPhone:
     sin env(), el último botón queda debajo de la barra del sistema. */
  padding-bottom: calc(var(--bottomnav-h) + 24px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 992px) {
  .main {
    margin-left: var(--sidebar-w);
    padding-bottom: 40px;
  }
  body.no-sidebar .main { margin-left: 0; }
}

/* ── Barra superior ───────────────────────────────────────────────────────── */

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

/* Sin color-mix (navegadores viejos) queda opaca. Preferible a transparente. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .navbar { background: var(--surface); }
}

@media (min-width: 992px) {
  .navbar { padding-inline: 20px; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -.028em;
  color: var(--text);
}
.brand:hover { color: var(--text); }
.brand-logo { height: 30px; width: auto; object-fit: contain; }
.brand-text { color: var(--accent); }

/* ── Logotipo claro / oscuro ──────────────────────────────────────────────
   Ui::logo() manda los DOS y aquí se decide cuál se ve. Se hace con CSS y no
   en PHP porque el tema tiene tres estados, y en el tercero —automático, el
   de casi todo el mundo— el servidor no sabe en cuál está la persona: eso lo
   contesta `prefers-color-scheme`, que solo existe en el navegador.

   Mismo esquema que los colores del tema: el claro por omisión, el oscuro
   por consulta de medios, y la elección a mano manda sobre las dos. */

.brand-logo-dark { display: none; }

@media (prefers-color-scheme: dark) {
  /* «Salvo que haya pedido claro a mano»: sin ese :not, quien elige el tema
     claro con el sistema en oscuro se queda con el logotipo equivocado. */
  :root:not([data-theme="light"]) .brand-logo-light { display: none; }
  :root:not([data-theme="light"]) .brand-logo-dark  { display: block; }
}

/* Después de la consulta de medios a propósito: lo elegido a mano gana en los
   dos sentidos, y con la misma especificidad decide el orden. */
:root[data-theme="dark"]  .brand-logo-light { display: none; }
:root[data-theme="dark"]  .brand-logo-dark  { display: block; }
:root[data-theme="light"] .brand-logo-light { display: block; }
:root[data-theme="light"] .brand-logo-dark  { display: none; }

.nav-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  transition: background .15s, color .15s;
}
.nav-btn:hover { background: var(--surface-3); color: var(--text); }

/* Saldo de la wallet en la barra: se ve siempre, sin entrar a ningún lado. */
.nav-wallet {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: .86rem;
  font-weight: 620;
  white-space: nowrap;
}
.nav-wallet:hover { background: var(--accent); color: var(--accent-text); }

/* ── Menú del usuario ─────────────────────────────────────────────────────── */

.usermenu { position: relative; }

.usermenu-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  border-radius: 999px;
  transition: background .15s;
}
.usermenu-toggle:hover { background: var(--surface-3); }
.usermenu-name { font-size: .88rem; font-weight: 550; }

.usermenu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 232px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 36px rgba(15,23,42,.16);
  padding: 6px;
  display: none;
  z-index: 95;
}
.usermenu.is-open .usermenu-panel { display: block; animation: fade .14s ease; }

.usermenu-head {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.usermenu-head strong { display: block; font-size: .93rem; }
.usermenu-head span   { font-size: .8rem; color: var(--text-soft); }

.usermenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: .9rem;
  width: 100%;
  text-align: left;
}
.usermenu-item:hover { background: var(--surface-3); color: var(--text); }
.usermenu-item .ic { color: var(--text-mute); }
.usermenu-item.is-danger { color: var(--danger); }
.usermenu-item.is-danger .ic { color: var(--danger); }

/* ── Menú lateral ─────────────────────────────────────────────────────────── */

.sidebar {
  position: fixed;
  top: var(--nav-h);
  bottom: 0;
  left: 0;
  width: var(--sidebar-w);
  z-index: 85;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 16px 12px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform .24s cubic-bezier(.32,.72,0,1);
}
.sidebar.is-open { transform: translateX(0); }

@media (min-width: 992px) {
  .sidebar { transform: translateX(0); }
}

.sidebar-back {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: rgba(9,12,20,.4);
  z-index: 84;
  display: none;
}
.sidebar-back.is-open { display: block; }
@media (min-width: 992px) { .sidebar-back { display: none !important; } }

.nav-section {
  padding: 16px 12px 6px;
  font-size: .7rem;
  font-weight: 680;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-mute);
}
.nav-section:first-child { padding-top: 4px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: .91rem;
  font-weight: 520;
  transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--surface-3); color: var(--text); }
.nav-link .ic { flex: 0 0 auto; }
.nav-link .fill { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-link.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.nav-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Barra inferior (celular) ─────────────────────────────────────────────── */

.bottomnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 88;
  display: flex;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .bottomnav { background: var(--surface); }
}

@media (min-width: 992px) { .bottomnav { display: none; } }

.bottomnav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-mute);
  font-size: .68rem;
  font-weight: 550;
  position: relative;
  min-width: 0;
}
.bottomnav-item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-inline: 2px;
}
.bottomnav-item.is-active { color: var(--accent); }

/* Punto sobre el icono activo: se ve de un vistazo dónde estás sin depender
   solo del color (que alguien puede no distinguir). */
.bottomnav-item.is-active::before {
  content: '';
  position: absolute;
  top: 6px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* Botón central destacado: crear. Es la acción principal de daClic y merece
   ser la más fácil de acertar con el pulgar. */
.bottomnav-item.is-primary .ic-wrap {
  width: 44px; height: 44px;
  margin-top: -18px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px var(--accent-line);
}

/* ── Aviso de suplantación ────────────────────────────────────────────────── */

/* Imposible de ignorar a propósito: si un admin olvida que está dentro de la
   cuenta de otra persona y actúa como ella, el destrozo es real. */
.impersonate-bar {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  z-index: 89;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: #ea580c;
  color: #fff;
  font-size: .84rem;
  font-weight: 560;
}
.impersonate-bar .btn {
  min-height: 32px;
  padding: 5px 13px;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: .8rem;
}
.impersonate-bar .btn:hover { background: rgba(255,255,255,.32); color: #fff; }

body.is-impersonating .main   { padding-top: calc(var(--nav-h) + 62px); }
body.is-impersonating .sidebar{ top: calc(var(--nav-h) + 40px); }

/* ── Vista de acceso (login/registro) ─────────────────────────────────────── */

body.auth {
  display: grid;
  place-items: center;
  padding: 24px 16px;
  min-height: 100dvh;
  background:
    radial-gradient(1000px 460px at 50% -10%, var(--accent-soft), transparent 70%),
    var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: 0 10px 40px rgba(15,23,42,.07);
}
.auth-head { text-align: center; margin-bottom: 24px; }
.auth-head .brand { justify-content: center; font-size: 1.35rem; margin-bottom: 12px; }
.auth-head p { color: var(--text-soft); font-size: .92rem; }
.auth-foot { text-align: center; margin-top: 22px; font-size: .88rem; color: var(--text-soft); }

/* ── Interruptores de la barra ────────────────────────────────────────────── */

.lang-switch { display: flex; gap: 2px; background: var(--surface-3); border-radius: 999px; padding: 3px; }
.lang-switch a {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 620;
  color: var(--text-soft);
  text-transform: uppercase;
}
.lang-switch a.is-active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ── Pie ──────────────────────────────────────────────────────────────────── */

.footer {
  padding: 26px 0;
  border-top: 1px solid var(--border);
  color: var(--text-mute);
  font-size: .84rem;
  text-align: center;
}
.footer a { color: var(--text-soft); }
.footer a:hover { color: var(--accent); }