/* ============================================================================
   Grupo Mayer OS — tokens y componentes compartidos
   Los cinco valores de marca bajo «Marca» son oficiales y no se modifican.
   ----------------------------------------------------------------------------
   ESTE ARCHIVO ES UNA COPIA DE `diseno/tokens.css`, que es la fuente. Se
   refresca desde allá, y EN EL MISMO PASO se auditan las plantillas: los
   nombres de clase viven en los dos sitios y separarlos deja la pantalla sin
   estilo sin que falle nada. Al final van los añadidos del puerto.
   ========================================================================== */
/* Mapa de clases para portar las plantillas de Django que usan los nombres anteriores:
 * | anterior                 | nuevo                  |
 * | .queue-heading           | .gm-page-heading       |
 * | .queue-kicker            | .gm-page-kicker        |
 * | .queue-principle         | .gm-notice             |
 * | .queue-metrics           | .gm-metrics            |
 * | .metric-card             | .gm-card               |
 * | .queue-panel             | .gm-panel              |
 * | .queue-panel-head        | .gm-panel-head         |
 * | .queue-panel-title       | .gm-panel-title        |
 * | .queue-live              | .gm-live               |
 * | .queue-filters           | .gm-filters            |
 * | .queue-table-wrap        | .gm-table-wrap         |
 * | .queue-table             | .gm-table              |
 * | .queue-empty             | .gm-empty              |
 * | .queue-table-footer      | .gm-table-footer       |
 * | .queue-footer-note       | .gm-footer-note        |
 * | .queue-footnote           | .gm-footnote            |
 * | .state--contact          | .state--contactado     |
 * | .state--waiting          | .state--en_espera      |
 * | .state--invalid          | .state--datos_invalidos|
 * | .state--coordinated      | .state--coordinado     |
 * | .state--closed           | .state--cerrada        |
 * | .priority--critical      | .priority--critica     |
 * | .priority--high          | .priority--alta        |
 * Las clases .state--por_contactar, .state--contactado, .state--coordinado,
 * .state--en_ruta, .state--en_espera, .state--datos_invalidos, .state--cerrada
 * y .priority--critica, .priority--alta, .priority--normal se conservan tal cual
 * porque sus sufijos proceden del modelo de datos.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;1,400&display=swap');

:root {
  color-scheme: light;

  /* Marca oficial — no cambiar */
  --navy-deep: #021B3A;
  --azul-oscuro: #032752;
  --azul: #0048AC;
  --azul-claro: #F4F7FC;
  --azul-marca: #6FA8FF;

  /* Neutros y estados de marca */
  --gray: #72757E;
  --gris-borde: #D8DEE3;
  --blanco: #FFFFFF;
  --verde-ok: #1A7A4C;
  --rojo-error: #B3261E;
  --ambar-aviso: #9A5B06;

  /* Tokens semánticos de interfaz */
  --canvas: #F4F7FB;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-subtle: #F7F9FC;
  --surface-blue: #EFF5FF;
  --text-primary: #15243A;
  --text-secondary: #526176;
  --text-muted: #718096;
  --border: #E2E8F0;
  --border-strong: #CAD4E0;
  --blue-hover: #003B91;
  --blue-soft: #E9F1FF;
  --success: #1A7A4C;
  --success-bg: #E8F5EE;
  --warning: #8A5000;
  --warning-bg: #FFF3D8;
  --danger: #A32C26;
  --danger-bg: #FCEBE9;
  --neutral-bg: #EDF1F6;
  --focus-ring: #4C91FF;
  --shadow-sm: 0 1px 2px rgb(16 35 64 / 6%), 0 1px 3px rgb(16 35 64 / 4%);
  --shadow-md: 0 12px 32px rgb(16 35 64 / 16%);

  /* Forma, espacio y tipografía */
  --radio: 8px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --toque: 44px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
  --sidebar-width: 248px;
  --content-max: 1480px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --azul: #74AAFF;
  --azul-claro: #16233A;
  --gris-borde: #24344F;
  --blanco: #0D1524;
  --gray: #A5B0C1;
  --canvas: #0A1220;
  --surface: #101B2B;
  --surface-raised: #142137;
  --surface-subtle: #0E1929;
  --surface-blue: #142B4C;
  --text-primary: #ECF2FA;
  --text-secondary: #BDCADB;
  --text-muted: #91A2B8;
  --border: #263750;
  --border-strong: #3A4E6B;
  --blue-hover: #9AC0FF;
  --blue-soft: #172D4B;
  --success: #80D4A5;
  --success-bg: #153629;
  --warning: #F3C46F;
  --warning-bg: #382B18;
  --danger: #F3A29B;
  --danger-bg: #3B2225;
  --neutral-bg: #202D40;
  --focus-ring: #8AB8FF;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 20%);
  --shadow-md: 0 12px 32px rgb(0 0 0 / 34%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --azul: #74AAFF;
    --azul-claro: #16233A;
    --gris-borde: #24344F;
    --blanco: #0D1524;
    --gray: #A5B0C1;
    --canvas: #0A1220;
    --surface: #101B2B;
    --surface-raised: #142137;
    --surface-subtle: #0E1929;
    --surface-blue: #142B4C;
    --text-primary: #ECF2FA;
    --text-secondary: #BDCADB;
    --text-muted: #91A2B8;
    --border: #263750;
    --border-strong: #3A4E6B;
    --blue-hover: #9AC0FF;
    --blue-soft: #172D4B;
    --success: #80D4A5;
    --success-bg: #153629;
    --warning: #F3C46F;
    --warning-bg: #382B18;
    --danger: #F3A29B;
    --danger-bg: #3B2225;
    --neutral-bg: #202D40;
    --focus-ring: #8AB8FF;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 20%);
    --shadow-md: 0 12px 32px rgb(0 0 0 / 34%);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; color: var(--text-primary); background: var(--canvas); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, select { color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
::selection { color: #fff; background: var(--azul); }

.marca { color: var(--text-primary); font-family: var(--font); font-weight: 750; letter-spacing: -.035em; text-decoration: none; }
.marca span { color: var(--azul-marca); }
.gm-brand-link { display: inline-flex; width: max-content; max-width: 100%; align-items: center; padding: 0; border-radius: var(--radius-sm); background: transparent; text-decoration: none; }
.gm-brand-full { display: block; width: 184px; max-width: 100%; height: auto; object-fit: contain; }
.gm-brand-icon { display: block; width: 29px; height: auto; object-fit: contain; }
.gm-mobile-brand { display: none; }
.acento-serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.cifra, .tabular { font-variant-numeric: tabular-nums lining-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-150%); border-radius: var(--radius-sm); color: #fff; background: var(--navy-deep); }
.skip-link:focus { transform: translateY(0); }

/* Shell de aplicación */
.gm-app { min-height: 100vh; }
.gm-sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; display: flex; width: var(--sidebar-width); flex-direction: column; padding: 25px 16px 18px; border-right: 1px solid var(--border); background: var(--surface); }
.gm-brand { display: inline-flex; align-items: baseline; padding: 0 12px; font-size: 21px; }
.gm-sidebar-context { display: flex; gap: 11px; align-items: center; margin: 29px 4px 24px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-subtle); }
.gm-avatar { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid rgb(0 72 172 / 12%); border-radius: 50%; color: var(--azul); background: var(--blue-soft); font-size: 12px; font-weight: 750; }
.gm-sidebar-context strong, .gm-sidebar-context span { display: block; }
.gm-sidebar-context strong { font-size: 12px; }
.gm-sidebar-context span { margin-top: 2px; color: var(--text-muted); font-size: 11px; }
.gm-nav { display: grid; gap: 4px; }
.gm-nav-label { margin: 16px 12px 7px; color: var(--text-muted); font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.gm-nav-label:first-child { margin-top: 0; }
.gm-nav-link { display: flex; min-height: 42px; gap: 12px; align-items: center; padding: 0 12px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13px; font-weight: 550; text-decoration: none; transition: background .15s ease, color .15s ease; }
.gm-nav-link:hover { color: var(--text-primary); background: var(--surface-subtle); }
.gm-nav-link[aria-current="page"] { color: var(--azul); background: var(--blue-soft); font-weight: 700; }
.gm-nav-link svg { width: 18px; height: 18px; flex: 0 0 auto; }
.gm-access-note { display: flex; gap: 9px; margin: auto 4px 0; padding: 12px 10px 0; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.gm-access-note svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.gm-workspace { min-height: 100vh; margin-left: var(--sidebar-width); }
.gm-topbar { position: sticky; z-index: 10; top: 0; display: flex; height: 64px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 34px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); }
.gm-breadcrumb { display: flex; gap: 9px; align-items: center; color: var(--text-muted); font-size: 12px; }
.gm-breadcrumb strong { color: var(--text-secondary); font-weight: 600; }
.gm-top-actions { display: flex; align-items: center; gap: 12px; }
.gm-theme-toggle { display: inline-flex; min-height: 36px; gap: 8px; align-items: center; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--surface); font-size: 12px; font-weight: 600; }
.gm-theme-toggle:hover { border-color: var(--border-strong); background: var(--surface-subtle); }
.gm-theme-toggle svg { width: 16px; height: 16px; }
.gm-top-user { display: flex; gap: 9px; align-items: center; padding-left: 12px; border-left: 1px solid var(--border); }
.gm-top-user .gm-avatar { width: 32px; height: 32px; }
.gm-top-user span { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.gm-main { width: min(100%, var(--content-max)); margin: 0 auto; padding: 34px 36px 52px; }

/* Bandeja de coordinación */
.gm-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.gm-page-kicker { margin: 0 0 8px; color: var(--azul); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gm-page-heading h1 { margin: 0; color: var(--text-primary); font-size: clamp(25px, 2.2vw, 32px); font-weight: 700; letter-spacing: -.045em; line-height: 1.18; }
.gm-page-heading p { max-width: 680px; margin: 8px 0 0; color: var(--text-secondary); font-size: 14px; }
.sample-badge { display: inline-flex; flex: 0 0 auto; gap: 7px; align-items: center; padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); background: var(--surface); font-size: 11px; font-weight: 600; }
.sample-badge::before { width: 7px; height: 7px; border-radius: 50%; background: var(--azul); content: ''; }
.gm-notice { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--azul); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--surface); font-size: 12px; }
.gm-notice svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--azul); }
.gm-notice strong { color: var(--text-primary); }

