/* ============================================================
   DUALTIC — ADMIN SHELL (topbar + footer + tokens)
   Cargado en TODAS las páginas del área admin.
   Convive con Bootstrap 4.6 + styles.min.css → SIN reset global.
   Tokens de marca: Bricolage Grotesque / Hanken Grotesk / JetBrains Mono.
   ============================================================ */

:root {
  --bg:        #ffffff;   /* fondo de la app (blanco) */
  --bg-soft:   #ffffff;
  --panel:     #ffffff;
  --line:      rgba(0,0,0,0.10);
  --line-2:    rgba(0,0,0,0.16);
  --line-3:    rgba(0,0,0,0.26);

  --ink:       #141414;
  --ink-mut:   rgba(0,0,0,0.60);
  --ink-faint: rgba(0,0,0,0.42);

  --accent:      #ed6f5c;   /* coral de marca */
  --accent-deep: #d8553f;
  --accent-soft: #ffd2c9;
  --accent-line: rgba(237,111,92,0.38);
  --accent-tint: #fffaf8;   /* tinte crema para hover de tarjetas */
  --on-accent:   #ffffff;

  --danger:      #c62828;   /* acciones destructivas (eliminar) */
  --danger-deep: #a31f1f;
  --danger-soft: #fdeceb;

  --success:      #2e9e6b;   /* confirmaciones / requisitos cumplidos */
  --success-deep: #1f7a51;
  --success-soft: #e7f6ee;

  --warn:      #d97706;   /* estado de atención (p. ej. correo sin verificar) */
  --warn-deep: #b45309;
  --warn-soft: #fdf2e3;
  --warn-line: rgba(217,119,6,0.30);

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-pill: 100px;

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body:    'Hanken Grotesk', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --admin-max: 1240px;
  --admin-gutter: clamp(18px, 4vw, 40px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Contenedor propio del shell (no depende de Bootstrap .container) */
.admin-container {
  width: 100%;
  max-width: var(--admin-max);
  margin-inline: auto;
  padding-inline: var(--admin-gutter);
}

/* El área admin pasa a fondo blanco con tipografía de marca */
body.modal-open,
body { background: var(--bg); }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: 20px; height: 66px; }

/* Ningún enlace del topbar lleva subrayado (ni en hover) */
.topbar a, .topbar a:hover, .topbar a:focus { text-decoration: none; }

.topbar .brand { display: flex; align-items: center; gap: 11px; flex: none; }
.topbar .brand img { height: 26px; width: auto; display: block; }

.top-nav { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.top-nav a {
  font-family: var(--display); font-size: 14px; font-weight: 500;
  color: var(--ink-mut); padding: 8px 13px; border-radius: var(--r-pill);
  transition: background .2s, color .2s; text-decoration: none;
}
.top-nav a:hover { color: var(--ink); background: rgba(0,0,0,0.05); }
.top-nav a.active { color: var(--accent-deep); background: rgba(237,111,92,0.12); }

.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* botones auth (logged out) */
.topbar .btn-auth {
  font-family: var(--display); font-weight: 600; font-size: 14px;
  padding: 9px 18px; border-radius: var(--r-pill); text-decoration: none;
  transition: background .2s var(--ease), border-color .2s, color .2s, transform .15s var(--ease);
  display: inline-flex; align-items: center; line-height: 1; white-space: nowrap;
}
.topbar .btn-auth.ghost { border: 1px solid var(--line-2); color: var(--ink); background: #fff; }
.topbar .btn-auth.ghost:hover { border-color: var(--ink); }
.topbar .btn-auth.solid { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); }
.topbar .btn-auth.solid:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px); }

/* avatar + dropdown de cuenta (usa Bootstrap dropdown) */
.account { position: relative; }
.avatar-toggle { display: block; border-radius: 50%; padding: 0; line-height: 0; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff; font-family: var(--display); font-weight: 700; font-size: 14px;
  border: 1px solid var(--accent-line);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-toggle:hover .avatar { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(0,0,0,0.4); }

/* menú desplegable de cuenta */
.topbar .menu-card {
  border: 1px solid var(--line); border-radius: var(--r); padding: 6px;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.28); min-width: 234px; margin-top: 8px;
  background: #fff;
}
.topbar .menu-card .menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: var(--r-sm); text-decoration: none;
  font-family: var(--body); font-size: 14px; font-weight: 500; color: var(--ink);
  white-space: nowrap;
  transition: background .15s, transform .1s var(--ease);
}
.topbar .menu-card .menu-item:hover { background: rgba(0,0,0,0.05); }
.topbar .menu-card .menu-item:active { transform: scale(0.985); }
.topbar .menu-card .menu-item ion-icon,
.topbar .menu-card .menu-item i { font-size: 17px; color: var(--ink-mut); flex: none; }
.topbar .menu-card .menu-item.danger { color: var(--accent-deep); }
.topbar .menu-card .menu-item.danger ion-icon { color: var(--accent-deep); }
.topbar .menu-card .menu-sep { height: 1px; background: var(--line); margin: 6px 4px; border: 0; }
.topbar .menu-card .menu-label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mut);
  padding: 8px 12px 4px; user-select: none;
}
@media (prefers-reduced-motion: reduce) {
  .topbar .menu-card .menu-item:active { transform: none; }
}

