/* CleverRent — identidad Cleverxia (docs/DISENO.md). Un solo fichero, sin frameworks ni build.
   Orden: tokens · base · iconos · estructura (lateral, barra superior, pestañas) · componentes · pantallas · impresión. */

/* ── Tokens ─────────────────────────────────────────────────────────────────────────────────────
   Oscuro por defecto; el claro se activa con data-tema="claro" o, si no se ha elegido tema, con el del dispositivo.
   Los dos bloques claros son idénticos (un test lo comprueba) y los pares texto/fondo cumplen AA (otro test).
   Fuera de la guía, para que el contraste sea AA: --cx-sobre-acento, --cx-boton-hover, --cx-enlace, --cx-cian-texto,
   --cx-urgente-solido y --cx-campo. */
:root, :root[data-tema="oscuro"] {
  color-scheme: dark;
  --cx-fondo: #05080f;
  --cx-fondo-2: #0a1120;
  --cx-superficie: #0d1628;
  --cx-superficie-2: #111c33;
  --cx-linea: rgba(120, 190, 255, .16);
  --cx-texto: #e8f0ff;
  --cx-suave: #9caecb;
  --cx-acento: #2563eb;
  --cx-acento-2: #3b82f6;
  --cx-cian: #38bdf8;
  --cx-urgente: #f04444;
  --cx-alta: #f59e0b;
  --cx-normal: #3b82f6;
  --cx-baja: #64748b;
  --cx-ok: #22c55e;
  --cx-sobre-acento: #ffffff;
  --cx-boton-hover: #1d4ed8;
  --cx-enlace: #60a5fa;
  --cx-cian-texto: #38bdf8;
  --cx-urgente-solido: #dc2626;
  --cx-campo: #070c18;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    color-scheme: light;
    --cx-fondo: #f4f7fc;
    --cx-fondo-2: #ffffff;
    --cx-superficie: #ffffff;
    --cx-superficie-2: #eef3fb;
    --cx-linea: #d9e2f0;
    --cx-texto: #0a1120;
    --cx-suave: #4a5a76;
    --cx-acento: #2563eb;
    --cx-acento-2: #1d4ed8;
    --cx-cian: #0284c7;
    --cx-urgente: #dc2626;
    --cx-alta: #b45309;
    --cx-normal: #2563eb;
    --cx-baja: #64748b;
    --cx-ok: #15803d;
    --cx-sobre-acento: #ffffff;
    --cx-boton-hover: #1d4ed8;
    --cx-enlace: #1d4ed8;
    --cx-cian-texto: #0369a1;
    --cx-urgente-solido: #dc2626;
    --cx-campo: #ffffff;
  }
}
:root[data-tema="claro"] {
  color-scheme: light;
  --cx-fondo: #f4f7fc;
  --cx-fondo-2: #ffffff;
  --cx-superficie: #ffffff;
  --cx-superficie-2: #eef3fb;
  --cx-linea: #d9e2f0;
  --cx-texto: #0a1120;
  --cx-suave: #4a5a76;
  --cx-acento: #2563eb;
  --cx-acento-2: #1d4ed8;
  --cx-cian: #0284c7;
  --cx-urgente: #dc2626;
  --cx-alta: #b45309;
  --cx-normal: #2563eb;
  --cx-baja: #64748b;
  --cx-ok: #15803d;
  --cx-sobre-acento: #ffffff;
  --cx-boton-hover: #1d4ed8;
  --cx-enlace: #1d4ed8;
  --cx-cian-texto: #0369a1;
  --cx-urgente-solido: #dc2626;
  --cx-campo: #ffffff;
}
:root {
  --cx-fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cx-radio: 8px;
  --cx-radio-tarjeta: 12px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
  --ancho-lateral: 224px;
  --alto-superior: 52px;
  --alto-pestanas: 56px;
}
html.lateral-plegado { --ancho-lateral: 64px; }
@media (max-width: 1023px) { :root { --ancho-lateral: 64px; } }
@media (max-width: 767px) { :root { --alto-superior: 48px; } }

/* ── Base ───────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--cx-fuente);
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: var(--cx-texto);
  background: var(--cx-fondo);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cx-enlace); }
h1, h2, h3 { font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
@media (min-width: 1024px) { h1 { font-size: 28px; } }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--cx-cian); outline-offset: 2px; }
.cr-solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.cr-nota { color: var(--cx-suave); font-size: 14px; }
.cr-recorta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-hora { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--cx-suave); white-space: nowrap; }
.cr-con-icono { display: inline-flex; align-items: center; gap: var(--e2); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Iconos (sprite de Lucide en public/img/iconos.svg) */
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }

/* Referencias (INC-4K7, CO-01) y etiquetas pequeñas: monoespaciada */
.cr-ref { font-family: var(--cx-mono); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--cx-texto); text-decoration: none; }
a.cr-ref { color: var(--cx-enlace); }
.cr-chip {
  display: inline-block; padding: 1px 8px; font-family: var(--cx-mono); font-size: 11px; font-weight: 600; line-height: 1.6;
  text-transform: uppercase; letter-spacing: .08em; color: var(--cx-suave); border: 1px solid currentColor; border-radius: 999px;
}
.cr-chip--ok { color: var(--cx-ok); }
.cr-chip--alerta, .cr-chip--prio { color: var(--cx-urgente); }
.cr-prio-high .cr-chip--prio { color: var(--cx-alta); }
.cr-chip--ojo { color: var(--cx-alta); }
.cr-badge {
  display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; text-align: center; border-radius: 999px;
  font-family: var(--cx-mono); font-size: 12px; font-weight: 700; line-height: 20px; color: #fff; background: var(--cx-urgente-solido);
}