.gm-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.gm-card { min-width: 0; min-height: 106px; padding: 15px 16px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); background: var(--surface); text-align: left; box-shadow: var(--shadow-sm); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.gm-card:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.gm-card[aria-pressed="true"] { border-color: var(--azul); box-shadow: 0 0 0 2px color-mix(in srgb, var(--azul) 16%, transparent); }
.gm-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-label { color: var(--text-secondary); font-size: 11px; font-weight: 650; }
.metric-icon { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: var(--azul); background: var(--blue-soft); }
.metric-icon svg { width: 15px; height: 15px; }
.gm-card[data-filter="alert"] .metric-icon, .gm-card[data-filter="Datos inválidos"] .metric-icon { color: var(--danger); background: var(--danger-bg); }
.metric-number { display: block; margin-top: 7px; font-size: 27px; font-weight: 750; letter-spacing: -.045em; line-height: 1; }
.metric-caption { display: block; margin-top: 5px; color: var(--text-muted); font-size: 10px; }
.gm-card[data-filter="En espera"] .metric-number { color: var(--warning); }
.gm-card[data-filter="alert"] .metric-number, .gm-card[data-filter="Datos inválidos"] .metric-number { color: var(--danger); }

.gm-panel { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.gm-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px 16px; }
.gm-panel-title h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.gm-panel-title p { margin: 4px 0 0; color: var(--text-muted); font-size: 11px; }
.gm-live { display: inline-flex; gap: 7px; align-items: center; color: var(--text-secondary); font-size: 11px; }
.gm-live::before { width: 7px; height: 7px; border-radius: 50%; background: var(--success); content: ''; }
.gm-filters { display: grid; grid-template-columns: minmax(220px, 1.7fr) repeat(3, minmax(135px, 1fr)) auto; gap: 9px; align-items: end; padding: 0 22px 17px; }
.filter-field { display: grid; min-width: 0; gap: 5px; }
.filter-field label { color: var(--text-secondary); font-size: 10px; font-weight: 700; }
.filter-control { width: 100%; min-height: 38px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-primary); background: var(--surface); font-size: 12px; }
.filter-control::placeholder { color: var(--text-muted); }
.filter-control:hover { border-color: var(--text-muted); }
.search-control-wrap { position: relative; }
.search-control-wrap svg { position: absolute; top: 50%; left: 11px; width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.search-control-wrap input { padding-left: 35px; }
.filter-reset { min-height: 38px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); color: var(--azul); background: transparent; font-size: 11px; font-weight: 700; white-space: nowrap; }
.filter-reset:hover { background: var(--blue-soft); }
.gm-filters-reset { margin: 0; padding: 0 22px 14px; }
.gm-filters-reset a { display: inline-flex; align-items: center; }
.gm-table-wrap { overflow-x: auto; border-top: 1px solid var(--border); }
.gm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; text-align: left; }
.gm-table th { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); background: var(--surface-subtle); font-size: 9px; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
.gm-table th:first-child, .gm-table td:first-child { padding-left: 22px; }
.gm-table th:last-child, .gm-table td:last-child { padding-right: 22px; }
.gm-table td { padding: 13px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: middle; }
.gm-table tbody tr:last-child td { border-bottom: 0; }
.gm-table tbody tr:hover td { background: var(--surface-subtle); }
.gm-table .priority-cell { width: 102px; }
.priority { display: inline-flex; gap: 6px; align-items: center; font-size: 10px; font-weight: 750; white-space: nowrap; }
.priority::before { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); content: ''; }
.priority--critica { color: var(--danger); }
.priority--critica::before { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.priority--alta { color: var(--warning); }
.priority--alta::before { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); }
.priority--normal { color: var(--text-secondary); }
.priority--normal::before { background: var(--text-muted); }
.order-main { min-width: 200px; }
.order-folio { display: block; color: var(--azul); font-size: 10px; font-weight: 750; letter-spacing: .01em; }
.order-client { display: block; max-width: 280px; margin-top: 3px; overflow-wrap: anywhere; color: var(--text-primary); font-size: 12px; font-weight: 650; line-height: 1.35; }
.product-main { display: block; min-width: 130px; max-width: 185px; color: var(--text-primary); font-size: 11px; font-weight: 600; }
.product-sub { display: block; margin-top: 4px; color: var(--text-muted); font-size: 10px; }
.state-pill { display: inline-flex; align-items: center; max-width: 130px; padding: 5px 8px; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1.2; }
.state--contactado { color: var(--azul); border-color: color-mix(in srgb, var(--azul) 16%, transparent); background: var(--blue-soft); }
.state--en_espera { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 20%, transparent); background: var(--warning-bg); }
.state--datos_invalidos { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 18%, transparent); background: var(--danger-bg); }
.state--coordinado, .state--cerrada { color: var(--success); border-color: color-mix(in srgb, var(--success) 20%, transparent); background: var(--success-bg); }
.cascade-cell { min-width: 175px; max-width: 230px; }
.cascade-main { display: block; color: var(--text-primary); font-size: 11px; font-weight: 600; }
.cascade-sub { display: block; margin-top: 3px; color: var(--text-muted); font-size: 10px; line-height: 1.4; }
.cascade-sub.alert-copy { color: var(--danger); }
.days-cell { min-width: 85px; white-space: nowrap; }
.day-count { display: block; color: var(--text-primary); font-size: 12px; font-weight: 700; }
.day-caption { display: block; margin-top: 2px; color: var(--text-muted); font-size: 9px; }
.row-open { min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--surface); font-size: 10px; font-weight: 700; white-space: nowrap; }
.row-open:hover { border-color: var(--azul); color: var(--azul); background: var(--blue-soft); }
.gm-empty { padding: 34px 16px; color: var(--text-secondary); text-align: center; }
.gm-empty strong { display: block; margin-bottom: 4px; color: var(--text-primary); }
.gm-table-footer { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 22px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 10px; }
.gm-footer-note { display: flex; gap: 7px; align-items: center; }
.gm-footer-note svg { width: 14px; height: 14px; }
.pager { display: flex; gap: 6px; align-items: center; }
.pager button { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); background: var(--surface); }
.pager button:disabled { cursor: not-allowed; opacity: .45; }
.pager span { margin: 0 3px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.gm-footnote { margin: 12px 2px 0; color: var(--text-muted); font-size: 10px; }

/* Diálogo informativo de orden */
.order-dialog { width: min(510px, calc(100vw - 32px)); max-width: none; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text-primary); background: var(--surface); box-shadow: var(--shadow-md); }
.order-dialog::backdrop { background: rgb(7 17 31 / 52%); backdrop-filter: blur(2px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px 14px; border-bottom: 1px solid var(--border); }
.dialog-head h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.dialog-folio { display: block; margin-bottom: 4px; color: var(--azul); font-size: 10px; font-weight: 750; }
.dialog-close { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border); border-radius: 7px; color: var(--text-secondary); background: var(--surface); }
.dialog-body { padding: 18px 22px 22px; }
.dialog-client { margin: 0 0 16px; font-size: 14px; font-weight: 700; }
.dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.dialog-field { padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.dialog-field-wide { grid-column: 1 / -1; }
.dialog-field span { display: block; color: var(--text-muted); font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.dialog-field strong { display: block; margin-top: 5px; color: var(--text-primary); font-size: 11px; font-weight: 650; overflow-wrap: anywhere; }
.dialog-alert { margin: 14px 0 0; padding: 11px 12px; border-left: 3px solid var(--warning); border-radius: 4px; color: var(--text-secondary); background: var(--warning-bg); font-size: 11px; }
.dialog-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.dialog-primary { min-height: 36px; padding: 0 15px; border: 1px solid var(--azul); border-radius: var(--radius-sm); color: #fff; background: var(--azul); font-size: 11px; font-weight: 700; }
:root[data-theme="dark"] .dialog-primary { color: #07182E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dialog-primary { color: #07182E; }
}

@media (max-width: 1250px) {
  .gm-main { padding-right: 25px; padding-left: 25px; }
  .gm-topbar { padding-right: 25px; padding-left: 25px; }
  .gm-filters { grid-template-columns: minmax(200px, 1.5fr) repeat(2, minmax(130px, 1fr)); }
  .filter-reset { justify-self: start; }
}
@media (max-width: 1050px) {
  :root { --sidebar-width: 215px; }
  .gm-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gm-table { min-width: 1040px; }
  .gm-table-wrap { scrollbar-color: var(--border-strong) transparent; }
}
@media (max-width: 760px) {
  .gm-sidebar { display: none; }
  .gm-workspace { margin-left: 0; }
  .gm-topbar { height: 56px; gap: 10px; padding: 0 16px; }
  .gm-breadcrumb { display: none; }
  .gm-top-actions { width: auto; min-width: 0; flex: 1; justify-content: space-between; }
  .gm-mobile-brand { display: inline-flex; width: var(--toque); min-width: var(--toque); height: var(--toque); min-height: var(--toque); flex: 0 0 var(--toque); justify-content: center; padding: 4px; }
  .gm-brand-icon { width: 29px; }
  .gm-top-user { padding-left: 9px; }
  .gm-top-user span { display: none; }
  .gm-main { padding: 24px 16px 38px; }
  .gm-page-heading { display: block; margin-bottom: 18px; }
  .gm-page-heading h1 { font-size: 27px; }
  .sample-badge { margin-top: 13px; }
  .gm-notice { font-size: 11px; }
  .gm-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  .gm-card { min-height: 94px; padding: 12px; }
  .gm-card:last-child { grid-column: 1 / -1; }
  .metric-number { font-size: 24px; }
  .gm-panel { border-radius: var(--radius-md); }
  .gm-panel-head { align-items: flex-start; padding: 16px 14px 13px; }
  .gm-live { max-width: 100px; text-align: right; }
  .gm-filters { grid-template-columns: 1fr 1fr; gap: 9px; padding: 0 14px 14px; }
  .filter-search { grid-column: 1 / -1; }
  .filter-reset { min-height: 35px; }
  .gm-table-wrap { overflow: visible; }
  .gm-table { display: block; min-width: 0; }
  .gm-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
  .gm-table tbody { display: grid; gap: 0; }
  .gm-table tbody tr[hidden] { display: none !important; }
  .gm-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 10px 14px 12px; border-bottom: 1px solid var(--border); }
  .gm-table tbody tr:last-child { border-bottom: 0; }
  .gm-table td, .gm-table td:first-child, .gm-table td:last-child { display: block; min-width: 0; padding: 7px 0; border: 0; background: transparent; }
  .gm-table td::before { display: block; margin-bottom: 4px; color: var(--text-muted); content: attr(data-label); font-size: 9px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
  .gm-table td.priority-cell { grid-column: 1 / -1; padding-bottom: 3px; }
  .gm-table td.priority-cell::before { display: none; }
  .gm-table td.order-main { grid-column: 1 / -1; padding-top: 3px; }
  .gm-table td.cascade-cell { grid-column: 1 / -1; }
  .gm-table td.days-cell { align-self: end; }
  .gm-table td.action-cell { display: flex; align-items: end; justify-content: flex-end; }
  .gm-table td.action-cell::before { display: none; }
  .order-client { max-width: none; font-size: 13px; }
  .product-main { max-width: none; }
  .gm-table-footer { align-items: flex-start; padding: 12px 14px; }
  .gm-footer-note { max-width: 68%; line-height: 1.45; }
  .gm-footnote { line-height: 1.5; }
}
@media (max-width: 380px) {
  .gm-theme-toggle { min-height: 34px; padding: 0 8px; font-size: 11px; }
  .gm-main { padding-right: 12px; padding-left: 12px; }
  .gm-filters { grid-template-columns: 1fr; }
  .filter-search { grid-column: auto; }
  .gm-card { padding: 10px; }
  .metric-label { font-size: 10px; }
  .gm-panel-head { display: block; }
  .gm-live { margin-top: 8px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media print {
  .gm-sidebar, .gm-topbar, .gm-filters, .row-open, .pager { display: none !important; }
  .gm-workspace { margin: 0; }
  .gm-main { width: 100%; padding: 0; }
  .gm-panel, .gm-card { box-shadow: none; }
}

/* ============================================================================
   Añadidos del puerto a Django
   ----------------------------------------------------------------------------
   Lo que la maqueta no necesitaba y la pantalla real sí. Si algo de aquí se
   repite en la próxima ronda de diseño, se borra de aquí y se queda allá.
   ========================================================================== */

/* La maqueta paginaba con <button> deshabilitados. Con 876 órdenes abiertas la
   paginación es del servidor, así que son enlaces — y un enlace que no lleva a
   ninguna parte es un <span>, no un botón apagado. */
.pager a,
.pager span.pager-off {
  display: grid; width: 29px; height: 29px; place-items: center;
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); background: var(--surface); text-decoration: none;
}
.pager a:hover { border-color: var(--azul); color: var(--azul); background: var(--blue-soft); }
.pager span.pager-off { opacity: .45; }

/* Una entrada de menú que el rol solo puede mirar. El brief lo pedía visible,
   no solo anunciado al lector de pantalla. */
.gm-nav-ver {
  margin-left: auto; padding: 2px 6px; border-radius: 999px;
  color: var(--text-muted); background: var(--neutral-bg);
  font-size: 9px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
}

/* El rol que no alcanza el módulo de órdenes. No es un error: es la matriz de
   permisos haciendo su trabajo, y se dice así. */
.gm-sin-acceso {
  max-width: 560px; margin: 40px auto; padding: 28px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-sm); text-align: center;
}
.gm-sin-acceso h1 { margin: 0 0 8px; font-size: 19px; }
.gm-sin-acceso p { margin: 0; color: var(--text-secondary); font-size: 13px; }

/* La columna de cascada está vacía mientras la escalera de contacto no tenga
   quién la dispare. Vacía es un dato, no un hueco: se dice con palabras. */
.cascade-sub.cascade-pendiente { color: var(--text-muted); font-style: italic; }

/* Alertas: la fila puede traer varias y en la maqueta siempre era una. */
.alert-list { margin: 3px 0 0; padding: 0; list-style: none; }
.alert-list li { margin-top: 2px; }

/* En la maqueta el filtro rápido era un botón que escondía filas. Aquí recarga
   con el filtro puesto, así que es un enlace con pinta de tarjeta. */
a.gm-card { display: block; text-decoration: none; }
a.gm-card.activa { border-color: var(--azul); box-shadow: 0 0 0 2px color-mix(in srgb, var(--azul) 16%, transparent); }

/* El botón de volver al panel del admin. Mientras el resto del CRM siga allá,
   esta pantalla tiene que tener salida. */
.gm-volver {
  display: flex; min-height: 38px; gap: 10px; align-items: center;
  margin: 14px 4px 0; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-secondary); background: var(--surface-subtle);
  font-size: 12px; font-weight: 600; text-decoration: none;
}
.gm-volver:hover { border-color: var(--border-strong); color: var(--text-primary); }

/* Las píldoras de estado, con los valores reales de `OrdenDeServicio.Estatus`.
   La maqueta usaba nombres inventados (state--contact); estos son los que
   salen del modelo, así que la plantilla no tiene que traducir nada. */
.state--por_contactar   { color: var(--azul);    border-color: color-mix(in srgb, var(--azul) 16%, transparent);    background: var(--blue-soft); }
.state--contactadoado      { color: var(--azul);    border-color: color-mix(in srgb, var(--azul) 16%, transparent);    background: var(--blue-soft); }
.state--coordinado      { color: var(--success); border-color: color-mix(in srgb, var(--success) 20%, transparent); background: var(--success-bg); }
.state--en_ruta         { color: var(--success); border-color: color-mix(in srgb, var(--success) 20%, transparent); background: var(--success-bg); }
.state--en_espera       { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 20%, transparent); background: var(--warning-bg); }
.state--datos_invalidos { color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 18%, transparent);  background: var(--danger-bg); }
.state--cerrada         { color: var(--text-secondary); border-color: var(--border); background: var(--neutral-bg); }

