/* =========================================================================
   PAUSA EPS · Panel administrativo OTIC
   =========================================================================

   POR QUE CSS PROPIO Y NO BOOTSTRAP
   ---------------------------------
   Se busco en el proyecto antes de decidir: `public/assets/vendor/` esta
   vacio y no hay ninguna dependencia de front en `composer.json`. Traer
   Bootstrap significaria 200 KB para usar una rejilla y unos botones, o una
   dependencia de CDN que deja el panel dependiendo de internet en una
   intranet. Para un panel administrativo, este archivo basta.

   La misma razon por la que no hay React, Vue ni SweetAlert2: nada de eso
   estaba ya instalado, y §15 pedia usar el stack existente.

   IDENTIDAD
   ---------
   Los colores salen del tema que la aplicacion movil usa desde la Fase 2
   (`mobile/lib/app/theme/app_colors.dart`), para que panel y aplicacion se
   reconozcan como la misma plataforma. Lo que NO se copia es la forma: la
   aplicacion es una herramienta de bienestar con tarjetas redondeadas y
   color; el panel es una herramienta de trabajo, mas sobrio y mas denso.

   ORGANIZACION
   ------------
   1. Tokens          5. Barra superior
   2. Base            6. Contenido
   3. Iconos          7. Formularios y botones
   4. Barra lateral   8. Paginas sin sesion
   ========================================================================= */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
    /* Marca. Los mismos valores que AppColors en la aplicacion movil. */
    --brand:        #0e7c93;
    --brand-dark:   #075668;
    --brand-soft:   #e6f2f5;

    --ok:      #15803d;
    --warn:    #b45309;
    --danger:  #b91c1c;

    /* Superficies. Mas frias y mas claras que en la aplicacion: aqui se
       pasan horas leyendo tablas, no minutos jugando. */
    --bg:        #f1f5f7;
    --surface:   #ffffff;
    --muted:     #f6f9fa;
    --border:    #dde5e9;
    --border-strong: #c7d5db;

    --text:      #102a33;
    --text-soft: #5b7480;
    --text-on:   #ffffff;

    --radius:    10px;
    --radius-lg: 14px;

    --shadow:    0 1px 2px rgba(16, 42, 51, .06);
    --shadow-lg: 0 12px 32px rgba(16, 42, 51, .14);

    --sidebar-w: 248px;
    --topbar-h:  64px;

    color-scheme: light;
}

/* ------------------------------------------------------------------ 2. Base */
*,
*::before,
*::after { box-sizing: border-box; }

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