/* ── Estructura ─────────────────────────────────────────────────────────────────────────────── */
.cr-shell { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); min-height: 100dvh; }
.cr-principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cr-contenido { flex: 1; min-width: 0; padding: var(--e5); }
body.cr-fija { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
body.cr-fija .cr-shell { flex: 1; min-height: 0; }
body.cr-fija .cr-contenido { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* Lateral */
.cr-lateral {
  position: sticky; top: 0; align-self: start; height: 100dvh; display: flex; flex-direction: column; gap: var(--e2);
  padding: var(--e3) var(--e2); overflow-y: auto; background: var(--cx-fondo-2); border-right: 1px solid var(--cx-linea);
}
body.cr-fija .cr-lateral { height: 100%; }
.cr-marca { display: flex; align-items: center; min-height: 36px; padding: 0 var(--e3); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--cx-texto); text-decoration: none; }
.cr-nav { display: flex; flex-direction: column; }
.cr-nav-grupo { display: flex; flex-direction: column; gap: 2px; }
.cr-nav-grupo + .cr-nav-grupo { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--cx-linea); }
.cr-nav-item {
  position: relative; display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 44px; padding: 0 var(--e3);
  font: inherit; font-weight: 500; color: var(--cx-suave); text-decoration: none; text-align: left;
  background: none; border: 0; border-radius: var(--cx-radio); cursor: pointer; transition: background-color 150ms, color 150ms;
}
.cr-nav-item:hover { color: var(--cx-texto); background: var(--cx-superficie-2); }
.cr-nav-item.activa { color: var(--cx-texto); background: var(--cx-superficie-2); }
.cr-nav-item.activa .ic { color: var(--cx-cian-texto); }
.cr-nav-item .cr-badge { margin-left: auto; }
.cr-plegar { margin-top: auto; }
@media (min-width: 768px) and (max-width: 1023px) {
  .cr-nav-texto, .cr-plegar { display: none; }
  .cr-nav-item { justify-content: center; padding: 0; }
  .cr-marca { justify-content: center; padding: 0; font-size: 0; }
  .cr-marca::before { content: "CR"; font-size: 16px; }
  .cr-nav-item .cr-badge { position: absolute; top: 2px; right: 2px; margin: 0; min-width: 18px; height: 18px; line-height: 18px; padding: 0 4px; font-size: 11px; }
}
@media (min-width: 1024px) {
  .lateral-plegado .cr-nav-texto { display: none; }
  .lateral-plegado .cr-nav-item { justify-content: center; padding: 0; }
  .lateral-plegado .cr-marca { justify-content: center; padding: 0; font-size: 0; }
  .lateral-plegado .cr-marca::before { content: "CR"; font-size: 16px; }
  .lateral-plegado .cr-nav-item .cr-badge { position: absolute; top: 2px; right: 2px; margin: 0; min-width: 18px; height: 18px; line-height: 18px; padding: 0 4px; font-size: 11px; }
}

/* Barra superior */
.cr-superior {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--e3); height: var(--alto-superior);
  padding: 0 var(--e4); background: var(--cx-fondo-2); border-bottom: 1px solid var(--cx-linea);
}
.cr-marca--movil { display: none; padding: 0; }
.cr-oficina select {
  min-height: 40px; max-width: 100%; padding: 0 var(--e3); font: inherit; font-size: 16px; color: var(--cx-texto);
  background: var(--cx-campo); border: 1px solid var(--cx-linea); border-radius: var(--cx-radio);
}
.cr-oficina-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--cx-suave); }
.cr-superior-acciones { display: flex; align-items: center; gap: var(--e2); margin-left: auto; }
.cr-icono-boton {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--cx-suave);
  background: none; border: 0; border-radius: var(--cx-radio); cursor: pointer; transition: background-color 150ms, color 150ms;
}
.cr-icono-boton:hover { color: var(--cx-texto); background: var(--cx-superficie-2); }
/* Botón de tema: el sol (pasar a claro) se ve en oscuro; la luna (pasar a oscuro), en claro. */
.cr-icono-boton[data-bloqueado] { color: var(--cx-alta); }
:root[data-tema="claro"] [data-tema-sol] { display: none; }
:root[data-tema="oscuro"] [data-tema-luna] { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) [data-tema-sol] { display: none; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) [data-tema-luna] { display: none; }
}

