/* Matriz de seguimiento – estilos (mobile first) */
:root {
  --fondo: #faf7f2;
  --tarjeta: #ffffff;
  --texto: #2b2a33;
  --tenue: #6b6878;
  --linea: #e8e3da;
  --primario: #2f6f8f;
  --primario-osc: #245a75;
  --primario-claro: #e5f0f5;
  --acento: #f2a541;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(40, 30, 10, .05), 0 4px 16px rgba(40, 30, 10, .05);
  --n0: #8a8796; --n0f: #f0eff3;
  --n1: #c8442b; --n1f: #fde8e2;
  --n2: #a8690f; --n2f: #fdf1dc;
  --n3: #2e8050; --n3f: #e2f4e8;
  --n4: #3f57c2; --n4f: #e6ebfc;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1rem; }
a { color: var(--primario); }
code { background: var(--n0f); padding: .1em .35em; border-radius: 6px; }
.contenedor { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 16px; }
main.contenedor { padding-top: 16px; padding-bottom: 32px; min-height: 70vh; }

/* Barra superior */
.barra { background: var(--tarjeta); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 10; }
.barra-in { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 12px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--texto); text-decoration: none; }
.marca-punto { width: 14px; height: 14px; border-radius: 50%; background: var(--acento); box-shadow: 10px 0 0 var(--primario); margin-right: 10px; }
.menu-movil summary { list-style: none; cursor: pointer; padding: 8px 14px; border: 1px solid var(--linea); border-radius: 999px; font-weight: 600; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil[open] .menu { display: flex; }
.menu { display: none; position: absolute; right: 16px; top: 56px; flex-direction: column; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 8px; min-width: 200px; }
.menu a { padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--texto); }
.menu a:hover { background: var(--fondo); }
.menu a.activo { background: var(--primario-claro); color: var(--primario-osc); font-weight: 600; }
.menu-escritorio { display: none !important; }
@media (min-width: 860px) {
  .menu-movil { display: none; }
  .menu-escritorio { display: flex !important; position: static; flex-direction: row; border: 0; box-shadow: none; padding: 0; min-width: 0; background: none; gap: 2px; }
  .menu a { padding: 8px 10px; font-size: .95rem; }
}

.saludo { color: var(--tenue); margin-bottom: 12px; }
.pie { color: var(--tenue); font-size: .85rem; padding: 24px 16px; text-align: center; }

/* Tarjetas y estructura */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px; margin-bottom: 16px; }
.angosta { max-width: 460px; margin: 24px auto; }
.login { margin-top: 8vh; }
.seccion { margin: 28px 0 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; scroll-margin-top: 70px; }
.seccion h2 { margin: 0; }
.tenue { color: var(--tenue); }
.chico { font-size: .875rem; }
.fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.entre { justify-content: space-between; }

.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.dato { display: block; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; text-decoration: none; color: var(--texto); box-shadow: var(--sombra); }
.dato strong { display: block; font-size: 1.8rem; line-height: 1.1; color: var(--primario-osc); }
.dato span { color: var(--tenue); font-size: .9rem; }
.dato.alerta-dato strong { color: var(--n1); }

