/* ═══════════════════════════════════════════════════════════════════
   Xpertos CMMS — Hoja de estilos
   Sin framework externo: menos peso, y la política de seguridad de
   contenido no admite CDN. Todo se sirve desde el propio dominio.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ground:#EEF1F4;
  --surface:#FFFFFF;
  --surface-2:#F5F7F9;
  --line:#D3DBE2;
  --line-soft:#E4EAEF;
  --ink:#16242F;
  --ink-2:#44586A;
  --ink-3:#7189A0;
  /* Colores corporativos Xpertos 24.7, tomados del logo original */
  --accent:#0B47C2;          /* azul Xpertos */
  --accent-dark:#083596;
  --accent-soft:#E3EAFA;
  --brand-orange:#FF4D00;    /* naranja Xpertos */
  --brand-orange-soft:#FFE9E0;
  --ok:#1B7A6B;
  --ok-soft:#DFF2EE;
  /* El naranja corporativo hace de color de aviso: es su papel natural */
  --warn:#C43A00;
  --warn-soft:#FFE9E0;
  --danger:#B23A3A;
  --danger-soft:#FBE7E7;
  --radius:4px;
  --energy:#FF4D00;
  --energy-soft:#FFE9E0;
  --shadow:0 1px 2px rgba(22,36,47,.06), 0 6px 20px -14px rgba(22,36,47,.25);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.01em}
h1{font-size:26px;font-weight:700}
h2{font-size:18px;font-weight:600}
h3{font-size:16px;font-weight:600}
p{margin:0 0 12px}
.muted{color:var(--ink-3);font-size:14px}
.mono{font-family:var(--mono);font-size:13px}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ── Barra superior ─────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;gap:20px;
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:0 20px;height:56px;position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700}
.brand:hover{text-decoration:none}
/* Marca: el lockup horizontal en escritorio, el simbolo solo en movil.
   El logo ya dice "xpertos 24.7", asi que al lado no se repite el nombre:
   solo la etiqueta del modulo, que es lo que distingue este sistema. */
.brand-logo{display:block;height:26px;width:auto}
.brand-simbolo{display:none;height:28px;width:auto}
.brand-modulo{
  font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.14em;color:var(--ink-3);
  padding-left:10px;margin-left:2px;border-left:1px solid var(--line);
}
.login-logo{
  display:block;height:auto;width:210px;max-width:62%;
  margin:0 auto 16px;
}
.brand-name{font-size:15px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.user-chip{color:var(--ink-2);font-size:14px;white-space:nowrap}
.topbar .link-btn{white-space:nowrap}
/* En pantallas medianas el nombre de la sede se corta en vez de partir la barra */
.org-badge{min-width:0}
.org-badge > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-badge{
  display:flex;align-items:center;gap:10px;
  background:var(--accent-soft);color:var(--accent);
  padding:5px 12px;border-radius:var(--radius);font-size:13px;font-weight:600;
}

.lang-switch{display:flex;gap:2px}
.lang-switch a{
  padding:3px 8px;font-size:12px;font-weight:600;color:var(--ink-3);
  border-radius:var(--radius);
}
.lang-switch a.on{background:var(--accent-soft);color:var(--accent)}
.lang-switch a:hover{text-decoration:none;color:var(--accent)}

/* ── Estructura ─────────────────────────────────────────────────── */
.shell{display:flex;min-height:calc(100vh - 56px - 44px);align-items:flex-start}
.sidebar{
  width:224px;flex:0 0 224px;background:var(--surface);
  border-right:1px solid var(--line);padding:18px 0;
  position:sticky;top:56px;max-height:calc(100vh - 56px);overflow-y:auto;
}
/* Tema principal: manda sobre sus subtemas, asi que va en negrilla, mas
   grande y en el tono oscuro del texto. */
.nav-group{
  font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);font-weight:800;margin:20px 20px 6px;
}
.nav-list{list-style:none;margin:0;padding:0}
.nav-list a,.nav-pending{
  display:block;padding:7px 20px;font-size:14px;color:var(--ink-2);
  border-left:3px solid transparent;
}
.nav-list a:hover{background:var(--surface-2);color:var(--accent);text-decoration:none}
.nav-list a.active{
  background:var(--accent-soft);color:var(--accent);
  border-left-color:var(--accent);font-weight:600;
}
/* Módulo aún no construido: visible pero inerte, para que se vea el alcance */
.nav-pending{color:var(--ink-3);opacity:.5;cursor:default}

.content{flex:1;padding:26px 30px;min-width:0}
.footer{
  text-align:center;padding:12px;font-size:12px;color:var(--ink-3);
  border-top:1px solid var(--line-soft);
}

/* ── Cabecera de página ─────────────────────────────────────────── */
.page-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:22px;flex-wrap:wrap;
}
.page-head p{margin:2px 0 0}

/* ── Tarjetas ───────────────────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:20px;margin-bottom:18px;
  box-shadow:var(--shadow);
}
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;margin-bottom:22px;
}
.metric{display:flex;flex-direction:column;gap:4px;margin:0}
.metric-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.metric-value{font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.metric.alarm .metric-value{color:var(--danger)}

.phase-note .tag{
  display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin-bottom:8px;
}
.roadmap{margin:12px 0 0;padding-left:20px;color:var(--ink-2);font-size:14px}
.roadmap li{margin-bottom:6px}

.org-card{margin:0;display:flex;flex-direction:column;gap:14px}
.org-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.org-meta{margin:0;display:grid;gap:6px;font-size:13px}
.org-meta div{display:flex;justify-content:space-between;gap:10px}
.org-meta dt{color:var(--ink-3);margin:0}
.org-meta dd{margin:0;font-weight:600}
.empty{text-align:center;padding:40px 20px}

/* ── Tablas ─────────────────────────────────────────────────────── */
.table-wrap{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius);overflow-x:auto;box-shadow:var(--shadow);
}
table{border-collapse:collapse;width:100%;font-size:14px}
th{
  text-align:left;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;padding:11px 14px;
  border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap;
}
td{padding:11px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink-2);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
.empty-row{text-align:center;color:var(--ink-3);padding:32px}
.col-actions{white-space:nowrap;text-align:right}
.col-actions form{display:inline}
.col-actions a,.col-actions .link-btn{margin-left:12px;font-size:13px}

