/* Dosificación de hormigón — GEP Innovación (fase 6).
   Sistema visual común: paleta de DLOSAS (GEP Innovación), tipografía del sistema, números tabulares, tarjetas blancas con sombra suave.
   Se ve bien en notebook de 1366 px, monitor de 1920 px y tablet de 768 px. Todo local (sin fuentes ni imágenes de otros sitios). */

:root {
  /* paleta GEP Innovación (DLOSAS) */
  --gep-navy: #13395F;
  --gep-navy-2: #0B2A4A;
  --gep-blue: #2E6FB0;
  --gep-cyan: #3AA8D8;
  --gep-cyan-soft: #BFE0F0;
  --fondo: #EEF2F6;
  --panel: #FFFFFF;
  --tinta: #0B2A4A;
  --texto-suave: #5A6E82;
  --linea: #D8E1EA;
  --suave-bg: #E3ECF5;
  --aviso-bg: #FFF4E5;
  --aviso-txt: #8A4B00;
  --pos: #2E8B57;
  --neg: #C0392B;
  /* derivados */
  --pos-bg: #E6F3EC;
  --neg-bg: #FBEAE8;
  --info-bg: #E8F1FA;
  --ambar: #C27A00;
  --ambar-bg: #FFF1D6;
  --linea-fuerte: #B9C7D6;
  --hover: #F4F7FA;
  --calc: #F3F6F9;
  --rosa: #f7a8c4;
  --rosa-fuerte: #d63f7a;
  --foco: #3AA8D8;
  /* nombres anteriores (los usa el resto de la hoja) */
  --texto: var(--tinta);
  --suave: var(--texto-suave);
  --borde: var(--linea);
  --borde-suave: #E6ECF2;
  --acento: var(--gep-blue);
  --acento-oscuro: var(--gep-navy);
  --acento-claro: var(--suave-bg);
  --ok: var(--pos);
  --ok-fondo: var(--pos-bg);
  --aviso: var(--aviso-txt);
  --aviso-fondo: var(--aviso-bg);
  --error: var(--neg);
  --error-fondo: var(--neg-bg);
  /* forma y espacio */
  --radio: 10px;
  --radio-chico: 6px;
  --sombra: 0 1px 2px rgba(11, 42, 74, .06), 0 4px 16px rgba(11, 42, 74, .06);
  --sombra-alta: 0 10px 30px rgba(11, 42, 74, .16);
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
  --fuente: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --transicion: .18s ease;
}

* { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--fuente); line-height: 1.45; min-height: 100vh; display: flex; flex-direction: column;
}
input, select, textarea, button, .num, .tabla td, .kpi-v, .indicador .v, .valor-calculado { font-variant-numeric: tabular-nums; }
a { color: var(--gep-blue); text-underline-offset: 2px; }
a:hover { color: var(--gep-navy); }
h1 { font-size: 1.55rem; line-height: 1.2; margin: 0 0 var(--e1); color: var(--gep-navy-2); letter-spacing: -.01em; }
h2 { font-size: 1.08rem; margin: 0 0 var(--e2); color: var(--gep-navy-2); }
h3 { font-size: .95rem; margin: var(--e3) 0 var(--e1); color: var(--gep-navy); }
p { margin: 0 0 var(--e2); }
code { background: var(--calc); padding: 0 4px; border-radius: 4px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; color: var(--gep-navy); padding: 8px 12px; border-radius: 6px; }
.saltar:focus { left: 8px; }

/* foco de teclado visible en todo */
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }

