/* Sistema de Auditoria - version web */
:root {
  --naranja: #F25E18;
  --naranja-osc: #C9470B;
  --naranja-claro: #FDECE3;
  --texto: #1F2328;
  --tenue: #5F6670;
  --borde: #D9DCE1;
  --fondo: #F4F5F7;
  --panel: #FFFFFF;
  --sel: #CFE2FF;
  --ok-f: #D1E7DD; --ok-t: #0F5132;
  --av-f: #FFF3CD; --av-t: #664D03;
  --er-f: #F8D7DA; --er-t: #842029;
  --gris-f: #EDEDED; --gris-t: #555;
  --radio: 8px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
h1 { font-size: 1.35rem; margin: 0 0 .6rem; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
h2 small, h3 small { color: var(--tenue); font-weight: normal; }
a { color: var(--naranja-osc); }
[hidden] { display: none !important; }

/* ---------- barra superior ---------- */
.barra {
  background: var(--naranja); color: #fff; display: flex; align-items: center;
  gap: 12px; padding: 8px 16px; position: sticky; top: 0; z-index: 10;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.chip { background: #fff; border-radius: 6px; padding: 3px; display: inline-flex; }
.chip img { width: 32px; height: 32px; display: block; }
.marca-texto { font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.menu a, .menu .enlace { color: #fff; text-decoration: none; font-weight: 600; }
.menu a.activo { border-bottom: 2px solid #fff; }
.menu a:hover, .menu .enlace:hover { text-decoration: underline; }
.menu .separador { width: 1px; height: 26px; background: rgba(255,255,255,.4); }
.quien { display: flex; flex-direction: column; line-height: 1.15; color: var(--naranja-claro); font-size: .9rem; }
.quien small { opacity: .85; }
.menu-boton { display: none; margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.6rem; cursor: pointer; }

/* ---------- contenido ---------- */
.contenido { max-width: 1500px; margin: 0 auto; padding: 16px; }
.panel {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px 16px; margin-bottom: 14px;
}
.panel.angosto { max-width: 460px; margin: 30px auto; }
.nota { color: var(--tenue); font-size: .88rem; margin: .4rem 0; }
.nota-error { color: #B00020; font-weight: 600; margin: 0; }
.pie { text-align: center; color: var(--tenue); font-size: .8rem; padding: 10px 0 20px; }

/* ---------- mensajes ---------- */
.mensajes { margin-bottom: 12px; }
.msg { padding: 10px 14px; border-radius: var(--radio); margin-bottom: 8px; border: 1px solid transparent; }
.msg-ok { background: var(--ok-f); color: var(--ok-t); border-color: #A3CFBB; }
.msg-error { background: var(--er-f); color: var(--er-t); border-color: #F1AEB5; }
.msg-alerta { background: var(--er-f); color: var(--er-t); border-color: #F1AEB5; font-weight: 700; }
.msg-aviso { background: var(--av-f); color: var(--av-t); border-color: #FFE69C; }

/* ---------- botones y formularios ---------- */
.boton {
  display: inline-block; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--borde);
  background: #fff; color: var(--texto); font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none; line-height: 1.2;
}
.boton:hover { background: #F0F1F3; }
.boton.primario { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.boton.primario:hover { background: var(--naranja-osc); }
.boton:disabled { opacity: .6; cursor: wait; }
.boton.ancho { width: 100%; margin-top: 18px; padding: 11px; }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--naranja-osc); cursor: pointer; text-decoration: underline; }
.enlace.peligro { color: #B00020; }
.en-linea { display: inline; margin: 0; }
.botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
input, select, textarea {
  font: inherit; color: #000; padding: 7px 9px; border: 1px solid #B9BEC6; border-radius: 6px;
  background: #fff; max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--naranja); outline-offset: -1px; border-color: var(--naranja); }
textarea { width: 100%; resize: vertical; }
.formulario label { display: block; font-weight: 600; margin: 12px 0 4px; }
.formulario input { width: 100%; }
label.obligatorio { color: #B00020; font-weight: 700; }

/* ---------- acceso ---------- */
body.fondo-negro { background: #000; }
.acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; flex-direction: column; }
.acceso .mensajes { width: 100%; max-width: 340px; }
.tarjeta-acceso { width: 100%; max-width: 340px; color: #fff; text-align: center; }
.logo-acceso { width: 64px; height: 64px; border-radius: 10px; background: #fff; padding: 4px; }
.tarjeta-acceso h1 { color: var(--naranja); font-size: 1.6rem; margin: 12px 0 0; }
.tarjeta-acceso h2 { color: var(--naranja); font-size: 1.15rem; margin: 2px 0 0; }
.bienvenida { font-weight: 700; margin: 12px 0 22px; }
.tarjeta-acceso label { display: block; text-align: left; margin: 10px 0 4px; font-size: .92rem; }
.tarjeta-acceso input { width: 100%; padding: 10px; color: #000; background: #fff; caret-color: #000; }

/* ---------- avisos ---------- */
.avisos { background: var(--av-f); border: 1px solid #FFE69C; border-radius: var(--radio); padding: 14px 16px; margin-bottom: 14px; color: var(--av-t); }
.aviso { border-top: 1px solid #FFE69C; padding-top: 8px; margin-top: 8px; }
.aviso h3 { font-size: 1rem; margin: 0 0 4px; }
.aviso p { white-space: pre-line; margin: 0 0 8px; }

/* ---------- captura ---------- */
.selector { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; }
.selector .campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 280px; }
.selector .campo:first-child { flex-grow: 2; }
.selector label { font-weight: 600; font-size: .9rem; }
.selector select { width: 100%; }

.barra-horas { border-radius: var(--radio); padding: 10px 14px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: .92rem; }
.barra-horas.verde { background: var(--ok-f); color: var(--ok-t); }
.barra-horas.amarillo { background: var(--av-f); color: var(--av-t); }
.barra-horas.rojo { background: var(--er-f); color: var(--er-t); }
.barra-horas.gris { background: var(--gris-f); color: var(--gris-t); }
.barra-horas .fuerte { font-weight: 800; }
.progreso { flex-basis: 100%; height: 6px; background: rgba(0,0,0,.08); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.progreso div { height: 100%; background: currentColor; opacity: .55; }

.captura-cuerpo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.captura-cuerpo > .lateral { grid-column: 2; grid-row: 1 / span 2; min-width: 0; align-self: stretch; display: flex; flex-direction: column; gap: 14px; }
.captura-cuerpo > .panel, .captura-cuerpo > .lateral > .panel { align-self: stretch; }
.captura-cuerpo > .lateral > .panel { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; margin-bottom: 0; }
.captura-cuerpo > .lateral > .panel:last-child { margin-bottom: 14px; }
.captura-cuerpo > .lateral .tabla-desplazable { flex: 1; min-height: 0; min-width: 0; max-width: 100%; }
@supports (grid-template-rows: subgrid) {
  .captura-cuerpo.con-periodo > .lateral { display: grid; grid-template-rows: subgrid; }
  .captura-cuerpo.con-periodo > .lateral > .panel { margin-bottom: 14px; }
}
.encabezado-panel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.encabezado-panel h2 { margin: 0; }
.fecha-captura { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.fecha-captura input { max-width: 220px; }
.confirmacion-captura { text-align: center; }
.etiqueta-edicion { background: var(--sel); color: #084298; padding: 3px 10px; border-radius: 12px; font-size: .85rem; font-weight: 600; }
.filtro { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.filtro input { flex: 1 1 220px; }
.suma-registro { margin-left: auto; color: var(--naranja); font-weight: 700; font-size: .9rem; }

.cedulas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.cedula { display: grid; grid-template-columns: 72px minmax(0, 1fr) 26px 92px; align-items: center; gap: 6px; border: 1px solid #E4E6EA; border-radius: 6px; padding: 3px 4px 3px 6px; }
#form-captura .cedula { grid-template-columns: 58px minmax(0, 1fr) 42px 76px; }
#form-captura .cedula .nom, #form-captura .cedula .ab { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
#form-captura .cedula .com { border: 1px solid var(--borde); border-radius: 4px; padding: 3px 4px; color: #444; background: #F0F1F3; font-size: .75rem; }
#form-captura .cedula .com.tiene { color: var(--naranja); border-color: var(--naranja); }
#form-captura input[readonly] { background: #F0F1F3; color: var(--tenue); }
.cedula:focus-within { background: #FFF7F2; border-color: #F7B48F; }
.cedula .ab { font-weight: 700; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cedula .nom { color: #444; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cedula input { width: 100%; padding: 5px 7px; }
.cedula input.numero { text-align: right; }
.cedula input.invalido { border-color: #B00020; background: #FFF0F1; }
.cedula .com { border: 0; background: none; color: #A0A6AE; cursor: pointer; font-size: 1rem; padding: 0; }
.cedula .com.tiene { color: var(--naranja); }
.cedula .com:hover { color: var(--naranja-osc); }
.sin-coincidencias { grid-column: 1 / -1; color: #B00020; font-weight: 600; }
.pie-captura { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde); }

.tabla-desplazable { max-height: 42vh; overflow: auto; border: 1px solid #E4E6EA; border-radius: 6px; }
.tabla { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tabla th { position: sticky; top: 0; background: #F0F1F3; text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 5px 8px; border-bottom: 1px solid #EEF0F2; vertical-align: top; }
.tabla .c { text-align: center; }
.tabla .d { text-align: right; white-space: nowrap; }
.tabla tr.propio td:first-child { box-shadow: inset 3px 0 0 var(--naranja); }
.tabla tr.en-edicion { background: var(--sel); }
.tabla .acciones { white-space: nowrap; }
.tabla .acciones > * + * { margin-left: 8px; }
.tabla .vacio { color: var(--tenue); text-align: center; padding: 14px; }

dialog { border: 0; border-radius: 10px; padding: 18px 20px; width: min(520px, 94vw); box-shadow: 0 10px 40px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h2 { color: var(--naranja); }

/* ---------- celular / tableta ---------- */
@media (max-width: 1100px) {
  .captura-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .captura-cuerpo > .lateral, .captura-cuerpo.con-periodo > .lateral { grid-column: auto; grid-row: auto; display: block; }
  .captura-cuerpo > .lateral > .panel, .captura-cuerpo.con-periodo > .lateral > .panel { display: block; margin-bottom: 14px; }
  .cedulas { max-height: none; overflow: visible; }
  .tabla-desplazable { max-height: 50vh; }
}
@media (max-width: 1500px) {
  .menu-boton { display: block; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--naranja-osc);
          flex-direction: column; align-items: flex-start; padding: 12px 16px; gap: 12px; }
  .menu.abierto { display: flex; }
  .menu .separador { display: none; }
}
@media (max-width: 760px) {
  .contenido { padding: 10px; }
  .marca-texto { font-size: .92rem; }
  .cedulas { grid-template-columns: minmax(0, 1fr); }
  .cedula { grid-template-columns: 64px minmax(0, 1fr) 26px 86px; }
  .cedula input { font-size: 16px; }          /* evita el zoom de iOS */
  .cedula .nom { white-space: normal; display: block; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.4; }
  .suma-registro { margin-left: 0; }
  .pie-captura .boton { flex: 1 1 auto; text-align: center; }
  .pie-captura input[type=date] { flex: 1 1 100%; font-size: 16px; }
}

/* ---------- etapa 2: reembolsos y reportes ---------- */
.titulo-pagina { margin: 4px 0 12px; }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.nota-aviso { color: var(--av-t); background: var(--av-f); padding: 6px 10px; border-radius: 6px; font-size: .88rem; }
.boton.chico { padding: 5px 11px; font-size: .86rem; }
.lineas { display: flex; flex-direction: column; gap: 6px; }
.linea { display: grid; grid-template-columns: 150px minmax(0, 1fr) 120px 30px; gap: 6px; align-items: center; }
.linea.cabecera { font-weight: 600; font-size: .85rem; color: var(--tenue); }
.linea input { width: 100%; }
.linea .importe { text-align: right; }
.linea .quitar { border: 0; background: none; font-size: 1.4rem; color: #A0A6AE; cursor: pointer; line-height: 1; }
.linea .quitar:hover { color: #B00020; }
.linea input.invalido { border-color: #B00020; background: #FFF0F1; }
.total-solicitud { margin-left: auto; font-weight: 700; color: var(--naranja); align-self: center; }
.total-historial { text-align: right; font-weight: 700; color: var(--naranja); margin: 10px 0 0; }
.tabla-desplazable.alta { max-height: 66vh; }
.pastilla { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.pastilla.verde { background: var(--ok-f); color: var(--ok-t); }
.pastilla.rojo { background: var(--er-f); color: var(--er-t); }
.pastilla.gris { background: var(--gris-f); color: var(--gris-t); }
.pastilla.amarillo { background: var(--av-f); color: var(--av-t); }
.tabla tr.fila-rojo td { background: #FDF1F2; }
.tarjetas-reporte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tarjeta { display: flex; flex-direction: column; gap: 8px; }
.tarjeta h2 { margin: 0; }
.tarjeta .nota { margin: 0; }
.tarjeta label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .9rem; }
.tarjeta .botones { margin-top: auto; padding-top: 6px; }
.chips-semanas { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-semana { background: var(--naranja-claro); color: var(--naranja-osc); border-radius: 12px; padding: 3px 10px; font-size: .82rem; text-decoration: none; font-weight: 600; }
.chip-semana:hover { background: #FBD5C2; }
.encabezado-panel input[type=search] { margin-left: auto; min-width: 220px; }
.menu-acciones { position: relative; }
.menu-acciones summary { cursor: pointer; color: var(--naranja-osc); font-weight: 600; list-style: none; white-space: nowrap; }
.menu-acciones summary::after { content: " \25BE"; }
.menu-acciones summary::-webkit-details-marker { display: none; }
.menu-acciones[open] > div { position: absolute; right: 0; z-index: 5; background: #fff; border: 1px solid var(--borde); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 6px 0; min-width: 260px; }
.menu-acciones > div a { display: block; padding: 7px 14px; color: var(--texto); text-decoration: none; }
.menu-acciones > div a:hover { background: var(--naranja-claro); }
@media (max-width: 1100px) {
  .dos-columnas, .tarjetas-reporte { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .linea { grid-template-columns: minmax(0, 1fr) 110px 30px; }
  .linea input[type=date] { grid-column: 1 / -1; }
  .linea.cabecera { display: none; }
  .linea { border-bottom: 1px solid #EEF0F2; padding-bottom: 8px; }
  .linea input { font-size: 16px; }
  .encabezado-panel input[type=search] { margin-left: 0; min-width: 0; width: 100%; }
}

/* ---------- etapa 3: administracion, catalogo y horas ---------- */
.subnav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; border-bottom: 2px solid var(--borde); }
.subnav a { padding: 8px 14px; text-decoration: none; color: var(--tenue); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.subnav a.activo { color: var(--naranja-osc); border-bottom-color: var(--naranja); }
.subnav a:hover { color: var(--texto); }
.contador { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: #fff; color: var(--naranja-osc); font-size: .78rem; font-weight: 800; text-align: center; }
.subnav .contador { background: var(--naranja); color: #fff; }
.tenue { color: var(--tenue); font-weight: normal; }
.formulario-rejilla { display: flex; flex-direction: column; gap: 10px; }
.formulario-rejilla > label:not(.check), label.bloque { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .9rem; }
.formulario-rejilla > label small { font-weight: normal; color: var(--tenue); }
.formulario-rejilla input:not([type=checkbox]):not([type=radio]), .formulario-rejilla select, .formulario-rejilla textarea { width: 100%; }
.fila-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 8px 0 12px; }
.fila-campos label:not(.check) { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .9rem; }
.en-fila { display: flex; gap: 6px; align-items: center; }
.en-fila input { min-width: 0; flex: 1; }
label.check { display: flex; gap: 8px; align-items: flex-start; font-weight: normal; cursor: pointer; }
label.check input { margin-top: 3px; }
.lista-checks { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.lista-checks legend { font-weight: 600; padding: 0 6px; }
.lista-checks.alta { max-height: 58vh; overflow-y: auto; }
.lista-checks label.check { padding: 3px 4px; border-radius: 5px; }
.lista-checks label.check.marcado { background: #FFF4EE; }
.menu-formularios { padding: 8px 14px !important; display: flex; flex-direction: column; gap: 10px; min-width: 320px !important; }
.menu-formularios label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; }
.menu-formularios a { padding: 2px 0 !important; color: var(--naranja-osc) !important; }
.menu-formularios .enlace { text-align: left; }
.en-linea-bloque { display: inline-block; }
.menu-acciones summary.peligro { color: #B00020; }
.tabla tr.fila-baja td { color: #B00020; background: #FDF1F2; }
.tabla tr.inactivo td { color: #999; }
.tabla tr.sube td { color: var(--ok-t); }
.tabla tr.baja td { color: #B00020; }
.tabla tr.fila-total td { background: var(--av-f); font-weight: 700; }
.msg-credenciales { background: #E7F1FF; color: #084298; border-color: #9EC5FE; font-weight: 600; font-size: 1.02rem; }
.resumen-horas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.resumen-horas > div { flex: 1 1 180px; background: var(--fondo); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; }
.resumen-horas .cifra { font-size: 1.5rem; font-weight: 800; color: var(--naranja-osc); }
.boton.deshabilitado { opacity: .45; cursor: not-allowed; }
.boton.peligro-borde { border-color: #F1AEB5; color: #B00020; }
.angosto-ancho { max-width: 720px; }
h2.separado { margin-top: 22px; }
.detalle-tabla { margin-top: 14px; }
.detalle-tabla summary { cursor: pointer; color: var(--naranja-osc); font-weight: 600; }
.linea-cedula.editando { background: #F3F8FF; border-radius: 8px; padding: 10px; }
.cedulas-horas .cedula { grid-template-columns: 72px minmax(0, 1fr) 60px 92px; }
.cedula.con-referencia .ref { color: #8A9099; font-size: .82rem; text-align: right; }
.cedulas-horas .cedula:not(.con-referencia), .form-horas .cedulas-horas .cedula { grid-template-columns: 72px minmax(0, 1fr) 92px; }
.form-horas .cedulas-horas .cedula .ref { display: none; }
.cedulas-comentario { grid-template-columns: minmax(0, 1fr); }
.cedulas-comentario .cedula { grid-template-columns: 72px minmax(0, 1.3fr) 60px 86px minmax(0, 1.4fr); }
.cedula .comentario { width: 100%; padding: 5px 7px; }
.cedula.resaltada { border-color: var(--naranja); background: #FFF7F2; }
@media (max-width: 760px) {
  .cedulas-comentario .cedula { grid-template-columns: 60px minmax(0, 1fr) 50px 80px; }
  .cedulas-comentario .cedula .comentario { grid-column: 1 / -1; font-size: 16px; }
  .menu-formularios { min-width: 260px !important; }
  .subnav a { padding: 7px 9px; font-size: .9rem; }
}
.fila-campos label:not(.check) { min-width: 0; max-width: 100%; flex: 0 1 auto; }
.fila-campos select { max-width: 100%; width: 100%; }
.fila-campos label:has(select) { flex: 1 1 260px; }

@media (min-width: 761px) {
  .linea-cedula { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 14px; align-items: end; }
  .linea-cedula > h2, .linea-cedula > .botones, .linea-cedula > .nota, .linea-cedula > label.check, .linea-cedula > #caja-extra { grid-column: 1 / -1; }
}

/* ---------- vacaciones / incapacidad ---------- */
.dia-completo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; padding: 8px 12px; background: #F3F8FF; border: 1px solid #CFE2FF; border-radius: 8px; }
.dia-completo .etiqueta-dia { font-weight: 700; color: #084298; }
.dia-completo label.check { font-weight: 600; }
.panel-periodo { grid-column: 1 / 2; }
.dias-periodo { display: flex; flex-wrap: wrap; gap: 6px; }
.dias-periodo .dia { display: inline-flex; flex-direction: column; padding: 4px 9px; border-radius: 7px; font-size: .84rem; font-weight: 700; line-height: 1.2; }
.dias-periodo .dia.si { background: var(--ok-f); color: var(--ok-t); }
.dias-periodo .dia.no { background: var(--gris-f); color: #888; text-decoration: line-through; }
.dias-periodo .dia small { font-weight: normal; text-decoration: none; font-size: .72rem; }
@media (max-width: 1100px) { .panel-periodo { grid-column: auto; } }
.caja-layout { border: 1px solid #F7B48F; background: #FFF9F5; border-radius: 10px; padding: 12px 16px; margin: 6px 0 18px; }
.caja-layout h2 { color: var(--naranja-osc); }
.caja-layout h3 { font-size: .98rem; margin: 4px 0 8px; }
.paso-layout { background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 10px 14px; }
.enlace-boton { color: var(--naranja-osc); font-weight: 600; white-space: nowrap; }

/* ---------- layout: lista de usuarios ---------- */
.campos-proyecto select { min-width: 220px; max-width: 100%; }
.lista-usuarios { border: 1px solid var(--borde); border-radius: 8px; }
.lista-usuarios-barra { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--borde); background: #FAFAFB; border-radius: 8px 8px 0 0; }
.lista-usuarios-barra input[type=search] { flex: 1 1 200px; min-width: 0; }
.lista-usuarios-barra .boton { margin-left: auto; }
.lista-usuarios-items { max-height: 46vh; overflow-y: auto; padding: 6px 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 10px; }
.usuario-item { padding: 5px 6px; border-radius: 5px; }
.usuario-item:hover { background: #F6F7F9; }
.usuario-item:has(input:checked) { background: #FFF4EE; }
.usuario-item.nuevo b { color: var(--naranja-osc); }
#form-aplicar-layout .lista-usuarios-items { grid-template-columns: minmax(0, 1fr); }
.usuarios-seleccionados { padding: 10px 12px; border: 1px solid var(--borde); border-radius: 6px; background: #F6F7F9; }
.usuarios-seleccionados h3 { margin: 0 0 6px; }
.usuarios-seleccionados ul { margin: 0; padding-left: 22px; }
.usuarios-seleccionados li { padding: 3px 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .lista-usuarios-barra .boton { margin-left: 0; } .campos-proyecto select { min-width: 0; width: 100%; } }

/* ---------- reportes: lista visible por proyecto ---------- */
.tabla-reportes .boton-reportes::after { content: " \25BE"; }
.tabla-reportes .boton-reportes.abierto { background: var(--naranja); color: #fff; border-color: var(--naranja); }
.tabla-reportes .boton-reportes.abierto::after { content: " \25B4"; }
.tabla-reportes tr.fila-reportes td { background: var(--naranja-claro); border-bottom: 2px solid var(--naranja); padding: 10px 12px; }
.lista-reportes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; position: sticky; left: 12px; max-width: calc(100vw - 80px); }
.lista-reportes-titulo { font-weight: 700; color: var(--naranja-osc); flex-basis: 100%; }
.grupo-botones { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lista-reportes a.boton { text-decoration: none; }
.tabla-reportes .boton-reportes { white-space: nowrap; }

/* ---------- etapa 4: carta de independencia ---------- */
.lienzo-firma { display: block; width: 100%; max-width: 900px; aspect-ratio: 900 / 360; height: auto; background: #fff; border: 1px dashed #8A93A0; border-radius: 6px; touch-action: none; cursor: crosshair; }
.vista-firma { max-width: 380px; max-height: 150px; border: 1px solid var(--borde); border-radius: 6px; background: #fff; padding: 6px; }
.modelos-firma { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; max-height: 55vh; overflow-y: auto; padding: 2px; }
.modelo-firma { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 8px; align-items: center; border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.modelo-firma:has(input:checked) { border-color: var(--naranja); background: #FFF4EE; }
.modelo-firma input { grid-row: 1 / 3; }
.etiqueta-modelo { font-size: .8rem; color: var(--tenue); }
.muestra-firma { font-size: 1.9rem; color: #15206E; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marco-pdf { width: 100%; height: 72vh; border: 1px solid var(--borde); border-radius: 6px; background: #fff; margin: 8px 0 12px; }
@media (max-width: 760px) { .marco-pdf { display: none; } }
tr.fila-amarilla td { background: #FFFBEA; }
.ancho-completo textarea { font: inherit; line-height: 1.45; }
code { font-size: .82rem; }
.tabla tr.fila-gris td { color: var(--gris-t); }

/* ---------- etapa 4: centro de costos ---------- */
.tarjetas-costo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.tarjetas-costo > div { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; }
.tarjetas-costo .cifra { font-size: 1.45rem; font-weight: 800; }
.tarjetas-costo > div span:last-child { color: var(--tenue); font-size: .85rem; }
.tarjetas-costo .rojo .cifra, .texto-rojo { color: #B00020; }
.tarjetas-costo .verde .cifra, .texto-verde { color: #0F5132; }
.cifra-corte { font-size: 1rem; color: var(--naranja-osc); }
.barra-avance { height: 10px; background: var(--gris-f); border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
.barra-avance span { display: block; height: 100%; background: var(--naranja); }
.barra-avance span.rojo { background: #B00020; }
.resumen-costos { background: #FFF8F3; border: 1px solid #F6D3BF; border-radius: 8px; padding: 8px 12px; }
.tabla tr.fila-total td { font-weight: 700; background: #FFF3CD; }

/* menu principal: renglones sin partirse; el nombre lleva a "Cambiar contraseña" */
.menu a, .menu .enlace { white-space: nowrap; }
.menu a.quien { font-weight: normal; color: var(--naranja-claro); }
.menu a.quien:hover { text-decoration: none; }
.menu a.quien:hover small { text-decoration: underline; }
.solo-menu-movil { display: none; }
@media (max-width: 1500px) { .menu .solo-menu-movil { display: inline; } }
@media (min-width: 1501px) and (max-width: 1700px) { .menu { gap: 12px; } .menu a, .menu .enlace { font-size: .94rem; } }

/* ---------- Reportes: proyectos y su estado de horas (tarjetas) ---------- */
.proyectos-reportes { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.proyecto-rep { border: 1px solid var(--borde); border-left: 5px solid var(--gris-t); border-radius: 8px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.proyecto-rep.borde-verde { border-left-color: var(--ok-t); }
.proyecto-rep.borde-rojo { border-left-color: #B00020; }
.proyecto-rep.borde-gris { border-left-color: #9AA0A6; }
.proyecto-rep-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.proyecto-rep-nombre { display: flex; flex-direction: column; min-width: 0; }
.proyecto-rep-nombre b { overflow-wrap: anywhere; }
.proyecto-rep-cifras { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; }
.proyecto-rep-cifras div { background: #F7F8FA; border-radius: 6px; padding: 4px 6px; min-width: 0; }
.proyecto-rep-cifras dt { font-size: .72rem; color: var(--tenue); line-height: 1.15; }
.proyecto-rep-cifras dd { margin: 0; font-weight: 700; font-size: .92rem; overflow-wrap: anywhere; }
.proyecto-rep-cifras dd.rojo { color: #B00020; }
.proyecto-rep-botones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px dashed var(--borde); padding-top: 8px; }
.proyecto-rep-botones .grupo-botones { display: inline-flex; gap: 6px; align-items: center; margin-right: 6px; font-size: .85rem; }
@media (max-width: 760px) {
  .proyectos-reportes { grid-template-columns: minmax(0, 1fr); }
  .proyecto-rep-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ayuda breve junto a la función; no altera las columnas del formulario. */
.ayuda-contextual{font-size:.85rem;color:var(--tenue,#59616b);margin:.35rem 0;max-width:100%;overflow-wrap:anywhere}
.ayuda-visible{display:block}
.ayuda-contextual summary{cursor:pointer;display:inline-block;color:#934007;border:1px solid #e4cdbf;border-radius:5px;padding:3px 7px;background:#fff8f2;list-style:none}
.ayuda-contextual summary::-webkit-details-marker{display:none}
.ayuda-contextual p,.ayuda-intro{margin:.4rem 0;padding:8px 10px;border-left:3px solid #e86a23;background:#fff8f2;color:#333;line-height:1.5}
.ayuda-intro{margin-bottom:14px}
.ayuda-config-fila{padding:14px 0;border-bottom:1px solid #ddd}
.ayuda-config-fila h2{font-size:1rem;margin:0 0 6px}
.ayuda-config-fila p{margin:0 0 10px}
.ayudas-config>label{margin:12px 0}
.ayuda-contextual:focus-within{outline-offset:3px}
@media(pointer:coarse){.ayuda-contextual summary{padding:10px;min-height:44px;box-sizing:border-box}}

/* Cada fila crece con su nombre completo, sin recortes ni superposición. */
.cedula > *{min-width:0}
.linea-cedula > .ayuda-contextual,.formulario-rejilla > .ayuda-contextual{grid-column:1 / -1}
.ayudas-config input[type=checkbox]{width:auto}
.tabla .acciones .ayuda-contextual{white-space:normal;min-width:120px}
@media(max-width:1100px){
  .cedula .nom,.cedula .ab{white-space:normal;display:block;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.4}
  .cedulas{align-items:start;grid-auto-rows:auto;gap:8px}
  .cedula{min-height:44px;padding:8px;height:auto}
  .panel,.dos-columnas > *,.formulario-rejilla > *{min-width:0}
  .boton,.enlace-boton,.subnav a,.nota,.msg,h1,h2,h3{white-space:normal;overflow-wrap:anywhere;max-width:100%}
  .boton{height:auto;text-align:center}
  .marca-texto{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
  .marca{flex:1;min-width:0}
  .chip,.menu-boton{flex-shrink:0}
  .menu-boton{margin-left:0;min-width:44px;min-height:44px}
  .fila-campos > label{min-width:0;max-width:100%}
  .fila-campos input,.fila-campos select,.formulario-rejilla input,.formulario-rejilla select{min-width:0}
  .menu.abierto{max-height:70vh;overflow-y:auto}
  .vista-firma{max-width:100%}
}
@media(max-width:900px){
  #form-captura .cedulas,.cedulas-horas{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  #form-captura .cedula{grid-template-columns:minmax(0,1fr) 76px;grid-template-areas:"ab com" "nom horas";gap:5px 10px;padding:9px 10px}
  #form-captura .cedula .ab{grid-area:ab}
  #form-captura .cedula .nom{grid-area:nom}
  #form-captura .cedula .com{grid-area:com;justify-self:end;padding:6px 8px;min-height:32px}
  #form-captura .cedula input{grid-area:horas;min-height:40px;align-self:center}
  .cedulas-comentario .cedula{grid-template-columns:52px minmax(0,1fr) 44px 72px}
  .cedulas-horas .cedula,.form-horas .cedulas-horas .cedula{grid-template-columns:52px minmax(0,1fr) 76px}
  .cedulas-horas .cedula.con-referencia{grid-template-columns:52px minmax(0,1fr) 44px 76px}
  .form-horas .cedulas-horas .cedula.con-referencia{grid-template-columns:52px minmax(0,1fr) 76px}
  input,select,textarea{font-size:16px}
  .subnav a{padding:8px 10px}
  .fila-campos > label{flex:1 1 100%}
  .fila-campos > label:not(.check) input,.fila-campos > label:not(.check) select{width:100%}
  .lista-usuarios-items,.modelos-firma{grid-template-columns:minmax(0,1fr)}
  .fecha-captura > .ayuda-contextual{flex-basis:100%}
  .acceso > .ayuda-intro{max-width:340px}
}

.cedula.indice-principal{grid-column:1 / -1;background:#fff1e7;border-color:var(--naranja);font-weight:700}
.cedula.subindice{border-left:4px solid #e4c4ac}
.total-padre{background:#f6eee7;color:#5a351d;font-weight:700;text-align:right}
#form-captura .indice-principal .nom{font-weight:700}
@media(min-width:761px){.cedulas-comentario .indice-principal .total-padre{grid-column:4}}

/* Notas por índice: contador y consulta sin edición. */
.contador-notas{display:inline-block;min-width:1.25em;padding:1px 4px;border-radius:10px;background:#f25e18;color:#fff;font-size:.78em;text-align:center}
#dlg-comentario{width:min(650px,calc(100vw - 24px));max-height:90vh;overflow-y:auto}
.lista-notas{max-height:40vh;overflow-y:auto;margin:10px 0}
.nota-guardada{padding:12px 0;border-bottom:1px solid var(--borde);overflow-wrap:anywhere}
.nota-guardada small{display:block;color:var(--tenue);margin-top:3px}
.nota-guardada p{white-space:pre-wrap;margin:8px 0}
button.com{white-space:nowrap}

#form-captura .cedula .com{display:inline-flex;align-items:center;justify-content:center;gap:3px}
@media(min-width:761px){#form-captura .cedula{grid-template-columns:58px minmax(0,1fr) max-content 76px}}

.proyectos-fuera{margin:0;padding-left:18px;min-width:180px;overflow-wrap:anywhere}
.proyectos-fuera li+li{margin-top:5px}

.aviso-inactividad {max-width:min(440px, calc(100vw - 32px));box-sizing:border-box;overflow-wrap:anywhere;}
.aviso-inactividad h2 {font-size:1.25rem;}
.aviso-inactividad .boton {white-space:normal;max-width:100%;}

.revision-layout { width:min(1080px,calc(100vw - 24px));max-width:1080px;max-height:92vh;box-sizing:border-box;overflow:auto;border:0;border-radius:10px;padding:20px; }
.revision-layout::backdrop { background:rgba(0,0,0,.55); }
.revision-indice { margin:12px 0;border:1px solid #ddd;border-radius:8px;min-width:0;padding:12px; }
.revision-error { border-color:#b44313;background:#fff6ed; }
.revision-campos { display:grid;grid-template-columns:130px minmax(200px,2fr) minmax(180px,1fr);gap:12px;align-items:start; }
.revision-campos label { min-width:0;display:flex;flex-direction:column;gap:5px; }
.revision-campos input,.revision-campos select { width:100%;box-sizing:border-box; }
.revision-botones { position:sticky;bottom:0;background:white;padding:12px 0; }
@media(max-width:700px) { .revision-layout {padding:12px;} .revision-campos {grid-template-columns:minmax(0,1fr);} .revision-layout input,.revision-layout select {font-size:16px;} .revision-botones .boton {white-space:normal;} }

/* Captura propia y subtotal de un mismo índice. */
.horas-mixtas { display:grid; gap:4px; min-width:0; }
.horas-mixtas label { display:grid; grid-template-columns:auto minmax(55px,1fr); gap:5px; align-items:center; font-size:.8rem; }
.horas-mixtas input { width:100%; min-width:0; box-sizing:border-box; }
.avisos-compactos { margin:8px 0; padding:8px 12px; border:1px solid #ddd; border-radius:6px; background:#fafafa; }
.avisos-compactos summary { cursor:pointer; font-weight:600; }
.avisos-compactos[open] summary { margin-bottom:8px; }
.aviso-resumen { margin:8px 0; }
.aviso-resumen-boton { white-space:normal; text-align:left; }
.aviso-resumen-modal { width:min(680px,94vw); max-height:85vh; overflow:auto; box-sizing:border-box; }
.firma-panel { max-width:1000px; }
.firma-panel .lienzo-firma { box-sizing:border-box; }

/* Reporte personal informativo: dos columnas y lectura completa en móvil. */
.reporte-personal-filtros,.reporte-personal-acciones{display:flex;flex-wrap:wrap;align-items:end;gap:12px}
.reporte-personal-filtros .campo{flex:0 1 210px;min-width:0}
.reporte-personal-columnas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.reporte-personal-columna{display:flex;flex-direction:column;min-width:0}
.reporte-personal-columna h3{background:var(--naranja-claro);padding:10px;border-radius:6px;margin:0 0 12px}
.reporte-personal-columna h4{margin:12px 0 6px;overflow-wrap:anywhere}
.reporte-personal-tabla{width:100%;table-layout:fixed}
.reporte-personal-tabla th,.reporte-personal-tabla td{white-space:normal;overflow-wrap:anywhere;vertical-align:top}
.reporte-personal-tabla th:first-child{width:21%}
.reporte-personal-tabla th:last-child{width:20%}
.reporte-personal-subtotal{margin-top:auto;padding:12px 0;border-top:1px solid var(--borde)}
.reporte-personal-total{background:var(--naranja-claro);padding:12px;font-size:1.1rem;margin-bottom:0}
.reporte-personal-acciones{margin-bottom:14px}
@media(max-width:650px){.reporte-personal-columnas{grid-template-columns:minmax(0,1fr);gap:12px}.reporte-personal-filtros .campo{flex:1 1 140px}.reporte-personal-acciones{align-items:start}.reporte-personal-tabla th,.reporte-personal-tabla td{padding:8px 5px}}