/* Menú de la persona */
.cr-usuario-menu { position: relative; }
.cr-usuario-menu summary { display: flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e1); list-style: none; cursor: pointer; border-radius: var(--cx-radio); }
.cr-usuario-menu summary::-webkit-details-marker { display: none; }
.cr-inicial { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 13px; font-weight: 700; background: var(--cx-superficie-2); border: 1px solid var(--cx-linea); border-radius: 999px; }
.cr-usuario-nombre { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cr-menu-panel {
  position: absolute; right: 0; top: 100%; z-index: 40; width: 264px; margin-top: var(--e1); padding: var(--e3);
  display: grid; gap: var(--e3); background: var(--cx-superficie); border: 1px solid var(--cx-linea); border-radius: var(--cx-radio-tarjeta);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.cr-menu-quien { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cr-menu-quien small { display: block; font-weight: 400; color: var(--cx-suave); }
.cr-menu-salir { display: flex; align-items: center; gap: var(--e2); width: 100%; min-height: 44px; padding: 0 var(--e3); font: inherit; color: var(--cx-texto); background: none; border: 1px solid var(--cx-linea); border-radius: var(--cx-radio); cursor: pointer; }
.cr-menu-salir:hover { background: var(--cx-superficie-2); }
.cr-tema { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--cx-linea); border-radius: var(--cx-radio); }
.cr-tema-opcion { min-height: 44px; padding: 0 var(--e2); font: inherit; font-size: 14px; color: var(--cx-suave); background: none; border: 0; border-right: 1px solid var(--cx-linea); cursor: pointer; }
.cr-tema-opcion:last-child { border-right: 0; }
.cr-tema-opcion:hover { color: var(--cx-texto); background: var(--cx-superficie-2); }
.cr-tema-opcion[aria-pressed="true"] { color: var(--cx-sobre-acento); background: var(--cx-acento); }

/* Pestañas inferiores (móvil) */
.cr-pestanas-app { display: none; }
.cr-mas-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e1) var(--e2); margin: 0 0 var(--e3); }
@media (max-width: 767px) {
  .cr-shell { grid-template-columns: minmax(0, 1fr); }
  .cr-lateral, .cr-usuario-menu, .cr-boton.cr-nueva-cta { display: none; }
  .cr-marca--movil { display: flex; }
  .cr-superior { padding: 0 var(--e3); }
  .cr-oficina-nombre, .cr-oficina select { max-width: 42vw; }
  .cr-contenido { padding: var(--e3) var(--e3) calc(var(--alto-pestanas) + env(safe-area-inset-bottom) + var(--e3)); }
  [data-tema-rapido] { display: none !important; }
  .cr-pestanas-app {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: stretch;
    height: calc(var(--alto-pestanas) + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--cx-fondo-2); border-top: 1px solid var(--cx-linea);
  }
  .cr-pestana-app {
    position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 44px; padding: 0;
    font: inherit; font-size: 11px; font-weight: 500; color: var(--cx-suave); text-decoration: none; background: none; border: 0; cursor: pointer;
  }
  .cr-pestana-app.activa { color: var(--cx-texto); }
  .cr-pestana-app.activa .ic { color: var(--cx-cian-texto); }
  .cr-pestana-app .cr-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; line-height: 18px; }
  .cr-nueva-boton { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 40px; color: var(--cx-sobre-acento); background: var(--cx-acento); border-radius: var(--cx-radio-tarjeta); }
}

/* Modo soporte */
.cr-soporte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e4); padding: var(--e2) var(--e4); color: #fff; background: var(--cx-urgente-solido); }
.cr-soporte-gestora { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-soporte .cr-boton--claro { color: var(--cx-texto); background: var(--cx-superficie); }

/* ── Componentes ────────────────────────────────────────────────────────────────────────────── */
.cr-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e4);
  font: inherit; font-weight: 600; text-align: center; text-decoration: none; color: var(--cx-sobre-acento); background: var(--cx-acento);
  border: 1px solid transparent; border-radius: var(--cx-radio); cursor: pointer; transition: background-color 150ms, border-color 150ms;
}
.cr-boton:hover { background: var(--cx-boton-hover); }
.cr-boton:disabled { opacity: .55; cursor: not-allowed; }
.cr-boton--ancho { width: 100%; }
.cr-boton--corto { min-height: 40px; padding: 0 var(--e3); }
.cr-boton--icono { min-width: 44px; padding: 0 var(--e3); }
.cr-boton--claro { color: var(--cx-texto); background: transparent; border-color: var(--cx-linea); }
.cr-boton--claro:hover { background: var(--cx-superficie-2); }
.cr-boton--alerta, .cr-boton--peligro { background: var(--cx-urgente-solido); }
.cr-boton--alerta:hover, .cr-boton--peligro:hover { background: #b91c1c; }
.cr-boton .ic { width: 18px; height: 18px; vertical-align: 0; }
label.cr-boton { cursor: pointer; }
.cr-grabando { color: #fff; background: var(--cx-urgente-solido); border-color: transparent; }

.cr-campo { display: block; margin-bottom: var(--e4); }
.cr-campo > span { display: block; margin-bottom: 6px; font-weight: 600; }
.cr-campo small { display: block; margin-top: var(--e1); }
:where(.cr-campo, .cr-tablero, .cr-config, .cr-filtros, .cr-paso, .cr-dia, .cr-tabla) :where(input:not([type=checkbox], [type=radio], [type=file], [type=hidden]), select, textarea) {
  width: 100%; min-height: 44px; padding: 10px var(--e3); font: inherit; font-size: 16px; color: var(--cx-texto);
  background: var(--cx-campo); border: 1px solid var(--cx-linea); border-radius: var(--cx-radio);
}
:where(.cr-campo, .cr-tablero, .cr-config, .cr-filtros, .cr-paso, .cr-dia) textarea { min-height: 96px; resize: vertical; }
.cr-campo input[type="file"] { padding: 10px var(--e3); }
:is(input, select, textarea):focus-visible { outline: 2px solid var(--cx-cian); outline-offset: 0; border-color: var(--cx-cian); }
::placeholder { color: var(--cx-suave); opacity: 1; }
.cr-tramo input, .cr-tabla select { width: auto; }
.cr-casilla { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: var(--e4); }
.cr-casilla input { width: 22px; height: 22px; accent-color: var(--cx-acento); }
.cr-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.cr-acciones form { display: flex; gap: var(--e2); }
.cr-formulario { max-width: 720px; }

.cr-tarjeta, .cr-bloque, .cr-ficha-cab { background: var(--cx-superficie); border: 1px solid var(--cx-linea); border-radius: var(--cx-radio-tarjeta); }
.cr-tarjeta { padding: var(--e4) var(--e5); }
.cr-bloque { min-width: 0; padding: var(--e3) var(--e4); }
.cr-bloque h2 { font-size: 16px; margin: 0 0 var(--e2); }
.cr-ficha { margin-bottom: var(--e4); }
.cr-ficha h2 { font-size: 20px; }
.cr-ficha h3 { font-size: 16px; margin-top: var(--e4); }
.cr-peligro { border-color: var(--cx-urgente); }
.cr-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e4); }
.cr-cabecera h1 { margin: 0; }
.cr-titulo-seccion { font-size: 20px; margin: var(--e4) 0 var(--e3); }
.cr-vacio { padding: var(--e5) 0; }
.cr-datos { display: grid; grid-template-columns: max-content 1fr; gap: var(--e2) var(--e4); margin: 0; }
.cr-datos dt { font-weight: 600; color: var(--cx-suave); }
.cr-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cr-lista { margin: 0; padding-left: 20px; }
.cr-lista li { margin-bottom: 6px; }
.cr-texto-libre { white-space: pre-wrap; overflow-wrap: anywhere; }
.cr-clave { font-family: var(--cx-mono); font-size: 20px; font-weight: 700; letter-spacing: 1px; user-select: all; }
.cr-inactivo { opacity: .6; }
.cr-anulada, .cr-anulada * { text-decoration: line-through; color: var(--cx-suave); }
.cr-anulada .cr-chip { text-decoration: none; }