/* La píldora partía «Datos inválidos» en dos líneas con max-width:130px. Con
   los nombres reales de los estatus hace falta algo más de aire. */
.state-pill { max-width: none; white-space: nowrap; }

/* «Ver orden» es un enlace al admin, no un botón: lleva a otra página. */
a.row-open { display: inline-flex; align-items: center; text-decoration: none; }

/* La severidad sale de `Urgencia.SEVERIDADES` en español: critica / alta /
   normal. La maqueta las llamaba critical / high / normal. */
.priority--critica { color: var(--danger); }
.priority--critica::before { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.priority--alta { color: var(--warning); }
.priority--alta::before { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); }

/* La maqueta tenía cinco contadores y la rejilla se fijó en cinco columnas.
   Los estatus abiertos reales son seis, más el de «con alerta»: siete tarjetas
   en una rejilla de cinco dejan dos huérfanas en una segunda fila. Que se
   repartan solas evita tener que contar los estatus desde el CSS. */
.gm-metrics { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }

/* ============================================================================
   Lanzador
   ----------------------------------------------------------------------------
   La puerta de entrada. Vive dentro del admin —es el índice de `/admin/`— así
   que no trae el shell de la bandeja, pero sí los mismos tokens: antes tenía
   su propia paleta copiada a mano en la plantilla, y dos paletas para la misma
   marca se separan sin que nadie lo note.
   ========================================================================== */
.gm-lanzador { font-family: var(--font); color: var(--text-primary); }

.gm-portada {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  margin-bottom: 28px; padding: 28px;
  border-radius: var(--radius-lg); background: var(--navy-deep); color: #E9EFFA;
}
/* La marca en la portada es tipográfica: blanca con el punto azul. El PNG es
   azul oscuro sobre transparente y sobre el navy no se lee. */