/* Avance */
.barra-avance { height: 10px; background: var(--n0f); border-radius: 999px; overflow: hidden; }
.barra-avance > i { display: block; height: 100%; background: linear-gradient(90deg, var(--primario), #4b9bbf); border-radius: 999px; }
.ambito { margin-bottom: 12px; }
.ambito-cab { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 10px; }
.ambito-cab .barra-avance { flex: 0 0 90px; }
.indicadores { list-style: none; margin: 0; padding: 0; }
.indicadores li { padding: 12px 0; border-top: 1px solid var(--linea); display: grid; gap: 6px; }
.indicadores li:first-child { border-top: 0; }
.ind-nivel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nota { font-size: .9rem; color: var(--tenue); background: var(--fondo); border-radius: 10px; padding: 8px 10px; }
@media (min-width: 700px) {
  .indicadores li { grid-template-columns: 1fr auto; align-items: start; }
  .indicadores li .nota { grid-column: 1 / -1; }
}

.nivel { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.n0 { color: var(--n0); background: var(--n0f); }
.n1 { color: var(--n1); background: var(--n1f); }
.n2 { color: var(--n2); background: var(--n2f); }
.n3 { color: var(--n3); background: var(--n3f); }
.n4 { color: var(--n4); background: var(--n4f); }
.tendencia { font-size: .8rem; color: var(--tenue); }
.tendencia.sube { color: var(--n3); }
.tendencia.baja { color: var(--n1); }

.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--n0f); color: var(--tenue); }
.etiqueta.nueva { background: var(--acento); color: #3a2400; }
.etiqueta.importante { background: var(--n1f); color: var(--n1); }
.etiqueta.ok { background: var(--n3f); color: var(--n3); }
.etiqueta.pendiente { background: var(--n2f); color: var(--n2); }

/* Visitas y avisos */
details.visita { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 10px; box-shadow: var(--sombra); }
details.visita > summary { cursor: pointer; padding: 14px 16px; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; list-style: none; }
details.visita > summary::-webkit-details-marker { display: none; }
details.visita > summary::after { content: "▾"; color: var(--tenue); }
details.visita[open] > summary::after { content: "▴"; }
.visita-cuerpo { padding: 0 16px 16px; }
.campo { margin-bottom: 12px; }
.campo b { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); margin-bottom: 2px; }
.aviso { border-left: 4px solid var(--primario); }
.aviso.importante { border-left-color: var(--n1); }
.aviso.leido { opacity: .85; }
.aviso-cab { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.vacio { text-align: center; color: var(--tenue); padding: 24px; }

/* Formularios */
.formulario { display: grid; gap: 14px; }
.formulario label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.formulario label small { font-weight: 400; color: var(--tenue); }
.formulario .check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
input, select, textarea {
  font: inherit; color: inherit; width: 100%; padding: 10px 12px; border: 1px solid #d6d0c4; border-radius: 10px; background: #fff;
}
input[type=checkbox], input[type=radio] { width: auto; }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgba(47, 111, 143, .35); outline-offset: 1px; border-color: var(--primario); }
.dos-col { display: grid; gap: 14px; }
@media (min-width: 700px) { .dos-col { grid-template-columns: 1fr 1fr; } }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border: 0; border-radius: 999px;
  background: var(--primario); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; min-height: 44px;
}
.boton:hover { background: var(--primario-osc); }
.boton-sec { background: var(--primario-claro); color: var(--primario-osc); }
.boton-sec:hover { background: #d4e6ee; }
.boton-peligro { background: var(--n1f); color: var(--n1); }
.boton-peligro:hover { background: #f9d3c8; }
.boton-chico { padding: 6px 12px; min-height: 34px; font-size: .9rem; }
.boton-ancho { width: 100%; }
.enlace-tenue { color: var(--tenue); justify-self: start; }

/* Captura de matriz: niveles como botones */
.opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.opciones label { display: inline-flex; font-weight: 500; font-size: .85rem; cursor: pointer; }
.opciones input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opciones span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); background: #fff; }
.opciones input:focus-visible + span { outline: 3px solid rgba(47, 111, 143, .35); }
.opciones input:checked + span.o0 { background: var(--n0f); color: var(--n0); border-color: var(--n0); }
.opciones input:checked + span.o1 { background: var(--n1f); color: var(--n1); border-color: var(--n1); }
.opciones input:checked + span.o2 { background: var(--n2f); color: var(--n2); border-color: var(--n2); }
.opciones input:checked + span.o3 { background: var(--n3f); color: var(--n3); border-color: var(--n3); }
.opciones input:checked + span.o4 { background: var(--n4f); color: var(--n4); border-color: var(--n4); }
.captura li { grid-template-columns: 1fr !important; }
.barra-guardar { position: sticky; bottom: 0; z-index: 3; background: rgba(250, 247, 242, .95); padding: 12px 0; border-top: 1px solid var(--linea); display: flex; gap: 10px; flex-wrap: wrap; }

/* Cuadrícula de entregas (como el Excel) */
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pestanas a { padding: 8px 16px; border-radius: 999px; background: var(--tarjeta); border: 1px solid var(--linea); text-decoration: none; color: var(--texto); font-weight: 600; }
.pestanas a.activo { background: var(--primario); border-color: var(--primario); color: #fff; }
.cuadricula-env { padding: 0; }
.cuadricula { border-collapse: separate; border-spacing: 0; }
.cuadricula th, .cuadricula td { text-align: center; padding: 8px 6px; }
.cuadricula thead th { vertical-align: bottom; min-width: 74px; max-width: 100px; text-transform: none; letter-spacing: 0; font-size: .75rem; color: var(--texto); }
.cuadricula .fija { position: sticky; left: 0; background: var(--tarjeta); text-align: left; z-index: 1; min-width: 165px; max-width: 200px; line-height: 1.25; border-right: 1px solid var(--linea); font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--texto); }
.cuadricula tbody tr:hover td, .cuadricula tbody tr:hover th { background: var(--fondo); }
.cuadricula input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--n3); cursor: pointer; }
.cuadricula .total { font-size: .85rem; color: var(--tenue); white-space: nowrap; }
.cuadricula .total.falta { color: var(--n2); font-weight: 600; }
.col-toggle { background: none; border: 0; font: inherit; font-weight: 600; color: var(--primario-osc); cursor: pointer; padding: 0; text-align: center; }
.col-toggle:hover { text-decoration: underline; }
.check-grande { display: flex; gap: 10px; align-items: center; font-weight: 500; cursor: pointer; }
.check-grande input { width: 22px; height: 22px; accent-color: var(--n3); }