body.admin {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a  { color: var(--brand); }

/* Foco visible SIEMPRE. Quitarlo deja el panel inutilizable con teclado,
   y aqui se trabaja mucho con tabulador entre campos de formulario. */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------- 3. Iconos */
/* Dibujados con CSS: mascaras sobre SVG en linea. Sin fuente de iconos y
   sin peticiones extra. `currentColor` los hace heredar el color del texto,
   asi que un icono dentro de un enlace activo se tiñe solo. */
.ico {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background-color: currentColor;
    -webkit-mask: var(--svg) center / contain no-repeat;
    mask: var(--svg) center / contain no-repeat;
}

.ico--grid     { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 3h8v8H3zm10 0h8v5h-8zM3 13h8v8H3zm10-3h8v11h-8z'/%3E%3C/svg%3E"); }
.ico--users    { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9 12a4 4 0 100-8 4 4 0 000 8zm0 2c-3.3 0-7 1.7-7 4v2h14v-2c0-2.3-3.7-4-7-4zm8-2a3 3 0 100-6 3 3 0 000 6zm0 2c-.6 0-1.3.1-1.9.2 1.4.9 2.4 2.1 2.4 3.8v2H23v-2c0-2.1-3.1-4-6-4z'/%3E%3C/svg%3E"); }
.ico--game     { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17 6H7a5 5 0 00-5 5v4a3 3 0 005.6 1.5L9 15h6l1.4 1.5A3 3 0 0022 15v-4a5 5 0 00-5-5zM9 13H7v2H5v-2H3v-2h2V9h2v2h2zm7 1a1 1 0 110-2 1 1 0 010 2zm2-3a1 1 0 110-2 1 1 0 010 2z'/%3E%3C/svg%3E"); }
.ico--calendar { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 2v2H5a2 2 0 00-2 2v13a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2h-2V2h-2v2H9V2zm12 8v9H5v-9z'/%3E%3C/svg%3E"); }
.ico--medal    { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l3 5h-6zm0 6a6 6 0 100 12 6 6 0 000-12zm0 3l1.2 2.4 2.6.4-1.9 1.8.5 2.6-2.4-1.3-2.4 1.3.5-2.6L8.2 13.8l2.6-.4z'/%3E%3C/svg%3E"); }
.ico--flame    { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13 2s1 3-1 5-4 3-4 6a5 5 0 0010 0c0-2-1-3-1-3s3 1 3 5a7 7 0 11-14 0C6 9 13 8 13 2z'/%3E%3C/svg%3E"); }
.ico--gift     { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20 7h-2.2A3 3 0 0012 4.8 3 3 0 006.2 7H4a1 1 0 00-1 1v3h8V8h2v3h8V8a1 1 0 00-1-1zM4 13v7a1 1 0 001 1h6v-8zm9 8h6a1 1 0 001-1v-7h-7z'/%3E%3C/svg%3E"); }
.ico--ticket   { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20 5H4a2 2 0 00-2 2v3a2 2 0 010 4v3a2 2 0 002 2h16a2 2 0 002-2v-3a2 2 0 010-4V7a2 2 0 00-2-2zm-6 2h2v2h-2zm0 4h2v2h-2zm0 4h2v2h-2z'/%3E%3C/svg%3E"); }
.ico--season   { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 10.6l4 2.3-1 1.7-5-2.9V6h2z'/%3E%3C/svg%3E"); }
.ico--trophy   { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18 3V2H6v1H2v3a5 5 0 004.6 5A6 6 0 0011 14.9V18H8v2h8v-2h-3v-3.1A6 6 0 0017.4 11 5 5 0 0022 6V3zM4 6V5h2v4a3 3 0 01-2-3zm16 0a3 3 0 01-2 3V5h2z'/%3E%3C/svg%3E"); }
.ico--chart    { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 20h16v2H2V2h2zm3-3V9h3v8zm5 0V5h3v12zm5 0v-6h3v6z'/%3E%3C/svg%3E"); }
.ico--settings { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 8a4 4 0 100 8 4 4 0 000-8zm9 4l2 1.6-2 3.4-2.4-.8a7.6 7.6 0 01-1.6 1l-.4 2.5h-4l-.4-2.5a7.6 7.6 0 01-1.6-1L8.2 17 6.2 13.6 8.2 12l-2-1.6 2-3.4 2.4.8a7.6 7.6 0 011.6-1L12.6 4h4l.4 2.5a7.6 7.6 0 011.6 1l2.4-.8 2 3.4z'/%3E%3C/svg%3E"); }
.ico--menu     { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z'/%3E%3C/svg%3E"); }
.ico--chevron  { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); }
.ico--logout   { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M10 3H5a2 2 0 00-2 2v14a2 2 0 002 2h5v-2H5V5h5zm6.2 3.6l-1.4 1.4 2 2H8v2h8.8l-2 2 1.4 1.4L21 12z'/%3E%3C/svg%3E"); }
.ico--warn     { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2L1 21h22zm1 15h-2v-2h2zm0-4h-2V8h2z'/%3E%3C/svg%3E"); }
.ico--check    { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); }

/* -------------------------------------------------------- 4. Barra lateral */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 30;
}

.sidebar__head {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
}

.sidebar__close {
    display: none;
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
    color: var(--text-soft);
    cursor: pointer;
    padding: 4px 8px;
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

.brand__mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--brand);
    color: var(--text-on);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .5px;
}

.brand__text   { display: flex; flex-direction: column; min-width: 0; }
.brand__name   { font-size: 14px; line-height: 1.2; }
.brand__company{ font-size: 11px; color: var(--text-soft); white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; }

.sidebar__nav  { flex: 1; overflow-y: auto; padding: 14px 10px 20px; }

.sidebar__group {
    margin: 18px 10px 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--text-soft);
}

.sidebar__list + .sidebar__group { margin-top: 20px; }

.sidebar__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
}

a.sidebar__item:hover { background: var(--muted); }

a.sidebar__item.is-active {
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 600;
}

/* Un modulo que todavia no existe NO es un enlace: es un `span` apagado.
   Ver la nota de `sidebar.php`. */
.sidebar__item.is-pending { color: var(--text-soft); cursor: default; }

.sidebar__foot {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-soft);
}

.tag {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

.tag--soon { margin-left: auto; background: var(--muted); color: var(--text-soft);
             border: 1px solid var(--border); }
.tag--role { background: var(--brand-soft); color: var(--brand-dark); }

/* ------------------------------------------------------- 5. Barra superior */
.shell { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    height: var(--topbar-h);
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar__menu {
    display: none;
    background: none;
    border: 0;
    color: var(--text);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius);
}

.topbar__menu:hover { background: var(--muted); }

.topbar__title { flex: 1; min-width: 0; }
.topbar__title h1 { font-size: 17px; }
.topbar__title p  { font-size: 12.5px; color: var(--text-soft);
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar__user { position: relative; }

.userchip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 5px 8px;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.userchip:hover { background: var(--muted); border-color: var(--border); }

.userchip__avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand);
    color: var(--text-on);
    font-size: 12px;
    font-weight: 700;
}

.userchip__text { display: flex; flex-direction: column; align-items: flex-start; }
.userchip__name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.userchip__role { font-size: 11px; color: var(--text-soft); }

.dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 232px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.dropdown[hidden] { display: none; }

.dropdown__head {
    padding: 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
}

.dropdown__head span:not(.tag) { color: var(--text-soft); }
.dropdown__head .tag { align-self: flex-start; margin-top: 4px; }
.dropdown__form { padding: 10px; }

/* ------------------------------------------------------------ 6. Contenido */
.main { flex: 1; padding: 24px 22px 40px; max-width: 1180px; width: 100%; }

.welcome {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 24px;
    border-radius: var(--radius-lg);
    background: linear-gradient(100deg, var(--brand-dark), var(--brand));
    color: var(--text-on);
    box-shadow: var(--shadow);
}

.welcome__text h2 { font-size: 20px; margin-bottom: 6px; }
.welcome__text p  { font-size: 14px; color: rgba(255, 255, 255, .88); max-width: 62ch; }

.welcome__badge {
    margin-left: auto;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .16);
}

.welcome__badge .ico { width: 26px; height: 26px; flex-basis: 26px; }

.section { margin-top: 30px; }

.section__head { margin-bottom: 14px; }
.section__head h3 { font-size: 15px; }
.section__head p  { font-size: 12.5px; color: var(--text-soft); margin-top: 2px; }

.grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.module {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.module__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    padding: 9px;
    border-radius: var(--radius);
    background: var(--brand-soft);
    color: var(--brand-dark);
    -webkit-mask: none;
    mask: none;
}

/* El icono de la tarjeta usa el mismo dibujo, pero como fondo interior en
   lugar de mascara sobre el bloque entero. */
.module__icon::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask: var(--svg) center / contain no-repeat;
    mask: var(--svg) center / contain no-repeat;
}

.module__body h4 { font-size: 14px; }
.module__body p  { font-size: 12.5px; color: var(--text-soft); margin-top: 3px; }

/* Los modulos pendientes se apagan, pero siguen legibles: la idea es que se
   vea QUE va a haber, no esconderlo. */
.module--soon { background: var(--muted); }
.module--soon .module__icon { background: #e9eef1; color: var(--text-soft); }
.module--soon .tag--soon { margin-left: auto; align-self: center; }

.status {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.status__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 16px;
    font-size: 13.5px;
}

.status__row + .status__row { border-top: 1px solid var(--border); }
.status dt { color: var(--text-soft); }
.status dd { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.dot--ok      { background: var(--ok); }
.dot--warn    { background: var(--warn); }
.dot--danger  { background: var(--danger); }
.dot--neutral { background: var(--border-strong); }
.dot--soft    { background: var(--warn); }

.footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-soft);
}

/* --------------------------------------------- 7. Formularios y botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.btn--block   { width: 100%; }
.btn--primary { background: var(--brand); color: var(--text-on); }
.btn--primary:hover { background: var(--brand-dark); }
.btn--ghost   { background: none; color: var(--text); border-color: var(--border); }
.btn--ghost:hover { background: var(--muted); }

.form  { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }

.field label { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }

.field input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    font: inherit;
    font-size: 15px;
    color: var(--text);
}

.field input:focus { border-color: var(--brand); }

.field__group { position: relative; display: flex; }
.field__group input { padding-right: 60px; }

.field__toggle {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: var(--muted);
    color: var(--text-soft);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 16px;
    padding: 11px 13px;
    border-radius: var(--radius);
    font-size: 13px;
    border: 1px solid;
}

.alert--error { background: #fdf0ef; border-color: #f2c9c6; color: #8e201b; }
.alert--info  { background: #eef7f0; border-color: #c8e3cf; color: #14532d; }
.alert .ico   { margin-top: 1px; }

/* --------------------------------------------------- 8. Paginas sin sesion */
body.admin--centered { display: grid; place-items: center; padding: 24px 16px; }

.centered { width: 100%; max-width: 400px; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 28px;
}

.card__brand  { margin-bottom: 22px; }
.card__title  { font-size: 19px; }
.card__lead   { font-size: 13.5px; color: var(--text-soft); margin-top: 5px; }

.card__note {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-soft);
    text-align: center;
}

.card--error { text-align: center; }

.card__code {
    display: inline-block;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--brand);
    margin-bottom: 12px;
}

.card--error .btn { margin-top: 20px; }

/* ------------------------------------------------------------ Responsive */
/* El uso principal es escritorio. En tablet y movil la barra lateral deja de
   ocupar sitio y se abre por encima del contenido. */
.backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 42, 51, .45);
    z-index: 25;
}

.backdrop[hidden] { display: none; }

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-lg);
    }

    .sidebar.is-open   { transform: none; }
    .sidebar__close    { display: block; }
    .shell             { margin-left: 0; }
    .topbar__menu      { display: inline-flex; }
}