.gm-portada .gm-marca {
  margin: 0; color: #fff; font-size: clamp(21px, 1.1rem + .8vw, 27px);
  font-weight: 750; letter-spacing: -.02em;
}
.gm-portada p { max-width: 42rem; margin: 0; color: #A9BFDF; font-size: 13px; }

/* El atajo a lo que hay que atender hoy. Es lo único del lanzador que se
   mira con prisa, así que no puede ser un azulejo más de la rejilla. */
.gm-atajo {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 28px; padding: 16px 20px;
  border: 1px solid var(--border); border-left: 3px solid var(--azul);
  border-radius: var(--radius-md); background: var(--surface);
  box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
}
.gm-atajo:hover { border-color: var(--azul); box-shadow: var(--shadow-md); }
.gm-atajo strong { display: block; font-size: 14px; }
.gm-atajo span { color: var(--text-secondary); font-size: 12px; }
.gm-atajo em { color: var(--azul); font-size: 12px; font-weight: 700; font-style: normal; }

.gm-grupos { display: flex; flex-direction: column; gap: 30px; }
.gm-grupo h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.gm-grupo > header { margin-bottom: 12px; }
.gm-grupo > header p { margin: 2px 0 0; color: var(--text-muted); font-size: 12px; }

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

.gm-modulo {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.gm-cabecera { display: flex; gap: 10px; align-items: center; }
.gm-monograma {
  display: grid; width: 32px; height: 32px; flex: none; place-items: center;
  border-radius: 8px; color: #fff; background: var(--azul);
  font-size: 11px; font-weight: 750;
}
.gm-modulo h3 { margin: 0; font-size: 13px; font-weight: 650; line-height: 1.25; }
.gm-enlaces { display: flex; flex-direction: column; gap: 2px; }
.gm-enlaces a {
  padding: 3px 0; border-radius: 3px; color: var(--text-secondary);
  font-size: 12px; text-decoration: none;
}
.gm-enlaces a:hover, .gm-enlaces a:focus { color: var(--azul); text-decoration: underline; }
/* Un módulo que el rol solo puede mirar se dice con palabras, no con un color
   más claro: el color solo no distingue «desactivado» de «de solo lectura». */
.gm-enlaces a.gm-solo-ver::after {
  color: var(--text-muted); content: " · solo ver"; font-size: .78em;
}

.gm-vacio { padding: 48px 8px; color: var(--text-secondary); }


/* ============================================================================
   Ronda 2 — componentes compartidos, marca oscura y nuevas pantallas
   ========================================================================== */
.gm-logo-dark, .gm-icon-dark { display: none !important; }
:root[data-theme="dark"] .gm-logo-light,
:root[data-theme="dark"] .gm-icon-light { display: none !important; }
:root[data-theme="dark"] .gm-logo-dark,
:root[data-theme="dark"] .gm-icon-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gm-logo-light,
  :root:not([data-theme="light"]) .gm-icon-light { display: none !important; }
  :root:not([data-theme="light"]) .gm-logo-dark,
  :root:not([data-theme="light"]) .gm-icon-dark { display: block !important; }
}
.gm-brand-link { background: transparent; }
.gm-brand-full { width: 190px; height: auto; }
.gm-mobile-brand { padding: 0; }
.gm-mobile-menu { display: none; position: relative; }
.gm-mobile-menu summary { display: grid; width: var(--toque); height: var(--toque); place-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--surface); cursor: pointer; list-style: none; }
.gm-mobile-menu summary::-webkit-details-marker { display: none; }
.gm-mobile-menu summary svg { width: 20px; height: 20px; }
.gm-mobile-nav { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; display: grid; width: min(292px, calc(100vw - 24px)); gap: 3px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); }
.gm-mobile-nav a { display: flex; min-height: var(--toque); align-items: center; padding: 0 12px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13px; font-weight: 600; text-decoration: none; }
.gm-mobile-nav a:hover, .gm-mobile-nav a[aria-current="page"] { color: var(--azul); background: var(--blue-soft); }
.gm-mobile-nav .gm-mobile-nav-label { margin: 8px 10px 3px; color: var(--text-muted); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.gm-mobile-nav .gm-nav-ver { margin-left: auto; }
.gm-volver { min-height: 44px; }

/* La edad diferencia las órdenes cuando el indicador de alerta es universal.
   Son bandas visuales de tiempo, no estatus ni plazos contractuales. */
.gm-age { display: grid; min-width: 115px; gap: 5px; }
.gm-age-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gm-age-number { color: var(--text-primary); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-age-band { display: inline-flex; width: fit-content; gap: 6px; align-items: center; padding: 3px 7px; border: 1px solid transparent; border-radius: 999px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.gm-age-band::before { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; content: ''; }
.gm-age--recent { color: var(--text-secondary); border-color: var(--border); background: var(--neutral-bg); }
.gm-age--month { color: var(--azul); border-color: color-mix(in srgb, var(--azul) 18%, transparent); background: var(--blue-soft); }
.gm-age--quarter { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 20%, transparent); background: var(--warning-bg); }
.gm-age--over { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 20%, transparent); background: var(--danger-bg); }
.gm-age-track { height: 4px; overflow: hidden; border-radius: 999px; background: var(--neutral-bg); }
.gm-age-track span { display: block; height: 100%; border-radius: inherit; background: var(--text-muted); }
.gm-age-track--recent span { width: 14%; background: var(--text-muted); }
.gm-age-track--month span { width: 32%; background: var(--azul); }
.gm-age-track--quarter span { width: 55%; background: var(--warning); }
.gm-age-track--over span { width: 100%; background: var(--danger); }
.gm-coverage { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--warning) 23%, var(--border)); border-left: 4px solid var(--warning); border-radius: var(--radius-md); color: var(--text-secondary); background: var(--warning-bg); }
.gm-coverage svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; color: var(--warning); }
.gm-coverage strong { color: var(--text-primary); }
.gm-coverage p { margin: 3px 0 0; font-size: 12px; }
.gm-data-note { margin: 8px 2px 0; color: var(--text-muted); font-size: 10px; line-height: 1.5; }
.gm-card--static { cursor: default; }
.gm-card--static:hover { transform: none; box-shadow: var(--shadow-sm); }
.gm-card--static .metric-caption { line-height: 1.35; }
.gm-card .metric-number.is-unknown { color: var(--text-muted); font-size: 23px; }
.gm-table .priority--critica { color: var(--text-secondary); }
.gm-table .priority--critica::before { background: var(--text-muted); box-shadow: none; }
.gm-table td[data-label="Antigüedad"] { min-width: 132px; }
.gm-table td[data-label="Zona"] { min-width: 120px; }
.gm-table a.row-open { display: inline-flex; min-height: var(--toque); align-items: center; padding: 0 12px; }
.gm-filter-label { display: inline-flex; min-height: 26px; align-items: center; padding: 0 8px; border-radius: 999px; color: var(--text-secondary); background: var(--neutral-bg); font-size: 10px; font-weight: 650; }

/* Prefactura — lectura financiera, control previo y conciliación */
.pf-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pf-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-status { display: inline-flex; min-height: 28px; gap: 6px; align-items: center; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-secondary); background: var(--surface); font-size: 10px; font-weight: 750; }
.pf-status::before { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); content: ''; }
.pf-folio { color: var(--text-muted); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-button { display: inline-flex; min-height: 40px; gap: 8px; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--surface); font-size: 11px; font-weight: 700; text-decoration: none; }
.pf-button:hover { border-color: var(--azul); color: var(--azul); background: var(--surface-blue); }
.pf-button svg { width: 15px; height: 15px; }
.pf-button--primary { border-color: var(--azul); color: #fff; background: var(--azul); }
.pf-button--primary:hover { color: #fff; background: var(--blue-hover); }
:root[data-theme="dark"] .pf-button--primary { color: #07182E; }
.pf-summary { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(160px,.62fr); gap: 12px; margin: 18px 0 22px; }
.pf-total { min-width: 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.pf-total--gross { border-color: color-mix(in srgb, var(--azul) 28%, var(--border)); background: var(--surface-blue); }
.pf-total-label { display: block; color: var(--text-secondary); font-size: 10px; font-weight: 700; }
.pf-total-value { display: block; margin-top: 8px; color: var(--text-primary); font-size: clamp(21px,2.2vw,29px); font-weight: 750; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-total--gross .pf-total-value { color: var(--azul); }
.pf-total-foot { display: block; margin-top: 5px; color: var(--text-muted); font-size: 10px; }
.pf-total--cases .pf-total-value { font-size: 25px; }
.pf-section { margin-top: 20px; }
.pf-section-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.pf-section-heading h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.pf-section-heading p { margin: 3px 0 0; color: var(--text-muted); font-size: 11px; }
.pf-audit { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.pf-audit-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
.pf-audit-head h2 { margin: 0; font-size: 15px; }
.pf-audit-head p { margin: 4px 0 0; color: var(--text-secondary); font-size: 10px; line-height: 1.4; }
.pf-audit-summary { display: flex; flex-wrap: wrap; gap: 7px; }
.pf-audit-count { display: inline-flex; min-height: 26px; gap: 6px; align-items: center; padding: 0 9px; border-radius: 999px; color: var(--success); background: var(--success-bg); font-size: 10px; font-weight: 700; }
.pf-audit-count--warning { color: var(--warning); background: var(--warning-bg); }
.pf-audit-count--danger { color: var(--danger); background: var(--danger-bg); }
.pf-audit-count--pending { color: var(--text-secondary); background: var(--neutral-bg); }
.pf-audit-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 20px 0; color: var(--text-muted); font-size: 9px; }
.pf-audit-legend .pf-audit-count { min-height: 22px; font-size: 9px; }
.pf-checks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; padding: 4px 20px 12px; list-style: none; }
.pf-check { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 10px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--border); }
.pf-check:nth-last-child(-n+2) { border-bottom: 0; }
.pf-check-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: var(--success); background: var(--success-bg); font-size: 12px; font-weight: 800; }
.pf-check--warning .pf-check-icon { color: var(--warning); background: var(--warning-bg); }
.pf-check strong { display: block; color: var(--text-primary); font-size: 11px; }
.pf-check p { margin: 3px 0 0; color: var(--text-secondary); font-size: 10px; line-height: 1.45; }
.pf-check-state { align-self: start; padding-top: 4px; color: var(--success); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.pf-check--warning .pf-check-state { color: var(--warning); }
.pf-approval { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.pf-approval-copy { max-width: 650px; }
.pf-approval-copy strong { display: block; font-size: 12px; }
.pf-approval-copy p { margin: 3px 0 0; color: var(--text-secondary); font-size: 10px; line-height: 1.45; }
.pf-summary-table tfoot th { font-weight: 750; }
.pf-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-check--pending .pf-check-icon { color: var(--text-muted); background: var(--neutral-bg); }
.pf-check--pending .pf-check-state { color: var(--text-muted); }
.pf-amount-note { margin: 8px 0 0; color: var(--text-muted); font-size: 10px; }
.pf-currency { color: var(--text-muted); font-size: 9px; font-weight: 600; }
.pf-detail-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 0 0 12px; }
.pf-detail-filters .filter-field { min-width: 210px; flex: 1; }
.pf-detail-filters .filter-control { min-height: 40px; }
.pf-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.pf-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 11px; }
.pf-table th { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); background: var(--surface-subtle); font-size: 9px; font-weight: 750; text-align: left; text-transform: uppercase; white-space: nowrap; }
.pf-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; }
.pf-table tbody tr:last-child td { border-bottom: 0; }
.pf-table .pf-num { color: var(--text-primary); }
.pf-recon { display: grid; grid-template-columns: minmax(200px,.8fr) minmax(0,1.5fr); gap: 18px; align-items: stretch; }
.pf-recon-total { display: flex; flex-direction: column; justify-content: center; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-blue); }
.pf-recon-total strong { color: var(--text-primary); font-size: 12px; }
.pf-recon-total b { margin-top: 8px; color: var(--azul); font-size: 30px; letter-spacing: -.04em; }
.pf-recon-total span { margin-top: 3px; color: var(--text-secondary); font-size: 10px; }
.pf-recon-content { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.pf-recon-bar { display: flex; height: 12px; overflow: hidden; border-radius: 999px; background: var(--neutral-bg); }
.pf-recon-bar span:nth-child(1) { width: 79.5%; background: var(--success); }
.pf-recon-bar span:nth-child(2) { width: 7.4%; background: var(--azul); }
.pf-recon-bar span:nth-child(3) { width: 7.4%; background: var(--warning); }
.pf-recon-bar span:nth-child(4) { width: 5.7%; background: var(--danger); }
.pf-recon-legend { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 16px; margin: 14px 0 0; padding: 0; list-style: none; }
.pf-recon-legend li { display: grid; grid-template-columns: 9px minmax(0,1fr) auto; gap: 8px; align-items: start; color: var(--text-secondary); font-size: 10px; }
.pf-recon-legend i { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--success); }
.pf-recon-legend li:nth-child(2) i { background: var(--azul); }
.pf-recon-legend li:nth-child(3) i { background: var(--warning); }
.pf-recon-legend li:nth-child(4) i { background: var(--danger); }
.pf-recon-legend b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pf-prohibited { margin: 18px 0 0; padding: 11px 13px; border-left: 3px solid var(--border-strong); border-radius: 4px; color: var(--text-secondary); background: var(--surface-subtle); font-size: 10px; }
.pf-prohibited strong { color: var(--text-primary); }

