:root {
  --fondo: #f3f5f8; --superficie: #fff; --borde: #dfe4ea; --texto: #1c2733; --tenue: #66727f;
  --primario: #1d5fbf; --primario-osc: #164b98; --marca: #123b6d;
  --exito: #1f8a4c; --peligro: #c23934; --alerta: #b7791f;
  --radio: 8px; --sombra: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}
* { 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; }
a { color: var(--primario); }
h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2 { font-size: 1.05rem; margin: 0 0 12px; }
.tenue { color: var(--tenue); }
.pequeno, small { font-size: .82rem; }
code { background: #eef2f7; padding: 2px 6px; border-radius: 4px; font-size: .95em; }

.barra { display: flex; align-items: center; gap: 24px; background: var(--marca); color: #fff; padding: 0 24px; min-height: 56px; flex-wrap: wrap; }
.barra a { color: #fff; text-decoration: none; }
.marca { font-weight: 600; display: flex; align-items: center; gap: 10px; }
.logo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: #fff; color: var(--marca); font-weight: 700; font-size: .8rem; }
.logo.grande { width: 48px; height: 48px; font-size: 1.1rem; background: var(--marca); color: #fff; }
.barra nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.barra nav a { padding: 8px 12px; border-radius: 6px; opacity: .85; }
.barra nav a:hover, .barra nav a.activo { background: rgba(255,255,255,.14); opacity: 1; }
.cuenta { display: flex; align-items: center; gap: 12px; }
.cuenta a { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.cuenta small { opacity: .75; }
.cuenta .btn.enlace { color: #fff; }

.contenedor { max-width: 1280px; margin: 0 auto; padding: 24px; }
.migas { margin: 0 0 8px; }
.migas a { text-decoration: none; }
.encabezado { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.encabezado-acciones { display: flex; gap: 10px; align-items: center; }
.encabezado-tabla { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.encabezado-tabla h2 { margin: 0; }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px; margin-bottom: 20px; }
.tarjeta.sin-relleno { padding: 0; overflow: hidden; }
.tarjeta.centrada { max-width: 520px; margin: 60px auto; text-align: center; }
.tarjeta.estrecha { max-width: 460px; }
.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 20px; }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.cifra { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid #9aa5b1; border-radius: var(--radio); padding: 12px 16px; color: var(--tenue); text-decoration: none; font-size: .88rem; }
.cifra span { display: block; font-size: 1.6rem; font-weight: 600; color: var(--texto); }
.cifra.enviada { border-left-color: var(--alerta); } .cifra.aprobada { border-left-color: var(--exito); }
.cifra.rechazada { border-left-color: var(--peligro); } .cifra.borrador { border-left-color: var(--primario); }
a.cifra:hover { box-shadow: var(--sombra); }

.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde); background: #fff; color: var(--texto); padding: 8px 14px; border-radius: 6px; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: #f5f7fa; }
.btn.primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn.primario:hover { background: var(--primario-osc); }
.btn.exito { background: var(--exito); border-color: var(--exito); color: #fff; }
.btn.peligro { border-color: var(--peligro); color: var(--peligro); }
.btn.peligro:hover { background: #fdf2f2; }
.btn.enlace { border: 0; background: none; padding: 4px 6px; color: var(--primario); }
.btn.enlace.peligro { color: var(--peligro); }
.btn.pequeno { padding: 5px 10px; font-size: .85rem; }
.btn.ancho { width: 100%; justify-content: center; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }

input, select, textarea { font: inherit; color: inherit; border: 1px solid #c9d1da; border-radius: 6px; padding: 7px 10px; background: #fff; min-width: 0; }
.formulario { display: grid; gap: 14px; }
.formulario label, .fila-form label { display: grid; gap: 4px; font-size: .88rem; font-weight: 500; }
.fila-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.fila-form .crece { flex: 1; min-width: 200px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.der { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.izq { display: flex; gap: 10px; flex-wrap: wrap; }

.aviso { padding: 12px 16px; border-radius: var(--radio); margin-bottom: 16px; border: 1px solid; }
.aviso.ok { background: #edf8f1; border-color: #b6e2c6; color: #145c33; }
.aviso.error { background: #fdf0ef; border-color: #f2c2bf; color: #8a1f1b; }
.aviso.info { background: #eef4fc; border-color: #c4d8f3; color: #1a4278; }

.estado, .etiqueta { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #eef1f4; color: #4a5562; white-space: nowrap; }
.estado.borrador { background: #e8f0fb; color: #1d4f99; }
.estado.enviada { background: #fdf3e1; color: #8a5a10; }
.estado.aprobada, .etiqueta.bien { background: #e5f5ec; color: #17673a; }
.estado.rechazada, .etiqueta.alerta { background: #fbe9e8; color: #9b2621; }

.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--borde); background: #f8fafc; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid #edf0f3; vertical-align: middle; }
.tabla tbody tr:hover { background: #fafbfd; }
.tabla .num { text-align: center; }
.tabla .acciones { text-align: right; white-space: nowrap; }
.tabla .acciones .btn + .btn { margin-left: 6px; }
.vacio { color: var(--tenue); text-align: center; padding: 24px; }

.matriz th { text-transform: none; font-size: .8rem; letter-spacing: 0; min-width: 110px; vertical-align: bottom; }
.matriz .fijo { position: sticky; left: 0; background: #fff; z-index: 1; min-width: 200px; box-shadow: 1px 0 0 var(--borde); }
.matriz thead .fijo { background: #f8fafc; }
.matriz input.celda { width: 84px; text-align: center; }
.matriz input.celda.invalida { border-color: var(--peligro); background: #fdf0ef; }
.matriz input.obs { width: 100%; min-width: 180px; }
.matriz .total { background: #f6f9fd; font-size: 1.02rem; }
.barra-acciones { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -8px 0 20px; position: sticky; bottom: 0; background: linear-gradient(transparent, var(--fondo) 30%); padding: 16px 0 12px; }
.aprobacion { border-top: 4px solid var(--alerta); }

.tabla.editable td { padding: 6px 12px; }
.fila-tabla { display: grid; grid-template-columns: 70px 1.3fr 2fr 90px 80px auto; gap: 8px; align-items: center; }
.fila-tabla.personal { grid-template-columns: 140px 1.5fr 1.2fr 80px auto; }
.fila-tabla.usuarios { grid-template-columns: 1.1fr 1.5fr 1.1fr 130px 70px auto; }
.fila-con-extra { display: flex; gap: 8px; align-items: center; }
.fila-con-extra .fila-tabla { flex: 1; }
.tabla.editable thead { display: none; }
.inactivo { opacity: .55; }
.nueva { background: #f8fbff; }
.corto { width: 100%; }

.lista-descargas { list-style: none; margin: 0; padding: 0; }
.lista-descargas li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #edf0f3; }
.historial { list-style: none; margin: 0; padding: 0; }
.historial li { padding: 8px 0; border-bottom: 1px solid #edf0f3; }
.cuerpo-correo { white-space: pre-wrap; font: .85rem/1.4 ui-monospace, Consolas, monospace; background: #f6f8fa; padding: 10px; border-radius: 6px; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; margin: -24px; }
.login .tarjeta { width: 100%; max-width: 400px; }
.login-marca { text-align: center; margin-bottom: 20px; }
.login-marca h1 { margin-top: 10px; font-size: 1.3rem; }

@media (max-width: 760px) {
  .contenedor { padding: 16px; }
  .barra { padding: 10px 16px; gap: 8px; }
  .cuenta { width: 100%; justify-content: space-between; }
  .cuenta a { text-align: left; }
  .fila-tabla, .fila-tabla.personal, .fila-tabla.usuarios { grid-template-columns: 1fr 1fr; }
  .fila-con-extra { flex-direction: column; align-items: stretch; }
  .barra-acciones { flex-direction: column; }
  .rejilla-2 { grid-template-columns: 1fr; }
}
.matriz tbody tr:hover .fijo { background: #fafbfd; }
@media (max-width: 760px) { .matriz .fijo { min-width: 140px; } .barra nav { order: 3; width: 100%; } }
.modal { border: 0; border-radius: 10px; padding: 24px; width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 20px 50px rgba(16,24,40,.25); }
.modal::backdrop { background: rgba(16,24,40,.45); }
.modal td.falta { color: var(--peligro); font-weight: 600; background: #fdf0ef; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.fila-aviso { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- Evaluación por persona ---- */
h2.seccion { margin: 8px 0 12px; }
.tarjeta-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px 20px 8px; }
.tarjeta-titulo h2 { margin: 0; }
.tabla.resumen tfoot td, .instrumentos-ev tfoot td { background: #e9f5f5; color: #0b4b4b; border-top: 1px solid var(--borde); }
.cal { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.cal.excelente, .cal.satisfactorio { background: #c6efce; color: #11592a; }
.cal.mejora { background: #ffeb9c; color: #7a5a00; }
.cal.deficiente { background: #ffc7ce; color: #8a1622; }
.estatus { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #eef1f4; color: #4a5562; white-space: nowrap; }
.estatus.conforme, .estatus.aprobado { background: #e5f5ec; color: #17673a; }
.estatus.observado { background: #fbe9e8; color: #9b2621; }
.persona { padding: 0; overflow: hidden; }
.persona.observada { border-color: #f2c2bf; box-shadow: 0 0 0 2px #fbe9e8; }
.persona-cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 20px; background: #eaf6f6; border-bottom: 1px solid var(--borde); }
.persona-cab h3 { margin: 0; font-size: 1.05rem; color: #0b4b4b; }
.persona-cab p { margin: 2px 0 0; }
.persona-res { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.persona-res > div { display: grid; gap: 2px; text-align: center; }
.persona-res small { color: var(--tenue); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.persona-res strong { font-size: 1.05rem; }
.periodo-grid { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px 14px; padding: 14px 20px; }
.periodo-grid label, .periodo-grid > div { display: grid; gap: 4px; font-size: .82rem; font-weight: 500; }
.periodo-grid small { color: var(--tenue); }
.ancho-total { grid-column: 1 / -1; }
.instrumentos-ev th:first-child { width: 50%; }
.instrumentos-ev td small { display: inline-block; margin-top: 2px; line-height: 1.35; }
.sufijo { display: inline-flex; align-items: center; gap: 4px; }
.instrumentos-ev input.celda { width: 80px; text-align: center; }
.instrumentos-ev input.celda.invalida { border-color: var(--peligro); background: #fdf0ef; }
.persona-pie { display: flex; gap: 12px; align-items: flex-end; padding: 12px 20px 16px; flex-wrap: wrap; }
.persona-pie label { display: grid; gap: 4px; font-size: .82rem; font-weight: 500; }
.persona-pie .crece { flex: 1; min-width: 220px; }
.persona-pie p { margin: 0; }
.modal td.advertencia { color: var(--alerta); font-weight: 600; }

/* ---- Configuración ---- */
.lista-personal { display: grid; gap: 10px; }
.ficha { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; display: grid; gap: 8px; }
.ficha.sin-perfil { border-color: #f2c2bf; }
.ficha.nueva { background: #f8fbff; border-style: dashed; }
.ficha-grid { display: grid; grid-template-columns: 70px 2fr 1fr 1fr 1.6fr 1fr 80px; gap: 8px 10px; }
.ficha-grid label { display: grid; gap: 3px; font-size: .78rem; font-weight: 500; color: var(--tenue); }
.ficha-grid .ancho2 { grid-column: span 1; }
.perfil { border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; margin-bottom: 14px; }
.perfil p { margin: 4px 0 8px; }
.titulo-input { font-weight: 600; min-width: 260px; }
.fila-tabla.instrumentos { grid-template-columns: 60px 1.2fr 2.4fr 100px auto; align-items: start; }
.fila-tabla.instrumentos textarea { resize: vertical; min-height: 38px; }
.nuevo-perfil { margin-top: 8px; }

@media (max-width: 900px) {
  .ficha-grid { grid-template-columns: 1fr 1fr; }
  .ficha-grid .ancho2 { grid-column: 1 / -1; }
  .periodo-grid { grid-template-columns: 1fr 1fr; }
  .fila-tabla.instrumentos { grid-template-columns: 1fr 1fr; }
  .persona-res { gap: 12px; }
}

/* ---- Usuarios por rol y bitácora ---- */
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--borde); }
.pestanas a { padding: 10px 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; text-decoration: none; color: var(--tenue); font-weight: 500; }
.pestanas a.activa { background: var(--superficie); border-color: var(--borde); color: var(--texto); margin-bottom: -1px; }
.contador { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 999px; background: #eef1f4; font-size: .78rem; text-align: center; }
.pestana-cuerpo { border-top-left-radius: 0; }
h2.separado { margin-top: 24px; }
.usuarios-grid { grid-template-columns: 1.3fr 1.6fr 1.1fr 1fr 110px auto; align-items: end; }
.boton-fila { align-self: end; }
.ficha-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px dashed var(--borde); padding-top: 6px; }
.nowrap { white-space: nowrap; }
.etiqueta.cat { font-weight: 600; }
.cat-seguridad .etiqueta.cat { background: #fdf3e1; color: #8a5a10; }
.fila-alerta { background: #fdf6f5; }
.fila-alerta .etiqueta.cat { background: #fbe9e8; color: #9b2621; }
.marca-alerta { color: var(--peligro); }
.bitacora td.accion { min-width: 210px; }
.bitacora td:nth-child(2) { min-width: 200px; }
.cat-aprobacion .etiqueta.cat { background: #e5f5ec; color: #17673a; }
.cat-usuarios .etiqueta.cat { background: #e8f0fb; color: #1d4f99; }
.cat-descargas .etiqueta.cat { background: #f1ecfb; color: #5b3a9b; }
.paginacion { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
@media (max-width: 900px) { .usuarios-grid { grid-template-columns: 1fr 1fr; } }

/* ---- Quincena en curso ---- */
.quincena-actual { border-top: 4px solid var(--primario); }
.estado-gerencias { display: grid; gap: 8px; margin-bottom: 8px; }
.estado-gerencia { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--borde); border-radius: var(--radio); }
.estado-gerencia > div:first-child { display: grid; }
.estado-gerencia.sin, .estado-gerencia.borrador, .estado-gerencia.rechazada { border-left: 4px solid var(--alerta); }
.estado-gerencia.enviada { border-left: 4px solid var(--primario); }
.estado-gerencia.aprobada { border-left: 4px solid var(--exito); }

/* =========================================================
   Personal (Configuración) — tarjetas, KPIs, filtros, diálogo
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.personal { margin-bottom: 28px; }
.personal-cab {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 24px 28px; border-radius: 14px; color: #fff; margin-bottom: 16px;
  background: radial-gradient(120% 140% at 100% 0%, #1f7a7a 0%, #0e4f6b 45%, #123b6d 100%);
  box-shadow: 0 10px 30px rgba(18, 59, 109, .25);
}
.personal-cab h2 { font-size: 1.6rem; margin: 2px 0 4px; }
.personal-cab .tenue { color: rgba(255,255,255,.8); margin: 0; max-width: 60ch; }
.sobretitulo { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: #9fe3e3; }
.btn.grande { padding: 11px 18px; font-size: 1rem; border-radius: 10px; }
.personal-cab .btn.primario { background: #fff; color: #123b6d; border-color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.personal-cab .btn.primario:hover { background: #eaf6f6; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { display: flex; align-items: center; gap: 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; box-shadow: var(--sombra); }
.kpi strong { display: block; font-size: 1.35rem; line-height: 1.1; }
.kpi small { color: var(--tenue); }
.kpi-icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #e8f0fb; color: #1d4f99; font-weight: 800; font-size: 1.05rem; flex: none; }
.kpi-icono.verde { background: #e5f5ec; color: #17673a; }
.kpi-icono.ambar { background: #fdf3e1; color: #8a5a10; }
.kpi-icono.rojo { background: #fbe9e8; color: #9b2621; }
.kpi.aviso-kpi { border-color: #f1d9a8; background: linear-gradient(#fffaf0, #fff); }
.kpi.error-kpi { border-color: #f2c2bf; background: linear-gradient(#fff6f5, #fff); }

.barra-filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.buscador { position: relative; flex: 1 1 280px; }
.buscador input { width: 100%; padding: 10px 14px 10px 38px; border-radius: 10px; background: #fff; }
.buscador .lupa { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--tenue); font-size: 1.2rem; }
.barra-filtros select { padding: 10px 12px; border-radius: 10px; }
.segmentado { display: inline-flex; background: #e9edf2; border-radius: 10px; padding: 3px; }
.segmentado button { border: 0; background: transparent; padding: 7px 12px; border-radius: 8px; font: inherit; font-size: .88rem; color: var(--tenue); cursor: pointer; }
.segmentado button.activo { background: #fff; color: var(--texto); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.12); }

.tarjetas-personal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.persona-tarjeta {
  --acento: hsl(var(--h) 55% 45%);
  position: relative; display: flex; flex-direction: column; gap: 12px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 18px;
  box-shadow: var(--sombra); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  overflow: hidden;
}
.persona-tarjeta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--acento), hsl(calc(var(--h) + 40) 60% 55%)); }
.persona-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,24,40,.12); border-color: hsl(var(--h) 40% 80%); }
.persona-tarjeta.inactiva { opacity: .6; filter: grayscale(.6); }
.pt-cab { display: flex; align-items: center; gap: 12px; }
.avatar {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
  font-weight: 700; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h, 200) 60% 48%), hsl(calc(var(--h, 200) + 35) 65% 38%));
  box-shadow: 0 3px 8px hsl(var(--h, 200) 50% 30% / .35);
}
.avatar.nuevo { background: linear-gradient(135deg, #1d5fbf, #1f7a7a); font-size: 1.3rem; }
.pt-id { min-width: 0; flex: 1; }
.pt-id h3 { margin: 0; font-size: 1rem; line-height: 1.25; }
.pt-id p { margin: 2px 0 0; color: var(--tenue); font-size: .85rem; }
.pt-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 12px; background: #f7f9fb; border-radius: 10px; }
.pt-datos dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); }
.pt-datos dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.monto { color: #17673a; font-size: 1.05rem; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.pill.ambar { background: #fdf3e1; color: #8a5a10; }
.pill.rojo { background: #fbe9e8; color: #9b2621; }
.pill.gris { background: #eef1f4; color: #4a5562; }
.perfil-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; font-size: .8rem; font-weight: 600; background: hsl(var(--hp) 60% 95%); color: hsl(var(--hp) 55% 28%); border: 1px solid hsl(var(--hp) 45% 85%); }
.perfil-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--hp) 55% 45%); }
.pt-alcance { margin: 0; font-size: .84rem; color: var(--tenue); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.pt-pie { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; border-top: 1px solid #edf0f3; }
.vacio-grande { text-align: center; padding: 40px 20px; background: var(--superficie); border: 2px dashed var(--borde); border-radius: 14px; }
.vacio-grande > span { font-size: 2.4rem; }
.vacio-grande h3 { margin: 8px 0 4px; }

/* Diálogo de persona */
.dlg { border: 0; border-radius: 16px; padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-shadow: 0 24px 60px rgba(16,24,40,.3); }
.dlg::backdrop { background: rgba(15, 30, 50, .5); backdrop-filter: blur(3px); }
.dlg[open] { animation: aparecer .18s ease-out; }
@keyframes aparecer { from { opacity: 0; translate: 0 12px; scale: .98; } }
@media (prefers-reduced-motion: reduce) { .dlg[open] { animation: none; } .persona-tarjeta { transition: none; } }
.dlg-cab { display: flex; align-items: center; gap: 14px; padding: 20px 24px; background: linear-gradient(135deg, #eef7f7, #eef3fb); border-bottom: 1px solid var(--borde); }
.dlg-cab h2 { margin: 0; font-size: 1.15rem; }
.dlg-cab p { margin: 2px 0 0; }
.dlg-cab > div { flex: 1; min-width: 0; }
.cerrar { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; color: var(--tenue); cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.cerrar:hover { background: rgba(0,0,0,.06); color: var(--texto); }
.form-persona .campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 20px 24px; }
.form-persona label { display: grid; gap: 6px; font-size: .84rem; font-weight: 600; color: #3b4a5a; }
.form-persona input, .form-persona select, .form-persona textarea { padding: 10px 12px; border-radius: 10px; font-weight: 400; width: 100%; }
.form-persona textarea { resize: vertical; }
.con-prefijo { position: relative; display: block; }
.con-prefijo > span { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--tenue); font-weight: 600; }
.con-prefijo input { padding-left: 26px; }
.dlg-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--borde); }
@media (max-width: 560px) {
  .form-persona .campos { grid-template-columns: 1fr; }
  .personal-cab { padding: 20px; }
  .personal-cab .btn.grande { width: 100%; justify-content: center; }
}
[hidden] { display: none !important; }
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 10px 12px; gap: 8px; }
  .kpi-icono { width: 32px; height: 32px; }
  .kpi strong { font-size: 1.1rem; }
  .barra-filtros select, .segmentado { flex: 1 1 100%; }
  .segmentado button { flex: 1; }
}

/* =========================================================
   Carga de indicadores por persona (uno debajo del otro)
   ========================================================= */
.seccion-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 8px 0 12px; }
.seccion-cab h2 { margin: 0; }
.seccion-cab p { margin: 0; max-width: 70ch; }
.persona-carga { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); margin-bottom: 16px; overflow: hidden; scroll-margin-top: 16px; }
.persona-carga.observada { border-color: #f2c2bf; box-shadow: 0 0 0 3px #fbe9e8; }
.persona-carga.completa .pc-num { background: var(--exito); }
.pc-cab { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: linear-gradient(135deg, #eef7f7, #f3f6fb); border-bottom: 1px solid var(--borde); }
.pc-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0e6b6b; color: #fff; font-weight: 700; flex: none; transition: background .2s; }
.pc-id { flex: 1; min-width: 0; }
.pc-id h3 { margin: 0; font-size: 1.05rem; color: #0b4b4b; }
.pc-id p { margin: 2px 0 0; color: var(--tenue); font-size: .84rem; }
.pc-total { display: grid; justify-items: end; gap: 4px; }
.pc-total strong { font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; color: #0b4b4b; }

.instrumentos-lista { list-style: none; margin: 0; padding: 6px 20px; }
.inst { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px dashed #e3e8ee; }
.inst:last-child { border-bottom: 0; }
.inst-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.inst-nombre { font-weight: 600; }
.inst-desc { font-size: .8rem; color: var(--tenue); line-height: 1.35; }
.progreso { display: block; height: 6px; border-radius: 999px; background: #edf0f3; overflow: hidden; margin-top: 4px; max-width: 420px; }
.progreso-relleno { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1f7a7a, #2aa198); transition: width .2s ease; }
.inst.sobre .progreso-relleno { background: linear-gradient(90deg, #1f8a4c, #43b36b); }
.inst-valor { display: flex; align-items: baseline; gap: 6px; flex: none; }
.inst-valor .de { color: var(--tenue); font-weight: 600; min-width: 3.2em; }
input.pts { width: 92px; padding: 10px 12px; font-size: 1.15rem; font-weight: 700; text-align: center; border-radius: 10px; border: 2px solid #c9d1da; font-variant-numeric: tabular-nums; }
input.pts:focus { border-color: var(--primario); outline: none; box-shadow: 0 0 0 4px rgba(29, 95, 191, .15); }
.inst.lleno input.pts { border-color: #9fd3c7; background: #f4fbf9; }
input.pts.invalida { border-color: var(--peligro); background: #fdf0ef; }
.pts-leer { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; }

.pc-suma { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 20px; background: #e9f5f5; border-top: 1px solid var(--borde); color: #0b4b4b; }
.pc-suma > span:first-child { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; }
.suma-valor { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.suma-valor strong { font-size: 1.35rem; }
.pc-ind { margin-left: auto; }
.pc-estatus { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .85rem; }

.pc-mas { border-top: 1px solid var(--borde); }
.pc-mas summary { cursor: pointer; padding: 10px 20px; font-size: .88rem; font-weight: 600; color: var(--primario); list-style-position: inside; }
.pc-mas summary:hover { background: #f8fafc; }
.pc-mas .periodo-grid { padding-top: 4px; }

@media (max-width: 560px) {
  .pc-cab { padding: 14px; }
  .instrumentos-lista { padding: 4px 14px; }
  .inst { gap: 10px; }
  input.pts { width: 76px; font-size: 1.05rem; }
  .pc-ind { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .progreso-relleno, .pc-num { transition: none; } }

/* =========================================================
   Usuarios
   ========================================================= */
.usuarios-cab { background: radial-gradient(120% 140% at 100% 0%, #5b3a9b 0%, #2d3f8f 45%, #123b6d 100%); }
.usuarios-cab h1 { font-size: 1.6rem; margin: 2px 0 4px; }
.usuarios-cab a { color: #fff; }
.pill.verde { background: #e5f5ec; color: #17673a; }

.clave-temporal { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; border-radius: 12px; background: linear-gradient(135deg, #fff8e6, #fffdf6); border: 1px solid #f1d9a8; box-shadow: var(--sombra); }
.ct-icono { font-size: 1.6rem; }
.ct-texto { flex: 1; min-width: 220px; display: grid; gap: 2px; }
.ct-texto span { font-size: .86rem; color: #6b5420; }
.ct-clave { font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; padding: 8px 14px; border-radius: 8px; background: #fff; border: 1px dashed #d9b766; user-select: all; }

.roles-filtro { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.rol-tarjeta {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icono num" "nombre nombre" "desc desc"; align-items: center; gap: 4px 10px;
  text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 14px 16px; border-radius: 12px;
  background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.rol-tarjeta:hover { transform: translateY(-1px); border-color: hsl(var(--hr) 45% 75%); }
.rol-tarjeta.activa { border-color: hsl(var(--hr) 55% 50%); box-shadow: 0 0 0 3px hsl(var(--hr) 60% 50% / .18), var(--sombra); background: linear-gradient(hsl(var(--hr) 70% 98%), #fff); }
.rt-icono { grid-area: icono; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: hsl(var(--hr) 60% 94%); font-size: 1.1rem; }
.rt-num { grid-area: num; font-size: 1.5rem; font-weight: 700; justify-self: end; color: hsl(var(--hr) 50% 30%); }
.rt-nombre { grid-area: nombre; font-weight: 700; margin-top: 4px; }
.rt-desc { grid-area: desc; font-size: .78rem; color: var(--tenue); line-height: 1.35; }

.usuario-tarjeta .correo { word-break: break-all; }
.ut-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rol-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; font-size: .8rem; font-weight: 700; background: hsl(var(--hr) 60% 95%); color: hsl(var(--hr) 55% 28%); border: 1px solid hsl(var(--hr) 45% 85%); }

.elegir-rol { border: 0; margin: 0; padding: 18px 24px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.elegir-rol legend { font-size: .84rem; font-weight: 600; color: #3b4a5a; padding: 0; margin-bottom: 8px; }
.opcion-rol { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icono nombre" "desc desc"; gap: 4px 10px; align-items: center; padding: 12px 14px; border: 2px solid var(--borde); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.opcion-rol input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-rol:has(input:checked) { border-color: hsl(var(--hr) 55% 50%); background: hsl(var(--hr) 70% 97%); }
.opcion-rol:has(input:focus-visible) { outline: 2px solid var(--primario); outline-offset: 2px; }
.or-icono { grid-area: icono; font-size: 1.2rem; }
.or-nombre { grid-area: nombre; font-weight: 700; }
.or-desc { grid-area: desc; font-size: .76rem; color: var(--tenue); line-height: 1.35; }
.dlg-chico { width: min(480px, calc(100vw - 32px)); }
.dlg-cuerpo { padding: 20px 24px; margin: 0; line-height: 1.5; }
@media (max-width: 560px) { .elegir-rol { grid-template-columns: 1fr; } .roles-filtro { grid-template-columns: 1fr 1fr; } .rt-desc { display: none; } }
.pt-pie .izq { flex-wrap: nowrap; gap: 6px; }
.usuario-tarjeta .pt-datos dd { font-size: .88rem; }
.rt-nombre { overflow-wrap: anywhere; } @media (max-width: 560px) { .rt-nombre { font-size: .9rem; } }

/* =========================================================
   Cuadro de indicadores (personas × indicadores)
   ========================================================= */
.indicadores-cab { background: radial-gradient(120% 140% at 100% 0%, #1f8a4c 0%, #0e6b6b 45%, #123b6d 100%); }
.indicadores-cab h1 { font-size: 1.6rem; margin: 2px 0 4px; }
.lista-errores { margin: 6px 0 0; padding-left: 20px; }
.cuadro-marco { overflow: auto; max-height: 72vh; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); }
.cuadro { border-collapse: separate; border-spacing: 0; width: 100%; min-width: max-content; }
.cuadro th, .cuadro td { border-bottom: 1px solid #edf0f3; padding: 8px 10px; background: var(--superficie); }
.cuadro thead th { position: sticky; top: 0; z-index: 2; background: #0e4f6b; color: #fff; vertical-align: bottom; border-bottom: 0; }
.cuadro .c-persona { position: sticky; left: 0; z-index: 1; text-align: left; min-width: 240px; max-width: 280px; box-shadow: 1px 0 0 var(--borde); }
.cuadro thead .c-persona { z-index: 3; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.cuadro tbody tr:hover > * { background: #f6fafb; }
.cuadro th.c-persona { font-weight: 400; }
.c-persona { display: table-cell; }
.cuadro tbody .c-persona, .cuadro tfoot .c-persona { white-space: nowrap; }
.cuadro .c-persona > * { vertical-align: middle; }
.avatar.mini { display: inline-grid; width: 34px; height: 34px; font-size: .78rem; margin-right: 10px; }
.cp-txt { display: inline-grid; vertical-align: middle; max-width: 200px; white-space: normal; }
.cp-txt small { color: var(--tenue); font-size: .76rem; }
.c-ind { text-align: center; min-width: 128px; max-width: 150px; }
.ind-cab { display: flex; align-items: flex-start; justify-content: center; gap: 6px; width: 100%; border: 0; background: transparent; color: #fff; font: inherit; font-size: .8rem; font-weight: 600; line-height: 1.25; cursor: pointer; padding: 4px; border-radius: 6px; text-align: center; }
.ind-cab:hover { background: rgba(255,255,255,.14); }
.ind-editar { opacity: .6; font-size: .8rem; }
.celda-pct { display: inline-flex; align-items: center; gap: 2px; }
.celda-pct input { width: 74px; padding: 8px 8px; text-align: center; font-size: 1rem; font-weight: 700; border-radius: 8px; border: 2px solid #dbe2e9; font-variant-numeric: tabular-nums; background: #fbfcfd; }
.celda-pct input:not(:placeholder-shown):not([value=""]) { background: #fff; }
.celda-pct input:focus { border-color: var(--primario); outline: none; box-shadow: 0 0 0 3px rgba(29,95,191,.15); }
.celda-pct input.con-valor { border-color: #9fd3c7; background: #f4fbf9; }
.celda-pct input.invalida { border-color: var(--peligro); background: #fdf0ef; }
.celda-pct span { color: var(--tenue); font-weight: 600; }
.c-total { position: sticky; right: 0; z-index: 1; text-align: center; min-width: 100px; box-shadow: -1px 0 0 var(--borde); }
.cuadro thead .c-total { z-index: 3; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.total-fila { display: inline-block; min-width: 70px; padding: 6px 10px; border-radius: 999px; font-weight: 800; font-variant-numeric: tabular-nums; }
.total-fila.ok { background: #e5f5ec; color: #17673a; }
.total-fila.ok::before { content: "✓ "; }
.total-fila.mal { background: #fbe9e8; color: #9b2621; }
.total-fila.vacia { background: #eef1f4; color: #66727f; }
tr.fila-mal > .c-persona { box-shadow: inset 4px 0 0 var(--peligro), 1px 0 0 var(--borde); }
.cuadro tfoot td, .cuadro tfoot th { position: sticky; bottom: 0; background: #f2f7f9; border-top: 2px solid var(--borde); z-index: 1; }
.cuadro tfoot .c-persona { z-index: 2; }
.aplicar-col { display: inline-flex; gap: 4px; align-items: center; }
.aplicar-col input { width: 64px; padding: 6px; text-align: center; border-radius: 8px; }
.cuadro-acciones { margin-top: 12px; }
.resumen-cuadro { font-weight: 600; }
.resumen-cuadro.ok { color: var(--exito); }
.resumen-cuadro.mal { color: var(--peligro); }
.crece { flex: 1; }
kbd { font: .8rem ui-monospace, monospace; padding: 1px 6px; border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 4px; background: #fff; }
@media (max-width: 560px) { .cuadro .c-persona { min-width: 170px; } .cp-txt small { display: none; } .avatar.mini { display: none; } }
.acceso-cuadro { display: flex; align-items: center; gap: 16px; padding: 18px 22px; margin-bottom: 20px; border-radius: 14px; text-decoration: none; color: var(--texto); background: linear-gradient(135deg, #eef7f2, #eef3fb); border: 1px solid #cfe5dc; box-shadow: var(--sombra); transition: transform .15s, box-shadow .15s; }
.acceso-cuadro:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(16,24,40,.12); }
.ac-icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #fff; font-size: 1.5rem; box-shadow: var(--sombra); flex: none; }
.ac-txt { display: grid; gap: 2px; flex: 1; }
.ac-txt span { color: var(--tenue); font-size: .9rem; }
.ac-ir { font-size: 1.4rem; color: var(--primario); }
.nota-campo { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border-radius: 10px; background: #eef4fc; color: #1a4278; font-size: .84rem; }
.pt-perfil { display: flex; flex-wrap: wrap; gap: 6px; }
.perfil-chip strong { font-variant-numeric: tabular-nums; }
a.kpi { text-decoration: none; color: inherit; }
.cuadro-acciones { position: static; background: none; padding: 0; margin: 14px 0 8px; }

/* ---- Gerencias ---- */
.gerencias-cab { background: radial-gradient(120% 140% at 100% 0%, #b7791f 0%, #8a3f5a 40%, #123b6d 100%); }
.gerencias-cab h1 { font-size: 1.6rem; margin: 2px 0 4px; }
.tarjetas-gerencia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.gerencia-tarjeta { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden; }
.gerencia-tarjeta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, hsl(var(--h) 55% 45%), hsl(calc(var(--h) + 40) 60% 55%)); }
.gt-cab { display: flex; align-items: flex-start; gap: 12px; }
.gt-codigo { display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 8px; border-radius: 12px; color: #fff; font-weight: 800; letter-spacing: .03em; background: linear-gradient(135deg, hsl(var(--h) 60% 45%), hsl(calc(var(--h) + 35) 65% 35%)); box-shadow: 0 3px 8px hsl(var(--h) 50% 30% / .3); flex: none; }
.gt-id { flex: 1; min-width: 0; }
.gt-id h2 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.gt-id p { margin: 2px 0 0; color: var(--tenue); font-size: .85rem; }
.gt-gerente { display: flex; align-items: center; padding: 10px 12px; border-radius: 12px; background: #f7f9fb; }
.avatar.mini.sin { background: #d5dbe2; box-shadow: none; color: #66727f; }
.gt-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.gt-cifras div { text-align: center; padding: 8px; border: 1px solid #edf0f3; border-radius: 10px; }
.gt-cifras dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }
.gt-cifras dd { margin: 2px 0 0; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.gt-aviso { margin: 0; align-self: flex-start; }
.gt-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid #edf0f3; }
/* Porcentaje base del indicador y diferencia por persona */
.cuadro thead .c-ind { vertical-align: top; }
.ind-base { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: #fff; color: #0e4f6b; font-weight: 800; font-size: .85rem; font-variant-numeric: tabular-nums; }
.ind-base.sin { background: rgba(255,255,255,.2); color: #fff; font-weight: 600; font-size: .72rem; }
.cuadro td.c-ind { position: relative; }
.celda-pct input::placeholder { color: #b5bfca; font-weight: 600; }
.dif { position: absolute; top: 2px; right: 6px; font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dif.mas { color: #17673a; }
.dif.menos { color: #a66a00; }
.celda-pct input.sobre-base { border-color: #6cc08b; background: #eefaf2; }
.celda-pct input.bajo-base { border-color: #e7c27a; background: #fffaf0; }
/* Celdas "No aplica" */
.cuadro td.c-ind.no-aplica { background: repeating-linear-gradient(135deg, #fafbfc 0 6px, #f3f5f8 6px 12px); }
.no-aplica .celda-pct, .no-aplica .quitar-ind, .no-aplica .dif { display: none; }
td.c-ind:not(.no-aplica) .activar-ind { display: none; }
.activar-ind { border: 1px dashed #c9d1da; background: transparent; color: #8592a0; font: inherit; font-size: .76rem; font-weight: 600; padding: 6px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.activar-ind:hover, .activar-ind:focus-visible { border-color: var(--primario); color: var(--primario); background: #fff; }
.activar-ind span { font-weight: 800; }
.quitar-ind { position: absolute; bottom: 2px; right: 4px; width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #a0aab5; font-size: .9rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; }
td.c-ind:hover .quitar-ind, .quitar-ind:focus-visible { opacity: 1; }
.quitar-ind:hover { background: #fbe9e8; color: var(--peligro); }
@media (hover: none) { .quitar-ind { opacity: .7; } }
.cuadro tfoot td.c-ind { position: sticky; }

/* =========================================================
   Indicadores de la quincena (cuadro de envío, minimizable)
   ========================================================= */
.q-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra); margin-bottom: 18px; overflow: hidden; }
.q-card.enviada { border-color: #b9dcc7; }
.q-card.rechazada { border-color: #f2c2bf; }
.q-resumen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px; cursor: pointer; list-style: none; }
.q-resumen::-webkit-details-marker { display: none; }
.q-resumen:hover { background: #f8fafc; }
.q-icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; font-size: 1.1rem; color: #fff; background: var(--primario); flex: none; }
.q-card.enviada .q-icono { background: var(--exito); }
.q-card.rechazada .q-icono { background: var(--peligro); }
.q-titulo { display: grid; gap: 2px; flex: 1; min-width: 220px; }
.q-titulo small { color: var(--tenue); }
.q-cifras { display: flex; gap: 18px; }
.q-cifras > span { display: grid; text-align: right; }
.q-cifras small { color: var(--tenue); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.q-cifras strong { font-variant-numeric: tabular-nums; }
.q-abrir { font-weight: 600; color: var(--primario); font-size: .9rem; white-space: nowrap; }
.q-card[open] .q-abrir .cerrado, .q-card:not([open]) .q-abrir .abierto { display: none; }
.q-card[open] .q-resumen { border-bottom: 1px solid var(--borde); }
.q-cuerpo { padding: 16px 20px 6px; }
.ind-cab.estatico { cursor: default; display: block; }
.de-peso { color: var(--tenue); font-weight: 700; font-size: .8rem; min-width: 2.4em; text-align: left; }
.celda-pct input:disabled { background: #f3f5f8; color: #4a5562; }
.no-aplica-txt { color: #a0aab5; font-size: .78rem; font-weight: 600; }
.q-cuadro .c-total { min-width: 150px; }
.q-cuadro .c-total .cal { display: block; margin-top: 4px; }
tr.fila-observada > .c-persona { box-shadow: inset 4px 0 0 var(--peligro), 1px 0 0 var(--borde); }
.celda-pct input.sobre-base { border-color: #6cc08b; background: #eefaf2; }
.historial-q { margin-top: 8px; }
@media (max-width: 560px) { .q-cifras { width: 100%; justify-content: space-between; } .q-titulo { min-width: 0; } }
.q-cuadro .total-fila.ok::before { content: ""; }
.q-cuadro .total-fila.ok { background: #e9f5f5; color: #0b4b4b; }
.q-cuadro .c-ind { min-width: 112px; }
.otra-quincena summary { cursor: pointer; font-weight: 600; color: var(--primario); }
.otra-quincena[open] summary { margin-bottom: 12px; }