/* Tablero del Plan Estratégico · SEGEMAR. Identidad: azul 1E4079, dorado A88742, celeste 00AEEF, petróleo 25414D, gris CBCBCB. */
:root {
  --azul: #1E4079; --azul-oscuro: #15305c; --dorado: #A88742; --celeste: #00AEEF; --petroleo: #25414D; --gris: #CBCBCB;
  --fondo: #F7F8FA; --panel: #FFFFFF; --texto: #1f2a3a; --texto-suave: #5b6573; --linea: #E6E8EC; --linea-suave: #EEF0F3; --azul-claro: #E8EDF5;
  --cumplido: #2E7D4F; --a-tiempo: #00AEEF; --en-riesgo: #C62828; --atrasado: #8E1B1B; --pendiente: #8A9199; --postergada: #B8860B;
  --en-proceso: #1E4079; --completado: #2E7D4F; --sin-dato: #8A9199;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; min-height: 100%; display: flex; flex-direction: column; background: var(--fondo); color: var(--texto); font-family: var(--sans); font-size: 15px; line-height: 1.45; }
a { color: var(--azul); }
h1, h2, h3 { font-family: var(--cond); font-weight: 600; color: var(--azul); margin: 0 0 .5rem; text-wrap: balance; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
small, .nota { color: var(--texto-suave); font-size: .88rem; }
strong { font-weight: 600; }

/* Cabecera */
.cabecera { display: flex; align-items: center; gap: 24px; padding: 0 20px; height: 56px; background: var(--azul); color: #fff; }
.cabecera .marca { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.cabecera .logo-cabecera { height: 40px; width: auto; display: block; }
.cabecera .nombre-sistema { font-family: var(--cond); font-weight: 600; font-size: 1.1rem; letter-spacing: .02em; }
.cabecera .marca span { display: flex; flex-direction: column; line-height: 1.1; }
.cabecera .marca strong { font-size: 1.05rem; letter-spacing: .04em; }
.cabecera .marca small { color: #c9d3e6; font-size: .78rem; }
.cabecera .menu { display: flex; gap: 4px; margin-left: 8px; }
.cabecera .menu a { color: #dfe6f3; text-decoration: none; padding: 6px 12px; border-radius: 4px; font-weight: 500; }
.cabecera .menu a:hover { background: var(--azul-oscuro); color: #fff; }
.cabecera .menu a.activo { background: #fff; color: var(--azul); }
.cabecera .quien { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: .9rem; }
.cabecera .quien .rol { color: #c9d3e6; text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; }
.cabecera .quien form { margin: 0; }
.contenido { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding-block: 22px 40px; padding-inline: 20px; }
.pie { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--linea); color: var(--texto-suave); font-size: .82rem; background: var(--panel); }

/* Tarjetas y avisos */
.tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: 6px; padding: 20px 22px; }
.tarjeta-angosta { max-width: 520px; margin: 0 auto; }
.pagina-ingreso .contenido { display: flex; align-items: flex-start; justify-content: center; padding-top: 48px; }
.tarjeta-ingreso { width: 100%; max-width: 420px; text-align: center; border-top: 4px solid var(--dorado); }
.logo-ingreso { width: 220px; max-width: 100%; margin: 4px auto 12px; display: block; }
.tarjeta-ingreso .formulario { text-align: left; }
.ayuda { color: var(--texto-suave); margin: 0 0 14px; }
.aviso { padding: 10px 12px; border-radius: 4px; margin: 0 0 14px; font-size: .92rem; }
.aviso-error { background: #fdecec; color: #8e1b1b; border: 1px solid #f3c5c5; }
.aviso-info { background: var(--azul-claro); color: var(--azul); border: 1px solid #c9d3e6; }
.aviso-ok { background: #e8f3ec; color: #1f5d3a; border: 1px solid #bfe0cc; }

/* Formularios */
.formulario { display: flex; flex-direction: column; gap: 6px; }
.formulario label { font-weight: 500; font-size: .9rem; margin-top: 8px; }
.formulario input[type=text], .formulario input[type=email], .formulario input[type=password], .formulario input[type=date], .formulario input[type=number],
.formulario select, .formulario textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--gris); border-radius: 4px; background: #fff; color: var(--texto); width: 100%; }
.formulario textarea { min-height: 80px; resize: vertical; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus, .boton:focus-visible, a:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }
.formulario .acciones { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.boton { font: inherit; font-weight: 500; padding: 9px 18px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.2; }
.boton-primario { background: var(--azul); color: #fff; }
.boton-primario:hover { background: var(--azul-oscuro); }
.boton-accion { background: var(--dorado); color: #fff; }
.boton-secundario { background: #fff; color: var(--azul); border-color: var(--azul); }
.boton-texto { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); padding: 5px 12px; }
.boton-texto:hover { background: rgba(255,255,255,.12); }
.boton-chico { padding: 5px 10px; font-size: .85rem; }

/* Tablas */
.tabla-envoltura { overflow-x: auto; background: var(--panel); border: 1px solid var(--linea); border-radius: 6px; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th { text-align: left; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); padding: 10px 12px; border-bottom: 2px solid var(--linea); background: #fbfbfc; white-space: nowrap; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr.fila-link:hover td { background: var(--azul-claro); }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla a.principal { font-weight: 500; text-decoration: none; }
.tabla a.principal:hover { text-decoration: underline; }

/* Chips de estado y barras */
.chip { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: .76rem; font-weight: 600; letter-spacing: .02em; color: #fff; background: var(--sin-dato); white-space: nowrap; }
.estado-cumplido, .estado-completado { background: var(--cumplido); }
.estado-a-tiempo { background: var(--a-tiempo); }
.estado-en-proceso { background: var(--en-proceso); }
.estado-en-riesgo { background: var(--en-riesgo); }
.estado-atrasado { background: var(--atrasado); }
.estado-pendiente { background: var(--pendiente); }
.estado-postergada { background: var(--postergada); }
.estado-sin-dato { background: var(--sin-dato); }
.barra { display: inline-flex; align-items: center; gap: 8px; min-width: 120px; }
.barra i { display: block; height: 8px; width: 80px; background: var(--linea); border-radius: 4px; overflow: hidden; position: relative; }
.barra i b { display: block; height: 100%; background: var(--azul); }
.barra span { font-variant-numeric: tabular-nums; font-size: .88rem; min-width: 3.2em; text-align: right; }
.vence-pronto { color: var(--en-riesgo); font-weight: 600; }
.desactualizada { color: var(--postergada); font-weight: 600; }

/* Encabezado de sección y resúmenes */
.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.encabezado .sub { color: var(--texto-suave); margin: 0; }
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.resumen .dato { background: var(--panel); border: 1px solid var(--linea); border-radius: 6px; padding: 12px 14px; }
.resumen .dato small { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }
.resumen .dato b { display: block; font-family: var(--cond); font-size: 1.5rem; font-weight: 600; color: var(--azul); font-variant-numeric: tabular-nums; }
.resumen .dato.dorado b { color: var(--dorado); }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.lista-datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: .92rem; margin: 0; }
.lista-datos dt { color: var(--texto-suave); } .lista-datos dd { margin: 0; }
details.plegable { border: 1px solid var(--linea); border-radius: 4px; padding: 8px 12px; margin-top: 10px; }
details.plegable summary { cursor: pointer; font-weight: 500; color: var(--azul); }
.historial { list-style: none; padding: 0; margin: 10px 0 0; font-size: .88rem; }
.historial li { padding: 6px 0; border-top: 1px solid var(--linea-suave); }
.historial li time { color: var(--texto-suave); margin-right: 8px; }
.selector-sector { display: flex; gap: 8px; align-items: center; }
.selector-sector select { font: inherit; padding: 6px 8px; border: 1px solid var(--gris); border-radius: 4px; }
.vacio { padding: 30px; text-align: center; color: var(--texto-suave); }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; background: var(--panel); border: 1px solid var(--linea); border-radius: 6px; padding: 12px 14px; margin-bottom: 16px; }
.filtros label { display: flex; flex-direction: column; font-size: .78rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; gap: 4px; }
.filtros input[type=search] { font: inherit; text-transform: none; padding: 6px 8px; border: 1px solid var(--gris); border-radius: 4px; min-width: 190px; }
.filtros select { font: inherit; text-transform: none; padding: 6px 8px; border: 1px solid var(--gris); border-radius: 4px; min-width: 150px; }
.filtros input[type=search] { font: inherit; text-transform: none; padding: 6px 8px; border: 1px solid var(--gris); border-radius: 4px; min-width: 260px; }
.etiqueta { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .74rem; font-weight: 600; background: var(--azul-claro); color: var(--azul); border: 1px solid #c9d3e6; white-space: nowrap; }
.num-kpi { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pestanas { display: flex; gap: 2px; border-bottom: 2px solid var(--linea); margin-bottom: 16px; flex-wrap: wrap; }
.pestanas a { padding: 8px 14px; text-decoration: none; color: var(--texto-suave); font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.pestanas a.activa, .pestanas a:hover { color: var(--azul); border-bottom-color: var(--dorado); }
.grafico { background: var(--panel); border: 1px solid var(--linea); border-radius: 6px; padding: 14px; }
.grafico h3 { margin-bottom: 8px; }
.grafico canvas { width: 100% !important; max-height: 300px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }
.seccion { margin-bottom: 26px; }

/* Clases que reemplazan estilos en línea (la CSP no permite style= ni on*=) */
.tarjeta-dorada { border-top: 4px solid var(--dorado); }
.ancho-640 { max-width: 640px; } .ancho-760 { max-width: 760px; } .min-300 { min-width: 300px; }
.mt-4 { margin-top: 4px; } .mt-10 { margin-top: 10px; } .mt-14 { margin-top: 14px; } .mt-18 { margin-top: 18px; } .mb-12 { margin-bottom: 12px; }
.sin-borde { border: 0; } .crece { flex: 1 1 300px; }
.codigo-grande { font-size: 1.15rem; user-select: all; }
.fila-check { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.encabezado-arriba { align-items: flex-start; }
.sello { text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.titulo-petroleo { color: var(--petroleo); }
.detalle-ini { margin-bottom: 10px; }
.resumen-ini { cursor: pointer; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* Barras de avance con <progress> (sin ancho en línea) */
.barra progress { width: 80px; height: 8px; appearance: none; -webkit-appearance: none; border: 0; background: var(--linea); border-radius: 4px; overflow: hidden; }
.barra progress::-webkit-progress-bar { background: var(--linea); border-radius: 4px; }
.barra progress::-webkit-progress-value { background: var(--azul); }
.barra progress::-moz-progress-bar { background: var(--azul); }
/* Encabezado fijo de las tablas de carga (pedido de Maxi) */
.tabla-fija thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -2px 0 var(--linea); }
@media (min-width: 761px) { .tabla-envoltura:has(.tabla-fija) { overflow: visible; } }
/* Iniciativa: cabecera fija y pestaña Actualizar */
.cab-fija { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; background: var(--panel); border: 1px solid var(--linea); border-left: 4px solid var(--dorado); border-radius: 6px; padding: 10px 16px; margin-bottom: 16px; }
.cab-fija span b { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); font-weight: 600; }
.cab-fija .ini { flex: 1 1 280px; font-weight: 600; color: var(--azul); }
.aviso-alerta { background: #fff6e0; color: #6b4a00; border: 1px solid #ecd49a; }
.ayuda { color: var(--texto-suave); font-size: .82rem; margin: 2px 0 0; }
.lock { color: var(--texto-suave); font-size: .8rem; font-weight: 400; }
.tresn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.tresn > div { background: var(--fondo); border: 1px solid var(--linea); border-radius: 6px; padding: 8px 10px; }
.tresn small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.tresn b { display: block; font-family: var(--cond); font-size: 1.5rem; font-weight: 600; color: var(--azul); font-variant-numeric: tabular-nums; }
.form-plan { background: var(--fondo); border: 1px solid var(--linea); border-radius: 6px; padding: 8px 10px 10px; margin-bottom: 10px; }
.tresn input { font: inherit; width: 100%; padding: 4px 8px; border: 1px solid var(--gris); border-radius: 4px; font-size: 1.2rem; font-weight: 600; color: var(--azul); }
.barra-avance { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.barra-avance progress { flex: 1; height: 8px; appearance: none; -webkit-appearance: none; border: 0; background: var(--linea); border-radius: 4px; overflow: hidden; }
.barra-avance progress::-webkit-progress-bar { background: var(--linea); border-radius: 4px; }
.barra-avance progress::-webkit-progress-value { background: var(--azul); }
.barra-avance progress::-moz-progress-bar { background: var(--azul); }
.conteo { font-size: .85rem; color: var(--texto-suave); margin: 0 0 12px; }
.fila-selector { display: flex; gap: 8px; }
.fila-selector select { flex: 1; min-width: 0; }
.subkpi { border-top: 1px solid var(--linea); margin-top: 14px; padding-top: 12px; }
.kpi-ref { font-family: var(--cond); font-weight: 600; color: var(--azul); }
.solo-lectura { background: var(--fondo); border: 1px solid var(--linea); border-radius: 4px; padding: 8px 10px; margin: 0; color: var(--texto-suave); }
/* Paginado */
.paginado { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: .88rem; color: var(--texto-suave); margin-bottom: 10px; }
.paginado a { display: inline-block; padding: 2px 8px; border-radius: 3px; text-decoration: none; margin-left: 2px; }
.paginado a.activa { background: var(--azul); color: #fff; }

@media (max-width: 760px) {
  .tresn { grid-template-columns: 1fr; }
  .cab-fija { position: static; }
  .cabecera { height: auto; flex-wrap: wrap; padding: 8px 14px; gap: 8px 14px; }
  .cabecera .menu { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .cabecera .quien .nombre { display: none; }
  .contenido { padding-inline: 14px; }
  .dos-columnas { grid-template-columns: 1fr; }
  .oculto-celular { display: none; }
  .pagina-ingreso .contenido { padding-top: 16px; }
}
/* Datos maestros (F4) */
.fila-edicion { display: flex; gap: 10px; align-items: center; margin: 0 0 8px; flex-wrap: wrap; }
.fila-edicion input[type=text] { flex: 1 1 280px; font: inherit; padding: 6px 8px; border: 1px solid var(--gris); border-radius: 4px; background: #fff; color: var(--texto); }
.fila-edicion select { font: inherit; padding: 6px 8px; border: 1px solid var(--gris); border-radius: 4px; }
.fila-edicion-clave { min-width: 64px; font-weight: 600; color: var(--azul); }
.bloque-oe { margin-top: 14px; }

@media print {
  .cabecera, .pie, .menu, .boton, .no-imprimir { display: none !important; }
  body { background: #fff; } .contenido { max-width: none; padding: 0; }
  .tarjeta, .tabla-envoltura { border: 0; }
  @page { margin: 14mm; }
  tr, .dato, h2, h3 { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}

.dif-mas { color: #1f5d3a; font-weight: 600; }
.dif-menos { color: #8e1b1b; font-weight: 600; }
.lista-cambios { list-style: none; padding: 0; }
.lista-cambios li { padding: 8px 0; border-bottom: 1px solid var(--linea); }

/* Constructor de gráficos (F1) */
.constructor { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(320px, 6fr); gap: 20px; align-items: start; }
.constructor-form { background: var(--panel); border: 1px solid var(--linea); border-radius: 6px; padding: 16px 18px; }
.constructor-form .paso { border: 0; border-top: 1px solid var(--linea); margin: 12px 0 0; padding: 10px 0 0; min-width: 0; }
.constructor-form legend { font-family: var(--cond); font-weight: 600; color: var(--azul); padding: 0 6px 0 0; }
.constructor-form .filtro-titulo { margin: 8px 0 4px; font-size: .78rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; }
.constructor-form select[multiple] { width: 100%; }
.opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.opcion { display: inline-block; margin: 0 !important; font-weight: 400 !important; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion span { display: inline-block; padding: 5px 11px; border: 1px solid var(--gris); border-radius: 16px; background: #fff; font-size: .86rem; }
.opcion:hover span { border-color: var(--azul); }
.opcion input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; }
.opcion input:focus-visible + span { outline: 2px solid var(--celeste); outline-offset: 2px; }
.fila-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.constructor-previa { position: sticky; top: 12px; }
.acciones-previa { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.en-linea { display: inline; margin: 0; }
.acciones-fila { white-space: nowrap; }
@media (max-width: 900px) { .constructor { grid-template-columns: 1fr; } .constructor-previa { position: static; } }

/* Campana de avisos y bandeja de salida (F3) */
.cabecera .campana { position: relative; display: inline-flex; align-items: center; gap: 6px; color: #dfe6f3; text-decoration: none; padding: 6px 8px; border-radius: 4px; }
.cabecera .campana:hover { background: var(--azul-oscuro); color: #fff; }
.cabecera .campana svg { width: 20px; height: 20px; fill: currentColor; }
.cabecera .contador { background: var(--dorado); color: #fff; font-size: .72rem; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 10px; }
.lista-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aviso { background: var(--panel); border: 1px solid var(--linea); border-radius: 6px; padding: 12px 16px; }
.aviso.sin-leer { border-left: 4px solid var(--dorado); }
.aviso h3 { margin: 6px 0 4px; }
.aviso p { margin: 0 0 8px; white-space: pre-line; }
.aviso-cabeza { display: flex; gap: 10px; align-items: center; }
.aviso-acciones { display: flex; gap: 8px; align-items: center; }
.aviso-acciones form { margin: 0; }
.correo-vista { width: 100%; height: 640px; border: 1px solid var(--linea); border-radius: 6px; background: #fff; }
.correo-texto { background: var(--panel); border: 1px solid var(--linea); border-radius: 6px; padding: 12px 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--sans); }

/* Pulido v1.1 (H9): en celular (390 px) nada se sale del ancho. Los campos nunca superan su contenedor (un <option> largo,
   como el nombre de una dirección, ensanchaba el <select> y la página entera) y el menú superior se desliza sin mostrar barra. */
select, input, textarea { max-width: 100%; }
.filtros label, .selector-sector label { min-width: 0; max-width: 100%; }
.cabecera .menu { scrollbar-width: none; -ms-overflow-style: none; }
.cabecera .menu::-webkit-scrollbar { display: none; }
.cabecera .menu a { flex: none; white-space: nowrap; }
@media (max-width: 760px) {
  .filtros label { flex: 1 1 100%; }
  .filtros select, .filtros input[type=search] { min-width: 0; width: 100%; }
  .selector-sector { flex-wrap: wrap; }
  .selector-sector form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
}
/* Dirección vista desde el tablero (H10): OE -> OKR -> iniciativa */
.grupo-oe { margin-top: 22px; }
.grupo-oe h2 { font-size: 1.1rem; }
.titulo-okr { font-size: .95rem; color: var(--texto-suave); margin: 14px 0 8px; }
/* H10/H13: encabezado de cada iniciativa en columnas fijas, así el estado y los números quedan alineados entre iniciativas */
.fila-ini { display: grid; grid-template-columns: minmax(0, 1fr) 56px 120px 230px 96px 200px; gap: 12px; align-items: center; cursor: pointer; }
.fila-ini > span { min-width: 0; }
.fila-ini .num { text-align: right; font-variant-numeric: tabular-nums; }
.fila-ini .fi-nombre { overflow-wrap: anywhere; }
.fila-ini .fi-avance { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fila-ini-titulos { cursor: default; padding: 0 23px; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
summary.fila-ini { list-style: none; }
summary.fila-ini::-webkit-details-marker { display: none; }
@media (max-width: 900px) {
  .fila-ini { grid-template-columns: minmax(0, 1fr) auto; }
  .fila-ini .fi-nombre { grid-column: 1 / -1; }
  .fila-ini .num { text-align: left; }
  .fila-ini-titulos { display: none; }
}
/* Tabla de KPI de cada iniciativa: anchos fijos por clase, iguales en todas (el estado queda en la misma columna) */
.tabla-kpi { table-layout: fixed; width: 100%; }
.tabla-kpi .k-num { width: 96px; } .tabla-kpi .k-resp { width: 170px; } .tabla-kpi .k-fecha { width: 108px; white-space: nowrap; }
.tabla-kpi td.k-nombre, .tabla-kpi td.k-resp { overflow-wrap: anywhere; }
@media (max-width: 760px) { .tabla-kpi { table-layout: auto; } .tabla-kpi .k-num, .tabla-kpi .k-estado, .tabla-kpi .k-fecha { width: auto; } .tabla-kpi .k-nombre { min-width: 170px; } }
.vista-toggle { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; }
/* H14 / R33: versión para imprimir (?imprimir=1). Sin menú, sin botones ni filtros; encabezado institucional; cada OE en hoja nueva */
.cab-impresion { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; border-bottom: 3px solid var(--dorado); padding-bottom: 12px; margin-bottom: 16px; }
.logo-impresion { width: 120px; flex: none; }
.cab-impresion-texto { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.titulo-impresion { font-size: 1.15rem; color: var(--azul); }
.modo-imprimir .cabecera, .modo-imprimir .menu, .modo-imprimir .no-imprimir, .modo-imprimir .filtros, .modo-imprimir .vista-toggle,
.modo-imprimir .paginado, .modo-imprimir .selector-sector, .modo-imprimir .fi-ultima .boton, .modo-imprimir .encabezado .boton,
.modo-imprimir .acciones, .modo-imprimir .pie form, .modo-imprimir .constructor-form, .modo-imprimir form.en-linea { display: none !important; }
.modo-imprimir .constructor { display: block; }
@media print {
  .modo-imprimir .tabla-envoltura { overflow: visible; }
  .boton-imprimir { display: none !important; }
  .modo-imprimir .grupo-oe + .grupo-oe { break-before: page; }
  .modo-imprimir .detalle-ini, .modo-imprimir tr { break-inside: avoid; }
  .modo-imprimir .fila-ini { grid-template-columns: minmax(0, 1fr) 50px 90px 170px 90px 120px; }
}
/* Resumen del sector (spec final): una tarjeta por objetivo; los chips de estado en columnas fijas para que se alineen */
.tarjetas-oe { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-bottom: 18px; }
.tarjeta-oe { display: flex; flex-direction: column; gap: 8px; color: var(--texto); text-decoration: none; border-top: 3px solid var(--azul); }
.tarjeta-oe:hover { border-color: var(--celeste); }
.oe-titulo { font-weight: 600; color: var(--azul); }
.oe-cifras, .oe-alertas { font-size: .86rem; color: var(--texto-suave); }
.oe-avance { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.oe-estados { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 10px; }
.oe-estado { display: grid; grid-template-columns: 1fr 36px; align-items: center; gap: 6px; }
.oe-estado b { text-align: right; font-variant-numeric: tabular-nums; }
.oe-estados .sep { display: none; }
.fila-ini .fi-ultima { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mt-14 { margin-top: 14px; }
@media (max-width: 760px) { .tarjetas-oe { grid-template-columns: 1fr; } .fila-ini .fi-ultima { justify-content: flex-start; } }
.encabezado-seccion { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
/* Carga rápida (H16/H19): estado en un clic y filas "Pendiente de cargar" */
.form-estado, .form-rapido { display: flex; gap: 6px; align-items: center; margin: 0; }
.form-estado select { font: inherit; font-size: .82rem; padding: 3px 4px; border: 1px solid var(--gris); border-radius: 4px; min-width: 0; flex: 1; }
.form-rapido input[type=text] { font: inherit; padding: 4px 8px; border: 1px solid var(--gris); border-radius: 4px; flex: 1; min-width: 0; }
.boton-mini { padding: 2px 8px; font-size: .78rem; }
.fila-pendiente td { background: var(--fondo, #f7f8fa); }
@media (min-width: 761px) { .tabla-kpi .k-estado { width: 215px; } }
.acciones-modo { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; }
.mas-pendientes { margin-top: 6px; }
.mas-pendientes summary { cursor: pointer; color: var(--azul); font-size: .88rem; padding: 4px 0; }
.oe-estado .chip { justify-self: start; }
.oe-avance .barra progress { width: 160px; }
.boton-imprimir { white-space: normal; max-width: 100%; }
.fila-pendiente .k-num .nota { white-space: nowrap; font-size: .8rem; }
.resumen .dato .etiqueta { white-space: normal; display: inline-block; margin-top: 4px; }

/* H18 · permisos por persona (ficha de la persona en Usuarios) */
.lista-permisos { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--linea); border-radius: 6px; }
.lista-permisos li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--linea-suave); }
.lista-permisos li:last-child { border-bottom: 0; }
.lista-permisos label { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.lista-permisos input[type="checkbox"] { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.lista-permisos .permiso-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lista-permisos .permiso-marca { flex: none; }
.lista-permisos li.bloqueado label { cursor: default; color: var(--texto-suave); }
.chip-rol { background: var(--azul-claro); color: var(--azul); }
.chip-suelto { background: #F3EAD6; color: #5E4A1C; }
.permisos-resumen { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 760px) { .lista-permisos li { flex-wrap: wrap; } .lista-permisos .permiso-marca { margin-left: 28px; } }

/* Ayuda / manual de uso */
.ayuda { max-width: 900px; margin: 0 auto; }
.ayuda-cab p { color: var(--texto-suave); font-size: 1.05rem; }
.ayuda-indice { background: var(--panel); border: 1px solid var(--linea); border-left: 4px solid var(--dorado); border-radius: 6px; padding: 14px 20px; margin: 18px 0 28px; }
.ayuda-indice h2 { font-size: 1.05rem; }
.ayuda-indice ul { margin: 0; padding-left: 20px; }
.ayuda-indice li { margin: 4px 0; }
.ayuda-seccion { margin-bottom: 40px; }
.ayuda-seccion > h2 { font-size: 1.6rem; border-bottom: 3px solid var(--dorado); padding-bottom: 6px; margin: 32px 0 18px; }
.ayuda-seccion h3 { margin-top: 28px; font-size: 1.2rem; }
.ayuda p, .ayuda li { line-height: 1.55; }
.ayuda-pasos { padding-left: 24px; }
.ayuda-pasos li { margin: 6px 0; }
.ayuda-tip { background: var(--azul-claro); border-left: 4px solid var(--azul); border-radius: 4px; padding: 10px 14px; }
.ayuda-fig { margin: 16px 0; }
.ayuda-fig img { display: block; max-width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.ayuda-fig figcaption { color: var(--texto-suave); font-size: .88rem; margin-top: 6px; }
.ayuda code { background: var(--azul-claro); padding: 1px 5px; border-radius: 3px; }
.ayuda-pie { color: var(--texto-suave); margin-top: 32px; }
.modo-imprimir .ayuda-fig, .ayuda-fig { break-inside: avoid; }

/* ===== H21-H24 (11/10/2026): pantallas del sector más fáciles de leer (geólogos, gente grande) =====
   Letra más grande, renglones aireados, botones y enlaces de al menos 44 px de alto, una acción principal por sección (dorado),
   texto mínimo 16 px. Sólo clases (CSP estricta), sin animaciones. */
.pantalla-sector .contenido { font-size: 17.5px; line-height: 1.55; }
.pantalla-sector small, .pantalla-sector .nota, .pantalla-sector .lock, .pantalla-sector .conteo, .pantalla-sector .aviso, .pantalla-sector .chip,
.pantalla-sector .etiqueta, .pantalla-sector .tabla th, .pantalla-sector .filtros label, .pantalla-sector .resumen .dato small, .pantalla-sector .tresn small,
.pantalla-sector .barra span, .pantalla-sector .lista-datos, .pantalla-sector .formulario label, .pantalla-sector .fila-ini-titulos, .pantalla-sector .oe-cifras,
.pantalla-sector .oe-alertas, .pantalla-sector .titulo-okr, .pantalla-sector .boton-chico, .pantalla-sector .boton-mini, .pantalla-sector .cab-fija { font-size: 16px; }
.pantalla-sector .tabla th, .pantalla-sector .resumen .dato small, .pantalla-sector .tresn small, .pantalla-sector .fila-ini-titulos, .pantalla-sector .filtros label { text-transform: none; letter-spacing: 0; }
.pantalla-sector h1 { font-size: 2rem; } .pantalla-sector h2 { font-size: 1.4rem; }
.pantalla-sector .boton, .pantalla-sector .boton-chico, .pantalla-sector .boton-mini { min-height: 44px; padding: 10px 18px; display: inline-flex; align-items: center; justify-content: center; }
.pantalla-sector .formulario input[type=text], .pantalla-sector .formulario input[type=date], .pantalla-sector .formulario select, .pantalla-sector .formulario textarea,
.pantalla-sector .filtros select, .pantalla-sector .filtros input[type=search], .pantalla-sector .form-estado select { min-height: 44px; font-size: 17px; }
.pantalla-sector .chip { padding: 4px 12px; border-radius: 14px; }
.pantalla-sector .barra progress, .pantalla-sector .barra-avance progress { height: 12px; }
.pantalla-sector .barra progress { width: 110px; }
.pantalla-sector .resumen .dato b, .pantalla-sector .tresn b { font-size: 1.9rem; }
.que-hacer { font-size: 17.5px; background: var(--azul-claro); border-left: 4px solid var(--azul); padding: 10px 14px; margin: 0 0 16px; border-radius: 4px; color: var(--texto); }
.aviso-grande { font-size: 18px; font-weight: 600; padding: 14px 16px; }
.texto-riesgo { color: var(--en-riesgo); font-weight: 600; }
.enlace-accion { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.enlaces-pantalla, .enlaces-ini { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.enlaces-pantalla a, .enlaces-ini a { display: inline-flex; align-items: center; min-height: 44px; }
.acciones-seccion { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.solo-celular { display: none; }

/* Selector de vista (Lista / Detalles / Bloques) */
.selector-vista { display: inline-flex; border: 1px solid var(--azul); border-radius: 6px; overflow: hidden; }
.selector-vista a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; color: var(--azul); text-decoration: none; font-weight: 600; font-size: 16px; background: #fff; }
.selector-vista a + a { border-left: 1px solid var(--azul); }
.selector-vista a.activa { background: var(--azul); color: #fff; }
.selector-vista svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* Resumen en Lista: una fila por objetivo, toda la fila es el enlace */
.lista-oe { list-style: none; margin: 0 0 18px; padding: 0; background: var(--panel); border: 1px solid var(--linea); border-radius: 6px; }
.lista-oe-item + .lista-oe-item { border-top: 1px solid var(--linea); }
.lista-oe-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 16px 18px 10px; color: var(--texto); text-decoration: none; }
.lista-oe-fila:hover .lista-oe-titulo { text-decoration: underline; }
.lista-oe-titulo { grid-column: 1; font-family: var(--cond); font-size: 1.3rem; font-weight: 600; color: var(--azul); overflow-wrap: anywhere; }
.lista-oe-cifras, .lista-oe-alertas { grid-column: 1; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 16px; color: var(--texto-suave); }
.lista-oe-flecha { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 2rem; color: var(--azul); line-height: 1; }
.lista-okr { list-style: none; margin: 0; padding: 0 18px 14px 38px; display: flex; flex-direction: column; gap: 0; }
.lista-okr li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.lista-okr a { display: inline-flex; align-items: center; min-height: 40px; font-size: 16px; }

/* Bloques (las tarjetas de antes, arregladas): título como enlace, sin anidar enlaces */
.tarjeta-oe { min-width: 0; }
.tarjeta-oe .oe-titulo { font-size: 1.15rem; text-decoration: none; overflow-wrap: anywhere; }
.tarjeta-oe .oe-titulo:hover { text-decoration: underline; }
.oe-okrs { list-style: none; margin: 4px 0 0; padding: 8px 0 0; border-top: 1px solid var(--linea-suave); }
.oe-okrs li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.oe-okrs a { display: inline-flex; align-items: center; min-height: 40px; font-size: 16px; }
.bloques-ini { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 14px; }
.bloque-ini { min-width: 0; }
.bloque-ini[open] { grid-column: 1 / -1; }
.bloque-ini > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.bloque-ini > summary::-webkit-details-marker { display: none; }
.bloque-titulo { font-weight: 600; color: var(--azul); overflow-wrap: anywhere; }
.bloque-cifras { color: var(--texto-suave); font-size: 16px; }

/* Página del objetivo: Iniciativa Clave desplegable */
.detalle-ini > summary { cursor: pointer; }
.ver-tareas { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--azul); border-radius: 4px; color: var(--azul); font-weight: 600; font-size: 16px; white-space: nowrap; }
.ver-tareas::before { content: "▸ "; white-space: pre; }
details[open] > summary .ver-tareas::before { content: "▾ "; }
details[open] > summary .ver-tareas { background: var(--azul-claro); }
.cuerpo-ini { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
.conteo-grande { font-size: 18px; font-weight: 600; color: var(--texto); margin: 0 0 10px; }
.aviso-importado p { margin: 0 0 6px; }
.ver-mas summary { cursor: pointer; color: var(--azul); min-height: 40px; display: flex; align-items: center; }
.filtros-plegables { margin-bottom: 12px; }
.filtros-plegables > summary { cursor: pointer; color: var(--azul); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.tarjeta-media { max-width: 720px; }

/* Agregar tarea: renglón al final de las tareas, con su botón dorado */
.form-agregar { margin-top: 14px; padding: 14px; background: #fbf8f1; border: 1px solid #e6dcc4; border-radius: 6px; display: flex; flex-direction: column; gap: 6px; }
.form-agregar label { font-weight: 600; font-size: 16px; }
.form-agregar-fila { display: flex; gap: 10px; flex-wrap: wrap; }
.form-agregar input[type=text] { flex: 1 1 260px; min-width: 0; min-height: 44px; font: inherit; font-size: 17px; padding: 8px 12px; border: 1px solid var(--gris); border-radius: 4px; background: #fff; color: var(--texto); }
.form-agregar .boton { min-height: 44px; }
.pantalla-sector .form-estado { flex-wrap: wrap; }

/* Detalles: la tabla se desplaza dentro de su caja, nunca la página */
.tabla-detalles { overflow-x: auto; max-width: 100%; }
.tabla-detalles .tabla { min-width: 760px; }
.tabla-detalles th a { color: inherit; text-decoration: none; display: inline-flex; min-height: 40px; align-items: center; }
.tabla-detalles th a:hover { text-decoration: underline; }
.pantalla-sector .tabla-detalles .tabla th { white-space: nowrap; }

@media (max-width: 760px) {
  .pantalla-sector .contenido { font-size: 17px; }
  .pantalla-sector h1 { font-size: 1.6rem; }
  .solo-celular { display: inline; }
  .selector-vista { width: 100%; }
  .selector-vista a { flex: 1; justify-content: center; padding: 8px 6px; }
  .lista-oe-fila { padding: 14px 12px 8px; }
  .lista-okr { padding: 0 12px 12px 24px; }
  .bloques-ini { grid-template-columns: 1fr; }
  .tarjetas-oe { grid-template-columns: 1fr; }
  .pantalla-sector .tabla-kpi thead { display: none; }
  .pantalla-sector .tabla-kpi, .pantalla-sector .tabla-kpi tbody, .pantalla-sector .tabla-kpi tr, .pantalla-sector .tabla-kpi td { display: block; width: auto; }
  .pantalla-sector .tabla-kpi tr { border-bottom: 1px solid var(--linea); padding: 8px 0; }
  .pantalla-sector .tabla-kpi td { border: 0; padding: 4px 0; }
  .pantalla-sector .tabla-kpi td.oculto-celular { display: none; }
  .pantalla-sector .fila-ini .fi-ultima { justify-content: flex-start; }
  .acciones-seccion { width: 100%; }
}
/* H25: «Ver como» de los gráficos del tablero; H26: filtro de persona como lista desplegable */
.ver-como { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.ver-como-titulo { font-size: 16px; color: var(--texto-suave); margin-right: 4px; }
.ver-como-boton { font: inherit; font-size: 16px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--azul); border-radius: 4px; background: #fff; color: var(--azul); cursor: pointer; }
.ver-como-boton[aria-pressed="true"] { background: var(--azul); color: #fff; }
.ver-como-boton:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }
.grafico-tabla .tabla-envoltura { max-height: 360px; overflow: auto; }
.selector-persona { font: inherit; min-height: 40px; padding: 6px 8px; border: 1px solid var(--gris); border-radius: 4px; background: #fff; color: var(--texto); max-width: 100%; min-width: 220px; }
.pantalla-sector .selector-persona { min-height: 44px; font-size: 17px; }
@media (max-width: 760px) { .selector-persona { min-width: 0; width: 100%; } }
@media print { .grafico-cambiable .grafico-lienzo[hidden] { display: none; } }
@media print { .ver-tareas, .que-hacer, .filtros-plegables, .lista-oe-flecha { display: none !important; } .lista-oe-item, .bloque-ini { break-inside: avoid; } }
.modo-imprimir .ver-tareas, .modo-imprimir .que-hacer, .modo-imprimir .filtros-plegables, .modo-imprimir .enlaces-pantalla { display: none; }
/* H28: pestañas de verdad, paginado con Anterior/Siguiente y encabezados fijos */
.pestanas a { min-height: 44px; display: inline-flex; align-items: center; }
.pestanas a.activa, .pestanas a[aria-selected="true"] { font-weight: 700; color: var(--azul); border-bottom: 4px solid var(--dorado); }
.paginado { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 10px 0; font-size: 16px; }
.paginado-mostrar a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; padding: 0 8px; margin-left: 4px; border: 1px solid var(--linea); border-radius: 4px; text-decoration: none; }
.paginado-mostrar a.activa { background: var(--azul); color: #fff; border-color: var(--azul); }
.paginado-paginas { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.paginado-paginas .boton { min-height: 44px; display: inline-flex; align-items: center; }
/* El encabezado de la tabla queda a la vista al bajar: dentro de su caja (que se desplaza) o de la página */
.tabla-envoltura { max-height: 80vh; overflow: auto; }
.tabla thead th { position: sticky; top: 0; z-index: 3; background: #fbfbfc; box-shadow: inset 0 -2px 0 var(--linea); }
@media (max-width: 760px) {
  /* En el celular, la primera columna (el nombre) también queda fija dentro del desplazamiento horizontal */
  .tabla-envoltura .tabla th:first-child, .tabla-envoltura .tabla td:first-child { position: sticky; left: 0; z-index: 2; background: var(--panel); }
  .tabla-envoltura .tabla thead th:first-child { z-index: 4; background: #fbfbfc; }
  .pantalla-sector .tabla-kpi td:first-child { position: static; }
}
@media print { .tabla-envoltura { max-height: none; overflow: visible; } .tabla thead th { position: static; box-shadow: none; } }
@media (min-width: 761px) { .tabla-envoltura:has(.tabla-fija) { max-height: none; } }
.tabla-envoltura.sin-borde, .grafico-tabla .tabla-envoltura { max-height: none; }
.grafico-tabla .tabla-envoltura { max-height: 360px; }

/* Ajustes vistos en el navegador (1366): estado legible completo y cifras de la fila sin cortes */
.pantalla-sector .tabla { font-size: 16px; }
.pantalla-sector .form-estado select { min-width: 160px; }
@media (min-width: 761px) {
  .pantalla-sector .tabla-kpi .k-estado { width: 300px; }
  .pantalla-sector .tabla-kpi .k-resp { width: 150px; }
  .pantalla-sector .tabla-kpi .k-num { width: 110px; }
}
@media (min-width: 901px) { .pantalla-sector .fila-ini { grid-template-columns: minmax(0, 1fr) 56px 200px 230px 110px 150px; } }
.pantalla-sector .ayuda, .pantalla-sector .lista-datos dd, .pantalla-sector .solo-lectura { font-size: 16px; }

/* Códigos, números, fechas, porcentajes y montos nunca se cortan; el título ocupa el resto y es el que baja de renglón */
.nowrap, .codigo, .tabla td.num, .tabla th.num, .tabla td.k-num, .tabla td.k-fecha, .tabla td.codigo, .tabla td.num-kpi,
.tabla a.principal b, .fila-ini .fi-nombre strong, .bloque-titulo b, .barra span, .chip, .fi-okr { white-space: nowrap; }
/* H31: «Ver» / «Editar» al final de cada fila y «Volver» grande en la ficha */
.ver-editar { display: inline-flex; gap: 8px; white-space: nowrap; }
.enlace-ver { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border: 1px solid var(--azul); border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 15px; }
.enlace-ver:hover { background: var(--azul-claro); }
.pantalla-sector .enlace-ver { font-size: 16px; min-height: 40px; }
.boton-volver { font-size: 17px; min-height: 44px; display: inline-flex; align-items: center; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 761px) { .tabla-kpi .k-acciones { width: 170px; } }
/* ===== Estética (pedido del dueño, 11/10/2026): paleta institucional del Manual de Identidad y colores de eje de la Memoria
   2025. Sin degradados salvo la cabecera; sin animaciones; los colores de estado no cambian (son semánticos). ===== */
:root {
  --azul-noche: #16213F;
  --eje-I: #212B4D;   --eje-I-medio: #3D4870;   --eje-I-claro: #ECEDF1;
  --eje-II: #2E545C;  --eje-II-medio: #467882;  --eje-II-claro: #E8F0F2;
  --eje-III: #2A8CC4; --eje-III-medio: #4CB1E7; --eje-III-claro: #E6F4FC;
  --eje-IV: #987B38;  --eje-IV-medio: #B89A56;  --eje-IV-claro: #F5F0E5;
  --eje-ADM: #6B7380; --eje-ADM-medio: #CBCBCB; --eje-ADM-claro: #F2F3F5;
}
/* Cabecera: azul más profundo, filete dorado y un toque celeste */
.cabecera { height: auto; min-height: 72px; padding: 10px 24px; background: linear-gradient(90deg, var(--azul-noche) 0%, var(--azul) 100%);
  border-bottom: 3px solid var(--dorado); box-shadow: 0 1px 0 var(--celeste); }
.cabecera .marca { gap: 14px; padding: 2px 0; }
.cabecera .logo-cabecera { height: 50px; }
.cabecera .marca .marca-sep { display: block; width: 1px; height: 42px; background: rgba(255, 255, 255, .45); }
.cabecera .marca .marca-textos { display: flex; flex-direction: column; gap: 3px; line-height: 1.15; }
.cabecera .nombre-sistema { font-size: 1.2rem; color: #fff; }
.cabecera .marca .marca-sub { color: #9FDDF7; font-size: .8rem; letter-spacing: .08em; }
.cabecera .menu a { color: #fff; border-radius: 0; border-bottom: 3px solid transparent; padding: 8px 10px; }
.cabecera .menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.cabecera .menu a.activo { background: transparent; color: #fff; border-bottom-color: var(--dorado); font-weight: 700; }
/* Ingreso: logo a color, más grande, en tarjeta blanca con filete dorado */
.tarjeta-ingreso { border-top: 5px solid var(--dorado); }
.logo-ingreso { width: 280px; }
/* Títulos con vida: h1 con barra dorada corta; títulos de sección con barra a la izquierda */
.contenido h1::after { content: ""; display: block; width: 48px; height: 4px; margin-top: 8px; background: var(--dorado); border-radius: 2px; }
.modo-imprimir .contenido h1::after { display: none; }
.seccion > h2, .encabezado-seccion h2, .grupo-oe > h2, .contenido > h2, .titulo-okr { border-left: 5px solid var(--celeste); padding-left: 10px; }
.titulo-okr { color: var(--azul); }
/* Tarjetas de resumen con borde superior de color (azul, dorado, celeste, petróleo) y número en azul negrita */
.resumen .dato { border-top: 4px solid var(--azul); }
.resumen .dato:nth-child(4n+2) { border-top-color: var(--dorado); }
.resumen .dato:nth-child(4n+3) { border-top-color: var(--celeste); }
.resumen .dato:nth-child(4n+4) { border-top-color: var(--petroleo); }
.resumen .dato b { color: var(--azul); font-weight: 700; }
.resumen .dato.dorado b { color: var(--azul); }
/* Franja del eje en objetivos e Iniciativas Clave, y su chip */
.eje-I { --eje: var(--eje-I); --eje-claro: var(--eje-I-claro); }
.eje-II { --eje: var(--eje-II); --eje-claro: var(--eje-II-claro); }
.eje-III { --eje: var(--eje-III); --eje-claro: var(--eje-III-claro); }
.eje-IV { --eje: var(--eje-IV); --eje-claro: var(--eje-IV-claro); }
.eje-ADM { --eje: var(--eje-ADM); --eje-claro: var(--eje-ADM-claro); }
.lista-oe-item[class*="eje-"] { border-left: 6px solid var(--eje); }
.tarjeta-oe[class*="eje-"] { border-top: 0; border-left: 6px solid var(--eje); }
.detalle-ini[class*="eje-"], .bloque-ini[class*="eje-"] { border-left: 5px solid var(--eje); }
.chip-eje { display: inline-block; vertical-align: middle; padding: 2px 10px; border-radius: 12px; font-family: var(--sans); font-size: 14px; font-weight: 700;
  color: var(--texto); background: var(--eje-claro, var(--azul-claro)); border: 1px solid var(--eje, var(--azul)); border-left-width: 5px; white-space: nowrap; }
.pantalla-sector .chip-eje { font-size: 15px; }
@media (max-width: 760px) {
  .cabecera { padding: 8px 14px; }
  .cabecera .logo-cabecera { height: 42px; }
  .cabecera .marca .marca-sep, .cabecera .marca .marca-sub { display: none; }
}
.tarjeta-ingreso h1::after, .tarjeta-angosta h1::after { margin-left: auto; margin-right: auto; }
/* H32 · Envíos (reglas y reportes programados): letra y botones grandes, una acción principal por pantalla */
.envios { font-size: 17px; }
.envios .sub, .envios p { font-size: 1rem; }
.envios .nota, .envios small { font-size: .92rem; }
.pestanas-grandes a { font-size: 1.05rem; padding: 10px 16px; }
.boton-grande { font-size: 1.05rem; padding: 12px 24px; }
.envios .formulario label { font-size: 1rem; }
.envios .formulario select, .envios .formulario input[type=text], .envios .formulario input[type=number] { font-size: 1.05rem; padding: 10px 12px; }
.envios .tarjeta.regla, .envios .tarjeta.paso { margin: 0 0 16px; }
.envios fieldset.paso { border: 1px solid var(--linea); display: flex; flex-direction: column; gap: 6px; }
.envios fieldset.paso legend { font-weight: 600; font-size: 1.15rem; color: var(--azul); padding: 0 6px; }
.envios .opcion { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; cursor: pointer; }
.envios .opcion input, .envios .casilla-grande input, .envios .lista-personas input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.envios .sangria { margin-left: 32px; max-width: calc(100% - 32px); }
.envios .lista-personas { max-height: 320px; overflow: auto; border: 1px solid var(--linea); border-radius: 4px; padding: 8px 12px; background: #fff; }
.envios .lista-personas label { margin: 4px 0; font-weight: 400; }
.envios .fila-campos { display: flex; gap: 16px; flex-wrap: wrap; }
.envios .fila-campos label { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.envios .tabla-grande { font-size: 1rem; }
.envios .acciones-fila { display: flex; gap: 6px; flex-wrap: wrap; }
.envios .acciones-fila form { margin: 0; }
.envios .vacio-grande { text-align: center; padding: 32px 22px; }
.texto-alerta { color: #8e1b1b; }

/* H42 · Filtros de Reportes: tres a la vista (Estado, Persona, Agrupar por), el resto en "Más filtros"; chips con ✕ */
.filtros-reporte { background: var(--panel); border: 1px solid var(--linea); border-radius: 6px; padding: 12px 16px; margin: 0 0 16px; font-size: 17px; }
.filtros-reporte .filtros-principales { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; }
.filtros-reporte label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; color: var(--texto); min-width: 200px; }
.filtros-reporte label.fila-check { flex-direction: row; align-items: center; min-width: 0; font-weight: 500; }
.filtros-reporte select { font: inherit; font-weight: 400; padding: 10px 12px; min-height: 44px; border: 1px solid var(--gris); border-radius: 4px; background: #fff; max-width: 340px; }
.filtros-reporte input[type=checkbox] { width: 22px; height: 22px; }
.filtros-reporte .mas-filtros { margin-top: 12px; }
.filtros-reporte .mas-filtros summary { cursor: pointer; font-weight: 600; color: var(--azul); min-height: 36px; display: inline-flex; align-items: center; }
.filtros-reporte .mas-filtros[open] summary { margin-bottom: 10px; }
.con-js .solo-sin-js { display: none; }
.chips-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.chip-filtro { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px; background: var(--azul-claro); color: var(--azul); border: 1px solid #c9d3e6; text-decoration: none; font-weight: 600; font-size: .95rem; }
.chip-filtro:hover { background: #dfe7f3; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.acciones-export { display: flex; flex-wrap: wrap; gap: 8px; }
.agrupado .grupo-tareas { margin: 0 0 18px; }
.agrupado .cab-grupo { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 8px 12px; background: var(--azul-claro); border-left: 4px solid var(--dorado); border-radius: 4px; }
.agrupado .cab-grupo small { font-weight: 500; color: var(--texto-suave); font-size: .92rem; }

/* H41 · Estados de KPI con el color elegido en Datos maestros (paleta institucional) */
.paleta-verde { background: #2E7D4F; } .paleta-azul { background: #1E4079; } .paleta-celeste { background: #00AEEF; }
.paleta-dorado { background: #A88742; } .paleta-petroleo { background: #25414D; } .paleta-verde-azulado { background: #2E545C; }
.paleta-rojo { background: #C62828; } .paleta-bordo { background: #8E1B1B; } .paleta-ocre { background: #B8860B; } .paleta-gris { background: #8A9199; }
.muestra-color { display: inline-block; width: 18px; height: 18px; border-radius: 4px; vertical-align: middle; border: 1px solid rgba(0,0,0,.15); }
.muestra-eje-212B4D { background: #212B4D; } .muestra-eje-2E545C { background: #2E545C; } .muestra-eje-2A8CC4 { background: #2A8CC4; }
.muestra-eje-987B38 { background: #987B38; } .muestra-eje-CBCBCB { background: #CBCBCB; } .muestra-eje-1E4079 { background: #1E4079; }
.muestra-eje-00AEEF { background: #00AEEF; } .muestra-eje-A88742 { background: #A88742; } .muestra-eje-25414D { background: #25414D; }

/* H41 · Datos maestros: botones e inputs grandes, para leer y tocar sin esfuerzo */
.pantalla-maestros { font-size: 16px; }
.pantalla-maestros .boton, .pantalla-maestros .boton-chico { min-height: 44px; padding: 10px 16px; font-size: 16px; }
.pantalla-maestros .tabla td { vertical-align: middle; }
.pantalla-maestros input[type=text], .pantalla-maestros select { font: inherit; font-size: 16px; padding: 8px 10px; min-height: 44px; border: 1px solid var(--gris); border-radius: 4px; background: #fff; color: var(--texto); box-sizing: border-box; }
.pantalla-maestros input.dm-texto { width: 100%; min-width: 220px; }
.pantalla-maestros input.dm-codigo { width: 8em; }
.pantalla-maestros .dm-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pantalla-maestros .dm-acciones form { margin: 0; }
.pantalla-maestros .dm-mover { display: flex; gap: 4px; }
.pantalla-maestros .dm-mover .boton { min-width: 44px; padding: 8px 10px; }
.pantalla-maestros tr.dm-baja td { background: #f6f6f7; color: var(--texto-suave); }
.pantalla-maestros .dm-nuevo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; align-items: end; }
.pantalla-maestros .dm-nuevo label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.pantalla-maestros .dm-nuevo .fila-check { flex-direction: row; font-weight: 600; min-height: 44px; }
.pantalla-maestros .boton-peligro { background: #fff; color: #8E1B1B; border-color: #8E1B1B; }
.pantalla-maestros .boton-peligro:hover { background: #8E1B1B; color: #fff; }
.pantalla-maestros input[type=checkbox] { width: 22px; height: 22px; }

/* Correo de envío: vista previa de la firma */
.firma-previa { max-width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 4px; background: #fff; }

/* Reportes programados: prueba a la persona elegida */
.prueba-a { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.prueba-a select { max-width: 200px; }
.firma-previa-html { width: 100%; min-height: 160px; border: 1px solid var(--linea); border-radius: 4px; background: #fff; }
.codigo-area { font-family: Consolas, monospace; font-size: 14px; width: 100%; }

/* Punto 4: responsables de a uno */
.persona-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.persona-fila select { min-width: 240px; font-size: 17px; }
.persona-otro { min-width: 220px; font-size: 17px; }
.con-js .persona-otro.oculta { display: none; }
fieldset.subresponsables { border: 1px solid var(--linea); border-radius: 6px; padding: 8px 12px 12px; margin: 10px 0; }
fieldset.subresponsables legend { font-weight: 600; padding: 0 6px; }
.solo-con-js { display: none; }
.con-js .solo-con-js { display: inline-flex; }