/* Contacto — ficha 360, consentimiento y campos que faltan */
.contact-search { display: flex; flex-wrap: wrap; gap: 9px; align-items: end; margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.contact-search .filter-field { min-width: min(100%,280px); flex: 1; }
.contact-search .filter-control { min-height: 44px; }
.contact-search .pf-button { min-height: 44px; }
.contact-search-help { width: 100%; margin: -2px 0 0; color: var(--text-muted); font-size: 10px; }
.contact-title-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.contact-title-row h1 { max-width: 840px; margin: 0; color: var(--text-primary); font-size: clamp(24px,2.3vw,32px); font-weight: 700; letter-spacing: -.045em; line-height: 1.18; overflow-wrap: anywhere; }
.contact-title-row p { margin: 7px 0 0; color: var(--text-secondary); font-size: 12px; }
.contact-phone-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-phone-actions a { display: inline-flex; min-height: 40px; align-items: center; padding: 0 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--azul); background: var(--surface); font-size: 11px; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; }
.contact-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(290px,.75fr); gap: 16px; align-items: start; }
.contact-card { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.contact-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.contact-card-head h2 { margin: 0; font-size: 14px; font-weight: 700; }
.contact-card-body { padding: 16px 18px 18px; }
.contact-id-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 18px; }
.contact-field { min-width: 0; }
.contact-field--wide { grid-column: 1 / -1; }
.contact-field dt { margin: 0 0 4px; color: var(--text-muted); font-size: 9px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.contact-field dd { margin: 0; color: var(--text-primary); font-size: 12px; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }
.contact-field dd.secondary { color: var(--text-secondary); font-weight: 450; }
.contact-address { max-width: 75ch; overflow-wrap: anywhere; }
.contact-sensitive { display: flex; min-height: 50px; gap: 9px; align-items: center; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--text-muted); background: var(--surface-subtle); }
.contact-sensitive svg { width: 16px; height: 16px; flex: 0 0 auto; }
.contact-sensitive strong { color: var(--text-secondary); font-size: 10px; }
.contact-consent { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); border-left: 4px solid var(--danger); border-radius: var(--radius-lg); background: var(--danger-bg); box-shadow: var(--shadow-sm); }
.contact-consent-head { display: flex; gap: 11px; align-items: flex-start; padding: 17px 18px 12px; }
.contact-consent-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.contact-consent-icon svg { width: 18px; height: 18px; }
.contact-consent h2 { margin: 1px 0 0; color: var(--text-primary); font-size: 14px; }
.contact-consent p { margin: 4px 0 0; color: var(--text-secondary); font-size: 10px; line-height: 1.5; }
.contact-consent-status { display: block; margin: 0 18px 14px 63px; color: var(--danger); font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.contact-consent-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 18px 16px 63px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--danger) 18%, transparent); }
.contact-consent-meta span { display: block; color: var(--text-muted); font-size: 9px; }
.contact-consent-meta strong { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 10px; }
.contact-legal-note { margin: 0 18px 16px 63px !important; padding: 9px 10px; border-radius: 5px; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.contact-section { margin-top: 18px; }
.contact-timeline { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.contact-timeline::before { position: absolute; top: 10px; bottom: 10px; left: 8px; width: 1px; background: var(--border-strong); content: ''; }
.contact-event { position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 12px; padding: 0 0 18px; }
.contact-event:last-child { padding-bottom: 0; }
.contact-event-dot { z-index: 1; width: 17px; height: 17px; margin-top: 2px; border: 4px solid var(--surface); border-radius: 50%; background: var(--azul); box-shadow: 0 0 0 1px var(--border-strong); }
.contact-event:nth-child(2) .contact-event-dot { background: var(--success); }
.contact-event:nth-child(3) .contact-event-dot { background: var(--warning); }
.contact-event-main strong { display: block; color: var(--text-primary); font-size: 11px; }
.contact-event-main p { margin: 3px 0 0; color: var(--text-secondary); font-size: 10px; line-height: 1.45; }
.contact-event-meta { color: var(--text-muted); font-size: 9px; text-align: right; white-space: nowrap; }
.contact-event-status { display: inline-flex; margin-top: 6px; padding: 3px 7px; border-radius: 999px; color: var(--success); background: var(--success-bg); font-size: 9px; font-weight: 700; }
.contact-event-status--pending { color: var(--warning); background: var(--warning-bg); }
.contact-related { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.contact-related-item { min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.contact-related-item span { display: block; color: var(--text-muted); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.contact-related-item strong { display: block; margin-top: 6px; color: var(--text-primary); font-size: 11px; overflow-wrap: anywhere; }
.contact-related-item p { margin: 4px 0 0; color: var(--text-secondary); font-size: 10px; line-height: 1.45; }
.contact-empty-field { color: var(--text-muted) !important; font-weight: 500 !important; font-style: italic; }
.contact-tag { display: inline-flex; min-height: 23px; align-items: center; padding: 0 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); background: var(--surface-subtle); font-size: 9px; font-weight: 700; }

@media (max-width: 1260px) {
  .gm-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .pf-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pf-total--cases { grid-column: 1 / -1; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-consent { order: -1; }
}
@media (max-width: 760px) {
  .gm-mobile-menu { display: block; }
  .gm-topbar { gap: 8px; padding: 0 12px; }
  .gm-mobile-brand { display: inline-flex; width: 38px; height: 38px; flex: 0 0 38px; justify-content: center; }
  .gm-brand-icon { width: 30px; height: auto; }
  .gm-top-actions { gap: 7px; }
  .gm-theme-toggle { width: var(--toque); min-width: var(--toque); height: var(--toque); justify-content: center; padding: 0; }
  .gm-theme-toggle span { display: none; }
  .gm-theme-toggle svg { width: 18px; height: 18px; }
  .gm-top-user { padding-left: 7px; }
  .gm-top-user .gm-avatar { width: 32px; height: 32px; }
  .gm-main { padding-right: 16px; padding-left: 16px; }
  .gm-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gm-card:last-child { grid-column: 1 / -1; }
  .filter-control, .filter-reset, .row-open, .pager a, .pager span.pager-off, .pf-button, .contact-phone-actions a { min-height: var(--toque); }
  .gm-table th:first-child, .gm-table td:first-child { padding-left: 14px; }
  .gm-table th:last-child, .gm-table td:last-child { padding-right: 14px; }
  .pf-summary { grid-template-columns: 1fr 1fr; }
  .pf-total { padding: 13px; }
  .pf-total-value { font-size: 21px; }
  .pf-checks { grid-template-columns: 1fr; padding: 2px 14px 10px; }
  .pf-check:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .pf-check:last-child { border-bottom: 0; }
  .pf-recon { grid-template-columns: 1fr; }
  .pf-recon-legend { grid-template-columns: 1fr; }
  .contact-search { padding: 12px; }
  .contact-title-row { display: block; }
  .contact-phone-actions { margin-top: 12px; }
  .contact-related { grid-template-columns: 1fr; }
  .contact-consent-status { margin-left: 18px; }
  .contact-consent-meta, .contact-legal-note { margin-left: 18px !important; }
  .contact-event { grid-template-columns: 18px minmax(0,1fr); }
  .contact-event-meta { grid-column: 2; margin-top: -8px; text-align: left; }
}
@media (max-width: 380px) {
  .gm-topbar { gap: 6px; padding: 0 8px; }
  .gm-metrics { gap: 7px; }
  .gm-card { padding: 10px; }
  .gm-top-actions { gap: 5px; }
  .pf-summary { grid-template-columns: 1fr; }
  .pf-total--cases { grid-column: auto; }
  .contact-id-grid { grid-template-columns: 1fr; }
  .contact-field--wide { grid-column: auto; }
}
@media print {
  .gm-sidebar, .gm-topbar, .gm-mobile-menu, .gm-filters, .pf-actions, .pf-detail-filters, .gm-table-footer, .gm-footnote, .contact-search { display: none !important; }
  .gm-workspace { margin: 0 !important; }
  .gm-main { width: 100% !important; padding: 0 !important; }
  .gm-panel, .contact-card, .pf-audit, .pf-total { break-inside: avoid; box-shadow: none; }
  .pf-table th { color: #333 !important; background: #F0F2F5 !important; }
  .pf-table, .gm-table { font-size: 9pt; }
  .gm-table-wrap, .pf-table-wrap { overflow: visible; }
  .gm-table, .pf-table { min-width: 0; }
  a { color: inherit; text-decoration: none; }
}

/* Ajustes de lectura de la leyenda y microjerarquía de Contacto. */
.gm-age-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: -7px 2px 17px; color: var(--text-secondary); font-size: 10px; }
.gm-age-legend > span { display: inline-flex; gap: 6px; align-items: center; }
.gm-age-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.gm-age-dot--recent { background: var(--text-muted); }
.gm-age-dot--month { background: var(--azul); }
.gm-age-dot--quarter { background: var(--warning); }
.gm-age-dot--over { background: var(--danger); }
.contact-intro { margin: 0; color: var(--text-secondary); font-size: 13px; }
.contact-history-note { margin: 4px 0 0; color: var(--text-muted); font-size: 10px; }

.gm-page-heading .gm-page-kicker { margin: 0 0 8px; }
.gm-age-track { display: block; width: 100%; }


/* ============================================================================
   Ronda 3 — nuevas pantallas y retoques integrados
   ========================================================================== */

/* Lanzador: portada propia con los mismos códigos visuales del shell. */
.launch-main { max-width: 1540px; }
.launch-heading { align-items: center; }
.launch-heading h1 { overflow-wrap: anywhere; }
.launch-role-panel { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 18px; align-items: center; margin: 0 0 14px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.launch-role-copy h2 { margin: 0; font-size: 13px; }
.launch-role-copy p { margin: 4px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.launch-role-switch { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-subtle); }
.launch-role-switch button { display: flex; min-height: 44px; gap: 5px; align-items: center; padding: 0 12px; border: 0; border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }
.launch-role-switch button[aria-pressed="true"] { color: var(--azul); background: var(--surface); box-shadow: var(--shadow-sm); }
.launch-role-switch button span { color: var(--text-muted); font-size: 9px; font-weight: 600; }
.launch-role-status { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: 10px; }
.launch-shortcut { margin: 0 0 24px; }
.launch-shortcut > span { display: block; }
.launch-shortcut > span > span { display: block; margin-top: 3px; }
.launch-groups { display: grid; gap: 24px; }
.launch-group[hidden], .launch-module[hidden], [data-nav-target][hidden] { display: none !important; }
[hidden] { display: none !important; }
.launch-group-heading { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 11px; }
.launch-group-heading .gm-page-kicker { margin: 0 0 4px; }
.launch-group-heading h2 { margin: 0; color: var(--text-primary); font-size: 19px; letter-spacing: -.03em; }
.launch-group-heading p { margin: 3px 0 0; color: var(--text-muted); font-size: 11px; }
.launch-group-count { color: var(--text-muted); font-size: 10px; font-weight: 650; }
.launch-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.launch-module { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.launch-module-head { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; align-items: center; }
.launch-monogram { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--border); border-radius: 11px; color: var(--azul); background: var(--blue-soft); font-size: 11px; font-weight: 800; letter-spacing: -.02em; }
.launch-module-name { min-width: 0; }
.launch-module-name h3 { margin: 0; color: var(--text-primary); font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.launch-module-name p { margin: 3px 0 0; color: var(--text-muted); font-size: 10px; line-height: 1.35; }
.launch-access { display: inline-flex; min-height: 24px; align-items: center; justify-content: center; padding: 0 7px; border-radius: 999px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.launch-access--full { color: var(--text-secondary); background: var(--neutral-bg); }
.launch-access--readonly { color: var(--text-secondary); background: var(--neutral-bg); }
.launch-access--work { color: var(--success); background: var(--success-bg); }
.launch-module-details { margin-top: 11px; border-top: 1px solid var(--border); }
.launch-module-details summary { display: flex; min-height: 44px; gap: 8px; align-items: center; justify-content: space-between; color: var(--text-secondary); cursor: pointer; font-size: 10px; font-weight: 700; list-style: none; }
.launch-module-details summary::-webkit-details-marker { display: none; }
.launch-expand { color: var(--azul); font-size: 9px; }
.launch-links { display: grid; gap: 3px; margin: 0; padding: 0 0 2px; list-style: none; }
.launch-links li { min-width: 0; color: var(--text-secondary); font-size: 10px; line-height: 1.4; }
.launch-links li > span, .launch-links a { display: flex; min-height: 34px; align-items: center; padding: 5px 8px; border-radius: var(--radius-sm); }
.launch-links a { min-height: 44px; color: var(--azul); font-weight: 650; text-decoration: none; }
.launch-links a:hover, .launch-module-actions a:hover { background: var(--blue-soft); }
.launch-links--columns { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 8px; }
.launch-module-actions { display: flex; min-height: 44px; align-items: flex-end; margin-top: 8px; border-top: 1px solid var(--border); }
.launch-module-actions a { display: inline-flex; min-height: 44px; gap: 7px; align-items: center; padding: 0 7px; border-radius: var(--radius-sm); color: var(--azul); font-size: 10px; font-weight: 700; text-decoration: none; }
.launch-module-actions > span { padding: 0 7px 12px; color: var(--text-muted); font-size: 9px; }
.launch-footnote { margin-top: 22px; }

/* Liquidación: pagos de brigadas, siempre fuera del documento para la cadena. */
.liq-filters { display: grid; grid-template-columns: repeat(3,minmax(130px,1fr)) auto; gap: 10px; align-items: end; margin: 0 0 16px; padding: 15px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.liq-filters .filter-control { min-height: 44px; }
.liq-filters .gm-data-note { grid-column: 1 / -1; margin: 0; }
.liq-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-bottom: 16px; }
.liq-metric { display: flex; min-width: 0; min-height: 118px; flex-direction: column; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.liq-metric > span { color: var(--text-secondary); font-size: 10px; font-weight: 700; }
.liq-metric strong { margin-top: 8px; color: var(--text-primary); font-size: 28px; letter-spacing: -.04em; }
.liq-metric small { margin-top: auto; padding-top: 6px; color: var(--text-muted); font-size: 10px; line-height: 1.4; }
.liq-metric--blocked { border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); background: var(--warning-bg); }
.liq-blocker { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 13px; align-items: center; margin: 0 0 18px; padding: 17px; border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border)); border-left: 4px solid var(--warning); border-radius: var(--radius-lg); background: var(--warning-bg); }
.liq-blocker-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: var(--warning); background: var(--surface); font-size: 19px; font-weight: 800; }
.liq-blocker .gm-page-kicker { margin: 0 0 3px; }
.liq-blocker h2 { margin: 0; color: var(--text-primary); font-size: 15px; }
.liq-blocker p:not(.gm-page-kicker) { margin: 4px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
.liq-blocker .pf-button { white-space: nowrap; }
.liq-count-badge { display: inline-flex; min-height: 30px; align-items: center; padding: 0 10px; border-radius: 999px; color: var(--warning); background: var(--warning-bg); font-size: 10px; font-weight: 750; }
.liq-issues { display: grid; gap: 8px; }
.liq-issue { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.liq-issue-count { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: var(--warning); background: var(--warning-bg); font-size: 15px; font-weight: 800; }
.liq-issue h3 { margin: 0; color: var(--text-primary); font-size: 11px; }
.liq-issue p { margin: 3px 0 0; color: var(--text-secondary); font-size: 10px; line-height: 1.45; }
.liq-issue-tag { color: var(--text-muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.liq-totals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.liq-total { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.liq-total > span { color: var(--text-secondary); font-size: 10px; font-weight: 700; }
.liq-total strong { display: block; margin-top: 8px; color: var(--text-primary); font-size: 23px; }
.liq-total small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 9px; line-height: 1.4; }
.liq-total--withheld { background: var(--surface-subtle); }
.liq-total--net { border-color: color-mix(in srgb, var(--azul) 25%, var(--border)); background: var(--surface-blue); }
.liq-total--net strong { color: var(--azul); }
.liq-table { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; font-size: 11px; }
.liq-table th { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); background: var(--surface-subtle); font-size: 9px; text-align: left; text-transform: uppercase; }
.liq-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.liq-empty { display: grid; gap: 5px; padding: 18px; color: var(--text-muted); text-align: center; }
.liq-empty strong { color: var(--text-primary); font-size: 12px; }
.liq-approval { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 20px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-subtle); }
.liq-approval h2 { margin: 0; font-size: 13px; }
.liq-approval p { margin: 4px 0 0; color: var(--text-secondary); font-size: 10px; line-height: 1.45; }
.liq-privacy { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--surface-subtle); font-size: 10px; line-height: 1.5; }
.liq-privacy strong { color: var(--text-primary); }
.pf-status--reference { color: var(--text-secondary); background: var(--neutral-bg); }
.pf-recon-notice { display: grid; gap: 4px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--azul); border-radius: var(--radius-md); color: var(--text-secondary); background: var(--surface-blue); font-size: 10px; line-height: 1.5; }
.pf-recon-notice strong { color: var(--text-primary); font-size: 11px; }
.pf-recon-label { margin: 0 0 10px; color: var(--text-muted); font-size: 10px; }
.pf-button:disabled { cursor: not-allowed; opacity: .58; }
.gm-filters-reset a { min-height: 44px; }

/* Campo: app móvil offline-first; prioriza señal, recorrido y decisiones claras. */
.field-body { min-height: 100vh; margin: 0; color: var(--text-primary); background: var(--canvas); font-family: var(--font); }
.field-app { width: min(100%,760px); min-height: 100vh; margin: 0 auto; background: var(--canvas); box-shadow: var(--shadow-sm); }
.field-topbar { position: sticky; z-index: 40; top: 0; display: flex; min-height: 62px; gap: 10px; align-items: center; justify-content: space-between; padding: calc(7px + env(safe-area-inset-top)) 14px 7px; border-bottom: 1px solid var(--border); background: var(--surface); }
.field-brand { display: inline-flex; min-width: 44px; min-height: 44px; gap: 8px; align-items: center; color: var(--text-primary); font-size: 15px; font-weight: 750; text-decoration: none; }
.field-brand img { width: 36px; height: 31px; object-fit: contain; }
.field-connection { display: inline-flex; min-height: 34px; gap: 7px; align-items: center; padding: 0 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); background: var(--surface-subtle); font-size: 10px; font-weight: 750; white-space: nowrap; }
.field-connection-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.field-connection[data-estado="sin-conexion"] .field-connection-dot { background: var(--warning); }
.field-theme-toggle { display: grid; width: 44px; min-width: 44px; min-height: 44px; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--surface); cursor: pointer; }
.field-theme-toggle svg { width: 19px; height: 19px; }
.field-sync-banner { display: flex; gap: 9px; align-items: flex-start; padding: 11px 16px; border-bottom: 1px solid color-mix(in srgb, var(--warning) 25%, var(--border)); color: var(--text-secondary); background: var(--warning-bg); font-size: 11px; line-height: 1.45; }
.field-sync-banner strong { flex: 0 0 auto; color: var(--text-primary); }
.field-main { padding: 19px 16px calc(32px + env(safe-area-inset-bottom)); }
.field-day-heading { margin-bottom: 14px; }
.field-kicker { margin: 0 0 5px; color: var(--azul); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.field-day-heading h1 { margin: 0; color: var(--text-primary); font-size: 26px; letter-spacing: -.04em; }
.field-day-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 9px; color: var(--text-secondary); font-size: 11px; }
.field-day-meta > * { padding: 5px 8px; border-radius: 999px; background: var(--surface-subtle); }
.field-sample-note { margin: 8px 0 0; color: var(--text-muted); font-size: 10px; line-height: 1.4; }
.field-tabs { position: sticky; z-index: 25; top: 61px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 -2px 13px; padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.field-tab { min-height: 44px; border: 0; border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; cursor: pointer; font: inherit; font-size: 11px; font-weight: 750; }
.field-tab[aria-selected="true"] { color: var(--azul); background: var(--blue-soft); }
.field-view[hidden] { display: none !important; }
.field-progress-card, .field-current-card, .field-order-card, .field-extra-card, .field-close-card, .field-variant-card { margin: 0 0 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.field-progress-copy { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.field-progress-copy .field-kicker { margin-bottom: 3px; }
.field-progress-copy strong { display: block; color: var(--text-primary); font-size: 13px; }
.field-stop-number { color: var(--azul); font-size: 11px; font-weight: 850; text-align: right; }
.field-stop-number small { display: block; color: var(--text-muted); font-size: 8px; }
.field-progress-card progress { display: block; width: 100%; height: 8px; margin: 11px 0 7px; accent-color: var(--azul); }
.field-progress-card > p { margin: 0; color: var(--text-muted); font-size: 10px; line-height: 1.45; }
.field-route { display: grid; gap: 6px; margin: 0 0 13px; padding: 0; list-style: none; }
.field-stop { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 9px; align-items: center; min-height: 54px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.field-stop-marker { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted); font-size: 10px; font-weight: 800; }
.field-stop--done .field-stop-marker { color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); background: var(--success-bg); }
.field-stop--current { border-color: color-mix(in srgb, var(--azul) 36%, var(--border)); background: var(--surface-blue); }
.field-stop--current .field-stop-marker { color: #fff; border-color: var(--azul); background: var(--azul); }
.field-stop > div { display: grid; gap: 2px; min-width: 0; }
.field-stop > div strong { color: var(--text-primary); font-size: 11px; overflow-wrap: anywhere; }
.field-stop > div span, .field-stop-state { color: var(--text-muted); font-size: 10px; }
.field-stop-state { white-space: nowrap; }
.field-stop--current .field-stop-state { color: var(--azul); font-weight: 750; }
.field-card-overline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; color: var(--text-muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.field-window { padding: 5px 7px; border-radius: 999px; color: var(--text-secondary); background: var(--neutral-bg); }
.field-current-card h2 { margin: 9px 0 2px; color: var(--text-primary); font-size: 19px; letter-spacing: -.03em; }
.field-service-title { margin: 0; color: var(--text-secondary); font-size: 11px; font-weight: 650; }
.field-current-card address { margin-top: 7px; color: var(--text-muted); font-size: 11px; font-style: normal; }
.field-checks { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.field-checks span { padding: 6px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); background: var(--surface-subtle); font-size: 10px; }
.field-checks .field-check-ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 22%, var(--border)); background: var(--success-bg); }
.field-time-points { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin: 10px 0; padding: 0; list-style: none; }
.field-time-point { display: grid; min-width: 0; grid-template-rows: 18px auto auto auto; gap: 2px; align-content: start; padding: 7px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-subtle); text-align: center; }
.field-time-points span { display: grid; width: 18px; height: 18px; place-items: center; margin: 0 auto 3px; padding: 0; border: 0; border-radius: 50%; color: var(--text-muted); background: var(--surface); font-size: 9px; font-weight: 800; }
.field-time-points b { color: var(--text-muted); font-size: 7px; line-height: 1.2; text-transform: uppercase; }
.field-time-points strong { color: var(--text-primary); font-size: 10px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.field-time-points small { color: var(--text-muted); font-size: 7px; line-height: 1.2; }
.field-time-point--done { border-color: color-mix(in srgb, var(--success) 26%, var(--border)); }
.field-time-point--done > span { color: var(--success); background: var(--success-bg); }
.field-time-point--current { border-color: color-mix(in srgb, var(--azul) 35%, var(--border)); background: var(--surface-blue); }
.field-time-point--current > span { color: var(--azul); background: var(--blue-soft); }
.field-primary-action, .field-secondary-action { display: inline-flex; min-height: 48px; gap: 7px; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: 11px; font-weight: 750; text-align: center; }
.field-primary-action { width: 100%; min-height: 54px; border-color: var(--azul); color: #fff; background: var(--azul); }
.field-primary-action:hover:not(:disabled) { filter: brightness(1.06); }
.field-primary-action:disabled { cursor: not-allowed; opacity: .62; }
.field-primary-action--small { width: auto; min-height: 48px; }
.field-secondary-action { color: var(--azul); background: var(--surface); }
.field-form-note { margin: 7px 0 0; color: var(--text-muted); font-size: 9px; line-height: 1.45; }
.field-variant-card summary { display: flex; min-height: 44px; align-items: center; color: var(--text-secondary); cursor: pointer; font-size: 10px; font-weight: 750; }
.field-variant-card ul { display: grid; gap: 7px; margin: 0; padding: 0 0 3px 17px; color: var(--text-secondary); font-size: 10px; line-height: 1.45; }
.field-order-card h2 { margin: 5px 0; color: var(--text-primary); font-size: 16px; }
.field-order-card > p { color: var(--text-secondary); font-size: 10px; line-height: 1.45; }
.field-outcome h3 { margin: 7px 0 8px; color: var(--text-primary); font-size: 12px; }
.field-section-heading { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.field-section-heading > div { display: flex; gap: 8px; align-items: center; }
.field-section-heading h3, .field-close-card h3 { margin: 0; color: var(--text-primary); font-size: 12px; }
.field-step-number { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: var(--azul); background: var(--blue-soft); font-size: 10px; font-weight: 850; }
.field-required, .field-optional { color: var(--text-muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.field-photo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.field-photo-button { display: grid; min-height: 72px; gap: 5px; align-content: center; padding: 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--azul); background: var(--surface-subtle); font-size: 10px; font-weight: 750; text-align: center; }
.field-photo-button input { display: block; width: 100%; min-height: 44px; color: var(--text-secondary); font-size: 9px; }
.field-scan-card { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 8px; align-items: center; margin-top: 9px; padding: 9px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.field-scan-card > span { color: var(--azul); font-size: 19px; }
.field-scan-card strong { color: var(--text-primary); font-size: 10px; }
.field-scan-card p { margin: 3px 0 0; color: var(--text-muted); font-size: 9px; line-height: 1.4; }
.field-evidence-list { display: grid; gap: 5px; margin: 9px 0 0; padding-left: 18px; color: var(--text-secondary); font-size: 9px; }
.field-empty-note { padding: 10px; border-radius: var(--radius-sm); color: var(--text-muted) !important; background: var(--surface-subtle); }
.field-extra-card { border-color: color-mix(in srgb, var(--warning) 28%, var(--border)); }
.field-extra-card > p { margin: 7px 0; }
.field-payer { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 10px 0 0; padding: 0; border: 0; }
.field-payer legend { grid-column: 1 / -1; margin-bottom: 5px; color: var(--text-muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.field-choice { display: flex; min-height: 48px; gap: 9px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--surface); font-size: 10px; line-height: 1.4; }
.field-choice input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--azul); }
.field-choice--payer { justify-content: center; color: var(--text-primary); font-weight: 700; }
.field-label { display: block; margin: 10px 0 5px; color: var(--text-secondary); font-size: 9px; font-weight: 750; }
.field-input { width: 100%; min-height: 48px; padding: 10px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-primary); background: var(--surface); font: inherit; font-size: 11px; }
textarea.field-input { min-height: 82px; resize: vertical; }
.firma canvas { display: block; width: 100%; height: 128px; touch-action: none; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.field-button-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.field-button-row > * { flex: 1; }
.field-close-card { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; border-color: color-mix(in srgb, var(--azul) 30%, var(--border)); background: var(--surface-blue); }
.field-close-card > .field-label, .field-close-card > .field-input, .field-close-card > .field-primary-action, .field-close-card > .field-form-note { grid-column: 1 / -1; }
.field-close-card > div h3 { margin: 0; color: var(--text-primary); font-size: 12px; }
.field-close-card > div p { margin: 4px 0 0; color: var(--text-secondary); font-size: 9px; line-height: 1.45; }

/* Ajustes táctiles y reflujo de las cinco pantallas al ancho de un teléfono. */
@media (max-width: 1000px) {
  .launch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .gm-filters-reset { padding: 0 14px 14px; }
  body:not(.field-body) :is(button, select, textarea, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"])) { min-height: var(--toque,44px); }
  body:not(.field-body) :is(.gm-nav-link, .gm-mobile-nav a, .gm-mobile-menu summary, .gm-table a.row-open, .pager a, .contact-phone-actions a, .gm-mobile-brand, .launch-module-actions a, .launch-links a, .launch-role-switch button) { min-height: var(--toque,44px); }
  body:not(.field-body) .gm-theme-toggle { min-height: var(--toque,44px); }
  .launch-role-panel { grid-template-columns: 1fr; padding: 13px; }
  .launch-role-switch { display: grid; grid-template-columns: 1fr; }
  .launch-role-switch button { justify-content: space-between; }
  .launch-role-status { grid-column: auto; }
  .launch-grid { grid-template-columns: minmax(0,1fr); }
  .launch-module-head { grid-template-columns: 38px minmax(0,1fr) auto; }
  .launch-links--columns { grid-template-columns: 1fr; }
  .liq-filters { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 12px; }
  .liq-filters .filter-field:nth-child(3) { grid-column: 1 / -1; }
  .liq-filters > button { grid-column: 1 / -1; }
  .liq-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .liq-metric { min-height: 110px; padding: 12px; }
  .liq-metric--blocked { grid-column: 1 / -1; }
  .liq-blocker { grid-template-columns: 36px minmax(0,1fr); padding: 13px; }
  .liq-blocker-icon { width: 34px; height: 34px; }
  .liq-blocker .pf-button { grid-column: 1 / -1; width: 100%; }
  .liq-totals { grid-template-columns: 1fr; }
  .liq-total { padding: 13px; }
  .liq-issue { grid-template-columns: 34px minmax(0,1fr); }
  .liq-issue-count { width: 32px; height: 32px; }
  .liq-issue-tag { grid-column: 2; }
  .pf-recon { grid-template-columns: 1fr; }
  .pf-recon-legend { grid-template-columns: 1fr; }
  .field-tabs { top: 61px; }
  .field-time-points { gap: 6px; }
  .field-stop { grid-template-columns: 28px minmax(0,1fr) auto; }
  .field-photo-grid { grid-template-columns: 1fr; }
}
/* Campo: controles y lectura preparados para teléfono, calle y captura con una mano. */
.field-sync-banner { font-size: 11px; }
.field-kicker, .field-day-meta { font-size: 11px; }
.field-sample-note, .field-progress-card > p { font-size: 10px; }
.field-stop > div strong, .field-current-card address { font-size: 11px; }
.field-stop > div span, .field-stop-state, .field-card-overline { font-size: 10px; }
.field-checks span { font-size: 10px; }
.field-time-points b { font-size: 9px; }
.field-time-points strong { font-size: 12px; }
.field-time-points small { font-size: 9px; }
.field-form-note, .field-evidence-list, .field-scan-card p { font-size: 10px; }
.field-required, .field-optional { font-size: 10px; }
.field-photo-button { font-size: 12px; }
.field-photo-button input { font-size: 11px; }
.field-scan-card strong { font-size: 11px; }
.field-payer legend { font-size: 11px; }
.field-choice { font-size: 12px; }
.field-label { font-size: 12px; }
.field-input { font-size: 16px; }
.field-primary-action, .field-secondary-action { font-size: 12px; }
.field-order-card > p { font-size: 11px; }
.field-variant-card summary { font-size: 12px; }
.field-variant-card ul { font-size: 11px; }
.field-close-card > div p { font-size: 11px; }
@media print {
  .gm-sidebar, .gm-topbar, .skip-link, .pf-actions, .pf-detail-filters, .gm-mobile-menu, .launch-role-panel { display: none !important; }
  .gm-workspace { margin-left: 0 !important; }
  .gm-main { max-width: none !important; padding: 0 !important; }
  .gm-app { display: block !important; }
  .gm-page-heading, .pf-section, .pf-audit, .pf-recon { break-inside: avoid; }
}


/* ============================================================================
   Añadidos del puerto — se vuelven a aplicar en cada refresco
   ========================================================================== */

/* La cronología de la ficha pintaba el punto por POSICIÓN —`:nth-child(2)`
   verde, `:nth-child(3)` ámbar—, que con tres eventos de muestra se ve bien y
   con datos reales miente: el segundo evento saldría verde aunque esté
   pendiente. El color sale del estado. */
.contact-event:nth-child(2) .contact-event-dot,
.contact-event:nth-child(3) .contact-event-dot { background: var(--azul); }
.contact-event-dot--hecho { background: var(--success) !important; }
.contact-event-dot--en_curso { background: var(--azul) !important; }
.contact-event-dot--pendiente { background: var(--warning) !important; }

/* `metric-card-top` queda sin estilo propio a propósito: la ronda 2 le quitó
   el icono a la tarjeta y el contenedor ya no reparte nada. Se conserva en el
   marcado porque es donde volvería el icono. */

/* Un botón que lleva a una pantalla donde todavía no se puede hacer nada. No
   se deshabilita —el enlace sí sirve, la acción de allá es la que no— pero se
   dice que no es el camino de hoy. */
.pf-button--disabled { opacity: .55; }

/* `.liq-table` traía `min-width: 680px` de la ronda 3, donde la tabla era una
   maqueta suelta que scrolleaba sola. En la pantalla portada el mismo
   elemento lleva además `.gm-table`, y el bloque móvil de `.gm-table` la pasa
   a tarjetas con `min-width: 0` — pero esa regla está en la línea 364 y la de
   `.liq-table` en la 936, misma especificidad, así que ganaba la de más
   abajo. A 375 px la tabla medía 680: las columnas se apilaban en DOS, la
   página scrolleaba 321 px de lado y «Servicio» y «Zona» quedaban fuera de
   la pantalla sin que nada avisara.

   Es el mismo accidente que `.gm-table a.row-open` contra la regla de los
   44 px: una regla estética escrita después que una regla de accesibilidad o
   de respuesta, y la cascada decidiendo en silencio. */
@media (max-width: 760px) {
  .liq-table { min-width: 0; }
}

/* --- Pantallas de contraseña (sin sesión) --------------------------------
   Una tarjeta centrada y nada más: no hay menú porque quien las ve no tiene
   sesión, y ofrecerle módulos a los que no puede entrar es prometerle algo
   que al tocarlo le pide iniciar sesión. */
.clave-pantalla { display: grid; min-height: 100vh; place-items: center; padding: 24px 16px; background: var(--canvas); }
.clave-tarjeta { width: 100%; max-width: 420px; padding: 30px 28px 26px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); }
.clave-logo { width: 148px; height: auto; margin-bottom: 20px; }
.clave-tarjeta h1 { margin: 2px 0 10px; font-size: 21px; color: var(--text-primary); }
.clave-texto { margin: 0 0 14px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.clave-texto--menor { font-size: 12px; color: var(--text-muted); }
.clave-aviso { margin: 0 0 16px; padding: 12px 13px; border: 1px solid var(--warning); border-radius: var(--radius-sm); background: var(--warning-bg); color: var(--text-primary); font-size: 12px; line-height: 1.5; }
.clave-error { margin: 0 0 14px; padding: 11px 13px; border: 1px solid var(--danger); border-radius: var(--radius-sm); background: var(--danger-bg); color: var(--text-primary); font-size: 12px; }
.clave-error p { margin: 0 0 4px; }
.clave-error p:last-child { margin: 0; }
.clave-reglas { margin: 12px 0 0; padding-left: 18px; color: var(--text-muted); font-size: 11px; line-height: 1.6; }
.clave-boton { width: 100%; margin-top: 16px; min-height: var(--toque); justify-content: center; }
.clave-volver { display: inline-block; margin-top: 18px; color: var(--azul); font-size: 12px; text-decoration: none; }
.clave-volver:hover { text-decoration: underline; }
.clave-pie { margin-top: 18px; color: var(--text-muted); font-size: 11px; }

/* El enlace de «olvidé mi contraseña» bajo el login del admin. */
.clave-enlace-login { display: block; margin-top: 14px; text-align: center; font-size: 13px; }