/* ======================================================================= barra superior (como DLOSAS) */
.barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--e3) var(--e4); flex-wrap: wrap;
  background: linear-gradient(90deg, var(--gep-navy-2), var(--gep-navy)); color: #fff;
  border-bottom: 3px solid var(--gep-cyan); padding: 8px 20px; box-shadow: 0 2px 10px rgba(6, 32, 58, .18);
}
.barra .marca { display: flex; align-items: center; gap: var(--e3); color: #fff; text-decoration: none; margin-right: auto; min-width: 0; }
.barra .logo { height: 44px; width: auto; border-radius: 6px; background: #fff; padding: 2px; flex: none; }
.marca-textos { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marca-app { font-size: 1.12rem; font-weight: 650; white-space: nowrap; }
.marca-gep {
  align-self: flex-start; margin-top: 3px; font-size: .72rem; font-weight: 600; letter-spacing: .03em; color: var(--gep-cyan-soft);
  background: rgba(58, 168, 216, .18); border: 1px solid var(--gep-cyan); border-radius: 12px; padding: 1px 9px;
}
.marca-local { font-size: .72rem; color: var(--gep-cyan-soft); border: 1px dashed rgba(191, 224, 240, .6); border-radius: 10px; padding: 1px 8px; }
.nav-principal { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.nav-principal > a {
  color: #E6F1F8; text-decoration: none; padding: 7px 12px; border-radius: 8px; font-size: .92rem; transition: background var(--transicion);
  position: relative;
}
.nav-principal > a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-principal > a.activo { background: rgba(58, 168, 216, .22); color: #fff; box-shadow: inset 0 -2px 0 var(--gep-cyan); }
.btn-menu {
  display: none; align-items: center; gap: 8px; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(191, 224, 240, .5);
  border-radius: 8px; padding: 7px 10px; font: inherit; font-size: .9rem; cursor: pointer;
}
.hamburguesa { display: inline-flex; flex-direction: column; gap: 3px; }
.hamburguesa span { display: block; width: 16px; height: 2px; background: #fff; border-radius: 2px; transition: transform var(--transicion), opacity var(--transicion); }
.btn-menu[aria-expanded="true"] .hamburguesa span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.btn-menu[aria-expanded="true"] .hamburguesa span:nth-child(2) { opacity: 0; }
.btn-menu[aria-expanded="true"] .hamburguesa span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* menú del usuario */
.menu-usuario { position: relative; margin-left: var(--e2); }
.menu-usuario > summary {
  list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 22px;
  border: 1px solid rgba(191, 224, 240, .45); color: #fff; font-size: .9rem; user-select: none;
}
.menu-usuario > summary::-webkit-details-marker { display: none; }
.menu-usuario > summary:hover { background: rgba(255, 255, 255, .1); }
.menu-usuario .avatar {
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gep-cyan); color: var(--gep-navy-2); font-weight: 700; font-size: .85rem;
}
.menu-usuario .quien { font-weight: 600; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-rol { font-size: .68rem; padding: 1px 8px; letter-spacing: .03em; text-transform: uppercase; }
.chip-rol.admin { background: var(--gep-cyan); color: var(--gep-navy-2); border-color: var(--gep-cyan); }
.chip-rol.usuario { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(191, 224, 240, .5); }
.menu-usuario-cab b#menu-usuario-ingreso { color: var(--gep-navy); }
.menu-usuario .flecha { width: 7px; height: 7px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translateY(-2px); transition: transform var(--transicion); }
.menu-usuario[open] .flecha { transform: rotate(-135deg) translateY(-1px); }
.menu-usuario-lista {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: #fff; color: var(--tinta); border-radius: var(--radio);
  box-shadow: var(--sombra-alta); border: 1px solid var(--linea); padding: 6px; z-index: 40; animation: aparecer .14s ease-out;
}
.menu-usuario-cab { padding: 8px 10px 10px; border-bottom: 1px solid var(--linea); margin-bottom: 4px; display: flex; flex-direction: column; }
.menu-usuario-cab span { font-size: .8rem; color: var(--texto-suave); }
.menu-usuario-lista a, .menu-usuario-lista .item-salir {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; color: var(--tinta); text-decoration: none;
  font: inherit; font-size: .92rem; background: none; border: 0; cursor: pointer;
}
.menu-usuario-lista a:hover, .menu-usuario-lista .item-salir:hover { background: var(--suave-bg); }
.menu-usuario-lista .item-salir { color: var(--neg); }
form.en-linea { display: inline; margin: 0; }

/* indicador discreto de «calculando» (lo enciende ui.js mientras hay un cálculo en vivo en vuelo) */
.indicador-calculo {
  display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--gep-cyan-soft); opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s; padding: 3px 9px; border-radius: 12px; background: rgba(58, 168, 216, .15);
}
.indicador-calculo.activo { opacity: 1; visibility: visible; }
.giro { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(191, 224, 240, .35); border-top-color: var(--gep-cyan); animation: girar .8s linear infinite; }

@media (max-width: 899px) {
  .barra { padding: 8px 16px; }
  .btn-menu { display: inline-flex; }
  .nav-principal {
    display: none; order: 10; flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 0 4px;
    border-top: 1px solid rgba(191, 224, 240, .25);
  }
  .nav-principal.abierta { display: flex; animation: aparecer .16s ease-out; }
  .nav-principal > a { padding: 10px 12px; }
  .menu-usuario { margin: 6px 0 0; }
  .menu-usuario-lista { position: static; box-shadow: none; margin-top: 6px; }
  .indicador-calculo .txt-calculo { display: none; }
}
@media (max-width: 520px) {
  .marca-app { font-size: 1rem; }
  .barra .logo { height: 38px; }
}

/* ======================================================================= estructura */
.contenido { width: 100%; max-width: 1640px; margin: 0 auto; padding: var(--e4) 22px 48px; flex: 1 0 auto; }
.migas { font-size: .84rem; color: var(--texto-suave); margin-bottom: var(--e2); }
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--gep-blue); text-decoration: underline; }
.pie {
  display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: space-between; font-size: .8rem; color: var(--texto-suave);
  padding: 14px 22px; border-top: 1px solid var(--linea); background: #fff;
}
.cabecera-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; margin: var(--e1) 0 var(--e4); }
.cabecera-pagina.compacta { margin-bottom: var(--e3); }
.antetitulo { margin: 0 0 2px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gep-blue); }
.bajada { max-width: 92ch; color: var(--texto-suave); margin: 4px 0 0; }
.seccion { margin-bottom: var(--e5); }
.seccion-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e2); }
.seccion-cab h2 { margin-bottom: 2px; }

