/* Foliador DC-3 · JRH. Marino con ámbar; la constancia y el folio son lo central. */
:root {
  --marino: #14284A; --marino-2: #1F3B66; --ambar: #F2B300; --ambar-texto: #8A5A00; --ambar-suave: #FDF3D6;
  --fondo: #EEF1F5; --superficie: #FFFFFF; --tinta: #16202E; --tinta-2: #4A5568; --linea: #D6DCE4; --linea-suave: #E5E9F0; --titulo: #14284A; --perfo: var(--fondo);
  --sombra: 0 1px 2px rgba(20,40,74,.07), 0 2px 8px rgba(20,40,74,.04);
  --accion: #1E439B; --accion-suave: #E5ECF8; --ok: #1D7A3C; --ok-suave: #E3F2E8; --mal: #B3261E; --mal-suave: #FBE6E4;
  --f-titulo: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --f-texto: "Barlow", "Segoe UI", Arial, sans-serif;
  --f-dato: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fondo: #0F1622; --superficie: #18212F; --tinta: #E7ECF2; --tinta-2: #A5B0BE; --linea: #2E3A4B;
  --accion: #8FB1F0; --accion-suave: #1F2E48; --ok: #6CC48A; --ok-suave: #173323; --mal: #F0948C; --mal-suave: #3E1D1A;
  --ambar-texto: #F2C84B; --ambar-suave: #3A2F10; --titulo: #E7ECF2; --linea-suave: #263142; --sombra: none; color-scheme: dark } }
:root[data-theme="dark"] {
  --fondo: #0F1622; --superficie: #18212F; --tinta: #E7ECF2; --tinta-2: #A5B0BE; --linea: #2E3A4B;
  --accion: #8FB1F0; --accion-suave: #1F2E48; --ok: #6CC48A; --ok-suave: #173323; --mal: #F0948C; --mal-suave: #3E1D1A;
  --ambar-texto: #F2C84B; --ambar-suave: #3A2F10; --titulo: #E7ECF2; --linea-suave: #263142; --sombra: none; color-scheme: dark }

* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--fondo); color: var(--tinta); font-family: var(--f-texto); font-size: 16px; line-height: 1.45; -webkit-text-size-adjust: 100% }
.espera { padding: 40px 16px; text-align: center; color: var(--tinta-2) }
a { color: var(--accion) }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px }

/* ---------- Encabezado de marca ---------- */
.cab { background: var(--marino); color: #fff; border-bottom: 4px solid var(--ambar); padding: 0 max(16px, env(safe-area-inset-left)) }
.cab-int { max-width: 1040px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 0; flex-wrap: wrap }
.cab img { width: 44px; height: 44px; flex: none; object-fit: contain }
.cab .marca { display: flex; flex-direction: column; min-width: 0; flex: 1 }
.cab .marca small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ambar); font-weight: 600 }
.cab h1 { font-family: var(--f-titulo); font-size: 26px; line-height: 1.05; margin: 0 }
.folio-sig { font-family: var(--f-dato); font-size: 12px; text-align: right; color: #C9D4E5; line-height: 1.2 }
.folio-sig b { display: block; font-size: 18px; color: #fff }
.cab .salir { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; padding: 6px 10px; font-size: 13px }

nav.pestanas { background: var(--superficie); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 5 }
nav.pestanas div { max-width: 1040px; margin: 0 auto; display: flex; overflow-x: auto; padding: 0 12px; scrollbar-width: none }
nav.pestanas a { padding: 13px 14px 11px; text-decoration: none; color: var(--tinta-2); font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; min-height: 44px }
nav.pestanas a.on { color: var(--tinta); border-color: var(--ambar) }

main { max-width: 1040px; margin: 0 auto; padding: 18px max(16px, env(safe-area-inset-left)) 60px; display: flex; flex-direction: column; gap: 16px }
.bloque { background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.bloque > h2 { font-family: var(--f-titulo); font-size: 20px; margin: 0; display: flex; justify-content: flex-start; align-items: center; gap: 10px; flex-wrap: wrap }
.bloque > h2 .n { margin-left: auto; font-family: var(--f-dato); font-size: 13px; color: var(--tinta-2); font-weight: 500 }
.ayuda { font-size: 14px; color: var(--tinta-2); margin: 0 }

/* ---------- Formularios ---------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px }
label.campo { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: var(--tinta-2); min-width: 0 }
label.campo.ancho { grid-column: 1 / -1 }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 600; min-height: 44px }
label.check input { width: 20px; height: 20px }
input, select, textarea { font: inherit; color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea); border-radius: 6px; padding: 10px 11px; width: 100%; min-width: 0; min-height: 44px }
input.mono { font-family: var(--f-dato); text-transform: uppercase; letter-spacing: .03em }
textarea { min-height: 90px }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
button { font: inherit; font-weight: 600; font-size: 15px; border-radius: 6px; padding: 10px 16px; cursor: pointer; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); min-height: 44px }
button.primario { background: var(--accion); border-color: var(--accion); color: #fff }
:root[data-theme="dark"] button.primario { color: #0F1622 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.primario { color: #0F1622 } }
button.peligro { color: var(--mal) }
button.chico { padding: 6px 11px; font-size: 14px; min-height: 36px }
button:disabled { opacity: .5; cursor: not-allowed }

.nota { padding: 10px 12px; border-radius: 6px; font-size: 15px; background: var(--ambar-suave); border-left: 4px solid var(--ambar) }
.nota.error { background: var(--mal-suave); border-color: var(--mal) }
.nota.ok { background: var(--ok-suave); border-color: var(--ok) }
.nota:empty { display: none }

/* ---------- Listas ---------- */
.lista { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: 6px; overflow: hidden }
.renglon { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--linea); flex-wrap: wrap }
.renglon:last-child { border-bottom: 0 }
.renglon .t { flex: 1; min-width: 200px; display: flex; flex-direction: column }
.renglon .t small { color: var(--tinta-2); font-size: 14px }
.renglon .t .mono { font-family: var(--f-dato); font-size: 13px }
.vacio { padding: 22px; text-align: center; color: var(--tinta-2); border: 1px dashed var(--linea); border-radius: 6px }
.buscar { max-width: 360px }

.estado { font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50% }
.estado.ok { color: var(--ok); background: var(--ok-suave) } .estado.ok::before { background: var(--ok) }
.estado.mal { color: var(--mal); background: var(--mal-suave) } .estado.mal::before { background: var(--mal); border-radius: 1px }
.estado.aviso { color: var(--ambar-texto); background: var(--ambar-suave) } .estado.aviso::before { background: var(--ambar); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%) }

/* ---------- Lista para generar ---------- */
.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.pasos li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 6px }
.pasos li .m { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; background: var(--linea) }
.pasos li.si .m { background: var(--ok) }
.pasos li .t { flex: 1 } .pasos li .t small { display: block; color: var(--tinta-2); font-size: 14px }