@media (max-width: 640px) {
    .main            { padding: 18px 16px 32px; }
    .topbar          { padding: 0 14px; gap: 10px; }
    .userchip__text  { display: none; }
    .welcome         { flex-direction: column; align-items: flex-start; }
    .welcome__badge  { margin-left: 0; }
    .footer          { flex-direction: column; gap: 4px; }
    .grid            { grid-template-columns: 1fr; }
}

/* Quien pide menos movimiento en su sistema no quiere que el menu se
   deslice. Aparece y desaparece sin transicion. */
@media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
}

/* =========================================================================
   FASE 15.2 · Usuarios, roles y permisos
   =========================================================================
   Todo lo de aqui se apoya en los tokens y los componentes de la 15.1: los
   mismos colores, los mismos radios, los mismos botones. No hay una segunda
   plantilla ni un segundo sistema de espaciado.
   ========================================================================= */

/* ------------------------------------------------------ Solo para lectores */
/* Etiqueta que no se ve pero que un lector de pantalla si anuncia. Se usa en
   las cabeceras de columna sin texto y en los campos del buscador, donde el
   `placeholder` NO sirve como etiqueta: desaparece al escribir. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------- Barra de acciones */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.toolbar__lead { flex: 1; min-width: 240px; font-size: 13px; color: var(--text-soft); }

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 260px;
}

