/**
 * Intranet Badabun — identidad visual.
 *
 * Diseño: BRUTALISMO ADMINISTRATIVO SUIZO — el mismo lenguaje del sistema de
 * Tickets (orden directa 2026-07-14: la intranet completa se alinea a él).
 * Grafito, marfil técnico, azul acero, folios monoespaciados y sombras DURAS
 * desplazadas. Nada de degradados ni sombras difusas: aquí todo tiene filo.
 *
 * SOLO ES VISUAL. No se tocó una línea de comportamiento: se conservan los
 * MISMOS nombres de clase de siempre (bd-bar, card, bd-table, estado…), así que
 * cada apartado hereda el diseño nuevo sin cambiar su HTML ni su PHP.
 *
 * Tipografías AUTO-HOSPEDADAS (assets/fonts/): un panel interno no debería
 * avisarle a Google quién lo abre y desde dónde.
 */

/* ── Tipografías ────────────────────────────────────────────────── */

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBM-Plex-Mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBM-Plex-Mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBM-Plex-Mono-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBM-Plex-Mono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Space-Grotesk-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Space-Grotesk-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Space-Grotesk-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Space-Grotesk-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/Space-Grotesk-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/Space-Grotesk-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── Tokens (los de Tickets) ────────────────────────────────────── */
:root{
  color-scheme:light;
  --graphite:#14161A;   /* el negro de la casa */
  --graphite-2:#0C0E11; /* chrome */
  --ivory:#f2f3f5;      /* papel técnico: el fondo */
  --paper:#ffffff;
  --steel:#2563B0;      /* azul acero: lo accionable */
  --rojo:#E11D2E;       /* rojo Badabun: la marca */
  --line:rgba(20,22,26,.16);
  --amber:#D98A1A;      /* pendiente */
  --green:#1E9D54;      /* listo */
  --muted:#4b5763;
  --sombra:7px 7px 0 rgba(17,24,32,.14);
  --sombra-corta:4px 4px 0 var(--graphite);

  /* Alias de la paleta anterior: los apartados que aún nombran --violet,
     --panel o --txt siguen pintando bien mientras se migran uno a uno. */
  --violet:var(--steel);--violet-soft:var(--steel);--violet-tint:var(--steel);
  --pink:var(--rojo);--bg:var(--ivory);--bg2:var(--ivory);
  --panel:var(--paper);--panel2:#fafbfc;--bar:var(--graphite-2);
  --txt:var(--graphite);--ok:var(--green);--okbd:var(--green);
  --soon:var(--amber);--soonbd:var(--amber);--danger:var(--rojo);

  font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  color:var(--graphite);background:var(--ivory);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif;background:var(--ivory);color:var(--graphite);min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3{font-family:'Space Grotesk','Segoe UI',sans-serif;letter-spacing:-.02em}
::selection{background:var(--rojo);color:#fff}
:focus-visible{outline:2px solid var(--steel);outline-offset:2px}

/* ── Barra superior: grafito con el filo rojo de la marca ───────── */
.bd-bar{background:var(--graphite-2);border-bottom:3px solid var(--rojo);padding:14px max(20px,calc((100% - 1120px) / 2 + 20px));display:flex;align-items:center;gap:16px;color:var(--ivory)}
.bd-logo{height:24px}
.bd-tag{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#8893a0}
.bd-back{color:#9db8d8;text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.bd-back:hover{color:#fff}
.bd-user{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:.82rem}
.bd-whoami{font-family:'IBM Plex Mono',monospace;color:#8893a0;font-size:.74rem}
.bd-admin-link{color:#9db8d8;text-decoration:none;font-weight:600;font-size:.82rem}
.bd-admin-link:hover{color:#fff}
.bd-logout,.bd-manual{color:var(--ivory);text-decoration:none;border:1px solid rgba(255,255,255,.28);padding:6px 12px;border-radius:0;font-family:'IBM Plex Mono',monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;transition:.15s}
.bd-logout:hover,.bd-manual:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}

/* ── Encabezado: titular grande y en caja, como Tickets ─────────── */
.bd-hero{max-width:1120px;width:100%;margin:0 auto;padding:clamp(1.6rem,4vw,2.6rem) 20px 1.3rem;text-align:left;background:none;border-bottom:2px solid var(--graphite)}
.bd-hero h1{font-size:clamp(2rem,5vw,3.3rem);font-weight:700;line-height:.95;text-transform:uppercase}
.bd-hero h1 span{background:none;-webkit-text-fill-color:currentColor;color:var(--rojo)}
.bd-hero p{color:var(--muted);margin-top:10px;font-size:1rem;max-width:640px;line-height:1.5}

/* ── Lienzo y grupos ───────────────────────────────────────────── */
.bd-wrap{max-width:1120px;margin:0 auto;padding:24px 20px 48px;width:100%;flex:1}
.bd-grupo{margin-top:34px}
.bd-grupo h2{font-family:'IBM Plex Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:14px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.bd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}

/* Grupos plegables del portal: minimizados por defecto, clic para abrir/cerrar. */
.bd-grupo-plegable{margin-top:16px;border:2px solid var(--graphite);background:var(--paper);box-shadow:var(--sombra-corta)}
.bd-grupo-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;
  font-family:'IBM Plex Mono',monospace;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:var(--graphite);user-select:none}
.bd-grupo-sum::-webkit-details-marker{display:none}
.bd-grupo-sum:hover{background:#f6f7f9}
.bd-grupo-tit{color:var(--graphite)}
.bd-grupo-cuenta{font-size:.66rem;color:#fff;background:var(--steel);padding:3px 8px;letter-spacing:.04em}
.bd-grupo-flecha{margin-left:auto;color:var(--rojo);font-size:.9rem;transition:transform .18s ease}
.bd-grupo-plegable[open] .bd-grupo-flecha{transform:rotate(180deg)}
.bd-grupo-plegable .bd-grid{padding:2px 16px 18px}
.bd-grupo-plegable[open] .bd-grupo-sum{border-bottom:1px dashed var(--line)}

/* ── Tarjetas: papel, borde grueso, sombra dura ─────────────────── */
.card{display:block;text-decoration:none;color:inherit;background:var(--paper);border:2px solid var(--graphite);border-radius:0;padding:22px;position:relative;box-shadow:var(--sombra);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.card.on:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 rgba(17,24,32,.14);border-color:var(--rojo)}
.card.locked,.card.soon{opacity:.55;cursor:default;box-shadow:none;border-style:dashed}
.card .ico{font-size:2rem;line-height:1}
.card h3{margin:12px 0 6px;font-size:1.3rem;text-transform:uppercase}
.card p{color:var(--muted);font-size:.86rem;line-height:1.5}

/* Estado: folio monoespaciado, esquinas vivas */
.card .estado,.estado{position:absolute;top:16px;right:16px;font-family:'IBM Plex Mono',monospace;font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:4px 8px;border:0;border-radius:0;color:#fff;background:var(--steel)}
.estado.on{background:var(--green)}
.estado.soon{background:var(--amber)}
.estado.ext{background:var(--steel)}
.estado.lock{background:var(--muted)}

/* ── Login y "sin acceso" ──────────────────────────────────────── */
.bd-center{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:none}
.bd-card-form{width:100%;max-width:420px;background:var(--paper);border:2px solid var(--graphite);border-radius:0;box-shadow:var(--sombra);padding:32px 30px}
.bd-card-form h1{font-size:1.8rem;font-weight:700;margin-bottom:6px;text-align:left;text-transform:uppercase;line-height:1}
.bd-card-form h1 span{background:none;-webkit-text-fill-color:currentColor;color:var(--rojo)}
.bd-card-form .sub,.sub{color:var(--muted);font-size:.88rem;text-align:left;margin-bottom:22px}
.bd-field{margin-bottom:16px}
.bd-field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px;font-weight:600}
.bd-input{width:100%;background:var(--paper);border:2px solid var(--graphite);border-radius:0;padding:11px 12px;color:var(--graphite);font-size:.95rem;font-family:inherit;transition:.15s}
.bd-input:focus{outline:none;border-color:var(--steel);box-shadow:3px 3px 0 var(--steel)}

/* Botón: la firma del diseño — se "hunde" al pulsarlo */
.bd-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;border:2px solid var(--graphite);background:var(--steel);color:#fff;padding:12px 16px;border-radius:0;font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer;box-shadow:var(--sombra-corta);transition:transform .16s ease,box-shadow .16s ease}
.bd-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--graphite);filter:none}
.bd-btn:active{transform:translate(4px,4px);box-shadow:none}
.bd-btn.sec{background:var(--paper);color:var(--graphite)}
.bd-btn.rojo{background:var(--rojo)}

.bd-error{background:#fdecec;border:2px solid var(--rojo);border-radius:0;color:#8f1420;padding:10px 12px;font-size:.85rem;margin-bottom:16px}
.bd-foot{border-top:2px solid var(--graphite);padding:18px 20px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}

/* ── Panel admin: tabla técnica ────────────────────────────────── */
.bd-table{width:100%;border-collapse:collapse;margin-top:18px;background:var(--paper);border:2px solid var(--graphite);border-radius:0;box-shadow:var(--sombra);overflow:hidden}
.bd-table th,.bd-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-size:.86rem;vertical-align:middle}
.bd-table th{background:var(--graphite);color:var(--ivory);font-family:'IBM Plex Mono',monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}
.bd-table tr:last-child td{border-bottom:0}
.bd-table tr:nth-child(even) td{background:#fafbfc}

.bd-badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.64rem;font-weight:600;padding:3px 8px;border-radius:0;text-transform:uppercase;letter-spacing:.05em;color:#fff}
.bd-badge.admin{background:var(--rojo);border:0}
.bd-badge.user{background:var(--steel);border:0}

.bd-chk{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.bd-chk label{display:flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--graphite);border-radius:0;padding:6px 10px;font-size:.8rem;cursor:pointer;transition:.12s}
.bd-chk label:hover{background:var(--ivory)}
.bd-actions{display:flex;gap:8px}
.bd-mini{font-family:'IBM Plex Mono',monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:6px 12px;border-radius:0;border:2px solid var(--graphite);background:var(--paper);color:var(--graphite);cursor:pointer;text-decoration:none;box-shadow:2px 2px 0 var(--graphite);transition:transform .14s ease,box-shadow .14s ease}
.bd-mini:hover{transform:translate(2px,2px);box-shadow:none}
.bd-mini.danger{background:var(--rojo);color:#fff;border-color:var(--graphite)}

.bd-note{color:var(--muted);font-size:.82rem;line-height:1.6;background:var(--paper);border-left:4px solid var(--steel);border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:12px 14px;margin-top:16px}

@media(max-width:640px){
  .bd-hero h1{font-size:2rem}
  .bd-grid{grid-template-columns:1fr}
  .card{box-shadow:4px 4px 0 rgba(17,24,32,.14)}
}