.cr-aviso, .cr-error {
  margin: 0 0 var(--e3); padding: 10px var(--e3); color: var(--cx-texto); background: var(--cx-superficie-2);
  border: 1px solid var(--cx-linea); border-left: 3px solid var(--cx-cian); border-radius: var(--cx-radio);
}
.cr-aviso .ic, .cr-error .ic { color: var(--cx-cian-texto); }
.cr-aviso--ojo { border-left-color: var(--cx-alta); }
.cr-aviso--ojo .ic { color: var(--cx-alta); }
.cr-aviso--seguridad, .cr-error { border-left-color: var(--cx-urgente); background: color-mix(in srgb, var(--cx-urgente) 12%, var(--cx-superficie)); }
.cr-aviso--seguridad .ic { color: var(--cx-urgente); }
.cr-error { list-style: none; }
.cr-aviso--conflicto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }

.cr-tabla-marco { overflow-x: auto; background: var(--cx-superficie); border: 1px solid var(--cx-linea); border-radius: var(--cx-radio-tarjeta); }
.cr-tabla { width: 100%; border-collapse: collapse; }
.cr-tabla th, .cr-tabla td { padding: 10px var(--e3); text-align: left; vertical-align: top; overflow-wrap: anywhere; border-bottom: 1px solid var(--cx-linea); }
.cr-tabla th { font-family: var(--cx-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--cx-suave); white-space: nowrap; }
.cr-tabla th a { color: var(--cx-suave); text-decoration: none; }
.cr-tabla tbody tr:last-child td { border-bottom: 0; }
.cr-tabla tbody tr:hover { background: var(--cx-superficie-2); }
.cr-tabla td .cr-recorta { display: block; max-width: 28ch; }
.cr-tabla--lista td a:not(.cr-ref) { font-weight: 600; }
.cr-fila-urgente td:first-child { box-shadow: inset 4px 0 0 var(--cx-urgente); }
.cr-fila-seguridad { background: color-mix(in srgb, var(--cx-urgente) 8%, transparent); }
.cr-fila-vencida td:first-child { box-shadow: inset 4px 0 0 var(--cx-urgente); }
.cr-fila-pronto td:first-child { box-shadow: inset 4px 0 0 var(--cx-alta); }
.cr-fila-vencida td { background: color-mix(in srgb, var(--cx-urgente) 8%, transparent); }
.cr-paginas, .cr-paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--e3); margin: var(--e4) 0; }

.cr-desplegable { margin: 0 0 var(--e2); background: var(--cx-superficie); border: 1px solid var(--cx-linea); border-radius: var(--cx-radio); }
.cr-desplegable summary { display: flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e3); font-weight: 600; cursor: pointer; }
.cr-desplegable .cr-badge { background: var(--cx-acento); }
.cr-filtros-form, .cr-columnas-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 var(--e3); align-items: end; padding: var(--e1) var(--e3) var(--e3); }
.cr-filtros-form .cr-acciones { grid-column: 1 / -1; }
.cr-orden-columnas { grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; }
.cr-orden-columnas li { display: flex; align-items: center; gap: var(--e2); padding: var(--e1) 0; }
.cr-orden-columnas li span { flex: 1; }
.cr-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e2) var(--e3); margin-bottom: var(--e4); }
.cr-filtros .cr-campo { flex: 1 1 200px; margin: 0; }