.filters__search { flex: 1; min-width: 200px; }

.filters input[type="search"],
.filters select {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    font: inherit;
    font-size: 14px;
    color: var(--text);
}

.filters__field select { min-width: 150px; }
.filters input:focus,
.filters select:focus { border-color: var(--brand); }

/* ------------------------------------------------------------- Tablas */
/* `overflow-x` en el envoltorio y no en la pagina: si desbordara el body,
   toda la interfaz se desplazaria de lado, incluida la barra superior. Asi
   solo se desplaza la tabla, que es lo ancho. */
.table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.table th,
.table td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: middle;
}

.table thead th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-soft);
    background: var(--muted);
    white-space: nowrap;
}

.table thead th a { color: inherit; text-decoration: none; }
.table thead th a:hover { color: var(--brand); }

.table tbody tr + tr { border-top: 1px solid var(--border); }
.table tbody tr:hover { background: var(--muted); }

.table__actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.table__actions form { margin: 0; }

.cell-sub {
    display: block;
    font-size: 11.5px;
    color: var(--text-soft);
    margin-top: 2px;
}

.mono {
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: 12.5px;
}

.muted { color: var(--text-soft); }

/* ---------------------------------------------------------- Pastillas */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid;
}

.badge--ok     { background: #eef7f0; border-color: #c8e3cf; color: #14532d; }
.badge--danger { background: #fdf0ef; border-color: #f2c9c6; color: #8e201b; }
.badge--muted  { background: var(--muted); border-color: var(--border); color: var(--text-soft); }
/* Borrador (FASE 15.4): ni publicado ni retirado. Ambar, para que se
   distinga de un gris de «apagado» y se lea como «falta un paso». */
.badge--soft   { background: #fdf6ec; border-color: #f0dcbd; color: #7c4a03; }

/* ------------------------------------------------------ Botones extra */
.btn--sm     { min-height: 32px; padding: 0 11px; font-size: 12.5px; }
.btn--plain  { background: none; color: var(--text-soft); }
.btn--plain:hover { background: var(--muted); color: var(--text); }
.btn--danger { background: none; border-color: #f2c9c6; color: #8e201b; }
.btn--danger:hover { background: #fdf0ef; }

/* -------------------------------------------------------- Formularios */
.card--form { padding: 22px; }

.form-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.form-grid--single { grid-template-columns: minmax(0, 520px); }

.field__hint  { font-size: 11.5px; color: var(--text-soft); margin-top: 5px; }
.field__error { font-size: 12px; color: var(--danger); margin-top: 5px; font-weight: 600; }

.field.has-error input,
.field.has-error select { border-color: var(--danger); }

.field select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    font: inherit;
    font-size: 15px;
    color: var(--text);
}

.field select:disabled,
.field input:disabled {
    background: var(--muted);
    color: var(--text-soft);
    cursor: not-allowed;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

/* ----------------------------------------------------------- Permisos */
.perms { padding: 0; margin-bottom: 14px; overflow: hidden; }

.perms__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    background: var(--muted);
    border-bottom: 1px solid var(--border);
}

.perms__head h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-soft);
}

.perms__list { padding: 6px 0; }
.perm + .perm { border-top: 1px solid var(--border); }

/* El `label` envuelve la casilla y el texto: asi el area pulsable es toda la
   fila y no un cuadrado de 16 px. */
.perm__label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    cursor: pointer;
}

.perm__label:hover { background: var(--muted); }
.perm__label input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--brand); }
.perm__label input:disabled { cursor: not-allowed; }