/* ============================================================
   FOOTER (restyle del .version existente)
   ============================================================ */
.version {
  border-top: 1px solid var(--line);
  color: var(--ink-mut);
  font-family: var(--body);
  background: var(--bg);
}
.version a { color: var(--ink-mut); text-decoration: none; }
.version a:hover { color: var(--accent-deep); }
.version #open-cookie-settings { color: var(--ink-mut); }
.version #open-cookie-settings:hover { color: var(--accent-deep); }

/* ============================================================
   MODAL DE PREGUNTAS FRECUENTES (footer, toda página admin)
   Vive aquí y no en profile.css/forms.css porque el trigger está en el
   footer, presente en TODA página admin — no solo donde esas hojas cargan.
   Mismo lenguaje visual que .report-scrim/.report-modal (profile.css,
   CAMBIO #098): scrim con blur, modal con transform:translateY+scale,
   cierre en SVG que rota en hover. Acordeón <details>/<summary> nativo,
   mismo criterio que el FAQ del home (sin JS para abrir/cerrar cada
   pregunta — solo el JS de este archivo abre/cierra el modal entero).
   ============================================================ */
.faq-scrim {
  position: fixed; inset: 0; z-index: 1060;
  background: rgba(22,22,15,0.48); backdrop-filter: blur(5px);
  display: grid; place-items: center; padding: clamp(14px, 4vw, 40px);
  opacity: 0; transition: opacity 0.24s var(--ease);
}
.faq-scrim[hidden] { display: none; }
.faq-scrim.open { opacity: 1; }
.faq-modal {
  width: min(680px, 100%); max-height: calc(100dvh - 56px);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 32px 80px -24px rgba(0,0,0,0.4);
  transform: translateY(14px) scale(0.985); transition: transform 0.24s var(--ease);
}
.faq-scrim.open .faq-modal { transform: none; }

.faq-modal-head {
  flex: none; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 22px clamp(18px,3vw,26px) 18px; border-bottom: 1px solid var(--line);
}
.faq-modal-tag {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep);
}
.faq-modal-title {
  margin: 6px 0 4px; font-family: var(--display); font-weight: 700; font-size: 21px; color: var(--ink);
}
.faq-modal-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-mut); }
.faq-close {
  flex: none; width: 36px; height: 36px; border-radius: 50%; margin-top: 2px;
  background: transparent; border: 1px solid var(--line-2); color: var(--ink-mut);
  display: grid; place-items: center; cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s var(--ease);
}
.faq-close:hover { background: var(--accent-soft); color: var(--ink); transform: rotate(90deg); }
.faq-close:active { transform: rotate(90deg) scale(0.92); }

.faq-modal-body {
  overflow-y: auto; padding: clamp(14px,2.5vw,20px); display: flex; flex-direction: column; gap: 8px;
}
.faq-item {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md, 12px);
  overflow: hidden; transition: border-color 0.2s var(--ease);
}
.faq-item[open] { border-color: var(--accent); }
.faq-q {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; transition: background 0.12s var(--ease);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:active { background: var(--accent-tint); }
.faq-q:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: -3px; border-radius: var(--r-md, 12px); }
.faq-n { flex: none; font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-faint); }
.faq-item[open] .faq-n { color: var(--accent-deep); }
.faq-t {
  flex: 1; font-family: var(--display); font-weight: 600; font-size: 14.5px;
  line-height: 1.35; color: var(--ink);
}
/* El "+" se vuelve "−" rotando solo la barra vertical 90°, igual que el FAQ del home. */
.faq-plus {
  flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--line);
  display: grid; place-items: center; transition: background 0.22s var(--ease);
}
.faq-plus::before, .faq-plus i { grid-area: 1/1; background: var(--ink); border-radius: 2px; }
.faq-plus::before { content: ""; width: 10px; height: 1.6px; }
.faq-plus i { width: 1.6px; height: 10px; transition: transform 0.22s var(--ease); }
.faq-item[open] .faq-plus { background: var(--accent); }
.faq-item[open] .faq-plus i { transform: rotate(90deg); }
.faq-a { padding: 0 16px 14px 44px; }
.faq-a p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-mut); }
.faq-a strong { font-weight: 700; color: var(--ink); }
.faq-item[open] .faq-a { animation: faqAdminIn 0.26s var(--ease) both; }
@keyframes faqAdminIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (hover: hover) and (pointer: fine) {
  .faq-item:not([open]):hover { border-color: var(--line-3); }
}
@media (max-width: 560px) {
  .faq-modal { width: 100%; max-height: 100dvh; border-radius: 0; }
  .faq-a { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-scrim, .faq-modal, .faq-close, .faq-item, .faq-q, .faq-plus, .faq-plus i, .faq-a {
    transition: none !important; animation: none !important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .top-nav { display: none; }
  .topbar-inner { gap: 12px; }
}
@media (max-width: 400px) {
  .topbar .btn-auth { padding: 9px 12px; font-size: 13px; }
  .top-right { gap: 6px; }
}