.cr-dialogo { max-width: 28em; padding: var(--e5); color: var(--cx-texto); background: var(--cx-superficie); border: 1px solid var(--cx-linea); border-radius: var(--cx-radio-tarjeta); }
.cr-dialogo::backdrop { background: rgba(2, 6, 14, .65); }
.cr-hoja { width: 100%; max-width: none; margin: auto 0 0; padding-bottom: calc(var(--e5) + env(safe-area-inset-bottom)); border-radius: var(--cx-radio-tarjeta) var(--cx-radio-tarjeta) 0 0; }
.cr-hoja-opciones, .cr-mas[open] { display: grid; gap: var(--e2); }
.cr-hoja-opciones { margin: 0 0 var(--e3); }
@media (min-width: 701px) { .cr-hoja { width: auto; margin: auto; max-width: 28em; border-radius: var(--cx-radio-tarjeta); } }
@media (min-width: 768px) { #hoja-mas { display: none; } }

/* Pantalla de acceso: sobria, sin fondos decorativos */
.cr-acceso { min-height: 100dvh; display: grid; align-items: center; justify-items: center; padding: var(--e4); }
.cr-acceso-caja { width: 100%; max-width: 400px; padding: var(--e5); background: var(--cx-superficie); border: 1px solid var(--cx-linea); border-radius: var(--cx-radio-tarjeta); }
.cr-acceso-caja .cr-marca { padding: 0; margin-bottom: var(--e4); }
.cr-acceso-caja h1 { font-size: 24px; margin-bottom: var(--e4); }

/* ── Tablero ────────────────────────────────────────────────────────────────────────────────── */
[data-cabecera] { display: contents; }
.cr-tablero { min-width: 0; }
body.cr-fija .cr-tablero { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.cr-tablero-contenido { display: flex; flex: 1; flex-direction: column; min-height: 0; }

/* Franja de seguridad: siempre arriba, una línea por incidencia (dos como mucho) y «+N más» */
.cr-seguridad {
  position: sticky; top: var(--alto-superior); z-index: 15; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--e3);
  margin: 0 0 var(--e2); padding: 6px var(--e3); color: var(--cx-texto); border: 1px solid var(--cx-urgente); border-radius: var(--cx-radio);
  background: color-mix(in srgb, var(--cx-urgente) 14%, var(--cx-fondo-2));
}
body.cr-fija .cr-seguridad { position: static; flex: none; }
.cr-seguridad-titulo { grid-column: 1; display: flex; align-items: center; gap: var(--e2); margin: 0; }
.cr-seguridad-titulo .ic { color: var(--cx-urgente); width: 18px; height: 18px; vertical-align: 0; }
.cr-seguridad-linea { grid-column: 1 / -1; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cx-texto); text-decoration: none; line-height: 28px; }
.cr-seguridad-linea:hover { text-decoration: underline; }
.cr-seguridad-linea .cr-ref { margin-right: var(--e1); }
.cr-seguridad-mas { grid-column: 2; grid-row: 1; align-self: center; font-weight: 600; color: var(--cx-texto); }

.cr-vistas { display: inline-flex; align-self: flex-start; margin: 0 0 var(--e2); overflow: hidden; border: 1px solid var(--cx-linea); border-radius: var(--cx-radio); }
.cr-vistas a { display: inline-flex; align-items: center; gap: var(--e2); min-height: 40px; padding: 0 var(--e4); font-weight: 600; color: var(--cx-suave); text-decoration: none; }
.cr-vistas a + a { border-left: 1px solid var(--cx-linea); }
.cr-vistas a.activa { color: var(--cx-texto); background: var(--cx-superficie-2); }
.cr-vistas a.activa .ic { color: var(--cx-cian-texto); }
body.cr-fija :is(.cr-vistas, .cr-desplegable, .cr-alerta-llaves, .cr-aviso) { flex: none; }
body.cr-fija .cr-desplegable { overflow: auto; max-height: 50dvh; }

/* Aviso de llaves: una línea con enlace */
.cr-alerta-llaves {
  display: flex; align-items: center; gap: var(--e2); min-height: 44px; margin: 0 0 var(--e2); padding: 0 var(--e3);
  color: var(--cx-texto); border: 1px solid var(--cx-urgente); border-radius: var(--cx-radio);
  background: color-mix(in srgb, var(--cx-urgente) 12%, var(--cx-fondo-2));
}
.cr-alerta-llaves .ic { color: var(--cx-urgente); }
.cr-alerta-llaves-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cr-alerta-llaves a { flex: none; font-weight: 600; }
.cr-alerta-llaves--pronto { border-color: var(--cx-alta); background: color-mix(in srgb, var(--cx-alta) 12%, var(--cx-fondo-2)); }
.cr-alerta-llaves--pronto .ic { color: var(--cx-alta); }

