/* =====================================================================
   La Cachapera · Mantenimiento
   Sistema de diseno segun BRANDING-PROMPT. Mobile-first.

   REGLA DE TOKENS: --ink es SIEMPRE color de texto, nunca fondo.
   Las superficies oscuras (lateral, boton primario) usan --inverse*,
   que son oscuras en los dos temas.
   ===================================================================== */

:root {
  --brand: #fac914;
  --brand-dark: #e2b30b;
  --brand-soft: #fff5cc;

  --ground: #f6f6f7;       /* fondo de pagina */
  --surface: #ffffff;      /* tarjetas */
  --surface-2: #f6f6f7;    /* zonas suaves dentro de tarjetas */
  --ink: #2c2f31;          /* texto principal */
  --muted: #5f6368;        /* texto secundario (4.5:1 sobre --ground) */
  --border: #e5e5e7;
  --focus: #2c2f31;

  --inverse: #2c2f31;          /* lateral, barra movil */
  --inverse-2: #373b3e;
  --inverse-border: #464a4d;
  --on-inverse: #ffffff;
  --on-inverse-soft: #c3c6c9;

  --btn-primary-bg: #2c2f31;
  --btn-primary-bg-hover: #3d4144;
  --btn-primary-ink: #fac914;

  /* Estados (BRANDING §2). El ambar de texto va oscurecido para llegar a 4.5:1. */
  --ok: #1d6a3a;     --ok-bg: #e7f7ec;
  --warn: #8a5807;   --warn-bg: #fff3e0;
  --err: #a23029;    --err-bg: #fdecea;
  --info: #2363b8;   --info-bg: #eef3ff;

  --r: 14px; --r-sm: 10px; --r-lg: 18px; --r-pill: 999px;
  --sombra: 0 1px 3px rgba(44, 47, 49, .08);
  --sombra-media: 0 8px 24px rgba(44, 47, 49, .12);
  --sombra-brand: 0 6px 18px rgba(250, 201, 20, .35);

  --f-titulo: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
  --f-cuerpo: "Cabin", Helvetica, Arial, sans-serif;

  --lateral: 264px;
  color-scheme: light;
}

/* Tema oscuro: automatico segun el sistema, salvo que se fuerce "claro". */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ground: #151718; --surface: #1e2123; --surface-2: #262a2c;
    --ink: #eceef0; --muted: #a8acb0; --border: #34383b; --focus: #fac914;
    --inverse: #0f1112; --inverse-2: #1b1e20; --inverse-border: #2e3235;
    --btn-primary-bg: #fac914; --btn-primary-bg-hover: #ffd83d; --btn-primary-ink: #2c2f31;
    --ok: #6fd39a; --ok-bg: #16301f; --warn: #f2b85b; --warn-bg: #33260f;
    --err: #ff8b82; --err-bg: #3a1a18; --info: #8fb6ff; --info-bg: #17243a;
    --brand-soft: #3a3210;
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --ground: #151718; --surface: #1e2123; --surface-2: #262a2c;
  --ink: #eceef0; --muted: #a8acb0; --border: #34383b; --focus: #fac914;
  --inverse: #0f1112; --inverse-2: #1b1e20; --inverse-border: #2e3235;
  --btn-primary-bg: #fac914; --btn-primary-bg-hover: #ffd83d; --btn-primary-ink: #2c2f31;
  --ok: #6fd39a; --ok-bg: #16301f; --warn: #f2b85b; --warn-bg: #33260f;
  --err: #ff8b82; --err-bg: #3a1a18; --info: #8fb6ff; --info-bg: #17243a;
  --brand-soft: #3a3210;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 16px/1.5 var(--f-cuerpo); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 400; letter-spacing: .5px; line-height: 1.1; margin: 0; }
h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 .75rem; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.texto-suave { color: var(--muted); }
.texto-alerta { color: var(--err); }
.etiqueta { font-weight: 700; font-size: .72rem; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.centro { text-align: center; }

/* ---------- Shell ---------- */
.app { min-height: 100vh; }
.principal { min-width: 0; }
.contenido { padding: 20px 16px 48px; max-width: 1180px; margin: 0 auto; }

/* Barra superior (movil) */
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  background: var(--inverse); color: var(--on-inverse);
  padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top));
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.barra__logo { width: 34px; height: 34px; border-radius: 8px; }
.barra__titulo { font-family: var(--f-titulo); font-size: 1.35rem; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Lateral: cajon en movil, fijo en escritorio */
.lateral {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(86vw, var(--lateral));
  display: flex; flex-direction: column;
  background: var(--inverse); color: var(--on-inverse);
  transform: translateX(-100%); transition: transform .2s ease;
  overflow-y: auto;
}
.menu-abierto .lateral { transform: none; }
.velo { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .45); display: none; }
.menu-abierto .velo { display: block; }