.perm__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.perm__desc { font-size: 12.5px; color: var(--text-soft); }
.perm__code { font-size: 11.5px; color: var(--text-soft); }

/* -------------------------------------------------------------- Notas */
.note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    margin: 18px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-soft);
}

.note .ico { margin-top: 2px; color: var(--brand); flex-shrink: 0; }

/* ---------------------------------------------------------- Sin datos */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 56px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.empty .ico { width: 34px; height: 34px; flex-basis: 34px; color: var(--border-strong); }
.empty h3 { font-size: 15px; }
.empty p  { font-size: 13px; color: var(--text-soft); }

/* -------------------------------------------------------- Paginacion */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.pager__count { font-size: 12.5px; color: var(--text-soft); }
.pager__list  { display: flex; gap: 4px; align-items: center; }

.pager__link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
}

.pager__link:hover { background: var(--muted); }
.pager__link.is-current {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--text-on);
    font-weight: 600;
}
.pager__link.is-disabled { color: var(--border-strong); cursor: default; }

/* ------------------------------------------------------- Confirmacion */
.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(16, 42, 51, .5);
}

.modal[hidden] { display: none; }

.modal__box {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 24px;
}

.modal__box h3 { font-size: 16px; margin-bottom: 8px; }
.modal__box p  { font-size: 13.5px; color: var(--text-soft); }

.modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* -------------------------------------------------------- Iconos 15.2 */
.ico--shield { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5zm0 3.3L6 7.4V11c0 3.8 2.4 7.2 6 8.6 3.6-1.4 6-4.8 6-8.6V7.4z'/%3E%3C/svg%3E"); }
.ico--key    { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M14 2a8 8 0 00-7.6 10.5L2 17v5h5v-2h2v-2h2l2.2-2.2A8 8 0 1014 2zm3 6a2 2 0 110-4 2 2 0 010 4z'/%3E%3C/svg%3E"); }

/* =================================================== Juegos (Fase 15.3) */
/* Todo lo de aqui son piezas GENERICAS con nombres genericos —`.stats`,
   `.deflist`, `.steps`—, no `.game-stats` ni `.game-deflist`. La ficha de
   una actividad o de un premio va a necesitar exactamente lo mismo, y un
   nombre atado a «juegos» obligaria a copiarlo con otro prefijo. */

/* Cabecera de seccion con algo a la derecha (una pastilla de estado, por
   ejemplo).

   Va como MODIFICADOR y no en `.section__head` a secas: el escritorio pone
   ahi un titulo con su linea de apoyo debajo, y volver flex el bloque base
   los habria puesto uno al lado del otro. */
.section__head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.section__head h2 { font-size: 15px; }

/* Subtitulo dentro de una tarjeta o un formulario. No es `.section__head`
   porque no encabeza una seccion de la pagina, sino un bloque dentro de
   ella, y no debe llevar su separacion. */
.form-section {
    margin: 26px 0 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}

.card--form .form-section:first-of-type { margin-top: 22px; }

/* Cifras. `auto-fit` y no un numero fijo de columnas: cuatro topes y seis
   estadisticas comparten esta rejilla, y fijar tres columnas dejaria la
   ultima fila con un hueco en una de las dos. */
.stats {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* `break-word` porque una de las celdas lleva una fecha con hora y otra un
   numero de cuatro cifras: sin esto, la fecha desborda la tarjeta en 360 px. */
.stat__value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    overflow-wrap: break-word;
}

.stat__label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--text-soft);
}

/* Ficha de datos: etiqueta arriba, valor debajo. En una tabla de dos
   columnas la etiqueta y el valor se separan tanto en pantalla ancha que
   cuesta emparejarlos. */
.deflist {
    display: grid;
    gap: 14px 20px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.deflist > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.deflist__wide { grid-column: 1 / -1; }

.deflist dt {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--text-soft);
}

.deflist dd { font-size: 14px; color: var(--text); overflow-wrap: break-word; }

/* Los pasos de «como se juega». Numerados por el navegador: el texto
   guardado NO lleva el numero, asi reordenarlos no obliga a reescribirlos. */
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.steps li { font-size: 14px; color: var(--text); }

/* Aviso que pide atencion sin llegar a ser un error. El borde izquierdo es
   lo que cambia; el resto lo hereda de `.note`. */
.note--warn { border-left-color: var(--warn); }
.note--warn .ico { color: var(--warn); }

/* Botones a la derecha de la barra de acciones. */
.toolbar__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Un area de texto se estira; un `input` no. Por eso va aparte y con
   `resize: vertical`: en horizontal se saldria de la rejilla. */
.field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    resize: vertical;
}

.field textarea:focus { border-color: var(--brand); }
.field.has-error textarea { border-color: var(--danger); }


/* ---------------------------------------------------------- Responsive */
/* En movil la tabla deja de ser tabla: cada fila se apila en tarjeta y cada
   celda lleva delante su cabecera, que viene de `data-label`. Es la unica
   forma de que siete columnas se lean en 360 px sin desplazar la pagina de
   lado.

   Las columnas marcadas `is-optional` se ocultan antes: el correo y la fecha
   de alta no hacen falta para reconocer a alguien en una pantalla estrecha. */
@media (max-width: 900px) {
    .table .is-optional { display: none; }
}