/* ---------- Firma ---------- */
.firma-caja { border: 1px dashed var(--linea); border-radius: 6px; min-height: 110px; display: grid; place-items: center; background: repeating-conic-gradient(var(--fondo) 0 25%, var(--superficie) 0 50%) 0 0 / 16px 16px; padding: 10px }
.firma-caja img { max-width: 100%; max-height: 120px }
.folio-muestra { font-family: var(--f-dato); font-size: 20px; padding: 10px 12px; background: var(--fondo); border-radius: 6px; border-left: 4px solid var(--ambar) }

/* ---------- Acceso ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 20px 16px; background: linear-gradient(160deg, var(--marino) 0 45%, var(--fondo) 45%) }
.acceso .tarjeta { width: 100%; max-width: 420px; background: var(--superficie); border-radius: 10px; padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 12px 40px rgba(10,20,40,.25); border-top: 5px solid var(--ambar) }
.acceso .tarjeta img { width: 64px; height: 64px }
.acceso h1 { font-family: var(--f-titulo); font-size: 28px; margin: 0; line-height: 1.1 }

/* ---------- Ventanas ---------- */
dialog.ventana { border: 0; border-radius: 10px; padding: 0; width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 24px); background: var(--superficie); color: var(--tinta) }
dialog.ventana::backdrop { background: rgba(10, 20, 40, .55) }
dialog.ventana form { display: flex; flex-direction: column; gap: 14px; padding: 20px }
dialog.ventana h3 { font-family: var(--f-titulo); font-size: 22px; margin: 0 }
@media (max-width: 600px) {
  dialog.ventana { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0 }
  dialog.ventana form { min-height: 100%; padding-bottom: 90px }
  dialog.ventana .acciones.fijas { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--superficie); border-top: 1px solid var(--linea) }
  .cab h1 { font-size: 22px; white-space: nowrap } .cab img { width: 38px; height: 38px }
  .cab .marca small { font-size: 11px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .cab .marca small span { display: none }
  .cab .salir { display: none } .folio-sig b { font-size: 16px } .folio-sig { font-size: 11px }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* ---------- Etapa 2: generar, historial y entrega ---------- */
a.boton { display: inline-flex; align-items: center; font-weight: 600; font-size: 15px; border-radius: 6px; padding: 10px 16px; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); min-height: 44px; text-decoration: none }
a.boton.chico { padding: 6px 11px; font-size: 14px; min-height: 36px }
button.grande { font-size: 17px; padding: 12px 22px }
.bloque > h2 .paso { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--marino); color: #fff; font-size: 14px; margin-right: -2px; flex: none }
.nota.aviso { background: var(--ambar-suave); border-color: var(--ambar) }
.nota ul { margin: 6px 0 0; padding-left: 20px }
.tabla { overflow-x: auto; border: 1px solid var(--linea); border-radius: 6px }
.tabla table { border-collapse: collapse; width: 100%; font-size: 14px }
.tabla th, .tabla td { text-align: left; padding: 8px; border-bottom: 1px solid var(--linea); vertical-align: top }
.tabla th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-2); background: var(--fondo); white-space: nowrap }
.tabla td input, .tabla td select { min-width: 150px; padding: 7px 9px; font-size: 14px; min-height: 40px }
.tabla td.num, .tabla .num { font-family: var(--f-dato); font-variant-numeric: tabular-nums; white-space: nowrap }
.tabla td.acc { white-space: nowrap } .tabla td.acc > * + * { margin-left: 4px }
.tabla tr.anulada td { color: var(--tinta-2) } .tabla tr.anulada td.mono { text-decoration: line-through }
.tabla small { color: var(--tinta-2) }
.mono { font-family: var(--f-dato) }
.curp-est { display: block; margin-top: 4px }
fieldset.opciones, fieldset.logo-emp { border: 1px solid var(--linea); border-radius: 6px; padding: 8px 12px; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px }
fieldset legend { font-weight: 600; font-size: 14px; color: var(--tinta-2); padding: 0 4px }
.resultado { border: 2px solid var(--ok); }
.resultado .folios { font-size: 22px; font-weight: 600; margin: 0; color: var(--marino) }
:root[data-theme="dark"] .resultado .folios { color: var(--tinta) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .resultado .folios { color: var(--tinta) } }
.entrega { border-top: 1px dashed var(--linea); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; width: 100% }
nav.sub { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap }
nav.sub button.on, .filtros button.on { background: var(--marino); border-color: var(--marino); color: #fff }
.filtros { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px }
.filtros button { white-space: nowrap }
.renglon.col { align-items: flex-start }
.logo-caja { width: 160px; height: 90px; border: 1px dashed var(--linea); border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; flex: none }
.logo-caja img { max-width: 150px; max-height: 80px }
canvas.lienzo-firma { width: 100%; max-width: 600px; aspect-ratio: 3 / 1; background: #fff; border: 1px solid var(--linea); border-radius: 6px; touch-action: none; cursor: crosshair }

.tabla td.mono { white-space: nowrap }

/* Etapa 3: padrón */
.del-padron { display: block; font-size: 12px; color: var(--ok); font-weight: 600; min-height: 0 }
.del-padron:empty { display: none }
.pp-lista { max-height: 50vh; overflow-y: auto; border: 1px solid var(--linea); border-radius: 6px }
/* Cada renglón conserva su alto (flex: none): la lista es una columna flexible con alto máximo y,
   sin esto, los renglones se aplastaban y el texto de uno se encimaba con el siguiente. */
.pp-lista label.renglon { cursor: pointer; margin: 0; flex: none; flex-wrap: nowrap; align-items: center; gap: 12px; min-height: 0; font-weight: 400; padding: 10px 14px }
.pp-lista label.renglon:hover { background: var(--fondo) }
.pp-lista label.renglon:has(input:checked) { background: var(--ambar-suave) }
.pp-lista label.renglon input { width: 22px; height: 22px; flex: none; margin: 0 }
.pp-lista .renglon .t { flex: 1; min-width: 0; gap: 2px }
.pp-lista .renglon .t b { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere }
.pp-lista .renglon .t .mono { color: var(--tinta-2); line-height: 1.3 }
.pp-lista .renglon .t small { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pp-lista .renglon .estado { flex: none }
.pp-lista > .ayuda { margin: 0; padding: 14px }
@media (max-width: 560px) {
  .pp-lista label.renglon { flex-wrap: wrap; row-gap: 6px }
  .pp-lista .renglon .t { flex-basis: calc(100% - 34px) }
  .pp-lista .renglon .t small { white-space: normal }
  .pp-lista .renglon .estado { margin-left: 34px }
}
.estado:not(.ok):not(.mal):not(.aviso) { color: var(--tinta-2); background: var(--fondo) }
.estado:not(.ok):not(.mal):not(.aviso)::before { background: var(--tinta-2) }
.lista.padron .renglon input.sel { width: 22px; height: 22px; flex: none }
/* Padrón: un renglón por persona; las acciones y su historial van en su ficha */
.lista.padron .renglon.trab { padding: 0 0 0 14px; gap: 10px; align-items: center; flex-wrap: nowrap }
.lista.padron .renglon.trab.baja { padding-left: 0 }
.trab-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 0; border: 0; border-radius: 0; background: none; text-align: left; font-weight: 400; color: inherit; min-height: 0 }
.trab-info:hover { background: var(--fondo) }
.lista.padron .renglon.trab.baja .trab-info { padding-left: 14px }
.trab-info .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.trab-info .t b { font-size: 16px; color: var(--titulo); overflow-wrap: anywhere }
.trab-info .t .mono { font-size: 13px; color: var(--tinta-2) }
.trab-info .t small { color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.trab-info .estado { flex: none; white-space: nowrap }
.trab-info .flecha { flex: none; color: #8A94A6 }
@media (max-width: 640px) {
  .trab-info { flex-wrap: wrap; row-gap: 6px }
  .trab-info .t { flex-basis: calc(100% - 30px) }
  .trab-info .estado { order: 3; margin-left: 0 }
  .trab-info .flecha { order: 2 }
}
.ficha-trab h4 { margin: 16px 0 6px; font-size: 15px; color: var(--titulo) }
.datos-trab { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; margin: 4px 0 0 }
.datos-trab .ancho { grid-column: 1 / -1 }
.datos-trab dt { font-size: 13px; color: var(--tinta-2) }
.datos-trab dd { margin: 0; font-weight: 600; color: var(--titulo); overflow-wrap: anywhere }
.const-trab { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linea-suave); color: inherit; text-decoration: none }
.const-trab:last-child { border-bottom: 0 }
.const-trab .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.const-trab .t b { color: var(--titulo) }
.const-trab .t small { color: var(--tinta-2) }
.const-trab .ver { flex: none; font-weight: 600; color: var(--marino); font-size: 14px }
.trab-acc { margin-top: 14px; border-top: 1px solid var(--linea-suave); padding-top: 12px }

/* ======================= Etapa 3b: carga de Excel ======================= */
label.archivo { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border: 2px dashed var(--accion); border-radius: 8px; color: var(--accion); font-weight: 700; cursor: pointer; background: var(--accion-suave); position: relative }
label.archivo.grande { min-height: 120px; font-size: 18px }
label.archivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0 }
input[type=file] { padding: 8px; font-size: 15px }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; border: 1px solid var(--linea); background: var(--accion-suave); color: var(--accion); border-radius: 6px; padding: 8px 12px; margin-right: 10px; cursor: pointer }
button.enlace { background: none; border: 0; padding: 0; min-height: 0; color: var(--accion); text-decoration: underline; font-size: inherit; font-weight: 600 }
dialog.importar { width: min(760px, calc(100vw - 24px)); height: min(860px, calc(100dvh - 24px)) }
dialog.importar .imp { display: flex; flex-direction: column; height: 100% }
.imp-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--linea) }
.imp-cab h3 { font-family: var(--f-titulo); font-size: 22px; margin: 0 }
.imp-cuerpo { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch }
.imp-pie { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: var(--superficie) }
.imp-pie .primario { flex: 1 }
.imp-resumen { display: flex; flex-wrap: wrap; gap: 6px }
.imp-filas { display: flex; flex-direction: column; gap: 8px }
.imp-fila { border: 1px solid var(--linea); border-left: 5px solid var(--ok); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px }
.imp-fila.aviso { border-left-color: var(--ambar) } .imp-fila.decidir { border-left-color: var(--ambar); background: var(--ambar-suave) }
.imp-fila.mal { border-left-color: var(--mal) } .imp-fila.quitada { opacity: .6; border-left-color: var(--linea) }
.imp-t { display: flex; flex-direction: column } .imp-t .mono { font-size: 13px } .imp-t small { color: var(--tinta-2); font-size: 13px }
.imp-msg { margin: 0; font-size: 14px; font-weight: 600 } .imp-msg.mal { color: var(--mal) } .imp-msg.aviso { color: var(--ambar-texto) }
.imp-choque { border: 1px solid var(--ambar); border-radius: 6px; padding: 8px 10px; background: var(--superficie); display: flex; flex-direction: column; gap: 6px }
.imp-choque p { margin: 0; font-size: 14px; font-weight: 600 }
.imp-choque.hecho { border-color: var(--ok) }
.imp-choque button.on { background: var(--marino); border-color: var(--marino); color: #fff }
.imp-dif { border-collapse: collapse; font-size: 13px; width: 100% } .imp-dif th, .imp-dif td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--linea); vertical-align: top }
.imp-dif th { color: var(--tinta-2); font-weight: 600 }
.imp-edit { border-top: 1px dashed var(--linea); padding-top: 8px }
.lista .renglon.opcion { width: 100%; text-align: left; border-radius: 0; border: 0; border-bottom: 1px solid var(--linea); min-height: 56px }
small.ej { font-weight: 400; color: var(--tinta-2); font-size: 12px; min-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.acciones.carga button.primario { order: -1 }

/* ======================= Diseño para el teléfono ======================= */
nav.inferior { display: none }
dialog.hoja { border: 0; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 16px 16px 0 0; background: var(--superficie); color: var(--tinta); display: none; flex-direction: column; gap: 2px }
dialog.hoja[open] { display: flex }
dialog.hoja::backdrop { background: rgba(10, 20, 40, .5) }
.hoja-asa { width: 40px; height: 5px; border-radius: 3px; background: var(--linea); margin: 2px auto 8px }
.hoja-quien { margin: 0 4px 8px; font-weight: 700 } .hoja-quien small { display: block; color: var(--tinta-2); font-weight: 500 }
dialog.hoja a, dialog.hoja button { display: flex; align-items: center; gap: 14px; padding: 14px 8px; min-height: 52px; font-size: 17px; font-weight: 600; color: var(--tinta); text-decoration: none; background: none; border: 0; border-radius: 8px; text-align: left; width: 100% }
dialog.hoja a:active, dialog.hoja button:active { background: var(--fondo) }
dialog.hoja button.cerrar { justify-content: center; color: var(--tinta-2); margin-top: 6px; border: 1px solid var(--linea) }

@media (max-width: 760px) {
  body { font-size: 16px }
  /* Encabezado compacto y fijo arriba */
  .cab { position: sticky; top: 0; z-index: 6; padding-top: env(safe-area-inset-top) }
  .cab-int { padding: 8px 0; gap: 10px; flex-wrap: nowrap }
  .cab img { width: 34px; height: 34px }
  .cab h1 { font-size: 21px }
  .cab .marca small { display: none }
  .cab .salir { display: none }
  .folio-sig { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 4px 8px; font-size: 10px }
  .folio-sig b { font-size: 15px }
  nav.pestanas { display: none }
  /* Barra inferior tipo app */
  nav.inferior { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; background: var(--superficie); border-top: 1px solid var(--linea); padding: 4px 4px env(safe-area-inset-bottom); box-shadow: 0 -4px 16px rgba(10,20,40,.08) }
  nav.inferior a, nav.inferior button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 4px 0; border: 0; background: none; color: var(--tinta-2); text-decoration: none; font-size: 12px; font-weight: 600; border-radius: 10px }
  nav.inferior .on { color: var(--marino) }
  nav.inferior .on svg { background: var(--ambar-suave); border-radius: 12px; padding: 2px 10px; width: 44px; box-sizing: content-box; margin: 0 -10px }
  :root[data-theme="dark"] nav.inferior .on { color: var(--ambar) }
  main { padding: 12px 12px calc(96px + env(safe-area-inset-bottom)); gap: 12px }
  .bloque { padding: 14px; border-radius: 12px; gap: 12px }
  .bloque > h2 { font-size: 21px }
  .rejilla { grid-template-columns: 1fr }
  /* Letra de 16 px en todo lo que se escribe: así el iPhone no hace zoom */
  input, select, textarea, .tabla td input, .tabla td select { font-size: 16px }
  button, a.boton { min-height: 46px }
  button.chico, a.boton.chico { min-height: 40px; font-size: 15px }
  .acciones > button, .acciones > a.boton { flex: 1 1 auto }
  .acciones.carga { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
  .acciones.carga button.primario { grid-column: 1 / -1 }
  .acciones.carga #g-vaciar { grid-column: auto }
  button.grande { width: 100% }
  .buscar { max-width: none; width: 100% }
  .filtros { margin: 0 -14px; padding: 0 14px 2px }
  /* Tablas como tarjetas */
  .tabla.tarjetas { border: 0; overflow: visible }
  .tabla.tarjetas table, .tabla.tarjetas tbody, .tabla.tarjetas tr, .tabla.tarjetas td { display: block; width: 100% }
  .tabla.tarjetas thead { display: none }
  .tabla.tarjetas tr { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--superficie); position: relative }
  .tabla.tarjetas td { border: 0; padding: 4px 0 }
  .tabla.tarjetas td[data-l]::before { content: attr(data-l); display: block; font-size: 13px; font-weight: 600; color: var(--tinta-2); margin-bottom: 3px }
  .tabla.tarjetas td input, .tabla.tarjetas td select { min-width: 0; width: 100%; min-height: 46px }
  .tabla.tarjetas td.num[data-l="Trabajador"] { font-family: var(--f-titulo); font-size: 17px; font-weight: 700; color: var(--marino); padding-bottom: 2px }
  .tabla.tarjetas td.num[data-l="Trabajador"]::before { display: inline; content: "Trabajador "; font-size: 17px; color: var(--marino); font-family: var(--f-titulo) }
  .tabla.tarjetas td.quitar { position: absolute; top: 6px; right: 8px; width: auto; padding: 0 }
  .tabla.tarjetas td.quitar button { min-height: 36px }
  /* Historial */
  .tabla.hist td { font-size: 15px }
  .tabla.hist td.folio { font-size: 17px; font-weight: 600; padding-right: 0 }
  .tabla.hist td.quien { font-weight: 600 }
  .tabla.hist td[data-l] { display: flex; gap: 8px; padding: 2px 0 }
  .tabla.hist td[data-l]::before { display: inline; min-width: 70px; margin: 0 }
  .tabla.hist td.est { position: absolute; top: 10px; right: 12px; width: auto; padding: 0 }
  .tabla.hist td.acc { display: flex; gap: 6px; padding-top: 8px; white-space: normal }
  .tabla.hist td.acc > * { flex: 1; justify-content: center; margin: 0 }
  .tabla.hist td.acc > * + * { margin-left: 0 }
  /* Ventanas a pantalla completa, con el botón principal abajo */
  dialog.importar { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0 }
  .imp-cab { padding: calc(10px + env(safe-area-inset-top)) 14px 10px }
  .imp-cuerpo { padding: 12px 14px }
  .imp-pie { display: grid; grid-template-columns: 1fr; gap: 8px }
  .pp-lista { max-height: none }
  .resultado .folios { font-size: 19px }
  .acceso { padding-top: calc(20px + env(safe-area-inset-top)) }
}
[hidden] { display: none !important }
.imp-cuerpo > * { flex-shrink: 0 }