/* Columnas: pestañas deslizables hasta 1023 px; cinco columnas con scroll propio y cabecera fija en escritorio */
.cr-col-pestanas { display: flex; flex: none; gap: var(--e2); margin: 0 0 var(--e2); overflow-x: auto; scrollbar-width: none; }
.cr-col-pestanas::-webkit-scrollbar { display: none; }
.cr-col-pestana {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e4); font: inherit; font-weight: 600;
  color: var(--cx-texto); white-space: nowrap; background: var(--cx-superficie); border: 1px solid var(--cx-linea); border-radius: 999px; cursor: pointer;
}
.cr-col-pestana b { font-family: var(--cx-mono); font-size: 13px; color: var(--cx-enlace); }
.cr-col-pestana.activa { color: var(--cx-sobre-acento); background: var(--cx-acento); border-color: var(--cx-acento); }
.cr-col-pestana.activa b { color: var(--cx-sobre-acento); }
.cr-columnas { display: flex; flex: 1; gap: var(--e3); min-height: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.cr-columna { flex: 0 0 100%; display: flex; flex-direction: column; min-width: 0; min-height: 0; scroll-snap-align: start; background: var(--cx-superficie-2); border: 1px solid var(--cx-linea); border-radius: var(--cx-radio-tarjeta); }
.cr-columna-titulo { display: flex; flex: none; align-items: center; justify-content: space-between; margin: 0; padding: var(--e3) var(--e3) var(--e2); font-size: 15px; letter-spacing: 0; }
.cr-contador { min-width: 28px; padding: 0 var(--e2); font-family: var(--cx-mono); font-size: 13px; text-align: center; color: var(--cx-suave); background: var(--cx-superficie); border: 1px solid var(--cx-linea); border-radius: 999px; }
.cr-columna-lista { flex: 1; display: flex; flex-direction: column; gap: var(--e2); min-height: 80px; padding: 0 var(--e2) var(--e2); overflow-y: auto; overscroll-behavior: contain; }
.cr-columna-vacia { margin: 0; padding: var(--e4) var(--e1); }
.cr-columna--destino .cr-columna-lista { outline: 2px dashed var(--cx-cian); outline-offset: -4px; }
.cr-columna--encima .cr-columna-lista { background: color-mix(in srgb, var(--cx-cian) 10%, transparent); }
/* Móvil (< 768 px): una columna a la vez, a todo el ancho; la elige la pestaña. */
@media (max-width: 767px) {
  .cr-columnas { display: block; overflow: visible; }
  .cr-columna:not(.activa) { display: none; }
  .cr-columna.activa { height: 100%; }
}
/* Tableta (768–1023 px): varias columnas visibles con scroll horizontal, para poder arrastrar entre ellas. */
@media (min-width: 768px) {
  .cr-col-pestanas { display: none; }
  .cr-columna { flex-basis: calc(50% - 6px); }
}
@media (min-width: 1024px) {
  .cr-col-pestanas { display: none; }
  .cr-columnas { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); scroll-snap-type: none; }
  .cr-columna { flex: none; }
}

/* Tarjeta de incidencia */
.cr-inc {
  position: relative; flex: none; overflow-wrap: anywhere; background: var(--cx-superficie);
  border: 1px solid var(--cx-linea); border-left: 4px solid var(--cx-normal); border-radius: var(--cx-radio);
}
.cr-inc.cr-prio-urgent { border-left-color: var(--cx-urgente); }
.cr-inc.cr-prio-high { border-left-color: var(--cx-alta); }
.cr-inc.cr-prio-low { border-left-color: var(--cx-baja); }
.cr-inc--seguridad { border-color: var(--cx-urgente); background: color-mix(in srgb, var(--cx-urgente) 8%, var(--cx-superficie)); }
.cr-inc.cr-arrastrando { opacity: .5; }
.cr-inc-enlace { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 10px var(--e3); color: inherit; text-decoration: none; }
.cr-inc-enlace > * { min-width: 0; }
.cr-inc-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); }
.cr-inc-cat, .cr-voz { display: inline-flex; color: var(--cx-suave); }
.cr-voz { color: var(--cx-cian-texto); }
.cr-inc-cat .ic { width: 18px; height: 18px; }
.cr-voz .ic { width: 16px; height: 16px; }
.cr-inc-dir { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cr-inc-meta .cr-recorta { flex: 1 1 12ch; }
.cr-inc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); color: var(--cx-suave); font-size: 14px; }
.cr-inc-meta .ic { width: 16px; height: 16px; }
.cr-inc-meta .cr-hora { margin-left: auto; flex: none; }
.cr-inc .cr-chip { align-self: flex-start; }
.cr-mover { display: block; width: 100%; min-height: 44px; font: inherit; font-weight: 600; color: var(--cx-enlace); background: transparent; border: 0; border-top: 1px solid var(--cx-linea); border-radius: 0 0 var(--cx-radio) var(--cx-radio); cursor: pointer; }
.cr-mover:hover { background: var(--cx-superficie-2); }
.cr-destacada { outline: 2px solid var(--cx-urgente); outline-offset: -1px; background: color-mix(in srgb, var(--cx-urgente) 8%, var(--cx-superficie)); }

/* Mensajes */
.cr-mensaje { margin: 0 0 var(--e3); padding: var(--e3); overflow-wrap: anywhere; background: var(--cx-superficie); border: 1px solid var(--cx-linea); border-left: 4px solid var(--cx-cian); border-radius: var(--cx-radio-tarjeta); }
.cr-mensaje--atendido { border-left-color: var(--cx-linea); opacity: .8; }
.cr-mensaje-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e1) var(--e3); }
.cr-mensaje-texto { margin: 6px 0 10px; white-space: pre-wrap; }
.cr-voz-icono { width: 16px; height: 16px; color: var(--cx-cian-texto); }