@media (max-width: 640px) {
    .table-wrap { border: 0; background: none; box-shadow: none; overflow: visible; }
    .table thead { display: none; }

    .table,
    .table tbody,
    .table tr,
    .table td { display: block; width: 100%; }

    .table tr {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        margin-bottom: 10px;
        padding: 6px 0;
    }

    .table tbody tr + tr { border-top: 1px solid var(--border); }

    .table td {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 8px 14px;
        text-align: right;
    }

    .table td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: var(--text-soft);
        text-align: left;
        flex-shrink: 0;
    }

    .table__actions { justify-content: flex-end; padding-top: 10px; }
    .table__actions::before { content: none; }

    .form-actions { flex-direction: column-reverse; }
    .form-actions .btn { width: 100%; }
}


/* ======================================================= 12. Escritorio
   FASE 15.8. Nada de esto es una libreria: son las mismas variables, los
   mismos radios y las mismas sombras que el resto del panel.

   Las barras de «mas jugados» son un `span` con un `width` en porcentaje.
   Un grafico de tres valores no justifica descargar una libreria de
   graficos, y una que no se descarga no puede romperse ni quedarse
   desactualizada. */

/* Dos columnas que se apilan. Se usa para los pares de tarjetas del
   escritorio: temporada + podio, juegos + actividades, premios +
   insignias. `minmax(0, 1fr)` y no `1fr` a secas: sin el minimo en cero,
   una tabla o un nombre largo dentro de la columna la ensancha y la
   rejilla desborda. */
.split {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* --- Avisos ---------------------------------------------------------- */

/* Se llaman `notice` y no `alert` a proposito: `.alert` ya existe desde la
   Fase 15.2 para los mensajes de resultado de un formulario. Dos cosas
   distintas con el mismo nombre acaban peleandose por el mismo selector. */
.notices {
    display: grid;
    gap: 10px;
    list-style: none;
}

.notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* El borde de la izquierda da el tono. El numero repite el color, pero el
   aviso SIEMPRE lleva su titulo y su explicacion: quien no distinga el
   ambar del rojo lee exactamente la misma informacion. Mismo criterio que
   `partials/status-badge.php`. */
.notice--danger { border-left-color: var(--danger); }
.notice--warn   { border-left-color: var(--warn); }
.notice--info   { border-left-color: var(--brand); }

.notice__count {
    flex-shrink: 0;
    min-width: 44px;
    padding: 4px 8px;
    border-radius: var(--radius);
    background: var(--muted);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.notice--danger .notice__count { background: #fdf0ef; color: #8e201b; }
.notice--warn   .notice__count { background: #fdf6ec; color: #7c4a03; }
.notice--info   .notice__count { background: var(--brand-soft); color: var(--brand-dark); }

.notice__body h4 { font-size: 14px; }
.notice__body p  { font-size: 12.5px; color: var(--text-soft); margin-top: 3px; }

/* --- Cifras ---------------------------------------------------------- */

/* La tercera linea de una tarjeta de cifra: el contexto que evita la
   pregunta «¿de cuando es este numero?». */
.stat__hint {
    font-size: 11.5px;
    color: var(--text-soft);
    line-height: 1.45;
}

/* Aclaracion dentro de una fila de `dl.status`. En bloque y no en linea:
   pegada al valor competiria con el, y lo que tiene que resaltar es la
   cifra. */
.status__note {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-soft);
    margin-top: 2px;
}

/* La lista de origenes del libro mayor son seis filas de etiqueta y
   numero: en pantalla ancha caben en dos columnas sin que ninguna quede
   tan larga que cueste emparejar el valor con su nombre. */
.status--split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 0 24px;
}

.status--split .status__row:nth-child(-n+2) { border-top: 0; }

/* --- Tarjetas del escritorio ----------------------------------------- */

.card__heading {
    font-size: 14px;
    margin-bottom: 12px;
}

.card__empty,
.card--empty p {
    font-size: 13px;
    color: var(--text-soft);
    padding: 12px 0;
}

/* --- Barras ---------------------------------------------------------- */

.bars__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-top: 18px;
    margin-bottom: 10px;
}

.bars {
    display: grid;
    gap: 9px;
    list-style: none;
}

/* Tres columnas: nombre, barra y cifra. El nombre se corta con puntos
   suspensivos en lugar de partir la fila en dos, y la cifra va a la
   derecha con ancho fijo para que las tres queden alineadas. */
.bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px auto;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.bar__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar__track {
    height: 8px;
    border-radius: 999px;
    background: var(--muted);
    border: 1px solid var(--border);
    overflow: hidden;
}

.bar__fill {
    display: block;
    height: 100%;
    background: var(--brand);
    border-radius: 999px;
}

.bar__count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 34px;
    text-align: right;
}