/* ======================= Etapa 3c: agenda ======================= */
.agenda { display: flex; flex-direction: column; gap: 8px }
.ag-item { display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%; padding: 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); font-weight: 400 }
.ag-item:hover { border-color: var(--accion) }
.ag-dia { flex: none; width: 54px; border-radius: 8px; background: var(--marino); color: #fff; text-align: center; padding: 6px 0 5px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 4px solid var(--ambar); line-height: 1.1 }
.ag-dia b { display: block; font-family: var(--f-titulo); font-size: 26px; letter-spacing: 0 }
.ag-item .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px }
.ag-item .t b { font-size: 16px } .ag-item .t small { color: var(--tinta-2); font-size: 14px }
.ag-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px }
.datos-curso { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 15px }
.datos-curso dt { color: var(--tinta-2); font-weight: 600 } .datos-curso dd { margin: 0 }
.resumen-res { display: flex; flex-wrap: wrap; gap: 6px }
.lista.participantes .renglon { flex-direction: row; flex-wrap: wrap; align-items: center }
.segmento { display: inline-flex; border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; flex: none }
.segmento button { border: 0; border-radius: 0; min-height: 40px; padding: 6px 12px; font-size: 14px; background: var(--superficie); color: var(--tinta-2) }
.segmento button + button { border-left: 1px solid var(--linea) }
.segmento button.ok.on { background: var(--ok); color: #fff } .segmento button.mal.on { background: var(--mal); color: #fff } .segmento button.gris.on { background: var(--tinta-2); color: #fff }
.cierre { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--linea); padding-top: 12px }
.nota.banda { margin: 0 }
.insignia { position: absolute; top: 2px; right: calc(50% - 26px); min-width: 19px; height: 19px; border-radius: 10px; background: var(--mal); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; line-height: 1 }
nav.pestanas a { position: relative } nav.pestanas .insignia { position: static; display: inline-grid; margin-left: 6px; vertical-align: 1px }
nav.inferior a { position: relative }
.estado.gris { color: var(--tinta-2); background: var(--fondo) }
@media (max-width: 760px) {
  .lista.participantes .segmento { width: 100% } .segmento button { flex: 1; min-height: 44px }
  .lista.participantes .quitar-p { position: absolute; top: 8px; right: 8px; min-height: 34px; padding: 4px 9px }
  .lista.participantes .renglon { position: relative; padding-right: 12px } .lista.participantes .renglon .t { padding-right: 70px }
  .ag-item .t b { font-size: 15px }
}