/* ── Formularios ────────────────────────────────────────────────── */
.form.narrow{max-width:460px}
.form-section{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;padding-bottom:8px;border-bottom:1px solid var(--line-soft);
  margin:24px 0 16px;
}
.form-section:first-of-type{margin-top:0}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:5px}
.field.span2{grid-column:span 2}
@media(max-width:640px){.field.span2{grid-column:span 1}}
label{font-size:13px;font-weight:600;color:var(--ink-2)}
input,select,textarea{
  font-family:inherit;font-size:14px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:8px 10px;width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
input:disabled{background:var(--surface-2);color:var(--ink-3)}
input.has-error,select.has-error{border-color:var(--danger)}
.field-help{font-size:12px;color:var(--ink-3)}
.field-error{font-size:12px;color:var(--danger);font-weight:600}
.form-actions{
  display:flex;gap:10px;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line-soft);
}
.filters{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:14px;margin-bottom:16px;
}
.filters input,.filters select{width:auto;min-width:150px}

/* ── Botones ────────────────────────────────────────────────────── */
.btn{
  display:inline-block;font-family:inherit;font-size:14px;font-weight:600;
  padding:8px 16px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);cursor:pointer;text-align:center;
}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-3)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-block{display:block;width:100%}
.link-btn{
  background:none;border:none;padding:0;font:inherit;font-size:14px;
  color:var(--accent);cursor:pointer;
}
.link-btn:hover{text-decoration:underline}
.link-btn.danger{color:var(--danger)}