/* Ficha de la incidencia */
.cr-ficha-cab { margin: 0 0 var(--e3); padding: var(--e3) var(--e4); overflow-wrap: anywhere; border-left: 4px solid var(--cx-normal); }
.cr-ficha-cab.cr-prio-urgent { border-left-color: var(--cx-urgente); }
.cr-ficha-cab.cr-prio-high { border-left-color: var(--cx-alta); }
.cr-ficha-cab.cr-prio-low { border-left-color: var(--cx-baja); }
.cr-ficha-cab.cr-inc--seguridad { border-color: var(--cx-urgente); }
.cr-ficha-cab p { margin: var(--e1) 0; }
.cr-ficha-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cr-ficha-linea h1 { margin: 0; font-family: var(--cx-mono); font-size: 22px; }
.cr-ficha-cat { display: flex; align-items: center; gap: var(--e2); font-weight: 600; }
.cr-ficha-desc { white-space: pre-wrap; }
.cr-accion-llamar { min-height: 56px; margin: 0 0 var(--e3); font-size: 18px; }
.cr-ficha-acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--e3); margin: 0 0 var(--e3); }
.cr-chips { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0 0 var(--e2); }
.cr-fila-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e2) var(--e3); }
.cr-fila-campos .cr-campo { flex: 1 1 120px; margin: 0; }
.cr-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--e2); }
.cr-fotos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--cx-linea); border-radius: var(--cx-radio); }
.cr-linea-tiempo { margin: 0; padding: 0 0 0 14px; list-style: none; border-left: 2px solid var(--cx-linea); }
.cr-evento { display: flex; flex-direction: column; gap: 2px; padding: 0 0 var(--e3) var(--e3); overflow-wrap: anywhere; }
.cr-evento-quien { font-weight: 700; }
.cr-evento--ia .cr-evento-quien { color: var(--cx-cian-texto); }
.cr-evento-que { white-space: pre-wrap; }

/* Nueva incidencia */
.cr-nueva { display: grid; gap: var(--e3); max-width: 720px; }
.cr-paso { min-width: 0; margin: 0; padding: var(--e2) var(--e3) var(--e3); background: var(--cx-superficie); border: 1px solid var(--cx-linea); border-radius: var(--cx-radio-tarjeta); }
.cr-paso legend { padding: 0 6px; font-weight: 700; }
.cr-paso .cr-boton { margin-top: var(--e2); }
.cr-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--e2); }
.cr-categoria, .cr-prioridad {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e1); min-height: 64px; padding: var(--e2);
  text-align: center; overflow-wrap: anywhere; cursor: pointer; background: var(--cx-campo); border: 1px solid var(--cx-linea); border-radius: var(--cx-radio);
}
.cr-categoria input, .cr-prioridad input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cr-categoria-icono { display: inline-flex; color: var(--cx-suave); }
.cr-categoria-icono .ic { width: 24px; height: 24px; }
.cr-categoria:has(input:checked), .cr-prioridad:has(input:checked) { font-weight: 700; border-color: var(--cx-cian); background: color-mix(in srgb, var(--cx-cian) 12%, var(--cx-campo)); box-shadow: inset 0 0 0 1px var(--cx-cian); }
.cr-categoria:has(input:checked) .cr-categoria-icono { color: var(--cx-cian-texto); }
.cr-categoria:has(input:focus-visible), .cr-prioridad:has(input:focus-visible) { outline: 2px solid var(--cx-cian); outline-offset: 2px; }
.cr-prioridades { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--e2); }
.cr-prioridad { flex-direction: row; min-height: 48px; border-left-width: 4px; }
.cr-prioridad.cr-prio-urgent { border-left-color: var(--cx-urgente); }
.cr-prioridad.cr-prio-high { border-left-color: var(--cx-alta); }
.cr-prioridad.cr-prio-normal { border-left-color: var(--cx-normal); }
.cr-prioridad.cr-prio-low { border-left-color: var(--cx-baja); }

/* Cartera, llaves con firma y configuración */
.cr-config { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; gap: var(--e4); }
.cr-config .cr-ficha { margin: 0; }
.cr-dia { min-width: 0; margin: 0 0 var(--e2); padding: 6px var(--e3) 10px; border: 1px solid var(--cx-linea); border-radius: var(--cx-radio); }
.cr-dia legend { padding: 0 6px; font-weight: 700; }
.cr-tramos { display: flex; flex-wrap: wrap; gap: var(--e2) 20px; }
.cr-tramo { display: flex; align-items: center; gap: var(--e2); }
.cr-tramo input { width: 8.5em; }
.cr-firma { margin-bottom: var(--e4); }
.cr-firma canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; background: #fff; border: 2px dashed var(--cx-suave); border-radius: var(--cx-radio); touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.cr-firma--hecha canvas { border-style: solid; border-color: var(--cx-ok); }
.cr-firma-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); margin-top: 6px; }

/* Informes */
.cr-informe { min-width: 0; }
.cr-informe-cab h2 { margin: 0; }
.cr-informe-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--e2); margin: 0 0 var(--e3); }
.cr-cifra { display: flex; flex-direction: column; padding: 10px 14px; background: var(--cx-superficie); border: 1px solid var(--cx-linea); border-radius: var(--cx-radio-tarjeta); }
.cr-cifra b { font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.cr-cifra span { color: var(--cx-suave); font-size: 14px; }
.cr-cifra--urgente b { color: var(--cx-urgente); }
.cr-informe-bloque { margin: 0 0 var(--e3); }
.cr-informe-tiempos { width: 100%; border-collapse: collapse; }
.cr-informe-tiempos th, .cr-informe-tiempos td { padding: var(--e2) var(--e2) var(--e2) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cx-linea); }
.cr-informe-tiempos thead th { font-size: 13px; color: var(--cx-suave); }
.cr-informe-grande { margin: 0 0 6px; font-size: 18px; }
.cr-informe-grande b { font-size: 28px; color: var(--cx-enlace); }
.cr-barra-fila { margin: 0 0 10px; }
.cr-barra-texto { display: flex; justify-content: space-between; gap: var(--e3); overflow-wrap: anywhere; }
.cr-barra-svg { display: block; width: 100%; height: 12px; margin-top: 2px; }
.cr-barra-fondo { fill: var(--cx-superficie-2); }
.cr-barra-valor { fill: var(--cx-acento); }
.cr-barra-valor--alerta { fill: var(--cx-urgente); }
.cr-barra-detalle { display: block; }