.lateral__marca { display: flex; align-items: center; gap: 12px; padding: 18px 16px; border-bottom: 1px solid var(--inverse-border); }
.lateral__marca img { width: 56px; height: 56px; border-radius: 12px; }
.lateral__nombre { font-family: var(--f-titulo); font-size: 1.5rem; letter-spacing: .5px; color: var(--brand); line-height: 1; }
.lateral__sub { font-weight: 600; font-size: .9rem; color: var(--on-inverse-soft); }
.lateral__cerrar { margin-left: auto; background: none; border: 0; color: var(--on-inverse-soft); padding: 8px; cursor: pointer; border-radius: var(--r-sm); }
.lateral__nav { flex: 1; padding: 12px 10px; }
.lateral__grupo { font-weight: 700; font-size: .7rem; letter-spacing: .8px; text-transform: uppercase; color: var(--on-inverse-soft); padding: 14px 10px 6px; }
.lateral__item {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 10px 12px; border-radius: var(--r-sm); text-decoration: none;
  color: var(--on-inverse-soft); font-weight: 500;
}
.lateral__item:hover { background: var(--inverse-2); color: var(--on-inverse); }
.lateral__item.is-activo { background: var(--brand); color: #2c2f31; font-weight: 700; }
.lateral__pie { border-top: 1px solid var(--inverse-border); padding: 12px 14px 16px; display: grid; gap: 12px; }

.tema { display: inline-flex; background: var(--inverse-2); border-radius: var(--r-pill); padding: 3px; width: max-content; }
.tema button { background: none; border: 0; color: var(--on-inverse-soft); width: 36px; height: 30px; border-radius: var(--r-pill); cursor: pointer; display: grid; place-items: center; }
.tema button.is-activo { background: var(--brand); color: #2c2f31; }

.usuario { display: flex; align-items: center; gap: 10px; }
.usuario__datos { min-width: 0; flex: 1; }
.usuario__nombre { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario__rol { font-size: .8rem; color: var(--on-inverse-soft); }

@media (min-width: 960px) {
  .lateral { position: sticky; top: 0; height: 100vh; transform: none; width: var(--lateral); border-right: 1px solid var(--inverse-border); }
  .lateral__cerrar, .barra, .velo { display: none !important; }
  .app { display: grid; grid-template-columns: var(--lateral) 1fr; }
  .contenido { padding: 32px 36px 64px; }
}

/* ---------- Avatar e iconos ---------- */
.avatar {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand); color: #2c2f31; font-weight: 700; font-size: .9rem;
}
.avatar--mantenimiento { background: var(--info-bg); color: var(--info); }
.avatar--gerente { background: var(--ok-bg); color: var(--ok); }
.avatar--consulta { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.icono-redondo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); color: var(--ink); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 20px; border-radius: var(--r-pill);
  font: 700 .95rem/1 var(--f-cuerpo); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background .15s, box-shadow .15s;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primario { background: var(--btn-primary-bg); color: var(--btn-primary-ink); }
.btn--primario:hover:not(:disabled) { background: var(--btn-primary-bg-hover); box-shadow: var(--sombra-brand); }
.btn--secundario { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn--secundario:hover:not(:disabled) { background: var(--surface-2); }
.btn--peligro { background: var(--surface); color: var(--err); border-color: var(--err); }
.btn--peligro:hover { background: var(--err-bg); }
.btn--google { background: #ffffff; color: #2c2f31; border-color: #dadce0; font-weight: 600; }
.btn--google:hover { box-shadow: var(--sombra-media); }
.btn--bloque { width: 100%; }
.btn-icono {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--r-sm); border: 0; background: none; color: var(--muted); cursor: pointer; text-decoration: none;
}
.btn-icono:hover { background: var(--surface-2); color: var(--ink); }
.btn-icono--claro { color: var(--on-inverse-soft); }
.btn-icono--claro:hover { background: var(--inverse-2); color: var(--on-inverse); }
.enlace { background: none; border: 0; padding: 0; color: var(--info); font: 600 .82rem var(--f-cuerpo); cursor: pointer; text-decoration: underline; }

/* ---------- Tarjetas y rejillas ---------- */
.tarjeta {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--sombra); padding: 18px; margin-bottom: 16px;
}
.tarjeta__titulo { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; margin-bottom: 10px; }
.tarjeta--enlace { display: block; text-decoration: none; padding-right: 44px; }
.tarjeta--enlace:hover { box-shadow: var(--sombra-media); border-color: var(--brand); }
.tarjeta__ir { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.tarjeta--rol p { margin: 10px 0 0; }
.rejilla { display: grid; gap: 16px; }
.rejilla > .tarjeta { margin-bottom: 0; }
.rejilla--compacta { gap: 12px; }
@media (min-width: 720px) {
  .rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rejilla + .tarjeta, .rejilla + .tabla-envoltura { margin-top: 16px; }

.cabecera-pagina { margin-bottom: 20px; }
.cabecera-pagina h1 { margin-bottom: 6px; }
.cabecera-pagina--accion { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.volver { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .9rem; margin-bottom: 10px; min-height: 36px; }
.volver:hover { color: var(--ink); }

/* ---------- Avisos ---------- */
.aviso {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 16px;
  border-radius: var(--r-sm); border: 1px solid; font-weight: 500;
}
.aviso svg { flex: none; margin-top: 2px; }
.aviso--ok { color: var(--ok); background: var(--ok-bg); border-color: currentColor; }
.aviso--error { color: var(--err); background: var(--err-bg); border-color: currentColor; }
.aviso--aviso { color: var(--warn); background: var(--warn-bg); border-color: currentColor; }
.aviso--info { color: var(--info); background: var(--info-bg); border-color: currentColor; }

/* ---------- Badges y chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill);
  font-weight: 700; font-size: .72rem; letter-spacing: .3px; line-height: 1.3; vertical-align: middle;
}
.badge--admin { background: var(--brand); color: #2c2f31; }
.badge--mantenimiento { background: var(--info-bg); color: var(--info); }
.badge--gerente { background: var(--ok-bg); color: var(--ok); }
.badge--consulta, .badge--neutro { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 8px 0 0; }
.chip { padding: 5px 12px; border-radius: var(--r-pill); background: var(--brand-soft); font-weight: 600; font-size: .88rem; }

/* ---------- Listas (en lugar de tablas: no hacen scroll horizontal en movil) ---------- */
.lista { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden; }
.lista__fila { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--border); }
.lista__fila:first-child { border-top: 0; }
.lista__fila.is-inactivo { opacity: .6; }
.lista__cuerpo { flex: 1; min-width: 0; }
.lista__titulo { font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lista__meta { color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lista__lado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.lista__lado .lista__meta { font-size: .8rem; text-align: right; }
@media (min-width: 720px) { .lista__lado { flex-direction: row; align-items: center; gap: 12px; } }

.vacio { text-align: center; padding: 40px 16px; color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r); }
.vacio svg { margin-bottom: 8px; }

/* ---------- Tabla (solo para matrices, con scroll propio) ---------- */
.tabla-envoltura { padding: 0; overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .92rem; }
.tabla th, .tabla td { padding: 11px 14px; border-top: 1px solid var(--border); text-align: left; }
.tabla thead th { background: var(--inverse); color: var(--on-inverse); border-top: 0; font-weight: 700; font-size: .78rem; letter-spacing: .4px; text-transform: uppercase; }
.tabla tbody tr:nth-child(even) { background: var(--surface-2); }
.tabla tbody th { font-weight: 500; }
.tabla .centro { text-align: center; }
.si { color: var(--ok); }
.no { color: var(--muted); }

/* ---------- Formularios ---------- */
.formulario { display: grid; gap: 16px; }
.formulario__acciones, .acciones-fila { display: flex; flex-wrap: wrap; gap: 10px; }
.formulario__acciones { padding-top: 4px; }
.campo { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.campo__etiqueta { font-weight: 700; font-size: .78rem; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); padding: 0; }
.campo__ayuda { color: var(--muted); font-size: .86rem; margin: 0; }
.campo__error { color: var(--err); font-weight: 600; font-size: .88rem; margin: 0; }
input[type="text"], input[type="email"], input[type="search"], input:not([type]), select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font: 400 16px/1.3 var(--f-cuerpo); /* 16px: iOS no hace zoom al enfocar */
}
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(250, 201, 20, .45); }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-height: 32px; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #2c2f31; flex: none; }
.sedes { display: grid; gap: 14px; margin-top: 10px; }
@media (min-width: 720px) { .sedes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sedes__grupo { background: var(--surface-2); border-radius: var(--r-sm); padding: 12px; display: grid; gap: 6px; }
.sedes__ciudad { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 2px; }
.sedes.is-bloqueado { opacity: .45; pointer-events: none; }

/* Movil: buscador a lo ancho y los desplegables de dos en dos. */
.filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.filtros input[type="search"] { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .filtros { grid-template-columns: 2fr 1fr 1fr 1fr auto; }
  .filtros input[type="search"] { grid-column: auto; }
}

/* ---------- Avisos ---------- */
.seccion-titulo { font-size: 1.4rem; margin: 26px 0 12px; }
.badge--error { background: var(--err-bg); color: var(--err); }
.rejilla--editor { align-items: start; }
@media (min-width: 1100px) { .rejilla--editor { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.opciones { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.opciones--lista { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; padding: 8px 2px; }
.desplegable { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; }
.desplegable summary { cursor: pointer; font-weight: 700; min-height: 28px; }
.variables { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86rem; }
code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.vista-correo { width: 100%; height: 520px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #f6f6f7; margin-bottom: 12px; }
textarea { resize: vertical; }

/* ---------- Ordenes ---------- */
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--aviso { background: var(--warn-bg); color: var(--warn); }
.badge--info { background: var(--info-bg); color: var(--info); }
.badge--legal { background: var(--brand-soft); color: var(--ink); border: 1px solid var(--brand-dark); }
.badge--critico { background: var(--err); color: #ffffff; }
:root[data-tema="oscuro"] .badge--critico { color: #1e2123; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .badge--critico { color: #1e2123; } }

.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (min-width: 720px) { .cifras { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cifra { display: grid; gap: 2px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sombra); text-decoration: none; }
.cifra:hover { border-color: var(--brand); }
.cifra__n { font-family: var(--f-cuerpo); font-weight: 700; font-size: 2rem; line-height: 1.1; }
.cifra__t { color: var(--muted); font-weight: 600; font-size: .86rem; }
.cifra--alerta .cifra__n { color: var(--err); }
.cifra--aviso .cifra__n { color: var(--warn); }

.grupo { margin-bottom: 14px; }
.grupo__cabecera { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 2px; list-style: none; font-weight: 700; }
.grupo__cabecera::-webkit-details-marker { display: none; }
.grupo__cabecera::before { content: "›"; display: inline-block; transition: transform .15s; font-size: 1.3rem; color: var(--muted); width: 12px; }
.grupo[open] > .grupo__cabecera::before { transform: rotate(90deg); }
.grupo__n { color: var(--muted); }
.lista-ordenes { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden; }
.lista-ordenes li + li { border-top: 1px solid var(--border); }
.orden { display: flex; align-items: stretch; gap: 12px; padding: 12px 14px 12px 0; text-decoration: none; }
.orden:hover { background: var(--surface-2); }
.orden--cerrada { opacity: .75; }
.orden__prio { flex: none; width: 5px; border-radius: 0 4px 4px 0; background: var(--border); }
.orden__prio--critico { background: var(--err); }
.orden__prio--alta { background: #d9622b; }
.orden__prio--media { background: var(--brand); }
.orden__cuerpo { flex: 1; min-width: 0; display: grid; gap: 5px; }
.orden__titulo { font-weight: 700; overflow-wrap: anywhere; }
.orden__codigo { font-family: var(--f-titulo); letter-spacing: .5px; color: var(--muted); margin-right: 2px; }
.orden__badges { display: flex; flex-wrap: wrap; gap: 5px; }
.orden__badges--grande { margin-top: 10px; }
.orden__meta { color: var(--muted); font-size: .86rem; overflow-wrap: anywhere; }
.orden__ir { align-self: center; color: var(--muted); }
.orden--vencida .orden__titulo { color: var(--err); }

.filtros--ordenes { grid-template-columns: 1fr 1fr; }
/* Los filtros solo van en una fila cuando cabe el texto de cada desplegable. */
@media (min-width: 720px) { .filtros--ordenes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .filtros--ordenes input[type="search"] { grid-column: 1 / -1; } }
@media (min-width: 1400px) { .filtros--ordenes { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); } .filtros--ordenes input[type="search"] { grid-column: auto; } }
.filtros__checks { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; grid-column: 1 / -1; }
@media (min-width: 720px) { .filtros__checks { grid-column: span 2; } }
@media (min-width: 1400px) { .filtros__checks { grid-column: span 3; } }
.filtros__limpiar { align-self: center; justify-self: start; }

.segmentado { display: flex; gap: 8px; flex-wrap: wrap; }
.segmentado label { flex: 1 1 0; min-width: 120px; cursor: pointer; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado span {
  display: grid; gap: 2px; justify-items: center; text-align: center; min-height: 46px; align-content: center;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-weight: 600;
}
.segmentado small { font-weight: 500; color: var(--muted); font-size: .8rem; }
.segmentado input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--brand-soft); }
.segmentado input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.segmentado--4 label { min-width: calc(50% - 4px); }
@media (min-width: 720px) { .segmentado--4 label { min-width: 0; } }
.prio-critico input:checked + span { background: var(--err-bg); border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); color: var(--err); }

.miniaturas { display: flex; flex-wrap: wrap; gap: 8px; }
.miniaturas img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.miniaturas:empty { display: none; }
input[type="file"] { font: inherit; max-width: 100%; }

.rejilla--ficha { align-items: start; }
@media (min-width: 1100px) { .rejilla--ficha { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); } .rejilla--ficha > aside { position: sticky; top: 20px; } }
.datos { display: grid; gap: 10px 20px; margin: 0; }
@media (min-width: 560px) { .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dato dt { font-weight: 700; font-size: .72rem; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.dato dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.texto-largo { white-space: normal; overflow-wrap: anywhere; }
.resolucion { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--ok-bg); }
.resolucion .etiqueta { color: var(--ok); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 12px; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: block; }
.historial { list-style: none; margin: 0 0 14px; padding: 0 0 0 16px; border-left: 2px solid var(--border); display: grid; gap: 14px; }
.historial__item { position: relative; }
.historial__item::before { content: ""; position: absolute; left: -22px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.historial__item--comentario::before { background: var(--info); }
.historial__item--estado::before { background: var(--brand-dark); }
.historial__item--creada::before { background: var(--ink); }
.historial__cabecera { font-size: .92rem; }
.historial__texto { margin-top: 4px; padding: 8px 12px; background: var(--surface-2); border-radius: var(--r-sm); overflow-wrap: anywhere; }
.historial__item--comentario .historial__texto { background: var(--info-bg); }
.formulario--compacto { gap: 10px; margin-top: 10px; }
.acciones { display: grid; gap: 12px; }
.acciones form { margin: 0; }
.fila-form { display: flex; gap: 8px; align-items: end; }
.fila-form .campo { flex: 1; }
.acciones__enlaces { display: flex; flex-wrap: wrap; gap: 8px; }
.acciones__enlaces .btn { flex: 1 1 auto; min-height: 40px; padding: 8px 14px; }
.enlace--peligro { color: var(--err); }
.desplegable summary { display: flex; align-items: center; gap: 6px; }
input[type="date"] { width: 100%; min-height: 46px; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 400 16px var(--f-cuerpo); }

/* ---------- Panel: cifras y barras (guia dataviz) ----------
   Barras: un solo tono (gris de marca) salvo cuando el color ES un estado.
   Estados de datos (validados para daltonismo): ok #0ca30c, aviso #fab219,
   error #d03b3b, iguales en los dos temas; siempre con icono y valor escrito. */
:root { --viz-barra: #6b6f74; --viz-ok: #0ca30c; --viz-aviso: #fab219; --viz-error: #d03b3b; --viz-eje: #e5e5e7; }
:root[data-tema="oscuro"] { --viz-barra: #a8acb0; --viz-eje: #34383b; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --viz-barra: #a8acb0; --viz-eje: #34383b; } }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { display: grid; align-content: start; gap: 4px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sombra); text-decoration: none; min-width: 0; }
a.kpi:hover { border-color: var(--brand); }
.kpi__etiqueta { font-weight: 700; font-size: .74rem; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.kpi__valor { font-family: var(--f-cuerpo); font-weight: 700; font-size: 2rem; line-height: 1.1; color: var(--ink); }
.kpi__valor small { font-size: .95rem; font-weight: 600; color: var(--muted); }
.kpi__sub { font-size: .86rem; color: var(--muted); }
.kpi--ok { border-left: 4px solid var(--viz-ok); }
.kpi--aviso { border-left: 4px solid var(--viz-aviso); }
.kpi--error { border-left: 4px solid var(--viz-error); }
.avisos-panel { display: grid; gap: 8px; margin-bottom: 16px; }
.avisos-panel .aviso { margin: 0; text-decoration: none; }
.filtros-panel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.filtros-panel select { width: auto; min-width: 200px; }
.segmentado--compacto { flex-wrap: nowrap; gap: 4px; }
.segmentado--compacto label { min-width: 0; flex: 0 0 auto; }
.segmentado--compacto span, .segmentado__op { min-height: 40px; padding: 6px 12px; font-size: .9rem; }
.segmentado__op { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); text-decoration: none; font-weight: 600; }
.segmentado__op.is-activo { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--brand-soft); }
.seccion-titulo small { font-family: var(--f-cuerpo); font-size: .85rem; letter-spacing: 0; text-transform: none; font-weight: 500; }
.seccion-titulo--menor { font-size: 1.2rem; }

.barras { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 10px; }
.barra-fila { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; align-items: center; gap: 10px; border-radius: 6px; padding: 2px 0; }
.barra-fila:hover, .barra-fila:focus-visible { background: var(--surface-2); outline: none; }
.barra-fila__etiqueta { font-size: .9rem; overflow-wrap: anywhere; }
.barra-fila__pista { height: 12px; border-left: 1px solid var(--viz-eje); display: flex; align-items: center; }
.barra-fila__marca { height: 12px; background: var(--viz-barra); border-radius: 0 4px 4px 0; }
.barra-fila__marca--ok { background: var(--viz-ok); }
.barra-fila__marca--aviso { background: var(--viz-aviso); }
.barra-fila__marca--error { background: var(--viz-error); }
.barra-fila__valor { font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; min-width: 64px; justify-content: flex-end; }
.barra-fila__icono { display: inline-flex; }
.barra-fila__icono--ok { color: var(--ok); }
.barra-fila__icono--aviso { color: var(--warn); }
.barra-fila__icono--error { color: var(--err); }
.tabla-datos { margin-top: 6px; }
.tabla-datos summary { cursor: pointer; color: var(--muted); font-size: .84rem; font-weight: 600; }
.tabla--compacta { min-width: 0; font-size: .86rem; margin-top: 8px; }
.tabla--compacta th, .tabla--compacta td { padding: 6px 8px; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

.lista-simple { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 10px; }
.lista-simple li { display: flex; align-items: flex-start; gap: 10px; }
.lista-simple__cuerpo { display: grid; min-width: 0; overflow-wrap: anywhere; }
.lista-simple__cuerpo a { text-decoration: none; }
.lista-simple__cuerpo a:hover { text-decoration: underline; }
.lista-simple .texto-suave { font-size: .86rem; }
.contador { flex: none; display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.contador--error { background: var(--err-bg); color: var(--err); }
.fecha-chip { flex: none; font-weight: 700; font-size: .84rem; background: var(--surface-2); border-radius: 6px; padding: 3px 7px; font-variant-numeric: tabular-nums; }

.sedes-estado { display: grid; gap: 12px; }
@media (min-width: 720px) { .sedes-estado { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sede-estado { display: grid; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--r); text-decoration: none; }
.sede-estado:hover { box-shadow: var(--sombra-media); }
.sede-estado--ok { border-left-color: var(--viz-ok); }
.sede-estado--aviso { border-left-color: var(--viz-aviso); }
.sede-estado--error { border-left-color: var(--viz-error); }
.sede-estado__nombre { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.sede-estado--ok .sede-estado__nombre svg { color: var(--ok); }
.sede-estado--aviso .sede-estado__nombre svg { color: var(--warn); }
.sede-estado--error .sede-estado__nombre svg { color: var(--err); }
.sede-estado__datos { font-size: .86rem; color: var(--muted); }

/* ---------- Campana y menu ---------- */
.lateral__item { position: relative; }
.lateral__badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--inverse-2); color: var(--on-inverse); font-size: .74rem; font-weight: 700; display: grid; place-items: center; }
.lateral__badge--alerta { background: var(--viz-error); color: #ffffff; }
.lateral__item.is-activo .lateral__badge { background: #2c2f31; color: #ffffff; }
.campana { position: relative; margin-left: auto; display: grid; place-items: center; width: 44px; height: 44px; color: var(--on-inverse); border-radius: var(--r-sm); }
.campana:hover { background: var(--inverse-2); }
.campana__n { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--brand); color: #2c2f31; font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.campana__n--alerta { background: var(--viz-error); color: #ffffff; }

/* ---------- Cronograma ---------- */
.banda-vencidas { border: 1px solid var(--err); background: var(--err-bg); border-radius: var(--r); padding: 12px 16px; margin-bottom: 16px; }
.banda-vencidas__titulo { font-family: var(--f-cuerpo); font-size: 1rem; font-weight: 700; color: var(--err); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; letter-spacing: 0; }
.banda-vencidas ul { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 4px; }
.banda-vencidas a { text-decoration: none; overflow-wrap: anywhere; }
.banda-vencidas a:hover { text-decoration: underline; }
.nav-mes { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.nav-mes__titulo { font-size: 1.5rem; flex: 1; text-align: center; }
.nav-mes__titulo small { font-family: var(--f-cuerpo); font-size: .85rem; letter-spacing: 0; }
.nav-mes__sig svg { transform: rotate(180deg); }
.btn--pequeno { min-height: 36px; padding: 6px 14px; font-size: .86rem; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendario__dow { text-align: center; font-weight: 700; font-size: .72rem; text-transform: uppercase; color: var(--muted); padding: 4px 0; }
.calendario__celda { position: relative; min-height: 64px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.calendario__celda--vacia { background: transparent; border-color: transparent; }
.calendario__celda.is-hoy { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.calendario__num { font-weight: 700; font-size: .82rem; }
.calendario__celda.is-hoy .calendario__num { background: var(--brand); color: #2c2f31; border-radius: 999px; width: 22px; height: 22px; display: grid; place-items: center; }
.calendario__mas { font-size: .72rem; color: var(--muted); font-weight: 700; text-decoration: none; }
.calendario__cuenta { display: none; }
.pastilla { display: block; font-size: .74rem; font-weight: 600; line-height: 1.25; padding: 2px 5px; border-radius: 4px; background: var(--surface-2); border-left: 3px solid var(--viz-barra); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.pastilla--ok { border-left-color: var(--ok); }
.pastilla--legal { border-left-color: var(--brand-dark); }
.pastilla--aviso { border-left-color: var(--warn); }
.pastilla--error { border-left-color: var(--err); }
.pastilla--info { border-left-color: var(--info); }
.pastilla--vencida { color: var(--err); }
.pastilla--hecha { opacity: .6; text-decoration: line-through; }
/* Movil: las celdas son demasiado estrechas para textos; se muestra el numero de ordenes. */
@media (max-width: 719px) {
  .calendario__celda { min-height: 48px; }
  .calendario__celda .pastilla, .calendario__mas { display: none; }
  .calendario__cuenta { display: grid; place-items: center; align-self: center; margin-top: auto; min-width: 28px; height: 28px; border-radius: 999px; background: var(--brand-soft); font-weight: 700; font-size: .8rem; text-decoration: none; }
}
@media (min-width: 900px) { .calendario__celda { min-height: 104px; } }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; color: var(--muted); margin-top: 10px; }
.leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda__muestra { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--surface-2); border-left: 4px solid; }
.agenda { display: grid; gap: 14px; }
.agenda__dia { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: start; }
.agenda__fecha { display: grid; justify-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 0; position: sticky; top: 72px; }
@media (min-width: 960px) { .agenda__fecha { top: 16px; } }
.agenda__dia.is-hoy .agenda__fecha { background: var(--brand); border-color: var(--brand-dark); color: #2c2f31; }
.agenda__num { font-weight: 700; font-size: 1.4rem; line-height: 1; }
.agenda__dow { font-size: .74rem; text-transform: uppercase; font-weight: 700; }

/* ---------- Equipos y maestros ---------- */
.cifra__n--euros, .cifra__n--fecha { font-size: 1.6rem; line-height: 1.2; }
@media (min-width: 720px) { .cifras--equipo { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.maestros { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.maestros li { display: grid; gap: 2px; }
.maestros li.is-inactivo input[name="nombre"] { opacity: .55; }
.maestros__fila { display: flex; align-items: center; gap: 8px; margin: 0; }
.maestros__fila input[name="nombre"] { flex: 1; min-width: 0; }
.maestros__orden { width: 58px !important; flex: none; text-align: center; }
.maestros__fila .check { min-height: 0; }
.maestros__uso { font-size: .8rem; color: var(--muted); padding-left: 2px; }
.maestros__leyenda { display: flex; gap: 8px; margin: 8px 0 4px; font-weight: 700; font-size: .7rem; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.maestros__leyenda span:first-child { flex: 1; }
.maestros__leyenda span:nth-child(2) { width: 58px; text-align: center; }
.maestros__leyenda span:nth-child(3) { width: 40px; text-align: center; }
.maestros__leyenda span:nth-child(4) { width: 44px; text-align: center; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Portal de gerentes ---------- */
.portal { max-width: 720px; margin: 0 auto; }
.portal__saludo { margin-bottom: 16px; }
.portal__saludo h1 { font-size: 2.3rem; margin-bottom: 4px; }
.portal__reportar {
  display: flex; align-items: center; gap: 16px; padding: 20px; margin-bottom: 16px;
  background: var(--btn-primary-bg); color: var(--btn-primary-ink); border-radius: var(--r-lg);
  text-decoration: none; box-shadow: var(--sombra-media); min-height: 96px;
}
.portal__reportar:hover { background: var(--btn-primary-bg-hover); box-shadow: var(--sombra-brand); }
.portal__reportar b { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 1.8rem; letter-spacing: .5px; line-height: 1.05; }
.portal__reportar small { display: block; font-size: .92rem; opacity: .85; color: var(--on-inverse-soft); }
:root[data-tema="oscuro"] .portal__reportar small { color: #2c2f31; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .portal__reportar small { color: #2c2f31; } }
.portal__reportar-icono { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--brand); color: #2c2f31; }
.instalar:has(> [data-modo="instalada"]:not([hidden])) { padding: 10px 16px; }
.instalar__ok { display: flex; align-items: center; gap: 6px; margin: 0; }
.pasos { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.icono-en-linea { display: inline-flex; vertical-align: -3px; }

/* ---------- QR y cartel ---------- */
.qr-lienzo { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; }
.qr-url { text-align: center; overflow-wrap: anywhere; font-weight: 600; }
/* El cartel se maqueta SIEMPRE a tamano A4 real (mm). En pantalla se ve
   reducido dentro de .cartel-marco: lo que se ve es exactamente lo que sale. */
.cartel-marco { --escala: .42; width: calc(210mm * var(--escala)); height: calc(297mm * var(--escala)); margin: 20px auto 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--sombra-media); background: #fff; }
@media (min-width: 720px) { .cartel-marco { --escala: .5; } }
.cartel {
  width: 210mm; height: 297mm; transform: scale(var(--escala)); transform-origin: top left; overflow: hidden;
  background: #ffffff; color: #2c2f31; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16mm 20mm 12mm; gap: 5mm; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cartel__cabecera { display: flex; align-items: center; gap: 6mm; align-self: stretch; justify-content: center; background: #2c2f31; border-radius: 6mm; padding: 6mm; }
.cartel__cabecera img { width: 32mm; height: auto; border-radius: 5mm; }
.cartel__marca { font-family: var(--f-titulo); color: #fac914; font-size: 44pt; letter-spacing: .5px; line-height: 1; text-align: left; }
.cartel__sub { color: #ffffff; font-weight: 600; font-size: 16pt; text-align: left; }
.cartel__titulo { font-size: 52pt; margin-top: 3mm; color: #2c2f31; }
.cartel__lema { font-weight: 600; font-size: 19pt; margin: 0; }
.cartel__qr { width: 108mm; height: 108mm; image-rendering: pixelated; }
.cartel__pasos { text-align: left; margin: 0; padding-left: 1.3em; display: grid; gap: 2.5mm; font-size: 16pt; }
.cartel__url { margin-top: auto; color: #6b6f74; font-weight: 700; font-size: 13pt; }

@media print {
  @page { size: A4 portrait; margin: 0; }
  body { background: #fff !important; }
  .lateral, .barra, .velo, .no-imprimir, .aviso { display: none !important; }
  .app { display: block !important; }
  .contenido { padding: 0 !important; max-width: none !important; }
  .cartel-marco { --escala: 1; width: auto; height: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .cartel { transform: none; }
}

/* ---------- Pantallas de acceso y error ---------- */
.pantalla-centro { min-height: 100vh; display: grid; place-items: center; padding: 20px 16px; }
.pantalla-centro--marca { background: var(--inverse); }
.tarjeta--acceso { width: 100%; max-width: 400px; text-align: center; padding: 30px 24px; box-shadow: var(--sombra-media); }
.acceso__logo { border-radius: 22px; margin: 0 auto 14px; display: block; }
.acceso__titulo { font-size: 2.3rem; margin-bottom: 6px; }
.tarjeta--acceso .aviso { text-align: left; }
.acceso__nota { font-size: .86rem; color: var(--muted); margin: 14px 0 0; }
.dev { margin-top: 18px; text-align: left; font-size: .9rem; border-top: 1px dashed var(--border); padding-top: 12px; }
.dev summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.dev ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.dev a { display: block; padding: 6px 8px; border-radius: 8px; text-decoration: none; }
.dev a:hover { background: var(--surface-2); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Presupuestos: rejilla sede x mes ---------- */
input[type="month"] { min-height: 46px; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 400 16px var(--f-cuerpo); }
.campo--linea { display: flex; align-items: center; gap: 8px; }
.campo--linea .campo__etiqueta { white-space: nowrap; }
.campo--linea select, .campo--linea input { width: auto; }
.filtros-panel__fin { margin-left: auto; }
.btn--mini { min-height: 32px; padding: 4px 10px; font-size: .8rem; font-weight: 600; background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn--mini:hover { background: var(--surface-2); }
.tabla--presupuesto { min-width: 1180px; font-size: .88rem; }
.tabla--presupuesto th, .tabla--presupuesto td { padding: 6px 4px; }
.tabla--presupuesto thead th { padding: 10px 6px; }
.tabla--presupuesto .fija { position: sticky; left: 0; z-index: 1; background: var(--surface); padding-left: 14px; min-width: 130px; }
.tabla--presupuesto thead .fija { background: var(--inverse); }
.tabla--presupuesto tbody tr:nth-child(even) .fija { background: var(--surface-2); }
.tabla--presupuesto tfoot td, .tabla--presupuesto tfoot th { border-top: 2px solid var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 10px; padding-bottom: 10px; }
.tabla--presupuesto tfoot .fija { text-transform: uppercase; font-size: .78rem; letter-spacing: .4px; }
.celda-importe { width: 76px !important; min-height: 38px !important; padding: 6px !important; text-align: right; font-variant-numeric: tabular-nums; font-size: 15px !important; }
.celda-importe.is-error { border-color: var(--err) !important; background: var(--err-bg) !important; }
.atajos { white-space: nowrap; }
.acciones-fila--pegajosa { position: sticky; bottom: 0; z-index: 2; align-items: center; padding: 12px 0; background: linear-gradient(to top, var(--ground) 70%, transparent); }
.dialogo { border: 0; border-radius: var(--r); padding: 22px; width: min(420px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: var(--sombra-media); }
.dialogo::backdrop { background: rgba(21, 23, 24, .55); }
.dialogo__titulo { font-size: 1.5rem; margin-bottom: 4px; }
.dialogo .campo { margin: 12px 0 6px; }
.dialogo .acciones-fila { margin-top: 14px; }

/* ---------- Informes imprimibles ---------- */
.pestanas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: thin; }
.pestanas .segmentado__op { flex: none; }
.informe { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sombra); padding: 22px 18px; margin-top: 8px; }
@media (min-width: 760px) { .informe { padding: 32px 36px; } }
.informe__cabecera { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.informe__marca { display: flex; align-items: center; gap: 10px; }
.informe__marca img { border-radius: 12px; }
.informe__marca b { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 1.35rem; letter-spacing: .5px; line-height: 1; }
.informe__marca span { font-size: .82rem; color: var(--muted); }
.informe__generado { text-align: right; font-size: .78rem; color: var(--muted); align-self: start; }
.informe__titulo { grid-column: 1 / -1; font-size: 2rem; margin-top: 14px; }
.informe__sub { grid-column: 1 / -1; margin: 0; color: var(--muted); }
.informe__bloque { margin-top: 26px; }
.informe__seccion { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; margin-bottom: 10px; }
.informe__num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--ink); color: var(--surface); font: 700 .8rem/1 var(--f-cuerpo); }
.informe__subtitulo { font-family: var(--f-cuerpo); font-size: .78rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px; }
.informe__cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .informe__cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.informe__cifra { display: grid; gap: 3px; align-content: start; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-sm); min-width: 0; }
.informe__cifra--ok { border-left: 4px solid var(--viz-ok); }
.informe__cifra--aviso { border-left: 4px solid var(--viz-aviso); }
.informe__cifra--error { border-left: 4px solid var(--viz-error); }
.informe__cifra-et { font-size: .72rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.informe__cifra-val { font-weight: 700; font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.informe__cifra-sub { font-size: .8rem; color: var(--muted); }
.informe__tabla { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 4px; }
.informe__tabla th { text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--ink); }
.informe__tabla td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: break-word; }
.informe__tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.informe__tabla th:last-child, .informe__tabla td:last-child { padding-right: 0; }
.informe__tabla tfoot td { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 700; }
.informe__tabla a { color: inherit; text-decoration: none; }
.informe__tabla a:hover { text-decoration: underline; }
.informe__tabla--densa { font-size: .8rem; }
.informe__tabla--densa .badge { font-size: .7rem; padding: 2px 7px; }
.informe__dos { display: grid; gap: 16px; }
@media (min-width: 760px) { .informe__dos { grid-template-columns: 1fr 1fr; } }
.informe__tres { display: grid; gap: 12px; }
@media (min-width: 760px) { .informe__tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.informe__grafico { margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.informe__grafico figcaption { font-size: .72rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.informe__columnas { width: 100%; height: auto; display: block; margin-top: 6px; }
.informe__columnas .eje { stroke: var(--viz-eje); stroke-width: 1; }
.informe__columnas .columna { fill: var(--viz-barra); }
.informe__columnas .columna:hover { opacity: .8; }
.informe__columnas .columna--ok { fill: var(--viz-ok); }
.informe__columnas .columna--aviso { fill: var(--viz-aviso); }
.informe__columnas .columna--error { fill: var(--viz-error); }
.informe__columnas .hueco { fill: var(--viz-eje); }
.informe__columnas text { font: 700 9px var(--f-cuerpo); fill: var(--muted); }
.informe__nota { font-size: .8rem; color: var(--muted); margin: 6px 0 0; }
.informe__vacio { color: var(--muted); margin: 6px 0 0; display: flex; align-items: center; gap: 6px; }
.informe__aviso { margin-top: 16px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid currentColor; font-size: .88rem; }
.informe__aviso ul { margin: 6px 0 0; padding-left: 26px; color: var(--ink); }
.informe__aviso-tit { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.informe__aviso--aviso { color: var(--warn); background: var(--warn-bg); }
.informe__aviso--error { color: var(--err); background: var(--err-bg); }
.informe__aviso--info { color: var(--ink); background: var(--surface-2); border-color: var(--border); }
.informe__pie { margin-top: 30px; padding-top: 10px; border-top: 1px solid var(--border); font-size: .76rem; line-height: 1.5; color: var(--muted); }
.tono { font-weight: 700; }
.tono--ok { color: var(--ok); }
.tono--aviso { color: var(--warn); }
.tono--error { color: var(--err); }

/* Impresion: el informe a A4 con margen, siempre en claro y sin el resto de la app. */
@page informe { size: A4 portrait; margin: 14mm 12mm; }
@media print {
  .informe { page: informe; border: 0; box-shadow: none; border-radius: 0; padding: 0; margin: 0; font-size: 10.5pt;
    --ink: #2c2f31; --muted: #5f6368; --border: #d9d9dc; --surface: #fff; --surface-2: #f4f4f5;
    --ok: #1d6a3a; --ok-bg: #e7f7ec; --warn: #8a5807; --warn-bg: #fff3e0; --err: #a23029; --err-bg: #fdecea;
    --viz-barra: #6b6f74; --viz-eje: #d9d9dc;
    background: #fff; color: #2c2f31; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .informe__cabecera, .informe__cifras, .informe__aviso, .informe__grafico, .informe__tabla tr, .informe__seccion { break-inside: avoid; }
  .informe__bloque:not(.informe__bloque--largo) { break-inside: avoid; }
  .informe__seccion, .informe__subtitulo { break-after: avoid; }
  .informe__cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .informe__dos { grid-template-columns: 1fr 1fr; }
  .informe__tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .informe__tabla thead { display: table-header-group; }
  .informe a { color: inherit; text-decoration: none; }
  .informe__marca img { width: 44px; height: 44px; }
}