/* Lista de asistencia y acta de cierre: hoja que se ve en pantalla (ventana «documento»), se imprime o se baja en PDF */
#impresion { display: none }
@media print {
  body.imprimiendo > *:not(#impresion) { display: none !important }
  body.imprimiendo #impresion { display: block; color: #000; font-family: Arial, sans-serif; font-size: 10.5pt }
  body.imprimiendo { background: #fff }
}
.li-cab { display: flex; align-items: center; gap: 14px; border-bottom: 3px solid #14284A; padding-bottom: 6px; margin-bottom: 8px }
.li-cab img { height: 64px }
.li-cab h1 { font-size: 18pt; margin: 0; text-transform: uppercase; letter-spacing: .03em; color: #14284A }
.li-cab p { margin: 0; font-size: 9pt }
.li-datos { width: 100%; border-collapse: collapse; margin-bottom: 8px }
.li-datos th, .li-datos td { border: 1px solid #777; padding: 3px 6px; text-align: left; font-size: 9.5pt }
.li-datos th { background: #E8ECF2; width: 14%; white-space: nowrap }
.li-tabla { width: 100%; border-collapse: collapse }
.li-tabla th, .li-tabla td { border: 1px solid #444; padding: 3px 5px; height: 26px; font-size: 9.5pt; text-align: left }
.li-tabla thead th { background: #14284A; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; height: auto; font-size: 9pt }
.li-tabla .n { width: 22px; text-align: center } .li-tabla .m { font-family: "Courier New", monospace; font-size: 9pt; white-space: nowrap } .li-tabla .f { width: 70px; text-align: center }
.li-tabla tr { page-break-inside: avoid }
.li-firmas { display: flex; justify-content: space-around; margin-top: 36px; page-break-inside: avoid }
.li-firmas div { width: 38%; text-align: center; font-size: 10pt } .li-firmas span { display: block; border-top: 1px solid #000; margin-bottom: 3px }
.li-firmas small { display: block; font-size: 8.5pt; color: #333 }
.li-pie { font-size: 7.5pt; color: #444; margin-top: 14px }
.li-datos .m { font-family: "Courier New", monospace; font-size: 9pt }
.li-parrafo { margin: 6pt 0 4pt; font-size: 8.5pt; color: #333 }
@media (min-width: 761px) { dialog.ventana.documento { width: min(940px, calc(100vw - 24px)) } }
.doc-marco { overflow: auto; border: 1px solid var(--linea); border-radius: 8px; background: #8a93a3; padding: 10px; max-height: 62vh }
.doc-hoja { background: #fff; color: #000; font-family: Arial, sans-serif; font-size: 10.5pt; padding: 22px; width: 760px; margin: 0 auto; box-shadow: 0 2px 10px rgba(0, 0, 0, .3) }
.doc-hoja.horiz { width: 980px }
.doc-hoja .li-cab img { width: auto }
@media (max-width: 760px) { .doc-marco { max-height: none; flex: 1; min-height: 0 } dialog.ventana.documento form { height: 100dvh; min-height: 0; box-sizing: border-box } .doc-hoja { margin: 0 } }

/* ---------- App instalable: escáner QR, instalación y avisos ---------- */
.cab { padding-top: env(safe-area-inset-top) }
.cab-esc { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; width: 42px; height: 42px; min-height: 42px; padding: 0; display: grid; place-items: center; border-radius: 8px; flex: none }
.cab-esc:hover { background: rgba(255,255,255,.1) }
.pasos-num { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; line-height: 1.4 }
.sub-t { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 18px 0 4px }
#sec-app .acciones button svg { vertical-align: -6px }
.push-caja { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--linea); border-radius: 6px }
.push-caja .acciones, .push-caja .nota { margin: 0 14px 12px }
.push-caja .nota:empty { display: none }
dialog.escaner { width: min(520px, calc(100vw - 24px)) }
.esc-int { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px }
.esc-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.esc-cab h3 { font-family: var(--f-titulo); font-size: 22px; margin: 0 }
.esc-video { position: relative; background: #0B1626; border-radius: 10px; overflow: hidden; aspect-ratio: 1 / 1; max-height: 56vh }
.esc-video video { width: 100%; height: 100%; object-fit: cover; display: block }
.esc-marco { position: absolute; inset: 16%; border: 3px solid var(--ambar); border-radius: 14px; box-shadow: 0 0 0 999px rgba(11,22,38,.35) }
dialog.escaner form.esc-folio { display: flex; flex-direction: row; gap: 8px; align-items: flex-end; padding: 0; min-height: 0 }
dialog.escaner form.esc-folio .campo { flex: 1; margin: 0 }
dialog.escaner form.esc-folio button { flex: none; width: auto }
label.boton { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; border-radius: 6px; padding: 10px 16px; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); min-height: 44px; cursor: pointer }
.esc-int > .acciones > label.boton { flex: 1 1 auto }
.esc-folio input { text-transform: uppercase; font-family: var(--f-dato) }
.esc-tarjeta { border: 1px solid var(--linea); border-left: 6px solid var(--ambar); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start }
.esc-tarjeta.esc-ok { border-left-color: var(--ok) } .esc-tarjeta.esc-mal { border-left-color: var(--mal, #B3261E) }
.esc-tarjeta .estado { font-size: 16px; padding: 5px 12px }
.esc-tarjeta p { margin: 0 }
.esc-folio-n { font-family: var(--f-dato); font-size: 20px; font-weight: 600 }
.esc-nombre { font-weight: 700; font-size: 18px } .esc-nombre small { display: block; font-weight: 500; font-size: 14px; color: var(--tinta-2) }
.esc-datos { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; width: 100% }
.esc-datos dt { color: var(--tinta-2); font-size: 14px } .esc-datos dd { margin: 0 }
.esc-texto { word-break: break-all; font-size: 13px }
.esc-tarjeta .acciones { width: 100% }
@media (max-width: 600px) {
  dialog.escaner { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0 }
  .esc-int { padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: calc(20px + env(safe-area-inset-bottom)) }
  dialog.ventana form { padding-top: calc(20px + env(safe-area-inset-top)) }
  .cab-esc { width: 38px; height: 38px; min-height: 38px }
}

/* ======================= Rediseño (nov 2026): base, Inicio y barra inferior ======================= */
body { -webkit-tap-highlight-color: transparent }
.cab { border-bottom-width: 3px }
.cab-logo { display: flex; flex: none; border-radius: 8px }
.cab .marca small.fecha { text-transform: none; letter-spacing: 0; color: #C6D1E3; font-size: 14px; font-weight: 500 }
.bloque { border: 0; border-radius: 12px; box-shadow: var(--sombra) }
.bloque > h2 { color: var(--titulo) }
/* Botones: el principal es marino (la marca); el ámbar queda para «Generar» */
button.primario, a.boton.primario { background: var(--marino); border-color: var(--marino); color: #fff }
a.boton { justify-content: center }
a.boton.grande { min-height: 50px; font-size: 17px; padding: 12px 22px }
button:disabled, button.primario:disabled { opacity: 1; background: var(--fondo); border-color: var(--linea); color: #7B8597 }
:root[data-theme="dark"] button.primario, :root[data-theme="dark"] a.boton.primario { background: var(--ambar); border-color: var(--ambar); color: #14284A }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.primario, :root:not([data-theme="light"]) a.boton.primario { background: var(--ambar); border-color: var(--ambar); color: #14284A } }

/* Talón del folio: el documento que numera todo */
.talon-inicio { display: flex }
.talon { background-color: var(--superficie); color: var(--titulo); width: 100%; max-width: 560px; border-radius: 10px; box-shadow: var(--sombra);
  padding: 16px 18px 18px 30px; display: flex; flex-direction: column; gap: 12px; border-bottom: 4px solid var(--ambar);
  background-image: radial-gradient(circle at 0 9px, var(--perfo) 5px, transparent 5.5px); background-size: 12px 18px; background-repeat: repeat-y }
.talon-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; font-size: 14px; color: var(--tinta-2) }
.talon-fila > span:first-child { font-size: 15px; font-weight: 600 }
.talon-fila .mono { font-size: 13px }
.talon-folio { margin: 0; font-size: clamp(28px, 9vw, 40px); font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--titulo); overflow-wrap: anywhere }
.talon-folio b { background: var(--ambar); color: #14284A; padding: 0 5px; border-radius: 4px; font-weight: 600 }

/* Inicio */
#ini-resto { display: flex; flex-direction: column; gap: 24px }
.ini-sec { display: flex; flex-direction: column; gap: 8px }
.ini-sec h2 { font-family: var(--f-titulo); font-size: 22px; margin: 0; color: var(--titulo) }
.ini-tit { display: flex; justify-content: space-between; align-items: baseline }
.ini-tit a { font-weight: 600; font-size: 15px; text-decoration: none }
.lista-plana { background: var(--superficie); border-radius: 12px; box-shadow: var(--sombra); display: flex; flex-direction: column; overflow: hidden }
.fila-accion { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--linea-suave); border-radius: 0; background: none; text-align: left; width: 100%; font-weight: 400; min-height: 62px; color: var(--tinta) }
.fila-accion:last-child { border-bottom: 0 }
.fila-accion:hover { background: var(--fondo) }
.fila-accion .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.fila-accion .t b { font-size: 16px; font-weight: 700; color: var(--titulo) }
.fila-accion .t small { font-size: 14px; color: var(--tinta-2) }
.fila-accion .ir { flex: none; font-weight: 600; font-size: 15px; color: var(--accion) }
.forma { width: 10px; height: 10px; flex: none; display: inline-block }
.forma.roja { border-radius: 50%; background: var(--mal) }
.forma.ambar { background: var(--ambar); transform: rotate(45deg); border-radius: 2px }
.forma.verde { border-radius: 50%; background: var(--ok) }
.dia-mini { width: 44px; flex: none; text-align: center; display: flex; flex-direction: column; line-height: 1.05; font-size: 13px; color: var(--tinta-2) }
.dia-mini b { font-family: var(--f-titulo); font-size: 26px; color: var(--titulo) }
.al-dia { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px; background: var(--superficie); border-radius: 12px; box-shadow: var(--sombra); color: var(--tinta-2) }
.ini-mes { margin: 0; color: var(--tinta-2); font-size: 15px }
.ini-mes b { color: var(--tinta) }

@media (min-width: 761px) {
  body.en-inicio .folio-sig { display: none }
  .talon-inicio { padding-top: 4px }
  #ini-resto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start }
  .ini-mes { grid-column: 1 / -1 }
}
@media (max-width: 760px) {
  .folio-sig { display: none }
  .cab .marca small.fecha { display: block; font-size: 13px }
  .cab h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  body.en-inicio .cab { border-bottom: 0 }
  body.en-inicio main { padding-top: 0 }
  .talon-inicio { background: var(--marino); margin: 0 -12px; padding: 6px 12px 0 }
  .talon { --perfo: var(--marino); border-radius: 8px 8px 0 0; max-width: none; box-shadow: none }
  #ini-resto { padding-top: 10px }
  /* Barra inferior: indicador ámbar y «Generar» al centro */
  nav.inferior { align-items: end; padding-top: 2px }
  nav.inferior .on svg { background: none; padding: 0; width: 24px; margin: 0 }
  nav.inferior a.on:not(.centro)::after, nav.inferior button.on::after { content: ""; position: absolute; bottom: 4px; left: calc(50% - 9px); width: 18px; height: 3px; border-radius: 2px; background: var(--ambar) }
  nav.inferior .on { color: var(--titulo); font-weight: 700 }
  nav.inferior a.centro { color: var(--titulo); font-weight: 700; justify-content: flex-end }
  .centro-ic { width: 54px; height: 54px; border-radius: 16px; background: var(--ambar); color: #14284A; display: grid; place-items: center; margin-top: -24px; box-shadow: 0 0 0 5px var(--superficie) }
  .centro-ic svg { width: 28px; height: 28px; stroke-width: 2 }
  nav.inferior a.centro.on .centro-ic { box-shadow: 0 0 0 5px var(--superficie), 0 0 0 7px var(--ambar) }
  .bloque { border-radius: 12px }
}

/* ======================= Rediseño: historial con talones y ficha ======================= */
nav.sub { display: inline-flex; gap: 0; background: var(--superficie); border-radius: 10px; padding: 3px; box-shadow: var(--sombra); margin-bottom: 14px; flex-wrap: nowrap; align-self: flex-start }
nav.sub button { border: 0; background: none; min-height: 40px; border-radius: 8px; padding: 6px 16px; color: var(--tinta-2) }
nav.sub button.on { background: var(--marino); color: #fff }
.hist { display: flex; flex-direction: column; gap: 14px }
.hist-busca .buscar { max-width: 520px; width: 100%; min-height: 48px; border-radius: 10px; padding-left: 40px; background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 12px center }
.filtros.chips { gap: 8px; scrollbar-width: none }
.chip { border-radius: 20px; min-height: 38px; padding: 6px 14px; font-size: 15px; white-space: nowrap; background: var(--superficie); border: 1px solid var(--linea); color: var(--tinta) }
.chip span { color: var(--tinta-2); font-weight: 500 }
.chip.on { background: var(--marino); border-color: var(--marino); color: #fff } .chip.on span { color: #C6D1E3 }
.hist-grupo { display: flex; flex-direction: column; gap: 6px }
.hist-tit { display: flex; align-items: flex-end; gap: 10px; padding: 0 2px }
.hist-tit .t { flex: 1; min-width: 0; display: flex; flex-direction: column }
.hist-tit b { font-size: 15px; color: var(--titulo) } .hist-tit small { font-size: 14px; color: var(--tinta-2) }
.hist-tit .enlace { text-decoration: none; font-size: 14px; min-height: 32px }
.fila-const { display: flex; align-items: stretch; width: 100%; padding: 0; border: 0; border-bottom: 1px solid var(--linea-suave); border-radius: 0; background: none; text-align: left; font-weight: 400; min-height: 64px; color: var(--tinta) }
.fila-const:last-child { border-bottom: 0 }
.fila-const:hover { background: var(--fondo) }
.talon-mini { width: 82px; flex: none; background-color: var(--marino); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 8px 0 8px 12px; line-height: 1.15;
  background-image: radial-gradient(circle at 100% 6px, var(--superficie) 3px, transparent 3.5px); background-size: 8px 12px; background-repeat: repeat-y; background-position: right top }
.talon-mini small { font-size: 11px; color: #C6D1E3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px }
.talon-mini b { font-size: 20px; font-weight: 600 }
.fila-const.anulada .talon-mini { background-color: var(--linea-suave); color: var(--tinta-2) }
.fila-const.anulada .talon-mini small { color: var(--tinta-2) }
.fila-const.anulada .talon-mini b { text-decoration: line-through }
.fila-const.anulada .t b { color: var(--tinta-2) }
.fila-const .t { flex: 1; min-width: 0; padding: 10px 8px 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 3px }
.fila-const .t b { font-size: 16px; color: var(--titulo) }
.sit { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600 }
.sit.ok { color: var(--ok) } .sit.mal { color: var(--mal) } .sit.aviso { color: var(--ambar-texto) }
.sit .forma { width: 8px; height: 8px }
.fila-const .flecha { align-self: center; margin-right: 12px; color: #8A94A6; flex: none }
.hist-pie { margin-top: 4px }
/* Ficha */
dialog.ficha { width: min(520px, calc(100vw - 24px)); background: var(--fondo) }
.ficha-int { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 20px }
.ficha-cab { display: flex; align-items: center; gap: 6px }
.ficha-cab h3 { font-family: var(--f-titulo); font-size: 24px; margin: 0; color: var(--titulo) }
.ficha-cab .volver { width: 44px; height: 44px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: var(--titulo); margin-left: -10px }
.ficha-doc { background: var(--superficie); border-radius: 10px 10px 0 0; box-shadow: var(--sombra); position: relative; padding-bottom: 10px;
  background-image: radial-gradient(circle at 6px 100%, var(--fondo) 5px, transparent 5.5px); background-size: 16px 10px; background-repeat: repeat-x; background-position: left bottom }
.ficha-sup { display: flex; gap: 14px; padding: 16px; border-bottom: 1px dashed #C3CBD8; align-items: flex-start }
.ficha-folio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start }
.ficha-folio > span:first-child { font-size: 14px; color: var(--tinta-2) }
.ficha-folio b { font-size: 25px; line-height: 1; color: var(--titulo); overflow-wrap: anywhere }
.ficha-folio .estado { font-size: 14px; white-space: normal }
.ficha-qr { flex: none; width: 88px; height: 88px; background: #fff; border: 1px solid var(--linea-suave); border-radius: 6px; padding: 3px; display: grid; place-items: center }
.ficha-qr canvas { width: 80px; height: 80px; image-rendering: pixelated }
.ficha-datos { margin: 0; padding: 14px 16px 16px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 9px 12px; font-size: 15px }
.ficha-datos dt { color: var(--tinta-2) } .ficha-datos dd { margin: 0; overflow-wrap: anywhere } .ficha-datos dd.mono { font-size: 14px }
.ficha-acc { display: flex; flex-direction: column; gap: 8px }
.ficha-acc .dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.ficha-acc .grande { width: 100% }
.ficha-peligro { border-top: 1px solid var(--linea); padding-top: 12px; display: flex; flex-direction: column; gap: 2px }
.ficha-peligro .enlace { color: var(--mal); text-decoration: none; min-height: 44px; align-self: flex-start; font-size: 16px }
.ficha-peligro small { color: var(--tinta-2); font-size: 14px }
@media (max-width: 600px) {
  dialog.ficha { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0 }
  .ficha-int { padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); min-height: 100% }
  .ficha-peligro { margin-top: auto }
  .hist-busca .buscar { max-width: none }
  .filtros.chips { margin: 0 -12px; padding: 0 12px 2px }
}

/* ======================= Rediseño: Generar por pasos ======================= */
.gen { display: flex; flex-direction: column; gap: 10px; max-width: 860px; width: 100% }
.paso-m { width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--tinta-2); border: 2px solid var(--linea); font-family: var(--f-texto) }
.paso-m.hecho { background: var(--ok); border-color: var(--ok); color: #fff }
.paso-ab > h2 .paso-m:not(.hecho) { background: var(--marino); border-color: var(--marino); color: #fff }
.paso-ab { outline: 2px solid transparent }
.paso-res { display: flex; align-items: center; gap: 12px; background: var(--superficie); border-radius: 12px; box-shadow: var(--sombra); padding: 10px 14px; min-height: 64px; flex-wrap: wrap }
.paso-res > .t { flex: 1; min-width: 0; display: flex; flex-direction: column }
.paso-res > .t small { font-size: 14px; color: var(--tinta-2) }
.paso-res > .t b { font-size: 16px; color: var(--titulo) }
.paso-res > .enlace { text-decoration: none; min-height: 44px; font-size: 15px }
.carga-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.carga-3 button { min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; font-size: 14px; color: var(--titulo); padding: 8px 4px; text-align: center; line-height: 1.15 }
.carga-3 button:hover:not(:disabled) { border-color: var(--marino) }
.carga-3 button:disabled { color: #8A94A6 }
.trab-mas { display: flex; justify-content: space-between; gap: 12px }
.trab-mas .enlace { text-decoration: none; min-height: 40px }
button.enlace.peligro { color: var(--mal) }
.revisar { display: flex; flex-direction: column; gap: 8px }
.revisar .nota { margin: 0 }
.gen-barra { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 14px; justify-content: space-between; background: var(--superficie); border-top: 1px solid var(--linea); padding: 12px 16px; margin: 0; box-shadow: 0 -6px 18px rgba(20,40,74,.08) }
.gen-barra #g-rango { font-size: 15px; color: var(--tinta-2) } .gen-barra #g-rango b { color: var(--titulo) }
.gen-barra .falta { color: var(--mal); font-weight: 600 }
button.ambar { background: var(--ambar); border-color: var(--ambar); color: #14284A; font-weight: 700 }
button.ambar:disabled { background: var(--fondo); border-color: var(--linea); color: #7B8597 }
@media (min-width: 761px) {
  .gen-barra { margin: 0; border-radius: 12px 12px 0 0; max-width: 860px }
  .gen-barra button { min-width: 260px }
}
@media (max-width: 760px) {
  .gen-barra { bottom: calc(64px + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px 12px; margin: 0 -12px }
  .gen-barra button { width: 100%; min-height: 52px; font-size: 18px }
  .carga-3 button { min-height: 76px }
  .tabla.tarjetas.trab tr { background: var(--fondo); border-color: var(--linea-suave) }
}

/* ======================= Rediseño: resto de pantallas ======================= */
.cab .marca small { text-transform: none; letter-spacing: 0; font-size: 13px; color: #C6D1E3; font-weight: 500 }
.bloque > h2 .n { font-family: var(--f-texto); font-size: 14px }
.tabla th { text-transform: none; letter-spacing: 0; font-size: 13px }
/* Sin cajas dentro de cajas: las listas dentro de un bloque van a todo lo ancho con separadores */
.bloque .lista { border: 0; border-radius: 0; margin: 0 -18px; border-top: 1px solid var(--linea-suave) }
.bloque .lista .renglon { padding: 12px 18px; border-bottom-color: var(--linea-suave) }
.bloque .agenda { gap: 0; margin: 0 -18px; border-top: 1px solid var(--linea-suave) }
.bloque .ag-item { border: 0; border-bottom: 1px solid var(--linea-suave); border-radius: 0; padding: 12px 18px; min-height: 76px }
.bloque .ag-item:last-child { border-bottom: 0 }
.bloque .ag-item:hover { background: var(--fondo); border-color: var(--linea-suave) }
.ag-dia { background: var(--fondo); color: var(--tinta-2); border-bottom: 0; text-transform: none; letter-spacing: 0; padding: 6px 0 }
.ag-dia b { color: var(--titulo) }
.ag-item .t b { color: var(--titulo) }
.renglon .acciones button.peligro, .renglon > button.peligro { border-color: transparent; background: none }
.renglon .t b { color: var(--titulo) }
.vacio { background: var(--superficie); border-style: solid; border-color: var(--linea-suave) }
.bloque .vacio { background: var(--fondo); border: 0 }
@media (max-width: 760px) {
  .bloque .lista, .bloque .agenda { margin: 0 -14px }
  .bloque .lista .renglon, .bloque .ag-item { padding-left: 14px; padding-right: 14px }
  .renglon .acciones { flex-wrap: nowrap } .renglon .acciones > button { flex: 1 1 0 }
}
.filtros { gap: 8px; scrollbar-width: none }
.filtros button { border-radius: 20px; min-height: 38px; padding: 6px 14px; font-size: 15px; background: var(--superficie); border-color: var(--linea) }
.filtros button.on { background: var(--marino); border-color: var(--marino); color: #fff }

/* ======================= Barra de Supervisión de Subcuentas ======================= */
.banda-subcuenta { background: #1B2B44; color: #E2E8F0; border-bottom: 2px solid var(--linea); font-size: 14px; padding: 6px 16px }
.banda-subcuenta.activa { background: #2D1A00; color: #FFF3CD; border-bottom: 2px solid var(--ambar) }
.banda-sub-int { max-width: 1040px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.banda-sub-txt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.banda-sub-txt b { color: #fff }
.banda-subcuenta.activa .banda-sub-txt b { color: var(--ambar) }
.banda-sub-txt small { color: #CBD5E1; opacity: .85 }
.banda-sub-acc { display: flex; align-items: center; gap: 8px }
.banda-sub-acc select { font-size: 13px; padding: 4px 10px; min-height: 34px; background: var(--superficie); color: var(--tinta); border-radius: 6px; border: 1px solid var(--linea); max-width: 320px }
@media (max-width: 640px) {
  .banda-subcuenta { padding: 8px 12px }
  .banda-sub-int { flex-direction: column; align-items: stretch; gap: 8px }
  .banda-sub-acc { flex-direction: column; align-items: stretch }
  .banda-sub-acc select { max-width: none; width: 100% }
}

/* Historial: seleccionar constancias para borrar (solo la cuenta principal) */
.chip.borrar { color: var(--mal); border-color: currentColor }
.fila-const .casilla { width: 22px; height: 22px; flex: none; align-self: center; margin: 0 4px 0 12px; border: 2px solid #8A94A6; border-radius: 6px; background: var(--superficie) }
.fila-const.marcada .casilla { background: var(--mal); border-color: var(--mal); box-shadow: inset 0 0 0 3px var(--superficie) }
.fila-const.marcada { background: color-mix(in srgb, var(--mal) 7%, transparent) }
.sel-barra { margin-top: 10px }
.sel-barra .acciones { margin: 0; flex-wrap: wrap; justify-content: flex-end }
.sel-barra button.peligro { border-color: var(--mal) }
.sel-barra button:disabled { opacity: .45 }
@media (max-width: 760px) { .sel-barra .acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px } .sel-barra .acciones button { min-width: 0 } }
.sel-barra button { min-width: 0 !important }
.ec-que { flex-direction: column; margin: 10px 0 } .ec-que select { width: 100%; margin: 0 0 6px 26px; max-width: calc(100% - 26px) }
#sub-lista .acciones button { white-space: nowrap }
#sub-lista .renglon .acciones { flex-wrap: wrap; justify-content: flex-end }

/* Generar varios cursos a la vez: cursos extra en el paso 2 y, en cada trabajador, los números de los cursos que tomó. */
.cur-t { font-size: 15px; margin: 0 0 8px; color: var(--tinta-2); font-weight: 600 }
.cur-extra { border-top: 1px solid var(--linea-suave); margin-top: 16px; padding-top: 14px }
.cur-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.cur-cab .cur-t { margin: 0 } .cur-cab .enlace { text-decoration: none; min-height: 40px }
.paso-res > .t small + small { margin-top: 2px }
.cur-ley { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 8px }
.cur-ley b { color: var(--titulo) } .cur-ley-a { flex-basis: 100% }
.cur-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px }
.cur-chips small { color: var(--tinta-2); font-size: 14px; margin-right: 2px }
.cur-res > .t { flex-basis: 220px }
.cur-chip { min-width: 36px; min-height: 36px; padding: 0 8px; border-radius: 18px; font-weight: 600; font-size: 15px; background: var(--superficie); border: 1px dashed var(--linea); color: var(--tinta-2); text-decoration: line-through }
.cur-chip.on { background: var(--marino); border: 1px solid var(--marino); color: #fff; text-decoration: none }
.res-cursos { list-style: none; margin: 12px 0; padding: 0 }
.res-cursos li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linea-suave); flex-wrap: wrap }
.res-cursos li > span:first-child { display: flex; flex-direction: column; min-width: 0; flex: 1 1 260px }
.res-cursos li > .mono { overflow-wrap: anywhere; min-width: 0 }
.res-cursos li > .acciones { flex-basis: 100% }
.res-cursos li > .entrega { flex-basis: 100% }
.resultado .res-sub { font-size: 16px; margin: 16px 0 6px; color: var(--titulo) } .res-cursos small { color: var(--tinta-2); font-size: 14px }
@media (max-width: 760px) { .cur-chip { min-width: 44px; min-height: 44px; border-radius: 22px } }
/* Datos para el SIRCE (cursos, empresas, padrón y Generar) */
fieldset.sirce-caja, fieldset.sirce-marco { border: 1px solid var(--linea); border-radius: 6px; padding: 8px 12px 12px; margin: 0; min-width: 0 }
fieldset.sirce-caja .rejilla { margin-top: 6px }
fieldset.sirce-caja select { max-width: 100% }
.sirce-caja input[data-s=buscar] { margin-bottom: 6px }
.sirce-quien { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto }
.nota.sirce-rev .chico { margin-left: 6px; vertical-align: middle }