/* ORDEN-010: app instalable */
[hidden] { display: none !important; }
/* ORDEN-014: el aviso de versión no flota sobre el contenido. Escritorio: chip en la barra superior. Móvil: franja sobre las pestañas y el contenido reserva su alto. */
.cr-pwa-aviso { display: flex; align-items: center; gap: var(--e2); color: var(--cx-texto); }
.cr-pwa-aviso .cr-boton { min-height: 40px; }
@media (max-width: 767px) {
  :root { --alto-aviso: 56px; }
  .cr-pwa-aviso {
    position: fixed; left: 0; right: 0; bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom)); z-index: 29;
    justify-content: space-between; height: var(--alto-aviso); padding: 0 var(--e3);
    background: var(--cx-superficie); border-top: 1px solid var(--cx-linea);
  }
  html.cr-hay-aviso .cr-contenido { padding-bottom: calc(var(--alto-pestanas) + var(--alto-aviso) + env(safe-area-inset-bottom) + var(--e3)); }
}
@media (min-width: 768px) { .cr-pwa-aviso-texto { display: none; } }

/* Recibo A4: siempre en claro (se imprime) */
.cr-recibo { max-width: 190mm; margin: 0 auto var(--e5); padding: 14mm; color: #000; background: #fff; border: 1px solid #d0d7e2; font-size: 13px; line-height: 1.4; }
.cr-recibo h1 { margin: 0 0 4px; font-size: 22px; }
.cr-recibo h2 { margin: 14px 0 6px; padding-bottom: 2px; font-size: 15px; letter-spacing: 0; border-bottom: 1px solid #000; }
.cr-recibo table { width: 100%; border-collapse: collapse; }
.cr-recibo th { width: 38%; padding: 3px 8px 3px 0; text-align: left; vertical-align: top; font-weight: 600; }
.cr-recibo td { padding: 3px 0; overflow-wrap: anywhere; }
.cr-recibo-firmas { display: flex; gap: 12mm; margin-top: var(--e2); }
.cr-recibo-firmas figure { flex: 1; margin: 0; }
.cr-recibo-firmas img { display: block; max-width: 100%; max-height: 32mm; border-bottom: 1px solid #000; }
.cr-recibo-firmas figcaption { margin-top: 2px; font-size: 11px; }
.cr-recibo-legal { margin-top: 12px; font-size: 10.5px; line-height: 1.35; }
.cr-recibo-huella { font-family: var(--cx-mono); font-size: 12px; letter-spacing: .5px; word-break: break-all; }
.cr-recibo-anulado { margin: var(--e2) 0; padding: 6px 10px; font-weight: 700; border: 2px solid #000; }

@media (max-width: 600px) {
  .cr-acciones, .cr-acciones form { flex-direction: column; align-items: stretch; width: 100%; }
  .cr-datos { grid-template-columns: 1fr; gap: 2px; }
  .cr-datos dd { margin-bottom: var(--e2); }
  .cr-recibo { padding: var(--e3); }
  .cr-tarjeta { padding: var(--e4); }
}

/* Entrar con la huella o la cara (ORDEN-011) */
.cr-huella { margin-bottom: var(--e4); }
.cr-huella .cr-nota { margin: var(--e2) 0 0; text-align: center; }
.cr-huella .cr-error { margin: var(--e2) 0 0; }
.cr-boton--grande { min-height: 52px; font-size: 16px; }
a.cr-menu-salir { text-decoration: none; }
.cr-renombrar { display: flex; flex-wrap: wrap; gap: var(--e2); }
.cr-renombrar input { flex: 1 1 14ch; min-width: 0; }
.cr-dispositivo-nuevo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3); max-width: 720px; margin-bottom: var(--e4); }
.cr-dispositivo-nuevo .cr-campo { flex: 1 1 240px; margin: 0; }

/* ── Impresión (recibo e informes): siempre en claro y sin barras ─────────────────────────────── */
@page { size: A4; margin: 10mm; }
@media print {
  :root:root:root {
    color-scheme: light;
    --cx-fondo: #ffffff; --cx-fondo-2: #ffffff; --cx-superficie: #ffffff; --cx-superficie-2: #eef3fb; --cx-linea: #999999;
    --cx-texto: #000000; --cx-suave: #333333; --cx-acento: #2563eb; --cx-urgente: #dc2626; --cx-alta: #b45309; --cx-ok: #15803d;
    --cx-enlace: #000000; --cx-campo: #ffffff;
  }
  body { font-size: 12px; color: #000; background: #fff; }
  body.cr-fija { display: block; height: auto; overflow: visible; }
  .cr-soporte, .cr-lateral, .cr-superior, .cr-pestanas-app, .cr-no-imprimir, .cr-aviso, .cr-error, .cr-dialogo { display: none !important; }
  .cr-shell { display: block; }
  .cr-contenido { padding: 0; margin: 0; overflow: visible; }
  .cr-recibo { max-width: none; margin: 0; padding: 0; border: 0; break-inside: avoid; page-break-inside: avoid; }
  .cr-informe .cr-bloque, .cr-informe .cr-cifra { break-inside: avoid; page-break-inside: avoid; }
  .cr-informe-cifras { grid-template-columns: repeat(5, 1fr); }
  .cr-bloque, .cr-cifra { border-color: #999; }
  .cr-barra-svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}