/* ── Avisos ─────────────────────────────────────────────────────── */
.alert{
  padding:11px 15px;border-radius:var(--radius);margin-bottom:16px;
  font-size:14px;border:1px solid transparent;
}
.alert-success{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.alert-danger{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.alert-warning{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.alert-info{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}

.badge{
  display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;
  border-radius:10px;text-transform:uppercase;letter-spacing:.04em;
  background:var(--surface-2);color:var(--ink-3);
}
.badge-activo{background:var(--ok-soft);color:var(--ok)}
.badge-inactivo{background:var(--surface-2);color:var(--ink-3)}
.badge-suspendido{background:var(--danger-soft);color:var(--danger)}
.badge-prueba{background:var(--warn-soft);color:var(--warn)}

/* ── Login ──────────────────────────────────────────────────────── */
.login-body{
  display:grid;place-items:center;min-height:100vh;padding:20px;
  background:linear-gradient(160deg,#0B47C2 0%,#083596 55%,#05226B 100%);
}
.login-card{
  background:var(--surface);border-radius:6px;padding:34px 30px;
  width:100%;max-width:390px;box-shadow:0 20px 50px -20px rgba(0,0,0,.5);
}
.login-head{text-align:center;margin-bottom:24px}
.login-head h1{font-size:18px;margin-bottom:5px;color:var(--ink-2);font-weight:600}
.login-head p{color:var(--ink-3);font-size:14px;margin:0}
.login-card .field{margin-bottom:16px}
.login-foot{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.login-foot .muted{font-size:12px;margin:0}

/* ── Errores ────────────────────────────────────────────────────── */
.error-body{display:grid;place-items:center;min-height:100vh;padding:20px}
.error-card{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:6px;padding:44px 38px;text-align:center;max-width:440px;
  box-shadow:var(--shadow);
}
.error-code{
  display:block;font-size:52px;font-weight:800;color:var(--accent);
  line-height:1;margin-bottom:10px;
}
.error-card h1{font-size:20px;margin-bottom:8px}
.error-card p{color:var(--ink-2);margin-bottom:22px}

/* ── Menú móvil (base; la media query de abajo lo activa) ───────── */
/* Casilla del menú móvil: fuera de la vista pero enfocable con el teclado */
.menu-interruptor{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.menu-boton{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;margin-right:-6px;border-radius:var(--radius);
  font-size:22px;line-height:1;color:var(--ink-2);cursor:pointer;user-select:none;
}
.solo-movil{display:none}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.menu-cuenta{
  border-top:1px solid var(--line);margin-top:14px;padding:12px 20px 4px;font-size:14px;
}
.menu-cuenta a,.menu-cuenta .link-btn{display:block;padding:6px 0;color:var(--ink-2)}
.menu-cuenta .menu-cuenta-nombre{font-weight:600;color:var(--ink)}
.menu-cuenta form{margin:0}

/* ── Adaptación a pantallas pequeñas ────────────────────────────── */
@media(max-width:820px){
  /* En columna, sin stretch el contenido tomaba el ancho de su tabla más
     ancha y toda la página se salía de la pantalla. Ahora mide lo que la
     pantalla y la tabla se desplaza dentro de su recuadro. */
  .shell{flex-direction:column;align-items:stretch}
  .content{width:100%}
  .sidebar{
    width:100%;flex:none;position:static;max-height:none;
    border-right:none;border-bottom:1px solid var(--line);padding:10px 0;
  }
  .nav-group{margin-top:10px}
  .content{padding:20px 16px}
  .topbar{gap:12px;padding:0 14px}
  .brand-logo{display:none}
  .brand-simbolo{display:block}
  .org-badge span{display:none}

  /* Barra: marca, selector de sede si hay varias, idioma y ☰. Nombre y
     cerrar sesión bajan al menú. */
  .org-badge-texto,.solo-escritorio{display:none}
  .org-badge{min-width:0}
  .sede-switch select{max-width:42vw}
  .topbar-right{gap:8px}
  .menu-boton{display:flex}

  /* Menú plegado hasta que se pulsa ☰ */
  .sidebar{display:none}
  .menu-interruptor:checked ~ .shell .sidebar{display:block}
  .menu-interruptor:checked ~ .topbar .menu-boton{background:var(--accent-soft);color:var(--accent)}
  .menu-interruptor:focus-visible ~ .topbar .menu-boton{outline:2px solid var(--accent);outline-offset:2px}
  .solo-movil{display:block}
}



/* ── Estructura: sedes y espacios ────────────────────────────────── */

/* Varios botones en la cabecera de página */
.head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Campo que ocupa dos columnas de la rejilla del formulario */
.field-wide{grid-column:span 2}
@media (max-width:720px){.field-wide{grid-column:span 1}}

/* Ayuda bajo un campo. Ocupa el mismo sitio que .field-error a propósito:
   cuando aparece el error, la ayuda se reemplaza y la fila no salta. */
.field-hint{display:block;font-size:12px;color:var(--ink-3);margin-top:4px;line-height:1.4}

/* Nota sobre la tabla: cupo del plan, aviso de lista plana */
.hint{
  font-size:13px;color:var(--ink-2);background:var(--surface-2);
  border-left:3px solid var(--line);padding:8px 12px;
  border-radius:var(--radius);margin:0 0 16px
}

/* Sangría del árbol de espacios. El guion de rama va atenuado: marca la
   jerarquía sin competir con el código, que es lo que se viene a leer. */
.tree-indent{display:inline-block}
.tree-branch{color:var(--ink-3);margin-right:6px;user-select:none}

/* Estados de espacio */
.badge-operativo{background:var(--ok-soft);color:var(--ok)}
.badge-mantenimiento{background:var(--warn-soft);color:var(--warn)}
.badge-fuera_servicio{background:var(--danger-soft);color:var(--danger)}

/* Acción secundaria dentro de un campo: se ve como enlace, no como botón,
   para que no compita con Guardar. */
.btn-link{
  background:none;border:0;padding:0;margin-top:6px;
  color:var(--accent);font-size:12px;cursor:pointer;text-decoration:underline
}
.btn-link:hover{color:var(--accent-dark)}

/* ── Activos ─────────────────────────────────────────────────────── */

/* Fichas de resumen sobre la tabla */
.tiles{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 16px;min-width:110px
}
.tile-num{display:block;font-size:22px;font-weight:700;color:var(--ink);line-height:1.2}
.tile-lbl{display:block;font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.tile-alert .tile-num{color:var(--danger)}
.tile-warn .tile-num{color:var(--warn)}

/* Criticidad: A pesa visualmente más que C, a propósito */
.badge-crit-A{background:var(--danger-soft);color:var(--danger)}
.badge-crit-B{background:var(--warn-soft);color:var(--warn)}
.badge-crit-C{background:var(--surface-2);color:var(--ink-3)}

/* Estados de activo */
.badge-en_reparacion{background:var(--warn-soft);color:var(--warn)}
.badge-en_espera_repuesto{background:var(--warn-soft);color:var(--warn)}
.badge-en_garantia{background:var(--accent-soft);color:var(--accent)}
.badge-dado_de_baja{background:var(--surface-2);color:var(--ink-3)}
.badge-use{background:var(--ok-soft);color:var(--ok)}

/* Punto de color del área técnica */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}

.check-inline{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.check-inline input{margin:0}

.hint-alert{border-left-color:var(--danger);color:var(--danger)}

/* Ficha del activo */
.ficha-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.ficha-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.ficha-dl{margin:0}
.ficha-dl > div{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid var(--line-soft)}
.ficha-dl > div:last-child{border-bottom:0}
.ficha-dl dt{color:var(--ink-3);font-size:13px;margin:0}
.ficha-dl dd{margin:0;text-align:right;font-size:13px}
.lista-simple{list-style:none;padding:0;margin:0 0 12px}
.lista-simple li{padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.lista-simple li:last-child{border-bottom:0}

/* Acción destructiva: separada del resto para que no se pulse por inercia */
.zona-peligro{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:24px;padding:16px;border:1px solid var(--danger);
  border-radius:var(--radius);background:var(--danger-soft)
}
.zona-peligro p{margin:4px 0 0;font-size:12px}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}

/* Composición de unidades: varias casillas pequeñas en una fila */
.unidades-grid{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.unidad-item{display:flex;flex-direction:column;gap:2px}
.unidad-item label{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em}
.unidad-item input{width:110px}
.oculto{display:none}

/* Marca de columna derivada: avisa que el dato no se captura a mano */
.th-info{
  display:inline-block;width:14px;height:14px;line-height:14px;text-align:center;
  border-radius:50%;background:var(--ink-3);color:var(--surface);
  font-size:10px;font-weight:700;cursor:help;margin-left:4px
}

/* Selector de sede en la barra superior */
.org-badge form{display:inline-flex;align-items:center;gap:6px;margin:0}
.sede-switch select{
  font-size:13px;font-weight:600;color:var(--accent);
  background:var(--surface);border:1px solid var(--accent-soft);
  border-radius:var(--radius);padding:2px 6px;max-width:220px
}

.badge-cancelado{background:var(--surface-2);color:var(--ink-3);text-decoration:line-through}

/* ── Páginas públicas: reporte por QR y seguimiento ──────────────────
   Se abren desde la cámara del celular, casi siempre de pie y con una mano.
   Una columna, botones anchos y letra de 16px en los campos: con menos, iOS
   hace zoom al tocar el campo y descuadra la página. */
.pub-body{background:var(--ground);margin:0}
.pub-main{max-width:520px;margin:0 auto;padding:16px 16px 32px}
.pub-cabecera{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink-2);font-size:14px;margin-bottom:16px}
.pub-lugar{margin:0 0 16px}
.pub-lugar h1{font-size:22px;line-height:1.25;margin:2px 0;color:var(--ink)}
.pub-lugar-etq{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin:0}
.pub-bloque{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:0 0 14px}
.pub-bloque legend{font-weight:700;padding:0 4px;color:var(--ink)}
.pub-form label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:12px 0 4px}
.pub-form input[type=text],.pub-form input[type=tel],.pub-form textarea{
  width:100%;box-sizing:border-box;font-size:16px;padding:10px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)
}
.pub-form .has-error{border-color:var(--danger)}
.pub-check{display:flex !important;gap:10px;align-items:flex-start;font-weight:400 !important;line-height:1.4}
.pub-check input{margin-top:2px;width:18px;height:18px;flex:none}
.pub-check.has-error{color:var(--danger)}

/* Residente / personal sin JavaScript: radios ocultos y pestañas con :checked */
.pub-radio{position:absolute;opacity:0;pointer-events:none}
.pub-pestanas{display:flex;gap:6px;margin:6px 0 4px}
.pub-pestanas label{
  flex:1;text-align:center;margin:0 !important;padding:10px 6px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)
}
#modo-res:checked ~ .pub-pestanas label[for="modo-res"],
#modo-per:checked ~ .pub-pestanas label[for="modo-per"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.pub-radio:focus-visible ~ .pub-pestanas{outline:2px solid var(--accent);outline-offset:2px}
.pub-panel{display:none}
#modo-res:checked ~ .pub-panel-res,
#modo-per:checked ~ .pub-panel-per{display:block}

.pub-fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pub-identidad{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--accent-soft);border-radius:var(--radius)}
.pub-enviar{width:100%;padding:14px;font-size:16px}
.pub-no-soy{text-align:center;margin-top:12px}
.pub-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pub-aviso p{margin:0;font-size:15px}
.pub-estado{margin:0 0 6px}
.pub-guardar{text-align:center}
.pub-pie{text-align:center;font-size:11px;color:var(--ink-3);margin-top:28px}

/* ── Solicitudes ─────────────────────────────────────────────────── */
.badge-sol-nueva{background:var(--warn-soft);color:var(--warn)}
.badge-sol-en_revision{background:var(--accent-soft);color:var(--accent)}
.badge-sol-aprobada,.badge-sol-convertida{background:var(--ok-soft);color:var(--ok)}
/* El seguimiento publico traduce el estado de la orden: 'atendida' y 'no
   atendida' no son estados de la solicitud, son lo que el residente
   necesita leer. */
.badge-sol-rechazada,
.badge-sol-no_atendida{background:var(--surface-2);color:var(--ink-3)}
.badge-sol-atendida{background:var(--ok);color:#fff}
.badge-prio-emergencia{background:var(--danger);color:#fff}
.badge-prio-alta{background:var(--danger-soft);color:var(--danger)}
.badge-prio-media{background:var(--surface-2);color:var(--ink-2)}
.badge-prio-baja{background:var(--surface-2);color:var(--ink-3)}
.decision{margin-top:16px}
.decision select,.decision textarea{width:100%;box-sizing:border-box}

/* Advertencia de verificación en el reporte: tiene que leerse antes de enviar */
.pub-advertencia{
  margin:10px 0 0;padding:8px 10px;font-size:13px;line-height:1.4;
  background:var(--warn-soft);color:var(--warn);border-radius:var(--radius)
}

/* Fotos del reporte por QR: miniaturas de 3 en fila, cada una con su "quitar" */

/* El "Choose File / Examinar" del navegador se reemplaza por el botón de
   abajo. El campo sigue en la página, accesible al teclado y al lector de
   pantalla: fuera de la vista, no fuera del formulario. */
.pub-form .pub-archivo{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.pub-form .pub-foto-boton{
  display:inline-flex;align-items:center;gap:8px;margin:6px 0 4px;padding:12px 16px;
  font-size:15px;font-weight:600;color:var(--accent);background:var(--surface);
  border:1px dashed var(--accent);border-radius:var(--radius);cursor:pointer
}
.pub-form .pub-foto-boton::before{content:"\1F4F7";font-size:18px;line-height:1}
.pub-form .pub-foto-boton[hidden]{display:none}
/* El campo oculto no se ve, así que su foco se pinta sobre el botón */
.pub-form .pub-archivo:focus-visible + .pub-foto-boton{outline:2px solid var(--accent);outline-offset:2px}
.pub-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 4px}
.pub-fotos[hidden]{display:none}
.pub-foto{position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:var(--surface-2)}
.pub-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pub-foto-quitar{
  position:absolute;top:4px;right:4px;width:30px;height:30px;padding:0;border:0;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;font-size:20px;line-height:30px;cursor:pointer
}
.pub-form input[type=file][hidden]{display:none}

/* Fotos en la ficha interna de la solicitud */
.sol-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:12px 0}
.sol-fotos img{width:100%;height:120px;object-fit:cover;display:block;border-radius:var(--radius);border:1px solid var(--line)}

/* ─── Hoja de códigos QR ───────────────────────────────────────────
   En pantalla es una rejilla que se acomoda al ancho; al imprimir son
   siempre tres por fila, porque el que pega las etiquetas las corta con
   tijera y necesita un tamaño previsible. */
.qr-hoja{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:16px 0}
.qr-etiqueta{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)
}
.qr-etiqueta-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}
.qr-codigo{font-weight:700;color:var(--ink)}
.qr-clase{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.qr-nombre{font-size:15px;line-height:1.25;margin:0;color:var(--ink)}
.qr-donde{font-size:12px;color:var(--ink-3);margin:0}
/* El QR se dibuja como SVG y crece con la etiqueta; el ancho máximo evita
   que en una pantalla grande quede del tamaño de una cartelera. */
.qr-codigo-img{width:100%;max-width:170px;aspect-ratio:1/1}
.qr-codigo-img svg{width:100%;height:100%;display:block}
.qr-escanea{font-size:11px;line-height:1.3;color:var(--ink-2);margin:0}
.qr-enlace{font-size:9px;color:var(--ink-3);margin:0;word-break:break-all}

@media print {
  /* Media carta y carta caben igual: el alto fijo de la etiqueta manda */
  @page { margin: 10mm; }

  /* Se imprime la hoja, no la aplicación. El menú lateral es <aside
     class="sidebar">, no un <nav>: por eso antes salía en la primera página. */
  .topbar,.sidebar,.footer,.filters,.no-imprimir,.head-actions,.alert{display:none !important}
  .shell,.content{display:block;padding:0;margin:0;min-height:0;background:#fff}
  body{background:#fff}

  /* Un título corto para saber de qué hoja se trata; la explicación de la
     pantalla no aporta nada en papel y cuesta una fila de etiquetas. */
  .page-head{display:block;margin:0 0 4mm}
  .page-head h1{font-size:12pt;margin:0}
  .page-head p{display:none}

  /* El enlace en texto es la salida para cuando no hay JavaScript. En papel
     el QR ya está impreso, así que sobra y ocupa el alto que hace falta. */
  .qr-enlace{display:none}

  .qr-hoja{grid-template-columns:repeat(3,1fr);gap:4mm;margin:0}
  .qr-etiqueta{
    /* Alto fijo: tres filas por página y todas las etiquetas del mismo
       tamaño, que es lo que necesita quien las corta con tijera.
       3 × 78 mm + 2 × 4 mm de separación = 242 mm, dentro de los 277 mm
       útiles de una A4 con márgenes de 10 mm. */
    height:78mm;box-sizing:border-box;justify-content:space-between;
    border:1px dashed #999;border-radius:0;padding:3mm;gap:1.5mm;overflow:hidden;
    break-inside:avoid;page-break-inside:avoid
  }
  .qr-codigo{font-size:9pt}
  .qr-clase{font-size:6pt}
  .qr-nombre{font-size:9pt;line-height:1.15}
  .qr-donde{font-size:6.5pt;line-height:1.2}
  .qr-codigo-img{max-width:36mm}
  .qr-escanea{font-size:6pt;line-height:1.2}

  /* Sin esto, algunos navegadores imprimen el QR sin su cuadro blanco */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ─── Órdenes de trabajo ───────────────────────────────────────────
   Los estados siguen el mismo código de color del resto del sistema:
   naranja lo que espera a alguien, rojo lo que se anuló, verde lo cerrado. */
.badge-ot-abierta{background:var(--accent-soft);color:var(--accent)}
.badge-ot-en_ejecucion{background:var(--accent);color:#fff}
.badge-ot-espera_repuestos,.badge-ot-espera_cotizacion,
.badge-ot-espera_personal,.badge-ot-espera_equipo,.badge-ot-espera_clima{background:var(--warn-soft);color:var(--warn)}
.badge-ot-espera_aprobacion{background:var(--warn);color:#fff}
.badge-ot-ejecutada{background:var(--ok-soft);color:var(--ok)}
.badge-ot-cerrada{background:var(--ok);color:#fff}
.badge-ot-descartada,.badge-ot-cancelada{background:var(--surface-2);color:var(--ink-3)}

/* Una orden vencida tiene que saltar a la vista en la lista */
.fila-vencida td{background:var(--danger-soft)}
.texto-alerta{color:var(--danger);font-weight:600}

/* La aprobación pendiente es lo primero que hay que ver en la ficha */
.aviso-aprobacion{border-left:4px solid var(--warn)}

.acciones-ot{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.acciones-ot form{margin:0}
.acciones-secundarias{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
/* Acción con su nota al lado: el motivo se escribe en el mismo gesto */
.accion-con-nota{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.accion-con-nota input[type=text],.accion-con-nota select{min-width:200px;flex:1}
.bloque-accion{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}
.bloque-accion > label{display:block;margin-top:4px}
/* Si el primer bloque va justo bajo el título, sobra su raya de arriba */
.card > h2 + .bloque-accion{margin-top:10px;padding-top:0;border-top:0}
.bloque-accion .campo-motivo{width:100%;max-width:560px;margin:4px 0 10px}
/* Descartar y cancelar: cada botón con su explicación debajo */
.opciones-no-se-hara{display:flex;flex-wrap:wrap;gap:16px}
.opcion-no-se-hara{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1 1 220px;max-width:340px}

/* Total de una lista de datos: el renglón que se lee primero */
.ficha-dl .dl-total{border-top:1px solid var(--line);margin-top:6px;padding-top:6px;font-weight:700}

/* Historial: una línea de tiempo, no una tabla. Lo que importa es el orden
   de lo que pasó y quién lo hizo, no comparar columnas. */
.linea-tiempo{list-style:none;margin:0;padding:0}
.linea-tiempo li{
  position:relative;padding:0 0 14px 18px;border-left:2px solid var(--line-soft);
  display:flex;flex-direction:column;gap:2px
}
.linea-tiempo li::before{
  content:"";position:absolute;left:-5px;top:4px;width:8px;height:8px;
  border-radius:50%;background:var(--accent)
}
.linea-tiempo li:last-child{border-left-color:transparent}
.lt-fecha{font-size:12px;color:var(--ink-3)}
.lt-cambio{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lt-nota{margin:2px 0 0;font-size:13px;color:var(--ink-2)}

.comentario{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.comentario p{margin:4px 0 0}
/* Lo que escribió el sistema se distingue de lo que escribió una persona */
.comentario-sistema{color:var(--ink-3);font-style:italic}

/* ─── Planes de mantenimiento ──────────────────────────────────────
   La letra de periodicidad se lee como una etiqueta corta —S, Q, M, B, T,
   Sx, A— y al lado va el nombre completo: quien conoce la notación lee la
   letra, quien no, lee la palabra. */
.badge-periodo{background:var(--accent-soft);color:var(--accent);min-width:26px;text-align:center}
.badge-plan-activo{background:var(--ok-soft);color:var(--ok)}
.badge-plan-pausado{background:var(--warn-soft);color:var(--warn)}
.badge-plan-inactivo{background:var(--surface-2);color:var(--ink-3)}

/* Quién ejecuta: los tres paneles se alternan con CSS, sin JavaScript, igual
   que el formulario público del QR. El servidor solo guarda el campo del
   ejecutor elegido, así que un panel oculto no puede colar datos. */
#ejec-staff:checked ~ .pub-pestanas label[for="ejec-staff"],
#ejec-contratista:checked ~ .pub-pestanas label[for="ejec-contratista"],
#ejec-operador:checked ~ .pub-pestanas label[for="ejec-operador"]{
  background:var(--accent);color:#fff;border-color:var(--accent)
}
#ejec-staff:checked ~ .panel-staff,
#ejec-contratista:checked ~ .panel-contratista,
#ejec-operador:checked ~ .panel-operador{display:block}

/* ─── Tablero de indicadores ───────────────────────────────────────
   Paleta categórica validada con el script de la guía de visualización
   (visión normal, protanopia y deuteranopia) sobre el blanco de las
   tarjetas. El ORDEN importa: es el que pasó la prueba de vecinos. Tres
   colores (3, 4 y 5) quedan bajo 3:1 de contraste: por eso toda gráfica
   lleva sus valores escritos y su tabla.

   Cada serie deja su color en --c y cada marca lo usa a su manera: fondo
   en las barras, relleno en las columnas SVG, trazo en la dona. */
.viz{
  --serie-1:#2a78d6; --serie-2:#eb6834; --serie-3:#1baf7a; --serie-4:#eda100; --serie-5:#e87ba4;
  --serie-otro:#b3b2ac;
  --viz-rejilla:#e1e0d9; --viz-base:#c3c2b7; --viz-mudo:#898781;
}
.serie-1{--c:var(--serie-1)} .serie-2{--c:var(--serie-2)} .serie-3{--c:var(--serie-3)}
.serie-4{--c:var(--serie-4)} .serie-5{--c:var(--serie-5)} .serie-otro{--c:var(--serie-otro)}

/* Un solo filtro, arriba, que manda sobre todo lo de abajo */
.periodos{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.periodos a{
  padding:6px 12px;border:1px solid var(--line);border-radius:16px;font-size:13px;
  color:var(--ink-2);background:var(--surface)
}
.periodos a:hover{text-decoration:none;background:var(--surface-2)}
.periodos a.activo{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

/* Fila de cifras: lo primero que se lee */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:16px}
/* Sin min-width:0, un hijo ancho —la gráfica que se desplaza de lado— estira
   toda la columna de la rejilla y la página se sale de la pantalla */
.kpis > *,.tablero > *{min-width:0}
.kpi{
  display:flex;flex-direction:column;gap:4px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:inherit
}
a.kpi:hover{text-decoration:none;border-color:var(--accent)}
.kpi-lbl{font-size:12px;color:var(--ink-3);line-height:1.3}
/* Cifras proporcionales: las tabulares se ven sueltas a este tamaño */
.kpi-num{font-size:28px;font-weight:600;line-height:1.1;color:var(--ink)}
.kpi-sub,.kpi-delta{font-size:12px;color:var(--ink-3);line-height:1.3}
.delta-bueno{color:var(--ok);font-weight:600}
.delta-malo{color:var(--danger);font-weight:600}

.tablero{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:980px){
  .tablero{grid-template-columns:1fr 1fr}
  .viz-ancha{grid-column:1 / -1}
}
.viz h2{margin-bottom:4px}
.viz-nota{font-size:12px;color:var(--ink-3);margin:0 0 14px;line-height:1.4}
.viz-sin-datos{font-size:13px;color:var(--ink-3)}

/* Barras horizontales: etiqueta, barra y valor en una fila. La barra no
   pasa de 14 px de grueso y solo redondea el extremo del dato. */
.viz-barras{display:grid;gap:7px}
.viz-fila{display:grid;grid-template-columns:minmax(110px,38%) 1fr auto;align-items:center;gap:10px;font-size:13px}
.viz-etq{color:var(--ink-2);line-height:1.25;overflow-wrap:anywhere}
.viz-pista{display:block;height:14px}
.viz-barra{display:block;height:14px;min-width:2px;border-radius:0 4px 4px 0;background:var(--c)}
.viz-valor{min-width:3.5em;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.viz-fila:hover .viz-barra{filter:brightness(1.1)}

/* Barra al 100 %: la separación de 2 px la hace el hueco, no un borde */
.viz-apilada{display:flex;gap:2px;height:20px;margin:6px 0 14px}
.viz-seg{display:block;height:100%;min-width:2px;background:var(--c)}
.viz-seg:first-child{border-radius:4px 0 0 4px}
.viz-seg:last-child{border-radius:0 4px 4px 0}
.viz-seg:only-child{border-radius:4px}
.viz-seg:hover{filter:brightness(1.1)}
.viz-vacio{flex:1;border-radius:4px;background:var(--surface-2)}

/* Leyenda: el color va en la muestra, nunca en el texto */
.viz-leyenda{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}
.viz-leyenda li{display:flex;align-items:center;gap:8px}
.viz-leyenda-fila{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px}
.viz-muestra{flex:none;width:10px;height:10px;border-radius:2px;background:var(--c)}
.viz-ley-etq{color:var(--ink-2)}
.viz-ley-val{margin-left:auto;padding-left:12px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Columnas en SVG: rejilla y ejes finos y continuos, recesivos */
.viz-svg{display:block;width:100%;height:auto}
.viz-scroll{overflow-x:auto}
.viz-scroll .viz-svg{min-width:620px}
.viz-svg path{fill:var(--c)}
.viz-rejilla{stroke:var(--viz-rejilla);stroke-width:1}
.viz-base{stroke:var(--viz-base);stroke-width:1}
.viz-eje-txt{fill:var(--viz-mudo);font-size:11px;font-variant-numeric:tabular-nums}
.viz-dato{fill:var(--ink);font-size:11px;font-weight:600}
.viz-toque{fill:transparent}
.viz-marca:hover path{opacity:.85}

/* Dona */
.viz-dona-caja{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:center}
.viz-dona{width:160px;height:160px}
.viz-dona-pista{fill:none;stroke:var(--surface-2);stroke-width:22}
.viz-dona-seg{fill:none;stroke:var(--c);stroke-width:22}
.viz-marca:hover .viz-dona-seg{opacity:.85}
.viz-dona-num{font-size:26px;font-weight:600;fill:var(--ink)}
.viz-dona-sub{font-size:11px;fill:var(--viz-mudo)}
@media (max-width:520px){.viz-dona-caja{grid-template-columns:1fr;justify-items:center}}

/* La tabla equivalente de cada gráfica */
.viz-tabla{margin-top:14px;font-size:12px}
.viz-tabla summary{cursor:pointer;color:var(--accent)}
.viz-tabla table{width:100%;margin-top:6px;border-collapse:collapse}
.viz-tabla th,.viz-tabla td{padding:4px 6px;border-bottom:1px solid var(--line-soft);text-align:left;font-weight:400}
.viz-tabla th{color:var(--ink-3)}
.viz-tabla .num{text-align:right;font-variant-numeric:tabular-nums}

/* ── Checklists: editor de plantilla ───────────────────────────────── */
.items-editor{counter-reset:item;display:grid;gap:10px;margin:10px 0 12px}
.item-fila{
  counter-increment:item;display:grid;grid-template-columns:28px 1fr;gap:8px;
  padding:10px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--surface-2);
}
.item-num::before{content:counter(item);font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.item-campos{display:grid;gap:8px;min-width:0}
.item-descripcion{width:100%}
.item-detalle{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-end}
.item-detalle label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink-3)}
.item-detalle input[type=text]{width:90px}
.item-detalle textarea{min-width:200px}
.item-detalle .item-oblig{flex-direction:row;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
/* Unidad/rango solo para medidas y opciones solo para «escoger»; sin :has se ven todos */
@supports selector(:has(a)){
  .item-fila .solo-numerico,.item-fila .solo-seleccion{display:none}
  .item-fila:has(option[value="numerico"]:checked) .solo-numerico{display:flex}
  .item-fila:has(option[value="seleccion"]:checked) .solo-seleccion{display:flex}
}

/* ── Checklists: dentro de la orden ────────────────────────────────── */
.chk-progreso{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--ink-3);font-size:14px;margin:4px 0 12px}
.chk-form{display:grid;gap:10px}
.chk-item{
  border:1px solid var(--line-soft);border-left:4px solid var(--line);border-radius:var(--radius);
  padding:10px 14px 12px;margin:0;min-width:0;
}
.chk-item legend{padding:0 4px;font-weight:600;font-size:15px}
.chk-num{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-right:4px}
.chk-oblig{color:var(--danger)}
.chk-pendiente{border-left-color:var(--warn)}
.chk-hallazgo{border-left-color:var(--danger);background:var(--danger-soft)}
.chk-opciones{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
/* Botones grandes: se responde con el dedo, a veces con guantes */
.chk-op{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;font-size:15px;
  white-space:nowrap;
}
.chk-op:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.chk-si:has(input:checked){border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.chk-no:has(input:checked){border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}
.chk-medida{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0}
.chk-medida input{width:120px;font-size:16px}
.chk-item textarea{width:100%;margin:6px 0}
.chk-extra{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:6px}
.chk-extra input[type=text]{flex:1;min-width:180px}
.chk-na{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2);min-height:36px;white-space:nowrap}
.chk-lectura summary{cursor:pointer;list-style:none}
.chk-lectura summary::-webkit-details-marker{display:none}
.chk-lectura summary h2::after{content:' ▾';color:var(--ink-3);font-size:14px}
.chk-lectura[open] summary h2::after{content:' ▴'}
.chk-lista{margin:0;padding-left:22px;display:grid;gap:6px}
.chk-lista li{padding:6px 8px;border-radius:var(--radius)}
.chk-lista li.chk-hallazgo{border-left:4px solid var(--danger)}
.chk-desc{display:block;color:var(--ink-2)}
.chk-resp{font-weight:600}
.chk-nota{display:block;font-size:13px}

/* ── Orden: ubicación completa, datos que faltan y firmas ───────────── */
.ruta-ubicacion{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:6px;font-size:14px;color:var(--ink-3)}
.ruta-sep{color:var(--line)}
.ruta-ubicacion .ruta-final{color:var(--ink);font-weight:600}
.dato-falta{color:var(--warn);font-weight:600}
.firma-bloque{margin-top:14px;display:grid;gap:6px;max-width:560px}
.firma-pad{border:1px dashed var(--line);border-radius:var(--radius);background:#fff;padding:6px}
/* touch-action: none evita que la página se desplace mientras se firma */
.firma-pad canvas{display:block;width:100%;height:170px;touch-action:none;cursor:crosshair;background:#fff}
.firma-pie{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
.firmas-casillas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:14px}
.firma-casilla{display:flex;flex-direction:column;gap:4px;min-height:130px}
.firma-rol{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.firma-img{max-width:280px;max-height:110px;object-fit:contain;border-bottom:1px solid var(--ink-2)}
.firma-linea{display:block;height:80px;border-bottom:1px solid var(--ink-2);max-width:280px}
.firma-nombre{font-weight:600}
.solo-impresion{display:none}

@media print {
  .solo-impresion{display:block}
  /* El folio sí va en papel (la regla general de la hoja QR oculta los párrafos) */
  .page-head p.mono{display:block;margin:1mm 0}
  .firma-pad,.firma-bloque{display:none !important}
  .ruta-ubicacion{color:#000}
  .card{box-shadow:none;border-color:#999;break-inside:avoid}
  .firmas-ot{break-inside:avoid}
  .ficha-cols{display:block}
  #comentarios textarea{display:none}
}

/* ── Rondas ─────────────────────────────────────────────────────────── */
.rondas-hoy{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:24px}
.ronda{margin:0;border-left:4px solid var(--line);display:flex;flex-direction:column;gap:6px}
.ronda p{margin:0}
.ronda .btn{align-self:flex-start;margin-top:4px}
.ronda-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.ronda-cab h2{font-size:16px}
.ronda-pendiente{border-left-color:var(--accent)}
.ronda-atrasada{border-left-color:var(--danger)}
.ronda-hecha{border-left-color:var(--ok);opacity:.85}
/* Botón grande: se pulsa con el dedo, a veces con guantes de aseo */
.btn-grande{min-height:48px;padding:12px 22px;font-size:16px}
.dias-semana span{display:inline-block;width:1.4em;text-align:center}
.dias-semana .dia-no{color:var(--line)}
.dias-semana .dia-si{color:var(--ink);font-weight:700}
.dias-elegir{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}

/* Ronda: se ven los campos de la frecuencia elegida; sin :has se ven los dos */
@supports selector(:has(a)){
  form:has(input[name="frecuencia"][value="semana"]:checked) .solo-frec-cada-n{display:none}
  form:has(input[name="frecuencia"][value="cada_n"]:checked) .solo-frec-semana{display:none}
}
.dias-semana .dia-texto{width:auto;font-family:var(--sans);font-size:13px}

/* ── Turnos ─────────────────────────────────────────────────────────── */
.semana-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.tabla-turnos th,.tabla-turnos td{text-align:center;white-space:nowrap}
.tabla-turnos th:first-child,.tabla-turnos td:first-child{text-align:left}
.tabla-turnos .col-festivo{background:var(--warn-soft)}
.tabla-turnos .col-hoy{box-shadow:inset 0 3px 0 var(--accent)}
.tabla-turnos .festivo{font-size:10px;color:var(--warn);letter-spacing:.06em}
.celda-turno{display:table-cell}
.celda-turno .turno-horas{display:block;font-weight:600;color:var(--ink)}
.celda-turno.descansa{color:var(--ink-3)}
.fila-avisos td{text-align:left !important;white-space:normal !important;font-size:13px;background:var(--surface-2)}
.tabla-horario input[type=time]{min-width:110px}
.tabla-horario input[type=number]{width:80px}
.de-turno{background:var(--accent-soft);color:var(--ink-2);padding:10px 14px;border-radius:var(--radius);margin-bottom:14px}
@supports selector(:has(a)){
  form:has(input[name="ciclo_semanas"][value="1"]:checked) .solo-ciclo-2{display:none}
}

/* ── Hoja de vida del equipo ────────────────────────────────────────── */
.card-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.hoja-vida .kpis{margin-top:8px}

/* ── Costos: proveedores, materiales y actividades ─────────────────── */
.badge-tercero-proveedor{background:var(--accent-soft);color:var(--accent)}
.badge-tercero-contratista{background:var(--warn-soft);color:var(--warn)}
.badge-tercero-ambos{background:var(--ok-soft);color:var(--ok)}
.texto-ok{color:var(--ok);font-weight:600}
.texto-aviso{color:var(--warn);font-size:12px;font-weight:600}
.fila-inactiva td{color:var(--ink-3)}
.centro{text-align:center}
.tabla-filas td{padding:6px 8px;vertical-align:middle}
.tabla-filas select,.tabla-filas input[type=text],.tabla-filas input[type=date]{width:100%;min-width:110px}
.tabla-filas select{min-width:200px}
.tabla-filas .input-num{text-align:right;min-width:90px;max-width:140px}
.tabla-filas tfoot th{text-align:left;padding:8px}
.tabla-filas tfoot .num{text-align:right}
/* Lo de quien entra a trabajar no aplica al proveedor puro */
@supports selector(:has(a)){
  .form-tercero:has([data-tipo-tercero] option[value="proveedor"]:checked) .solo-contratista{display:none}
}

/* ── Costos dentro de la orden ─────────────────────────────────────── */
.costos-resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0 16px}
.costos-resumen .kpi{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--surface-2)}
.costos-resumen .kpi-label{font-size:12px;color:var(--ink-3)}
.costos-resumen .kpi strong{font-size:16px;font-variant-numeric:tabular-nums}
.costos-resumen .kpi-total{background:var(--accent-soft)}
.costos-resumen .kpi-total strong{color:var(--accent)}
#costos h3{margin:18px 0 6px;font-size:14px}
.ajustar-costos{margin-top:16px;border-top:1px solid var(--line-soft);padding-top:12px}
.ajustar-costos summary{cursor:pointer;color:var(--accent);font-weight:600}
.ajustar-costos h4{margin:14px 0 4px;font-size:13px}
.lista-materiales{margin:6px 0 0;padding-left:18px;line-height:1.8}

/* ── Tablero: sección de costos ────────────────────────────────────── */
.tablero-seccion{margin:32px 0 2px;font-size:20px}
.tablero-seccion-nota{margin:0 0 14px}

/* ── Mis reportes (público) ────────────────────────── */
/* Un <details> y no un bloque fijo: quien viene a reportar algo nuevo lo
   cierra de un toque y llega al formulario. Sin JavaScript, que la politica
   de seguridad del sitio no permite en linea. */
.pub-mios{
  margin:0 0 16px;padding:10px 12px;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius)
}
.pub-mios > summary{
  font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
  padding:2px 0;list-style:none
}
.pub-mios > summary::-webkit-details-marker{display:none}
.pub-mios > summary::after{content:' \25BE';color:var(--ink-3)}
.pub-mios[open] > summary::after{content:' \25B4'}

.pub-mios-lista{list-style:none;margin:8px 0 0;padding:0}
.pub-mios-lista li{border-top:1px solid var(--line-soft)}
.pub-mios-lista a{
  display:flex;flex-direction:column;gap:3px;
  /* 44px de alto minimo: es un enlace que se toca con el pulgar */
  padding:10px 2px;min-height:44px;text-decoration:none;color:inherit
}
.pub-mios-que{font-size:15px;line-height:1.3}
.pub-mios-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}

/* ── Catálogos ──────────────────────────────────── */
.pestanas{
  display:flex;gap:2px;flex-wrap:wrap;
  margin:0 0 14px;border-bottom:1px solid var(--line)
}
.pestanas a{
  padding:8px 14px;font-size:13px;color:var(--ink-2);text-decoration:none;
  border:1px solid transparent;border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;
  margin-bottom:-1px
}
.pestanas a:hover{background:var(--surface-2)}
.pestanas a.activo{
  background:var(--surface);color:var(--ink);font-weight:600;
  border-color:var(--line);border-bottom:1px solid var(--surface)
}

/* Oculta no es borrada: se atenua, no se tacha. */
.fila-oculta td{opacity:.55}
.fila-oculta td:last-child{opacity:1}

/* Dos formularios en la misma celda de acciones, uno al lado del otro. */
form.inline{display:inline;margin:0}
.btn-sm{padding:3px 8px;font-size:12px}

/* ── Presupuesto: avance de cada línea ─────────────────────────────── */
.ppto-pista{display:inline-block;width:90px;height:8px;border-radius:4px;background:var(--surface-2);vertical-align:middle;overflow:hidden}
.ppto-barra{display:block;height:100%;background:var(--serie-1, var(--accent));border-radius:4px}
.ppto-barra.ppto-exceso{background:var(--danger)}
.ppto-pct{margin-left:6px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.fila-alerta td{background:var(--warn-soft)}

/* ── Informe mensual ───────────────────────────────────────────────── */
.informe{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px 26px;margin-top:16px}
.informe-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:2px solid var(--accent);padding-bottom:12px;margin-bottom:8px}
.informe-cab h2{margin:0;font-size:20px}
.informe-sec{margin-top:26px;break-inside:avoid}
.informe-sec h3{font-size:16px;color:var(--accent);border-bottom:1px solid var(--line-soft);padding-bottom:6px;margin-bottom:12px}
.informe-sec h4{font-size:13px;margin:14px 0 6px;color:var(--ink-2)}
.informe-cols{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:860px){.informe-cols{grid-template-columns:1fr 1fr}}
.tabla-informe{width:100%;border-collapse:collapse;font-size:13px}
.tabla-informe th,.tabla-informe td{padding:6px 8px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.tabla-informe thead th{color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.tabla-informe .num{text-align:right;font-variant-numeric:tabular-nums}
.tabla-informe tfoot th{border-top:2px solid var(--line);font-weight:700}
.informe-texto{white-space:normal;line-height:1.6;background:var(--surface-2);border-radius:var(--radius);padding:12px 14px}
.firmas-informe{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:36px}
@media print{
  .informe{border:0;padding:0;margin:0}
  .informe-sec{page-break-inside:avoid}
  .kpis{grid-template-columns:repeat(4,1fr)}
}

/* ── Informe mensual: encabezado con marca y gráficas ──────────────── */
.informe-marca{display:flex;flex-direction:column;gap:8px}
.informe-quien{display:flex;flex-direction:column;gap:2px}
.informe-admin{font-size:12px;color:var(--ink-3)}
.informe-propiedad{font-size:16px;color:var(--ink)}
.informe-titulo{text-align:right}
.informe-titulo h2{margin:0;font-size:18px}
.informe-mes{margin:2px 0 4px;font-size:22px;font-weight:700;color:var(--accent)}
.informe-viz{margin-top:18px}
.informe-sec .viz h4{margin:0 0 4px}
@media (max-width:700px){
  .informe-cab{flex-direction:column}
  .informe-titulo{text-align:left}
}
@media print{
  .informe-cab{border-bottom-width:3px}
  .informe-viz{page-break-inside:avoid}
}

/* ── Enlace con SGEn: el bloque de configuración ───────────────────── */
.bloque-codigo{
  background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:10px 12px;font-family:var(--mono);font-size:12px;line-height:1.6;overflow-x:auto;margin:8px 0;
}