/* ======================================================================= paneles (tarjetas blancas) */
.panel {
  background: var(--panel); border: 1px solid var(--borde-suave); border-radius: var(--radio); padding: var(--e4) 18px;
  margin-bottom: var(--e4); box-shadow: var(--sombra);
}
.panel > h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--borde-suave); padding-bottom: 8px; margin-bottom: var(--e3); }
.num-seccion {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--gep-navy); color: #fff; font-size: .8rem; font-weight: 700;
}
.concepto {
  background: var(--info-bg); border-left: 3px solid var(--gep-blue); padding: 8px 12px; margin: 0 0 var(--e3);
  font-size: .87rem; color: #22405e; border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
}
.suave { color: var(--texto-suave); font-size: .86rem; }
.ayuda-plegable { margin: 0 0 var(--e3); }
.ayuda-plegable > summary {
  cursor: pointer; color: var(--gep-blue); font-size: .88rem; font-weight: 600; padding: 4px 0; list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.ayuda-plegable > summary::-webkit-details-marker { display: none; }
.ayuda-plegable > summary::before {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  transition: transform var(--transicion);
}
.ayuda-plegable[open] > summary::before { transform: rotate(45deg); }
.ayuda-plegable[open] > summary { margin-bottom: 6px; }
.panel-vivo > h2 .chip-vivo, .panel-resultado > h2 .chip-vivo { margin-left: auto; }

.dos-col { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dos-col-admin { grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); }
.col-fija { position: sticky; top: 82px; max-height: calc(100vh - 92px); overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
@media (min-width: 1700px) { .dos-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 1099px) {
  .dos-col, .dos-col-admin { grid-template-columns: minmax(0, 1fr); }
  .col-fija { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 899px) { .col-fija { top: 0; } }

/* ======================================================================= formularios */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 14px; }
.rejilla.ancha { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo > label, .campo > .etiqueta { font-size: .8rem; font-weight: 600; color: #34506b; }
.campo.completo { grid-column: 1 / -1; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], select, textarea {
  font: inherit; font-size: .95rem; padding: 7px 10px; border: 1px solid var(--linea-fuerte); border-radius: 7px; min-height: 36px;
  background: #fff; color: var(--tinta); width: 100%; min-width: 0; transition: border-color var(--transicion), box-shadow var(--transicion);
}
input:hover, select:hover, textarea:hover { border-color: #93A8BE; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gep-blue); box-shadow: 0 0 0 3px rgba(46, 111, 176, .2); }
input:disabled, select:disabled, textarea:disabled { background: var(--calc); color: var(--texto-suave); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: #93A3B4; }
input.calculado, input.auto { background: var(--calc); color: var(--texto-suave); font-style: italic; }
input.invalido, select.invalido { border-color: var(--neg); background: var(--neg-bg); box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }
textarea { resize: vertical; min-height: 60px; }
select { appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235A6E82' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 11px 8px; }
.fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.marca-check { display: flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.marca-check input { width: 16px; height: 16px; accent-color: var(--gep-blue); }
input[type=radio], input[type=checkbox] { accent-color: var(--gep-blue); }

/* la unidad como sufijo dentro del campo */
.con-unidad { position: relative; display: flex; align-items: stretch; }
.con-unidad > input { padding-right: 3.6em; }
.con-unidad > .unidad {
  position: absolute; right: 1px; top: 1px; bottom: 1px; display: flex; align-items: center; padding: 0 10px; font-size: .8rem; color: var(--texto-suave);
  background: var(--calc); border-left: 1px solid var(--linea); border-radius: 0 6px 6px 0; pointer-events: none; white-space: nowrap;
}
.con-unidad > input:focus + .unidad { color: var(--gep-blue); }
.valor-calculado {
  padding: 7px 10px; min-height: 36px; border: 1px dashed var(--linea-fuerte); border-radius: 7px; background: var(--calc); color: var(--tinta);
  display: flex; align-items: center;
}

/* ======================================================================= botones */
.btn {
  font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.2; padding: 8px 14px; border: 1px solid var(--linea-fuerte); border-radius: 8px;
  background: #fff; color: var(--gep-navy); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background var(--transicion), border-color var(--transicion), box-shadow var(--transicion), transform .06s ease; min-height: 36px;
}
.btn:hover { background: var(--hover); border-color: var(--gep-blue); color: var(--gep-navy); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.deshabilitado { opacity: .45; cursor: not-allowed; transform: none; }
.btn:disabled:hover, .btn.deshabilitado:hover { background: #fff; border-color: var(--linea-fuerte); }
.btn-primario { background: var(--gep-blue); border-color: var(--gep-blue); color: #fff; box-shadow: 0 1px 2px rgba(11, 42, 74, .2); }
.btn-primario:hover { background: var(--gep-navy); border-color: var(--gep-navy); color: #fff; }
.btn-primario:disabled:hover { background: var(--gep-blue); border-color: var(--gep-blue); }
.btn-peligro { color: var(--neg); border-color: #E3B3AD; }
.btn-peligro:hover { background: var(--neg); border-color: var(--neg); color: #fff; }
.btn-fantasma { background: transparent; border-color: transparent; color: var(--texto-suave); font-weight: 500; }
.btn-fantasma:hover { background: var(--suave-bg); border-color: transparent; color: var(--gep-navy); }
.btn-chico { padding: 4px 10px; font-size: .8rem; min-height: 28px; border-radius: 7px; }
.btn-bloque { width: 100%; padding: 11px 14px; font-size: 1rem; }
.btn-grande-accion { padding: 10px 18px; font-size: .98rem; }
.btn-grande-accion span { font-size: 1.2em; line-height: 1; }
.enlace-boton { background: none; border: 0; padding: 0; font: inherit; color: var(--gep-blue); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* control segmentado (camino del diseño) */
.segmentado { display: inline-flex; background: #fff; border: 1px solid var(--linea-fuerte); border-radius: 10px; padding: 3px; gap: 3px; box-shadow: var(--sombra); }
.segmentado .opcion {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 7px; cursor: pointer; font-size: .9rem; font-weight: 600;
  color: var(--texto-suave); transition: background var(--transicion), color var(--transicion);
}
.segmentado .opcion:hover { background: var(--hover); color: var(--gep-navy); }
.segmentado .opcion:has(input:checked) { background: var(--gep-navy); color: #fff; }
.segmentado .opcion:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 1px; }

/* ======================================================================= chips e insignias */
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600;
  white-space: nowrap; border: 1px solid transparent; line-height: 1.5;
}
.chip-r2.bueno { background: var(--pos-bg); color: #1F6B42; border-color: #A9D5BC; }
.chip-r2.regular { background: var(--ambar-bg); color: #8A5600; border-color: #EAC98A; }
.chip-r2.malo { background: var(--neg-bg); color: #9B2C20; border-color: #EAB2AB; }
.chip-r2.sin { background: var(--calc); color: var(--texto-suave); border-color: var(--linea); }
.chip-r2::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-aviso { background: var(--aviso-bg); color: var(--aviso-txt); border-color: #F0CF9C; white-space: normal; }
.chip-vivo { background: var(--suave-bg); color: var(--gep-blue); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.chip-vivo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pos); animation: latido 2s ease-in-out infinite; }
.chip-gobierna { background: var(--gep-navy); color: #fff; font-size: .8rem; padding: 3px 12px; }
.chip-gobierna.durabilidad { background: #B45F06; }
.chip-gobierna.cemento_minimo { background: var(--neg); }
.insignia {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--suave-bg);
  color: var(--gep-navy); border: 1px solid #C5D6E8; white-space: nowrap; vertical-align: 1px;
}
.insignia.ej { background: var(--neg-bg); color: var(--neg); border-color: #E6B3AE; }
.insignia.ok { background: var(--pos-bg); color: #1F6B42; border-color: #B5D6C2; }
.insignia.teo { background: #EFE9F7; color: #5B3D8F; border-color: #CBBCE3; }

/* ======================================================================= mensajes y avisos del motor (bloques de color con ícono) */
.mensajes { margin: 8px 0; }
.mensajes > div {
  position: relative; padding: 8px 12px 8px 38px; margin-bottom: 6px; border-radius: 8px; font-size: .87rem; border: 1px solid; border-left-width: 4px;
  animation: aparecer .2s ease-out;
}
.mensajes > div::before {
  content: ""; position: absolute; left: 11px; top: 9px; width: 18px; height: 18px; background-repeat: no-repeat; background-size: 18px 18px;
}
.m-aviso { background: var(--aviso-bg); border-color: #F0CF9C; border-left-color: #E09A1E !important; color: var(--aviso-txt); }
.m-aviso::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.2 19 17.6H1z' fill='%23E09A1E'/%3E%3Cpath d='M10 7.5v4.6' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.7' r='1.2' fill='%23fff'/%3E%3C/svg%3E"); }
.m-error { background: var(--neg-bg); border-color: #EAB2AB; border-left-color: var(--neg) !important; color: #9B2C20; }
.m-error::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23C0392B'/%3E%3Cpath d='M6.6 6.6l6.8 6.8M13.4 6.6l-6.8 6.8' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.m-ok { background: var(--pos-bg); border-color: #A9D5BC; border-left-color: var(--pos) !important; color: #1F6B42; }
.m-ok::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%232E8B57'/%3E%3Cpath d='M5.8 10.3l2.9 2.9 5.5-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.m-info { background: var(--info-bg); border-color: #BFD5EA; border-left-color: var(--gep-blue) !important; color: #22405e; }
.m-info::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%232E6FB0'/%3E%3Cpath d='M10 9v5.4' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='5.9' r='1.2' fill='%23fff'/%3E%3C/svg%3E"); }
.m-rojo-fuerte { background: #FBDCD9; border-color: var(--neg); color: #8c1a13; font-weight: 600; }
.recuadro-pendiente {
  background: var(--aviso-bg); border: 2px solid #E09A1E; color: #5c3d00; padding: 14px 18px; border-radius: var(--radio);
  font-size: 1rem; margin-bottom: var(--e4);
}
.recuadro-pendiente strong { display: block; font-size: 1.08rem; margin-bottom: 4px; }
.banner-ejemplo {
  background: var(--neg-bg); border: 1px solid #E6B3AE; border-left: 4px solid var(--neg); color: var(--neg); padding: 8px 14px;
  border-radius: 8px; margin-bottom: var(--e3); font-weight: 600;
}

/* aviso flotante breve («Guardado») en vez de alert() */
.avisos-flotantes { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.aviso-flotante {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; min-width: 200px; max-width: min(420px, calc(100vw - 36px));
  background: var(--gep-navy-2); color: #fff; padding: 11px 16px; border-radius: 10px; box-shadow: var(--sombra-alta); font-size: .92rem; font-weight: 600;
  animation: entrar-aviso .22s ease-out; border-left: 4px solid var(--gep-cyan);
}
.aviso-flotante.ok { border-left-color: #5FD08F; }
.aviso-flotante.error { border-left-color: #FF8A7A; }
.aviso-flotante.aviso { border-left-color: #F5B544; }
.aviso-flotante.saliendo { animation: salir-aviso .25s ease-in forwards; }
.aviso-flotante .icono-aviso { width: 18px; height: 18px; flex: none; }

/* ======================================================================= tablas */
.tabla-scroll { overflow: auto; max-width: 100%; max-height: 78vh; border-radius: 8px; }
.tabla-scroll:has(> table), .tabla-scroll:has(> div > table) { border: 1px solid var(--borde-suave); }
table.tabla { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .87rem; background: #fff; }
.tabla th, .tabla td { border-bottom: 1px solid var(--borde-suave); padding: 6px 9px; text-align: left; vertical-align: middle; }
.tabla th + th, .tabla td + td { border-left: 1px solid #EEF2F6; }
.tabla thead th {
  position: sticky; top: 0; z-index: 2; background: #EDF2F7; font-weight: 650; color: #2B4560; white-space: nowrap; font-size: .8rem;
  border-bottom: 1px solid var(--linea-fuerte);
}
.tabla tbody tr:nth-child(even) > td { background: #FAFBFD; }
.tabla tbody tr:hover > td { background: #F1F6FB; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla td.calc { background: var(--calc) !important; text-align: right; font-variant-numeric: tabular-nums; }
.tabla td input, .tabla td select { border-color: transparent; background: transparent; padding: 4px 6px; text-align: right; min-height: 30px; box-shadow: none; }
.tabla td input:hover { border-color: var(--linea-fuerte); }
.tabla td input:focus { background: #fff; border-color: var(--gep-blue); box-shadow: 0 0 0 2px rgba(46, 111, 176, .18); }
.tabla td.txt input { text-align: left; min-width: 110px; }
.tabla td input { min-width: 64px; }
.tabla tr.dudosa > td { background: var(--neg-bg) !important; }
.tabla tfoot td { font-weight: 650; background: #F1F4F8; }
.zona-buena { color: var(--pos); font-weight: 600; }
.zona-utilizable { color: var(--aviso-txt); font-weight: 600; }
.zona-muy { color: var(--neg); font-weight: 600; }
.etiqueta-tabla { font-weight: 600; background: #F4F7FA !important; color: #2B4560; }

/* ======================================================================= gráficos */
svg.grafico { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--borde-suave); border-radius: 8px; }
svg.grafico text { font-family: var(--fuente); font-size: 11px; fill: #33495f; }
svg.grafico .eje-titulo { font-size: 11.5px; fill: var(--tinta); font-weight: 600; }
svg.grafico .rotulo { font-size: 11px; font-weight: 600; }
svg.grafico .fondo-rotulo { fill: #fff; opacity: .85; }
svg.grafico .con-tip { cursor: pointer; }
svg.grafico .con-tip:hover > :not(.zona-toque), svg.grafico .con-tip.tocado > :not(.zona-toque) { filter: drop-shadow(0 0 3px rgba(46, 111, 176, .6)); }
svg.grafico .zona-toque { fill: transparent; stroke: none; }
svg.grafico .capa-datos.entra { animation: aparecer-grafico .45s ease-out; }
.leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; margin: 8px 0; color: #33495f; }
.leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda svg { width: 22px; height: 12px; }
.tip-grafico {
  position: fixed; z-index: 70; pointer-events: none; background: var(--gep-navy-2); color: #fff; font-size: .8rem; line-height: 1.35;
  padding: 7px 10px; border-radius: 7px; box-shadow: var(--sombra-alta); max-width: 300px; opacity: 0; transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
}
.tip-grafico.visible { opacity: 1; transform: translateY(0); }

/* ======================================================================= Inicio: tablero */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); margin-bottom: var(--e4); }
.kpi {
  display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--borde-suave); border-radius: var(--radio);
  padding: 14px 16px; box-shadow: var(--sombra);
}
.kpi-icono { width: 44px; height: 44px; border-radius: 12px; background: var(--suave-bg); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.kpi-icono svg { width: 24px; height: 24px; fill: none; stroke: var(--gep-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi-v { font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--gep-navy-2); }
.kpi-e { font-size: .82rem; color: var(--texto-suave); }
@media (max-width: 899px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dos-caminos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); margin: 0 0 var(--e5); }
@media (max-width: 760px) { .dos-caminos { grid-template-columns: 1fr; } }
.camino-tarjeta {
  display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 14px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--gep-navy-2), var(--gep-blue)); box-shadow: var(--sombra); position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.camino-tarjeta::after {
  content: ""; position: absolute; right: -40px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(58, 168, 216, .18);
}
.camino-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); color: #fff; }
.camino-tarjeta.teorico { background: #fff; color: var(--tinta); border: 1px solid var(--borde-suave); }
.camino-tarjeta.teorico::after { background: rgba(46, 111, 176, .07); }
.camino-tarjeta.teorico:hover { color: var(--tinta); }
.camino-icono { width: 56px; height: 56px; border-radius: 14px; background: rgba(255, 255, 255, .14); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.camino-icono svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.teorico .camino-icono { background: var(--suave-bg); }
.teorico .camino-icono svg { stroke: var(--gep-blue); }
.camino-cuerpo { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; }
.camino-titulo { font-size: 1.22rem; font-weight: 700; }
.camino-texto { font-size: .9rem; opacity: .93; }
.camino-cta { font-weight: 700; font-size: .9rem; color: var(--gep-cyan-soft); }
.teorico .camino-cta { color: var(--gep-blue); }
.camino-tarjeta .chip-aviso { align-self: flex-start; }

.familias-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--e4); }
@media (max-width: 420px) { .familias-rejilla { grid-template-columns: 1fr; } }
.familia-tarjeta {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--borde-suave); border-radius: 12px; box-shadow: var(--sombra);
  transition: box-shadow .18s ease, transform .18s ease; overflow: hidden;
}
.familia-tarjeta:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.familia-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 14px 16px 10px; border-top: 4px solid var(--gep-blue); }
.familia-nombre { font-weight: 700; font-size: 1.02rem; color: var(--gep-navy-2); text-decoration: none; }
.familia-nombre:hover { color: var(--gep-blue); text-decoration: underline; }
.familia-obra { font-size: .82rem; color: var(--texto-suave); margin-top: 2px; }
.familia-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; padding: 0 16px 10px; }
.familia-datos div { min-width: 0; }
.familia-datos dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); font-weight: 600; }
.familia-datos dd { margin: 1px 0 0; font-size: .88rem; overflow-wrap: anywhere; }
.familia-recta { display: flex; align-items: center; gap: 12px; margin: 0 16px 12px; padding: 10px 12px; background: #F6F9FC; border-radius: 9px; border: 1px solid #E8EEF4; min-height: 64px; }
.familia-ecuacion { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.familia-ecuacion .ecuacion { font-weight: 650; color: var(--gep-navy-2); }
.familia-sin-recta { font-size: .86rem; color: var(--texto-suave); }
.familia-acciones { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 14px; margin-top: auto; border-top: 1px solid var(--borde-suave); }
.familia-acciones .btn-archivar { margin-left: auto; }
.mini-recta { width: 150px; height: 64px; flex: none; }
.mini-recta .mr-franja { fill: rgba(58, 168, 216, .15); }
.mini-recta .mr-linea { stroke: var(--gep-blue); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation: trazar 1.1s ease-out both; }
.mini-recta .mr-punto { fill: #fff; stroke: var(--gep-navy); stroke-width: 1.4; animation: aparecer .4s ease-out .7s both; }
.estado-vacio { background: #fff; border: 2px dashed var(--linea-fuerte); border-radius: 14px; padding: 24px; text-align: left; max-width: 760px; }
.estado-vacio h3 { margin-top: 0; font-size: 1.1rem; }
.guia-pasos { counter-reset: guia; list-style: none; padding: 0; margin: 12px 0 18px; display: grid; gap: 10px; }
.guia-pasos li { counter-increment: guia; display: flex; gap: 12px; align-items: baseline; font-size: .92rem; }
.guia-pasos li::before {
  content: counter(guia); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gep-navy); color: #fff; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; font-size: .82rem;
}

/* ======================================================================= indicador de pasos de la familia */
.flujo-pasos { margin: 0 0 var(--e4); }
.flujo-pasos ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.flujo-pasos li { position: relative; }
.flujo-pasos li > a, .flujo-pasos li > span {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--borde-suave);
  text-decoration: none; color: var(--tinta); height: 100%; box-shadow: var(--sombra); transition: border-color var(--transicion), background var(--transicion);
}
.flujo-pasos li > a:hover { border-color: var(--gep-blue); background: var(--hover); }
.paso-num {
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--suave-bg); color: var(--gep-navy); font-weight: 700; font-size: .85rem; border: 2px solid transparent;
}
.paso-num svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.paso-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.paso-titulo { font-weight: 650; font-size: .9rem; }
.paso-estado { font-size: .74rem; color: var(--texto-suave); }
.flujo-pasos li.completo .paso-num { background: var(--pos); color: #fff; }
.flujo-pasos li.completo .paso-estado { color: var(--pos); }
.flujo-pasos li.actual > span { border-color: var(--gep-blue); background: var(--info-bg); box-shadow: 0 0 0 2px rgba(46, 111, 176, .18); }
.flujo-pasos li.actual .paso-num { border-color: var(--gep-blue); background: #fff; color: var(--gep-blue); }
.flujo-pasos li.actual.completo .paso-num { background: var(--pos); border-color: var(--pos); }
.flujo-pasos li.actual .paso-estado { color: var(--gep-blue); font-weight: 600; }
.flujo-pasos li.deshabilitado > span { opacity: .55; box-shadow: none; }
@media (max-width: 899px) {
  .flujo-pasos ol { display: flex; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
  .flujo-pasos li { flex: 0 0 auto; }
}

/* ======================================================================= diseño: resultado grande */
.resumen-grande { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 10px; }
.resumen-grande > p { grid-column: 1 / -1; margin: 0; }
.dato-grande { background: #F6F9FC; border: 1px solid #E5ECF3; border-radius: 10px; padding: 10px 12px; transition: background .4s ease; }
.dato-grande .dg-v { font-size: 1.45rem; font-weight: 700; color: var(--gep-navy-2); line-height: 1.15; }
.dato-grande .dg-u { font-size: .78rem; color: var(--texto-suave); margin-left: 3px; font-weight: 600; }
.dato-grande .dg-e { font-size: .8rem; color: #34506b; font-weight: 600; margin-top: 2px; }
.dato-grande .dg-x { font-size: .74rem; color: var(--texto-suave); }
.dato-grande.principal { background: linear-gradient(135deg, var(--gep-navy-2), var(--gep-navy)); border-color: transparent; }
.dato-grande.principal .dg-v, .dato-grande.principal .dg-e { color: #fff; }
.dato-grande.principal .dg-u, .dato-grande.principal .dg-x { color: var(--gep-cyan-soft); }
.dato-grande.cambio { background: #E3F1FB; }
.dato-grande.principal.cambio { background: linear-gradient(135deg, var(--gep-navy), var(--gep-blue)); }
.resumen-gobierna { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .86rem; color: var(--texto-suave); }
.info-recta { background: #F6F9FC; border: 1px solid #E5ECF3; border-radius: 8px; padding: 8px 10px; }
.info-recta:empty { display: none; }

/* indicadores (familia y diseño) */
.indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 8px 0 10px; }
.indicador { border: 1px solid var(--borde-suave); border-radius: 9px; padding: 8px 10px; background: #FAFCFE; }
.indicador .v { font-size: 1.2rem; font-weight: 700; color: var(--gep-navy-2); }
.indicador .u { font-size: .75rem; color: var(--texto-suave); }
.indicador .e { font-size: .75rem; color: var(--texto-suave); }
.indicador.gobierna { border-color: var(--gep-blue); background: var(--info-bg); box-shadow: inset 3px 0 0 var(--gep-blue); }

/* los 11 pasos, plegables */
.pasos { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pasos li { border: 1px solid var(--borde-suave); border-radius: 9px; background: #fff; font-size: .87rem; overflow: hidden; }
.pasos li > b { display: block; padding: 8px 12px 0; color: var(--gep-navy); }
.pasos details > summary {
  cursor: pointer; padding: 9px 12px; list-style: none; display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--gep-navy-2);
}
.pasos details > summary::-webkit-details-marker { display: none; }
.pasos details > summary:hover { background: var(--hover); }
.pasos details > summary::after {
  content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--texto-suave); border-bottom: 2px solid var(--texto-suave);
  transform: rotate(45deg); transition: transform var(--transicion); flex: none;
}
.pasos details[open] > summary::after { transform: rotate(-135deg); }
.pasos details[open] > summary { border-bottom: 1px solid var(--borde-suave); background: #F8FAFC; }
.pasos .paso-n {
  width: 24px; height: 24px; border-radius: 50%; background: var(--suave-bg); color: var(--gep-navy); display: inline-flex; align-items: center;
  justify-content: center; font-size: .78rem; font-weight: 700; flex: none;
}
.pasos .paso-cuerpo { padding: 10px 12px 12px 46px; color: #2B4560; line-height: 1.55; }
.pasos li .origen { color: var(--texto-suave); }

/* ======================================================================= fase 4b: esquemas, porcentajes, barra del m³, comparar, amasadas */
.editor-pct .fila { margin-bottom: 6px; }
.estado-suma { margin-top: 6px; font-size: .86rem; font-weight: 600; }
.estado-suma.ok { color: var(--pos); }
.estado-suma.mal { color: var(--neg); }
.barra-m3-caja { margin: 4px 0 10px; }
.etiqueta-barra { font-size: .8rem; font-weight: 600; color: #2B4560; margin-bottom: 3px; }
.barra-m3 {
  display: flex; width: 100%; height: 36px; border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; background: #fff;
  box-shadow: inset 0 1px 2px rgba(11, 42, 74, .06);
}
.barra-m3 .seg {
  display: flex; align-items: center; justify-content: center; min-width: 1px; color: #fff; font-size: .72rem; font-weight: 600;
  border-right: 1px solid rgba(255, 255, 255, .6); overflow: hidden; white-space: nowrap; transition: flex-grow .45s ease;
}
.barra-m3 .seg.claro { color: var(--tinta); }
.barra-m3 .seg:last-child { border-right: 0; }
.muestra-color { display: inline-block; width: 11px; height: 11px; border: 1px solid #7b8794; border-radius: 2px; vertical-align: -1px; }
.tabla-m3 { margin-top: 6px; }
table.comparar th.actual { background: var(--suave-bg); color: var(--gep-blue); }
table.comparar td.celda-barra { min-width: 230px; vertical-align: top; }
table.comparar td { vertical-align: top; }
.amasada { border: 1px solid var(--borde-suave); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: #FCFDFE; }
.amasada.fijada { border-color: var(--pos); box-shadow: inset 4px 0 0 var(--pos); }
.amasada.sin-usar { background: #F7F9FB; }
.amasada.sin-usar > :not(h3):not(:first-child) { opacity: .75; }
.amasada h3 { margin-top: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.amasada .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 899px) { .amasada .cols { grid-template-columns: minmax(0, 1fr); } }
.rendimiento { border: 1px solid var(--borde-suave); border-radius: 8px; padding: 8px 10px; margin-top: 8px; background: #F7FAFC; }
.rendimiento table { margin-top: 4px; }

.sticky-barra {
  position: sticky; bottom: 0; z-index: 5; background: rgba(255, 255, 255, .97); backdrop-filter: blur(4px); border: 1px solid var(--borde-suave);
  border-radius: 12px; padding: 10px 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; box-shadow: 0 -4px 18px rgba(11, 42, 74, .1);
}
.estado-guardado { font-size: .82rem; color: var(--texto-suave); }
/* fase 5b: probeta excluida del ajuste (no se borra), tabla de lo archivado, composición con el aditivo */
.tabla tr.excluida > td { background: #EEF0F3 !important; color: var(--texto-suave); }
.tabla tr.excluida td input[type=text] { text-decoration: line-through; }
.celda-excluir { min-width: 190px; }
.celda-excluir input[type=text] { width: 100%; margin-top: 3px; }
.tabla-m3 td .suave { font-size: .78rem; }
.oculto { display: none !important; }
.cargando { opacity: .6; transition: opacity .2s ease; }

/* página de error */
.panel-error { display: flex; gap: 18px; align-items: flex-start; max-width: 760px; margin: 24px auto; padding: 24px; }
.error-icono { width: 48px; height: 48px; border-radius: 50%; background: var(--neg-bg); color: var(--neg); font-size: 1.6rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }

/* ======================================================================= pantallas de acceso (Ingresar, Cambiar clave) */
body.acceso { background: var(--fondo); }
body.acceso .contenido { max-width: none; padding: 0; display: flex; }
.acceso-marco { flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }
.acceso-marca {
  position: relative; overflow: hidden; color: #fff; padding: 48px 56px; display: flex; flex-direction: column; justify-content: center; gap: 14px;
  background: radial-gradient(1200px 600px at 110% 110%, rgba(58, 168, 216, .28), transparent 60%), linear-gradient(160deg, var(--gep-navy-2), var(--gep-navy) 60%, #1E4F80);
}
.acceso-marca::before {
  content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .9) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .9) 1px, transparent 1px);
  background-size: 32px 32px;
}
.acceso-marca > * { position: relative; }
.acceso-marca-sup { display: flex; align-items: center; gap: 14px; }
.acceso-logo { width: 88px; height: auto; border-radius: 10px; background: #fff; padding: 3px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.etiqueta-gep {
  display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: .85rem; font-weight: 700; letter-spacing: .03em; color: #fff;
  background: linear-gradient(90deg, #1670c4, #7fc4ff); box-shadow: 0 2px 10px rgba(22, 112, 196, .35);
}
.acceso-app { color: #fff; font-size: 2.2rem; margin: 10px 0 0; letter-spacing: -.02em; }
.acceso-linea { font-size: 1.08rem; color: var(--gep-cyan-soft); max-width: 46ch; margin: 0; }
.acceso-nota { font-size: .86rem; color: rgba(191, 224, 240, .8); max-width: 52ch; margin: 0; }
.ilustracion-recta { width: 100%; max-width: 500px; height: auto; margin: 8px 0; }
.ilustracion-recta .il-franja { fill: rgba(58, 168, 216, .12); }
.ilustracion-recta .il-rejilla line { stroke: rgba(191, 224, 240, .16); stroke-width: 1; }
.ilustracion-recta .il-ejes, .ilustracion-recta .il-flechas { fill: none; stroke: rgba(191, 224, 240, .75); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ilustracion-recta .trazo-recta { stroke: var(--gep-cyan); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: trazar 1.6s cubic-bezier(.4, 0, .2, 1) .3s forwards; }
.ilustracion-recta .pt { fill: #fff; stroke: var(--gep-cyan); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; animation: punto .45s ease-out forwards; }
.ilustracion-recta .pt.d1 { animation-delay: 1.05s; } .ilustracion-recta .pt.d2 { animation-delay: 1.3s; }
.ilustracion-recta .pt.d3 { animation-delay: 1.55s; } .ilustracion-recta .pt.d4 { animation-delay: 1.8s; }
.ilustracion-recta .il-ecuacion { fill: #fff; font-family: var(--fuente); font-size: 15px; font-weight: 700; opacity: 0; animation: aparecer .6s ease-out 2s forwards; }
.ilustracion-recta .il-eje { fill: rgba(191, 224, 240, .85); font-family: var(--fuente); font-size: 11.5px; }
.acceso-lado { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px 24px; gap: 18px; }
.tarjeta-acceso {
  width: 100%; max-width: 410px; background: #fff; border-radius: 16px; padding: 30px 32px 22px; box-shadow: 0 20px 60px rgba(11, 42, 74, .16);
  border: 1px solid var(--borde-suave); animation: subir .35s ease-out;
}
.tarjeta-titulo { font-size: 1.5rem; margin: 0 0 4px; color: var(--gep-navy-2); }
.form-acceso { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.form-acceso .btn-bloque { margin-top: 4px; }
.con-icono { position: relative; }
.con-icono > input { padding-left: 38px; }
.icono-campo { position: absolute; left: 11px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: #7C91A6; stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.con-ojito { position: relative; }
.con-ojito > input { padding-right: 44px; }
.ojito {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 32px; border: 0; background: transparent; cursor: pointer;
  border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #6B8197;
}
.ojito:hover { background: var(--suave-bg); color: var(--gep-navy); }
.ojito svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ojito .tachado { display: none; }
.ojito[aria-pressed="true"] .tachado { display: inline; }
.aviso-mayus { font-size: .78rem; color: var(--aviso-txt); }
.largo-clave { font-size: .78rem; color: var(--texto-suave); min-height: 1em; }
.largo-clave.bien { color: var(--pos); }
.largo-clave.mal { color: var(--neg); }
.acceso-acciones { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-size: .9rem; }
.acceso-pie { font-size: .8rem; color: var(--texto-suave); }

/* el punto rosado del acceso maestro (rompefilas): se ve de 12 px; el área para tocarlo es de 32 px */
.maestro-punto-fila { display: flex; justify-content: flex-end; height: 14px; margin-top: 12px; }
.punto-maestro {
  width: 32px; height: 32px; padding: 10px; margin: -10px; border: 0; background: transparent; cursor: pointer; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.punto-maestro span { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--rosa); opacity: .75; transition: opacity var(--transicion), transform var(--transicion); }
.punto-maestro:hover span, .punto-maestro[aria-expanded="true"] span { opacity: 1; transform: scale(1.1); }
.form-maestro { margin-top: 14px; border-top: 1px dashed #f3b5cb; padding-top: 14px; display: flex; flex-direction: column; gap: 12px; animation: aparecer .2s ease-out; }
.btn-maestro { background: var(--rosa-fuerte); border-color: var(--rosa-fuerte); color: #fff; }
.btn-maestro:hover { background: #b9306a; border-color: #b9306a; color: #fff; }
.form-maestro input:focus { border-color: var(--rosa-fuerte); box-shadow: 0 0 0 3px rgba(214, 63, 122, .2); }

@media (max-width: 899px) {
  .acceso-marco { grid-template-columns: 1fr; min-height: 0; align-content: start; }
  .acceso-marca { padding: 28px 22px 24px; gap: 10px; }
  .acceso-app { font-size: 1.7rem; }
  .ilustracion-recta { max-width: 380px; }
  .acceso-nota { display: none; }
  .acceso-lado { padding: 24px 16px 28px; }
  .tarjeta-acceso { padding: 24px 20px 18px; }
}

/* ======================================================================= animaciones */
@keyframes aparecer { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes aparecer-grafico { from { opacity: .25; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes trazar { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes punto { 0% { opacity: 0; transform: scale(.2); } 70% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes entrar-aviso { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes salir-aviso { to { opacity: 0; transform: translateY(8px); } }

/* sin movimiento para quien lo pide al sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .ilustracion-recta .trazo-recta, .mini-recta .mr-linea { stroke-dashoffset: 0; }
  .ilustracion-recta .pt, .ilustracion-recta .il-ecuacion { opacity: 1; }
}

@media print {
  .barra, .pie, .btn, .sticky-barra, .flujo-pasos, .avisos-flotantes, .segmentado { display: none !important; }
  body { background: #fff; }
  .panel { box-shadow: none; border-color: #ccc; }
  .col-fija { position: static; max-height: none; overflow: visible; }
  .tabla-scroll { max-height: none; overflow: visible; }
}