/* Tablas */
.tabla-env { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); font-weight: 600; }

/* Alertas */
.alerta { padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; }
.alerta-ok { background: var(--n3f); color: #1f5a37; }
.alerta-error { background: var(--n1f); color: #8a2c1a; }
.alerta-aviso { background: var(--n2f); color: #6e450a; }
.alerta-info { background: var(--n4f); color: #2a3b8a; }
.inline { display: inline; }

/* Visita de acompañamiento: captura */
.opciones input:checked + span.v-e { background: var(--n3f); color: var(--n3); border-color: var(--n3); }
.opciones input:checked + span.v-s { background: var(--n4f); color: var(--n4); border-color: var(--n4); }
.opciones input:checked + span.v-pm { background: var(--n2f); color: var(--n2); border-color: var(--n2); }
.opciones span[class^="v-"] { min-width: 44px; text-align: center; font-weight: 700; }

/* Visita: resumen */
.resumen-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.resumen-datos span { display: block; }
.txt-n3 { color: var(--n3) !important; } .txt-n4 { color: var(--n4) !important; } .txt-n2 { color: var(--n2) !important; }
.criterio-fila { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--linea); }
.criterio-fila:first-child { border-top: 0; }
@media (min-width: 700px) { .criterio-fila { grid-template-columns: 220px 1fr; align-items: center; } }
.criterio-nombre { font-weight: 600; font-size: .95rem; }
.barra-apilada { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: var(--n0f); }
.barra-apilada i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: .75rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.barra-apilada i.n3 { background: #bfe5cc; } .barra-apilada i.n4 { background: #cdd7fa; } .barra-apilada i.n2 { background: #f8dcaa; } .barra-apilada i.n0 { background: var(--n0f); }

/* Formato imprimible (carta horizontal) */
.hoja-env { overflow-x: auto; background: #e9e5dd; border-radius: var(--radio); padding: 16px; }
.formato { background: #fff; color: #000; width: 10in; min-height: 7.5in; margin: 0 auto; padding: .45in .5in; box-shadow: 0 2px 10px rgba(0,0,0,.15);
  font: 9.5pt/1.3 Arial, Helvetica, sans-serif; }
.f-titulo { font-size: 13pt; text-align: center; margin: 0 0 2px; letter-spacing: .02em; }
.f-centro { text-align: center; font-weight: 700; margin: 0 0 8px; }
.f-datos { margin: 0 0 4px; font-weight: 700; }
.f-datos u { font-weight: 400; text-decoration: none; border-bottom: 1px solid #000; padding: 0 8px; white-space: pre; }
.f-tabla { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 8.5pt; }
.f-tabla th, .f-tabla td { border: 1px solid #000; padding: 3px 5px; vertical-align: top; text-transform: none; letter-spacing: 0; color: #000; font-size: 8.5pt; }
.f-tabla thead th { background: #d9d9d9; text-align: center; vertical-align: middle; font-weight: 700; }
.f-tabla .f-crit { font-weight: 700; text-align: center; vertical-align: middle; background: #f2f2f2; }
.f-tabla .f-val { width: 4%; text-align: center; vertical-align: middle; font-weight: 700; }
.f-tabla tr { page-break-inside: avoid; break-inside: avoid; }
.f-leyenda { font-size: 7.5pt; margin: 3px 0 0; }
.f-cierre td { height: 1.3in; width: 33.3%; }
.f-firmas { display: flex; justify-content: space-around; gap: 40px; margin-top: .55in; text-align: center; break-inside: avoid; page-break-inside: avoid; }
.f-firmas div { flex: 0 1 3in; }
.f-linea { display: block; border-top: 1px solid #000; margin-bottom: 4px; }

@media print {
  @page { size: letter landscape; margin: .4in; }
  body { background: #fff; }
  .barra, .pie, .saludo, .alerta, .pantalla, .demo-bar, .toast { display: none !important; }
  main.contenedor { padding: 0; max-width: none; min-height: 0; }
  .hoja-env { background: none; padding: 0; overflow: visible; border-radius: 0; }
  .formato { width: auto; min-height: 0; padding: 0; box-shadow: none; }
  .f-tabla thead { display: table-header-group; }
}

.cuadricula .fija small { display: block; color: var(--tenue); font-weight: 400; font-size: .78rem; }