/* --- Podio ----------------------------------------------------------- */

.podium { list-style: none; }

.podium__row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: 13.5px;
}

.podium__row + .podium__row { border-top: 1px solid var(--border); }

.podium__pos {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--muted);
    border: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-soft);
}

/* Solo el primero se destaca. Marcar los tres con colores distintos
   convierte una lista en un concurso y esta pantalla es de supervision. */
.podium__row:first-child .podium__pos {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--text-on);
}

.podium__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podium__pts {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- Actividad reciente ---------------------------------------------- */

.feed { list-style: none; }

.feed__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 13px;
}

.feed__row + .feed__row { border-top: 1px solid var(--border); }

.feed__body { min-width: 0; }

.feed__who {
    display: block;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed__what {
    display: block;
    font-size: 12px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El signo va delante del numero ademas del color: «+40» y «−500» se
   distinguen leyendolos, no solo mirandolos. */
.feed__amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.feed__amount--in  { color: var(--ok); }
.feed__amount--out { color: var(--danger); }

.feed__when {
    font-size: 11.5px;
    color: var(--text-soft);
    white-space: nowrap;
}

/* --- Tarjetas de modulo que ya son enlaces --------------------------- */

/* Desde la 15.8 los modulos construidos llevan a su pantalla. Los que
   siguen pendientes se quedan como estaban: apagados y SIN enlace, porque
   un enlace a un 404 hace pensar que algo se rompio. */
.module--link {
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.module--link:hover,
.module--link:focus-visible {
    border-color: var(--brand);
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .module--link { transition: none; }
    .module--link:hover,
    .module--link:focus-visible { transform: none; }
}

/* --- Estrecho -------------------------------------------------------- */

@media (max-width: 640px) {
    /* La fecha se cae: en 360 px la fila del movimiento ya lleva el nombre,
       la descripcion y el importe, y la hora exacta es lo menos util de
       los cuatro. El orden de llegada se sigue leyendo en la lista. */
    .feed__when { display: none; }

    .feed__row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    /* La barra se estrecha antes que el nombre: comparar tres valores
       funciona igual con 56 px que con 96. */
    .bar { grid-template-columns: minmax(0, 1fr) 56px auto; }

    .notice { gap: 10px; padding: 12px 13px; }
    .notice__count { min-width: 38px; font-size: 17px; }
}

/* ======================================================= 13. Auditoria
   FASE 15.9. Tres reglas: el resto de la pantalla se dibuja con lo que ya
   habia —`.table`, `.filters`, `.deflist`, `.badge`, `.notice`, `.split`—. */

/* Etiqueta visible dentro de la barra de filtros. Las demas van con
   `.sr-only` porque el `placeholder` ya dice lo que son, pero un
   `<input type="date">` sale vacio y sin rotulo no se sabe si es el desde o
   el hasta. */
.filters__inline {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-soft);
    margin-right: 6px;
    white-space: nowrap;
}

/* La cadena del navegador es una linea de 120 caracteres sin espacios
   utiles. Sin esto, estira la tarjeta y rompe la rejilla de dos columnas. */
.deflist__long {
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* La fila de un campo que cambio entre el antes y el despues.
   El fondo NO es la unica señal: la tabla enseña los dos valores uno al
   lado del otro, asi que el cambio se lee aunque no se distinga el color.
   Mismo criterio que `partials/status-badge.php`. */
.is-changed { background: #fdf6ec; }
.is-changed td:first-child code { font-weight: 700; }