/* Plataforma SG-SST · SST Soluciones Tech
   Layout: barra lateral azul marino + área de trabajo clara con tarjetas.
   Colores del logo: azul marino, azul, turquesa y verde. El ámbar se reserva para «en revisión». */
:root {
  --ink: #0a2b58;
  --ink-2: #1f6fae;
  --verde: #138a99;
  --menta: #d9f1f3;
  --acento: #7cc84e;
  --ambar: #f5a524;
  --ambar-suave: #fff1d6;
  --rojo: #c8423b;
  --rojo-suave: #fbe3e1;
  --azul: #2f6db3;
  --azul-suave: #e2ecf8;
  --fondo: #f1f5f8;
  --papel: #ffffff;
  --texto: #0f2238;
  --texto-2: #4a5d76;
  --texto-3: #7b8ba0;
  --linea: #dfe6ee;
  --linea-2: #cbd6e2;
  --sombra: 0 1px 2px rgba(10,43,88,.06), 0 8px 24px -12px rgba(10,43,88,.18);
  --radio: 14px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --lateral: 248px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--ink-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
p { margin: 0 0 .6em; }
code { font-family: var(--mono); background: var(--menta); padding: 1px 6px; border-radius: 5px; font-size: .9em; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 20px 0; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
[hidden] { display: none !important; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tenue { color: var(--texto-2); }
.pequeno { font-size: .85rem; }
.bloque { display: block; }
.txt-ambar { color: #b97500; }
.txt-rojo { color: var(--rojo); }

/* ---------- Barra lateral ---------- */
.lateral { position: fixed; inset: 0 auto 0 0; width: var(--lateral); background: var(--ink); color: #e1e9f3; display: flex; flex-direction: column; padding: 22px 14px 16px; z-index: 30; }
.lateral-marca { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: .92rem; letter-spacing: .01em; padding: 0 8px; }
.lateral-marca:hover { text-decoration: none; }
.lateral-marca b { color: #7cc84e; font-weight: 800; }
.lateral-marca.oscuro { color: var(--ink); margin-bottom: 18px; padding: 0; }
.lateral-marca.oscuro b { color: var(--verde); }
.marca { width: 28px; height: 31px; flex: none; }
.lateral-sub { margin: 6px 8px 22px 46px; font-size: .75rem; color: #93a9c6; }
.lateral-nav { display: flex; flex-direction: column; gap: 2px; }
.lateral-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #cbd8e8; font-weight: 600; font-size: .93rem; }
.lateral-nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.lateral-nav a.on { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 3px 0 0 var(--acento); }
.contador { margin-left: auto; background: var(--acento); color: var(--ink); font-size: .72rem; font-weight: 800; padding: 1px 8px; border-radius: 99px; }
.lateral-pie { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; display: grid; gap: 10px; }
.quien { display: flex; align-items: center; gap: 10px; padding: 0 6px; min-width: 0; }
.quien div { min-width: 0; }
.quien strong { display: block; color: #fff; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quien small { display: block; color: #93a9c6; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--acento); color: var(--ink); display: grid; place-items: center; font-weight: 800; font-size: .8rem; }
.avatar.sm { width: 30px; height: 30px; font-size: .7rem; background: var(--menta); color: var(--ink-2); }
.salir { display: flex; align-items: center; gap: 10px; color: #cbd8e8; font-size: .87rem; font-weight: 600; padding: 8px 12px; border-radius: 10px; }
.salir:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.velo { display: none; }

/* ---------- Área principal ---------- */
.principal { min-height: 100vh; padding: 0 clamp(16px, 3vw, 36px) 48px; }
.con-menu .principal { margin-left: var(--lateral); }
.barra { display: flex; align-items: center; gap: 12px; padding: 24px 0 18px; }
.barra-titulo { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; }
.btn-menu { display: none; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; }

/* ---------- Avisos ---------- */
.aviso { padding: 12px 16px; border-radius: 12px; margin: 0 0 16px; font-size: .92rem; border: 1px solid transparent; }
.aviso-ok { background: var(--menta); color: var(--ink-2); border-color: #b6e1e6; }
.aviso-error { background: var(--rojo-suave); color: #8c2721; border-color: #f2c4c0; }
.aviso-info { background: var(--azul-suave); color: #1e4b80; border-color: #c6d9f0; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1px solid transparent; font: 700 .9rem var(--font); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; color: var(--texto); background: var(--papel); text-decoration: none !important; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--ink); color: #fff; }
.btn-primario:hover { background: var(--ink-2); }
.btn-ambar { background: var(--acento); color: var(--ink); }
.btn-ambar:hover { background: #95d66d; }
.btn-claro { background: var(--papel); border-color: var(--linea-2); color: var(--texto); }
.btn-claro:hover { border-color: var(--ink-2); }
.btn-ok { background: var(--verde); color: #fff; }
.btn-ok:hover { background: var(--ink-2); }
.btn-mal { background: var(--papel); color: var(--rojo); border-color: #eab8b4; }
.btn-mal:hover { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.btn-sm { padding: 6px 11px; font-size: .82rem; border-radius: 8px; }
.btn-sm .ico { width: 15px; height: 15px; }
.btn-ancho { width: 100%; }
.btn-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--linea); background: var(--papel); color: var(--texto-2); cursor: pointer; }
.btn-ico:hover { color: var(--ink); border-color: var(--linea-2); }
.btn-ico.peligro:hover { color: var(--rojo); border-color: #eab8b4; }
.btn-ico .ico { width: 16px; height: 16px; }

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra); }
.tarjeta.sin-relleno { padding: 0; overflow: hidden; }
.tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 14px; }
.sin-relleno > .tarjeta-cab { padding: 18px 22px; border-bottom: 1px solid var(--linea); }
.tarjeta-titulo { font-size: 1.02rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.tarjeta-titulo.mt { margin-top: 10px; }
.tarjeta > .tarjeta-titulo { margin-bottom: 14px; }
.tarjeta-cab .tarjeta-titulo { margin: 0; }
.ojo-titulo { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); margin-bottom: 4px; }
.empty-state { text-align: center; padding: 48px 24px; max-width: 520px; margin: 0 auto; }
.empty-state h2, .empty-state h3 { font-size: 1.15rem; margin-bottom: 8px; }
.empty-state p { color: var(--texto-2); margin-bottom: 18px; }

/* ---------- Formularios ---------- */
.form { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > span { font-size: .82rem; font-weight: 700; color: var(--texto-2); }
.campo small { font-size: .78rem; color: var(--texto-3); }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=tel], select, textarea {
  width: 100%; font: 500 .95rem var(--font); color: var(--texto); background: #fbfcfe; border: 1.5px solid var(--linea-2); border-radius: 10px; padding: 10px 12px; transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(25,163,177,.15); background: #fff; }
.con-ojo { position: relative; display: block; }
.con-ojo input { padding-right: 46px; }
.ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 6px; color: var(--texto-3); cursor: pointer; display: grid; }
.ojo:hover { color: var(--ink); }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fila-cod { display: grid; grid-template-columns: 120px 1fr; gap: 14px; }
.acciones-form { display: flex; justify-content: flex-end; gap: 10px; padding-top: 6px; flex-wrap: wrap; }
.interruptor { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .92rem; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor span { width: 42px; height: 24px; border-radius: 99px; background: var(--linea-2); position: relative; flex: none; transition: background .2s; }
.interruptor span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.interruptor input:checked + span { background: var(--verde); }
.interruptor input:checked + span::after { transform: translateX(18px); }
.interruptor input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: 2px; }

/* ---------- Ingreso ---------- */
.sin-menu .principal { padding: 0; }
.acceso { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.acceso-arte { background: var(--ink); color: #fff; display: grid; place-items: center; padding: 48px; position: relative; overflow: hidden; }
.acceso-arte::before { content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%; border: 1px dashed rgba(124,200,78,.35); top: 50%; left: 50%; transform: translate(-50%, -50%); }
.acceso-arte::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(25,163,177,.45), transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); }
.acceso-arte-inner { position: relative; z-index: 1; max-width: 380px; }
.acceso-arte .marca { width: 74px; height: 81px; margin-bottom: 26px; }
.acceso-eslogan { font-size: 1.7rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; margin-bottom: 28px; }
.acceso-fases { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.acceso-fases li { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 8px; text-align: center; font-size: .78rem; color: #b9cbe2; }
.acceso-fases b { display: block; font-size: 1.3rem; color: var(--acento); }
.acceso-form { display: grid; place-items: center; padding: 32px 16px; }
.form-login { width: 100%; max-width: 420px; display: grid; gap: 14px; padding: 32px; }
.form-login h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.form-login .tenue { margin: -6px 0 4px; }

/* ---------- Panel admin ---------- */
.saludo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.saludo p { margin: 0; }
.saludo-titulo { font-size: 1.35rem; font-weight: 800; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--sombra); }
.kpi-lbl { font-size: .8rem; font-weight: 700; color: var(--texto-2); }
.kpi-num { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi small { font-size: .74rem; color: var(--texto-3); }
.grid-panel { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.lista-empresas { list-style: none; margin: 0; padding: 0; }
.lista-empresas li + li { border-top: 1px solid var(--linea); }
.lista-empresas a { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 22px; color: var(--texto); }
.lista-empresas a:hover { background: #f7f9fc; text-decoration: none; }
.le-nombre strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.le-nombre small { color: var(--texto-3); font-size: .8rem; }
.le-barra { display: flex; align-items: center; gap: 10px; }
.le-pct { font-weight: 800; font-size: .88rem; font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.le-estado { justify-self: end; }

.barra-prog { flex: 1; height: 8px; background: #e6ecf2; border-radius: 99px; overflow: hidden; display: block; min-width: 60px; }
.barra-prog > span { display: block; height: 100%; border-radius: 99px; background: var(--verde); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.barra-prog > .bp-critico { background: var(--rojo); }
.barra-prog > .bp-moderado { background: var(--ambar); }
.barra-prog > .bp-aceptable { background: var(--verde); }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.pill-sin { background: #edf0f4; color: var(--texto-2); }
.pill-revision { background: var(--ambar-suave); color: #8a5800; }
.pill-rechazado { background: var(--rojo-suave); color: #a3302a; }
.pill-aprobado { background: var(--menta); color: var(--ink-2); }
.pill-admin { background: var(--azul-suave); color: #1e4b80; }
.val { display: inline-block; font-size: .75rem; font-weight: 800; padding: 3px 10px; border-radius: 6px; }
.val-critico { background: var(--rojo-suave); color: #a3302a; }
.val-moderado { background: var(--ambar-suave); color: #8a5800; }
.val-aceptable { background: var(--menta); color: var(--ink-2); }

.actividad { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.actividad li { display: grid; grid-template-columns: 10px 1fr; gap: 12px; }
.actividad p { margin: 0; font-size: .88rem; line-height: 1.4; word-break: break-word; }
.actividad small { color: var(--texto-3); font-size: .76rem; }
.act-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--linea-2); margin-top: 5px; }
.act-carga .act-punto { background: var(--ambar); }
.act-aprobado .act-punto { background: var(--verde); }
.act-rechazado .act-punto, .act-eliminado .act-punto { background: var(--rojo); }
.act-empresa .act-punto, .act-usuario .act-punto { background: var(--azul); }

/* ---------- Resumen de cumplimiento ---------- */
.resumen { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 300px); gap: 26px; align-items: center; margin-bottom: 18px; }
.resumen-nombre { font-size: 1.4rem; font-weight: 800; margin-bottom: 4px; }
.resumen-texto .tenue { font-size: .9rem; margin-bottom: 10px; }
.resumen-val { margin: 0; font-size: .88rem; font-weight: 700; color: var(--texto-2); }
.resumen-fases { display: grid; gap: 10px; }
.fase-barra { display: grid; grid-template-columns: 28px minmax(0, 1fr) 52px; gap: 10px; align-items: center; }
.fase-info { display: grid; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--texto-2); }
.fase-pct { font-size: .85rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.fase-letra { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; font-weight: 800; font-size: .85rem; color: #fff; flex: none; }
.f-P { background: #2f6db3; } .f-H { background: #1f8a73; } .f-V { background: #c98500; } .f-A { background: #8a4fb3; } .f-X { background: var(--texto-3); }

.anillo { position: relative; display: grid; place-items: center; flex: none; }
.anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo-fondo { fill: none; stroke: #e6ecf2; stroke-width: 11; }
.anillo-valor { fill: none; stroke: var(--verde); stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); }
.anillo.critico .anillo-valor { stroke: var(--rojo); }
.anillo.moderado .anillo-valor { stroke: var(--ambar); }
.anillo-num { position: relative; font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ---------- Herramientas / filtros ---------- */
.herramientas { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.herramientas > .tenue { margin: 0; }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.filtro { font: 700 .84rem var(--font); padding: 7px 13px; border-radius: 99px; border: 1px solid var(--linea-2); background: var(--papel); color: var(--texto-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.filtro b { font-weight: 800; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.filtro:hover { border-color: var(--ink-2); color: var(--ink); text-decoration: none; }
.filtro.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.filtro.on b { color: var(--acento); }
.herr-der { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.buscador { position: relative; display: flex; align-items: center; }
.buscador .ico { position: absolute; left: 11px; color: var(--texto-3); }
.buscador input { padding-left: 36px; width: 230px; background: var(--papel); }

/* ---------- Fases e ítems ---------- */
.fase { margin-bottom: 22px; }
.fase-titulo { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 800; margin-bottom: 10px; }
.fase-titulo small { font-size: .8rem; font-weight: 600; color: var(--texto-3); }
.items { display: grid; gap: 8px; }
.item { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 1px 2px rgba(10,43,88,.04); overflow: hidden; }
.item[open] { box-shadow: var(--sombra); border-color: var(--linea-2); }
.item summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto 18px; gap: 14px; align-items: center; padding: 13px 16px; cursor: pointer; }
.item summary::-webkit-details-marker { display: none; }
.item summary:hover { background: #f7f9fc; }
.item-cod { font: 700 .78rem var(--mono); color: var(--texto-2); background: #edf1f6; border-radius: 6px; padding: 3px 7px; min-width: 44px; text-align: center; }
.item-nombre { font-weight: 600; font-size: .93rem; line-height: 1.35; }
.item-peso { display: block; font-size: .74rem; font-weight: 600; color: var(--texto-3); }
.item-docs { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--texto-3); }
.item-docs .ico { width: 15px; height: 15px; }
.chev { width: 18px; height: 18px; fill: none; stroke: var(--texto-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; justify-self: center; }
.item[open] .chev { transform: rotate(180deg); }
.item.est-aprobado { border-left: 3px solid var(--verde); }
.item.est-revision { border-left: 3px solid var(--ambar); }
.item.est-rechazado { border-left: 3px solid var(--rojo); }
.item-cuerpo { border-top: 1px solid var(--linea); padding: 16px; display: grid; gap: 14px; background: #fbfcfe; }
.item-desc { background: var(--azul-suave); color: #1e4b80; border-radius: 10px; padding: 10px 14px; font-size: .88rem; margin: 0; }
.item-admin { margin: 0; font-size: .84rem; }
.item-admin a { display: inline-flex; align-items: center; gap: 6px; }
.item-admin .ico { width: 15px; height: 15px; }

.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.doc { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; }
.doc-ext { width: 44px; height: 44px; border-radius: 9px; display: grid; place-items: center; font: 800 .66rem var(--font); letter-spacing: .03em; color: #fff; background: var(--texto-3); }
.ext-pdf { background: #c8423b; } .ext-doc { background: #2f6db3; } .ext-xls { background: #1f8a5b; } .ext-ppt { background: #d0652a; } .ext-img { background: #8a4fb3; }
.doc-info { min-width: 0; display: grid; gap: 1px; }
.doc-nombre { font-weight: 700; font-size: .9rem; color: var(--texto); overflow-wrap: anywhere; }
.doc-info small { color: var(--texto-3); font-size: .78rem; }
.doc-coment { margin: 6px 0 0; font-size: .84rem; padding: 7px 10px; border-radius: 8px; background: #f0f3f7; }
.coment-rechazado { background: var(--rojo-suave); color: #8c2721; }
.coment-aprobado { background: var(--menta); color: var(--ink-2); }
.doc-acciones { display: flex; gap: 6px; }
.doc-acciones form { margin: 0; }
.revisar { grid-column: 2 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.revisar input { flex: 1; min-width: 200px; padding: 7px 11px; font-size: .86rem; }

.subir { margin: 0; position: relative; }
.zona { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; border: 2px dashed var(--linea-2); border-radius: 12px; padding: 18px 16px; cursor: pointer; color: var(--texto-2); background: var(--papel); transition: border-color .15s, background .15s; }
.zona:hover, .zona.sobre { border-color: var(--verde); background: #eef8f9; color: var(--ink-2); }
.zona input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.zona:focus-within { border-color: var(--verde); }
.zona .ico { width: 24px; height: 24px; color: var(--verde); }
.zona span { font-size: .9rem; }
.zona small { font-size: .76rem; color: var(--texto-3); }
.subiendo { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.88); border-radius: 12px; font-weight: 800; color: var(--ink-2); }
.sin-resultados { text-align: center; padding: 30px; }

/* ---------- Empresa (detalle) ---------- */
.migas { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--texto-3); margin: -6px 0 16px; flex-wrap: wrap; }
.grid-empresa { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.col-lateral { display: grid; gap: 16px; position: sticky; top: 16px; }
.grid-empresa .resumen { grid-template-columns: auto minmax(0, 1fr); }
.grid-empresa .resumen-fases { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.datos { margin: 0; display: grid; gap: 10px; }
.datos div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; font-size: .9rem; }
.datos dt { color: var(--texto-3); font-weight: 600; }
.datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.datos.compacto div { grid-template-columns: 96px minmax(0, 1fr); font-size: .86rem; }
.lista-usuarios { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-usuarios li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.lista-usuarios strong { display: block; font-size: .88rem; }
.lista-usuarios small { display: block; font-size: .76rem; color: var(--texto-3); overflow-wrap: anywhere; }
.inactivo { opacity: .55; }

/* ---------- Tablas ---------- */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); font-weight: 800; padding: 12px 16px; border-bottom: 1px solid var(--linea); background: #f7f9fc; white-space: nowrap; }
.tabla td { padding: 12px 16px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: #fafbfd; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .der { text-align: right; }
.enlace-fuerte { font-weight: 800; color: var(--texto); }
.celda-prog { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.celda-prog b { font-size: .85rem; min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.celda-usuario { display: flex; align-items: center; gap: 10px; font-weight: 700; }

/* ---------- Formularios de edición ---------- */
.grid-form { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; max-width: 1100px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; max-width: 1100px; }
.nota h3 { font-size: .98rem; margin-bottom: 10px; }
.lista-simple { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 8px; font-size: .9rem; }
.zona-peligro { margin-top: 18px; max-width: 1100px; border-color: #f2c4c0; }
.fila-accion { display: flex; gap: 10px; flex-wrap: wrap; }
.fila-accion input { flex: 1; min-width: 220px; }
.credenciales { max-width: 1100px; margin-bottom: 18px; border-color: #b6e1e6; background: #f2fafb; }
.cred-texto { font: 600 .95rem/1.5 var(--mono); background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 14px 16px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 14px; }

/* ---------- Bandeja de revisión ---------- */
.bloque-revision { margin-bottom: 16px; }
.docs-revision { padding: 14px; }

/* ---------- Instalador ---------- */
.instalador { max-width: 680px; margin: 0 auto; padding: 40px 16px; }
.instalador h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; }
.instalador .tarjeta { display: grid; gap: 12px; }
.requisitos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.requisitos li { font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.requisitos .ok { background: var(--menta); color: var(--ink-2); }
.requisitos .mal { background: var(--rojo-suave); color: #8c2721; }
.opciones-db { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcion { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--linea-2); border-radius: 12px; padding: 12px; cursor: pointer; }
.opcion:has(input:checked) { border-color: var(--verde); background: #eef8f9; }
.opcion input { margin-top: 4px; accent-color: var(--verde); }
.opcion small { display: block; color: var(--texto-2); font-size: .8rem; }
#datosMysql { display: grid; gap: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .grid-empresa { grid-template-columns: 1fr; }
  .col-lateral { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .resumen { grid-template-columns: auto minmax(0, 1fr); }
  .resumen-fases { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .lateral { transform: translateX(-100%); transition: transform .25s; }
  .menu-abierto .lateral { transform: none; }
  .menu-abierto .velo { display: block; position: fixed; inset: 0; background: rgba(10,43,88,.4); z-index: 25; }
  .con-menu .principal { margin-left: 0; }
  .btn-menu { display: inline-flex; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-panel, .grid-form, .grid-2 { grid-template-columns: 1fr; }
  .acceso { grid-template-columns: 1fr; }
  .acceso-arte { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .barra { padding: 16px 0 12px; }
  .barra-titulo { font-size: 1.25rem; }
  .tarjeta { padding: 16px; }
  .fila-2, .fila-cod, .opciones-db { grid-template-columns: 1fr; }
  .resumen { grid-template-columns: 1fr; justify-items: start; gap: 16px; }
  .resumen-fases, .grid-empresa .resumen-fases { grid-template-columns: 1fr; width: 100%; }
  .item summary { grid-template-columns: auto minmax(0, 1fr) 18px; row-gap: 8px; }
  .item summary .item-docs { display: none; }
  .item summary .pill { grid-column: 2; grid-row: 2; justify-self: start; }
  .item summary .chev { grid-column: 3; grid-row: 1; }
  .doc { grid-template-columns: 40px minmax(0, 1fr); }
  .doc .pill { grid-column: 2; justify-self: start; }
  .doc-acciones { grid-column: 2; }
  .revisar { grid-column: 1 / -1; }
  .doc-ext { width: 40px; height: 40px; }
  .lista-empresas a { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
  .le-estado { justify-self: start; }
  .buscador input { width: 100%; }
  .buscador, .herr-der { width: 100%; }
  .herr-der .btn { flex: 1; }
  .kpi-num { font-size: 1.5rem; }
  .sin-relleno > .tarjeta-cab { padding: 14px 16px; }
  .form-login { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ---------- Marca (logo) ---------- */
.marca-img { width: 40px; height: auto; flex: none; }
.marca-txt { display: flex; flex-direction: column; line-height: 1; font-family: "Montserrat", var(--font); }
.marca-txt b { font-size: 1.05rem; font-weight: 800; letter-spacing: .03em; color: inherit; }
.marca-txt small { font-size: .6rem; font-weight: 700; letter-spacing: .07em; margin-top: 3px; }
.lateral-marca .marca-txt b { color: #fff; }
.lateral .marca-img { background: #fff; border-radius: 10px; padding: 4px; width: 44px; }
.logo-login { width: 230px; max-width: 100%; height: auto; margin: 0 0 8px -6px; }
.acceso-arte .emblema-grande { width: 150px; height: auto; margin-bottom: 26px; background: #fff; border-radius: 26px; padding: 16px; box-shadow: 0 20px 40px -14px rgba(0,0,0,.5); }
.lateral-sub { margin-left: 58px; }

/* ---------- Editor de la página web ---------- */
.editor { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.editor-indice { position: sticky; top: 16px; display: grid; gap: 2px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px; box-shadow: var(--sombra); }
.editor-indice a { padding: 8px 12px; border-radius: 8px; color: var(--texto-2); font-weight: 600; font-size: .88rem; }
.editor-indice a:hover { background: #f1f5f9; color: var(--ink); text-decoration: none; }
.editor-indice hr { margin: 6px 0; }
.editor-cuerpo { display: grid; gap: 16px; min-width: 0; }
.editor-cuerpo .tarjeta { scroll-margin-top: 16px; display: grid; gap: 14px; }
.editor-cuerpo .tarjeta > .tarjeta-titulo { margin: 0; }
.ayuda-formato { font-size: .8rem; color: var(--texto-3); }
.ayuda-formato code { font-size: .78rem; }
.repetidor { display: grid; gap: 10px; }
.fila-rep { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; background: #f8fafc; border: 1px solid var(--linea); border-radius: 12px; padding: 12px; }
.fila-rep-campos { display: grid; gap: 10px; min-width: 0; }
.fila-rep-campos.dos { grid-template-columns: 170px minmax(0, 1fr); }
.fila-rep-acc { display: flex; flex-direction: column; gap: 6px; }
.btn-ico[disabled] { opacity: .35; cursor: default; }
.barra-guardar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(241,245,248,.94); backdrop-filter: blur(6px); border-top: 1px solid var(--linea); padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); margin-top: 4px; }
.logo-actual { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo-actual img { width: 110px; height: auto; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 10px; }
.historial { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.historial li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .88rem; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.historial form { margin: 0; }
.check-linea { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9rem; }
@media (max-width: 980px) { .editor { grid-template-columns: 1fr; } .editor-indice { position: static; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .editor-indice hr { display: none; } }
@media (max-width: 640px) { .fila-rep-campos.dos { grid-template-columns: 1fr; } }

/* ---------- Tienda (panel) ---------- */
.mono { font-family: var(--mono); letter-spacing: .02em; }
.tabs-tienda { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--linea); margin: -4px 0 20px; }
.tabs-tienda a { padding: 10px 14px; font-weight: 700; font-size: .9rem; color: var(--texto-2); border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.tabs-tienda a:hover { color: var(--ink); text-decoration: none; }
.tabs-tienda a.on { color: var(--ink); border-bottom-color: var(--verde); }
.tabs-tienda .tabs-ver { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.tabs-tienda .tabs-ver .ico { width: 15px; height: 15px; }
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lista-productos { display: grid; gap: 10px; }
.fila-producto { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto auto; gap: 16px; align-items: center; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px 18px 10px 10px; color: var(--texto); box-shadow: 0 1px 2px rgba(10,43,88,.04); }
.fila-producto:hover { border-color: var(--linea-2); box-shadow: var(--sombra); text-decoration: none; }
.fp-portada .portada { width: 64px; border-radius: 8px; }
.fp-portada .pa-marco { inset: 3px; padding: 4px; border-radius: 5px; }
.fp-portada .pa-marca, .fp-portada .pa-graf, .fp-portada .pa-pie, .fp-portada .portada-badge { display: none; }
.fp-portada .pa-titulo { font-size: .42rem; }
.fp-info { min-width: 0; display: grid; gap: 2px; }
.fp-info strong { font-size: .98rem; overflow-wrap: anywhere; }
.fp-info small { color: var(--texto-3); font-size: .8rem; }
.fp-precio { font-weight: 800; font-variant-numeric: tabular-nums; }
.fp-ventas { color: var(--texto-3); font-size: .85rem; white-space: nowrap; }
.grid-producto { max-width: 1180px; grid-template-columns: minmax(0, 1fr) 340px; }
.col-precio { position: sticky; top: 16px; }
.subida { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--linea); }
.subida:first-of-type { border-top: 0; padding-top: 0; }
.subida b { display: block; font-size: .92rem; }
.subida small { display: block; color: var(--texto-3); font-size: .8rem; margin-top: 2px; line-height: 1.45; }
.subida input[type=file] { font: 500 .85rem var(--font); max-width: 100%; }
.subida-actual { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.subida-actual .ico { width: 16px; height: 16px; }
.portada-muestra { max-width: 230px; margin: 0 auto; }
.portada-muestra .portada { border-radius: 14px; }

/* Portadas (las mismas de la tienda pública) */
.portada { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #07131f; max-width: 100%; }
.portada-img img { width: 100%; height: 100%; object-fit: cover; }
.portada-auto { background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 46px), linear-gradient(160deg, #1f6fae 0%, #0a2b58 48%, #071c3a 100%); }
.portada-auto::before { content: ""; position: absolute; width: 62%; aspect-ratio: 1; right: 2%; top: 4%; border-radius: 50%; background: radial-gradient(circle, var(--acento) 0%, transparent 66%); opacity: .5; filter: blur(4px); }
.pa-marco { position: absolute; inset: 10px; z-index: 1; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 14px; }
.pa-marca { margin: 0; font: 700 .56rem/1.35 var(--mono); letter-spacing: .08em; color: rgba(255,255,255,.78); }
.pa-marca small { display: block; color: var(--acento); font-size: 1em; }
.pa-graf { width: 46%; align-self: flex-end; margin-top: 4%; color: var(--acento); }
.pa-graf circle { fill: #0a2b58; stroke: currentColor; stroke-width: 1.6; }
.pa-titulo { margin: auto 0 0; font-weight: 800; font-size: 1.2rem; line-height: 1.12; letter-spacing: -.02em; color: #f3f7fb; }
.pa-titulo span { color: var(--acento); }
.pa-pie { margin: 14px 0 0; font-size: .6rem; color: rgba(255,255,255,.62); }
.portada-badge { position: absolute; top: 10px; right: 10px; z-index: 2; background: #7cc84e; color: #06210f; font: 800 .56rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: 99px; }

@media (max-width: 980px) {
  .grid-producto { grid-template-columns: 1fr; }
  .col-precio { position: static; }
  .kpis-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fila-producto { grid-template-columns: 52px minmax(0, 1fr) auto; row-gap: 4px; }
  .fp-portada { grid-row: span 2; }
  .fp-portada .portada { width: 52px; }
  .fp-ventas { display: none; }
  .fp-estado { grid-column: 2; }
  .fp-precio { grid-column: 3; grid-row: 1; }
  .subida { grid-template-columns: 1fr; }
  .tabs-tienda .tabs-ver { margin-left: 0; }
}

/* ---------- Vencimientos ---------- */
.contador-rojo { background: #ff7a70; color: #fff; }
.txt-verde { color: var(--verde); }
.vig { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 800; padding: 3px 10px 3px 8px; border-radius: 99px; white-space: nowrap; }
.vig .ico { width: 14px; height: 14px; }
.vig-vencido { background: var(--rojo-suave); color: #a3302a; }
.vig-proximo { background: var(--ambar-suave); color: #8a5800; }
.vig-vigente { background: #e3f4ea; color: #1f7a45; }
.vig-mini { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: .72rem; font-weight: 800; padding: 1px 8px 1px 6px; border-radius: 99px; vertical-align: 2px; white-space: nowrap; }
.vig-mini .ico { width: 12px; height: 12px; }
.doc-vig { display: block; margin-top: 4px; }
.aviso-vence { display: flex; gap: 10px; align-items: flex-start; }
.aviso-vence .ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.aviso-alerta { background: var(--ambar-suave); color: #7a4e00; border-color: #f3d79c; }
.filtro-vencido { border-color: #eab8b4; color: #a3302a; }
.filtro-vencido.on { background: var(--rojo); border-color: var(--rojo); }
.filtro-vencido.on b { color: #fff; }
.filtro-proximo { border-color: #f0cf8c; color: #8a5800; }
.filtro-proximo.on { background: #b97500; border-color: #b97500; }
.filtro-proximo.on b { color: #fff; }

/* Fecha al cargar */
.subir-vence { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 12px; align-items: center; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: #f7f9fc; }
.subir-vence label { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 700; color: var(--texto-2); white-space: nowrap; }
.subir-vence label small, .vence-form label small { font-weight: 600; color: var(--texto-3); }
.subir-vence .ico, .vence-form .ico, .revisar-vence .ico { width: 16px; height: 16px; color: var(--verde); }
.subir-vence input[type=date] { width: auto; padding: 6px 10px; font-size: .86rem; }
.subir-vence > small { font-size: .76rem; color: var(--texto-3); line-height: 1.35; }

/* Editar fecha de un documento (consultor) */
.vence-form { grid-column: 2 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 2px; }
.vence-form label { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--texto-2); }
.vence-form input[type=date] { width: auto; padding: 6px 10px; font-size: .84rem; }
.btn-txt { background: none; border: 0; padding: 4px 6px; font: 700 .82rem var(--font); color: var(--texto-3); cursor: pointer; text-decoration: underline; }
.btn-txt:hover { color: var(--rojo); }
.revisar-vence { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--texto-2); }
.revisar .revisar-vence input { flex: none; min-width: 0; width: auto; padding: 6px 9px; }

/* Página de vencimientos */
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-link { color: inherit; text-decoration: none !important; transition: border-color .15s, transform .15s; }
.kpi-link:hover { border-color: var(--ink-2); transform: translateY(-1px); }
.kpi small { color: var(--texto-3); font-size: .78rem; }
.tarjeta-cab-filtros { justify-content: flex-start; }
.lista-vence { list-style: none; margin: 0; padding: 0; }
.lista-vence li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto 34px; gap: 14px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--linea); border-left: 4px solid transparent; }
.lista-vence li:last-child { border-bottom: 0; }
.lista-vence li.lv-vencido { border-left-color: var(--rojo); }
.lista-vence li.lv-proximo { border-left-color: var(--ambar); }
.lista-vence li.lv-vigente { border-left-color: #3aa46a; }
.lv-fecha { display: grid; place-items: center; text-align: center; background: #f3f6fa; border-radius: 10px; padding: 6px 4px; line-height: 1.1; }
.lv-fecha b { font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.lv-fecha small { font-size: .68rem; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
.lv-vencido .lv-fecha { background: var(--rojo-suave); } .lv-vencido .lv-fecha b { color: #a3302a; }
.lv-proximo .lv-fecha { background: var(--ambar-suave); } .lv-proximo .lv-fecha b { color: #8a5800; }
.lv-info { min-width: 0; display: grid; gap: 2px; }
.lv-emp { font-weight: 800; color: var(--texto); }
.lv-item { font-size: .84rem; color: var(--texto-2); }
.lv-doc { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--ink-2); overflow-wrap: anywhere; }
.lv-doc .ico { width: 14px; height: 14px; flex: none; }
.campo-sufijo { display: flex; align-items: center; gap: 10px; }
.campo-sufijo input { max-width: 110px; }
.campo-sufijo em { font-style: normal; font-weight: 700; color: var(--texto-2); }
.form-vence-ajustes { display: grid; gap: 14px; }
.form-probar { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
.lista-ayuda { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--texto-2); font-size: .88rem; }

/* Panel: tarjeta de vencimientos */
.col-apilada { display: grid; gap: 18px; align-content: start; }
.mini-vence { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.mini-vence a { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 8px; color: inherit; }
.mini-vence a:hover { background: #f5f8fb; text-decoration: none; }
.mv-punto { width: 9px; height: 9px; border-radius: 50%; }
.mv-punto.mv-vencido { background: var(--rojo); } .mv-punto.mv-proximo { background: var(--ambar); }
.mv-txt { min-width: 0; display: grid; }
.mv-txt strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-txt small { font-size: .76rem; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-cuando { font-size: .76rem; font-weight: 800; white-space: nowrap; }
.mv-cuando.mv-vencido { color: #a3302a; } .mv-cuando.mv-proximo { color: #8a5800; }
.le-estado { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 640px) {
  .subir-vence { grid-template-columns: 1fr; }
  .subir-vence input[type=date] { width: 100%; }
  .vence-form { grid-column: 1 / -1; }
  .kpis-3 { grid-template-columns: 1fr 1fr; }
  .kpis-3 .kpi:last-child { grid-column: 1 / -1; }
  .lista-vence li { grid-template-columns: 52px minmax(0, 1fr); padding: 12px 14px; }
  .lista-vence li .vig { grid-column: 2; justify-self: start; }
  .lista-vence li .btn-ico { display: none; }
  .revisar-vence { flex: 1 1 100%; }
}
.contador-ambar { background: var(--ambar); color: #3d2600; }
.vig-renovado { background: #edf0f4; color: var(--texto-2); }

/* ---------- Incidentes ---------- */
input[type=date], input[type=time] { width: 100%; font: 500 .95rem var(--font); color: var(--texto); background: #fbfcfe; border: 1.5px solid var(--linea-2); border-radius: 10px; padding: 9px 12px; }
.fila-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.inc-campos { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
.inc-campos + .inc-campos { border-top: 1px solid var(--linea); padding-top: 18px; }
.inc-campos legend { padding: 0; margin-bottom: 4px; float: left; width: 100%; }
.inc-campos[hidden], [data-solo][hidden] { display: none; }
.campo > span em { font-style: normal; }
.inc-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.inc-tipo { position: relative; cursor: pointer; }
.inc-tipo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.inc-tipo > span { display: grid; gap: 2px; height: 100%; padding: 12px 14px 12px 16px; border: 1.5px solid var(--linea-2); border-left-width: 5px; border-radius: 12px; background: #fbfcfe; transition: border-color .15s, background .15s; }
.inc-tipo b { font-size: .92rem; }
.inc-tipo small { font-size: .78rem; color: var(--texto-3); }
.inc-tipo-accidente > span { border-left-color: var(--rojo); }
.inc-tipo-incidente > span { border-left-color: var(--ambar); }
.inc-tipo-acto > span { border-left-color: var(--azul); }
.inc-tipo-condicion > span { border-left-color: var(--texto-3); }
.inc-tipo input:checked + span { border-color: var(--ink); background: var(--azul-suave); border-left-width: 5px; }
.inc-tipo-accidente input:checked + span { border-left-color: var(--rojo); }
.inc-tipo-incidente input:checked + span { border-left-color: var(--ambar); }
.inc-tipo-acto input:checked + span { border-left-color: var(--azul); }
.inc-tipo input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: 2px; }
.inc-campos[disabled] .inc-tipo { cursor: default; }
.inc-selector { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.inc-selector .campo { min-width: 140px; }
.inc-selector .campo:first-of-type:not(:last-of-type) { min-width: 240px; }
.lista-inc { list-style: none; margin: 0; padding: 0; }
.lista-inc li + li { border-top: 1px solid var(--linea); }
.lista-inc a { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 22px; color: var(--texto); }
.lista-inc a:hover { background: #fafbfd; text-decoration: none; }
.li-info { display: grid; gap: 5px; min-width: 0; }
.li-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.li-cab strong { font-size: .9rem; }
.li-desc { font-size: .92rem; overflow-wrap: anywhere; }
.li-alertas { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.li-info .li-alertas { margin: 2px 0 0; }
.li-estado { padding-top: 2px; }
.tabla-ind { font-size: .84rem; }
.tabla-ind th, .tabla-ind td { padding: 7px 8px; }
.tabla-ind th:first-child, .tabla-ind td:first-child { padding-left: 18px; }
.tabla-ind th:last-child, .tabla-ind td:last-child { padding-right: 18px; }
.tabla-ind th { letter-spacing: .02em; }
.tabla-ind tr.tenue td { color: var(--texto-3); }
.ind-pie { padding: 12px 22px; margin: 0; border-top: 1px solid var(--linea); }
.lista-evid { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.lista-evid li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.lista-evid a { display: flex; gap: 8px; align-items: flex-start; color: var(--texto); font-weight: 700; font-size: .88rem; overflow-wrap: anywhere; }
.lista-evid a .ico { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ink-2); }
.lista-evid small { display: block; font-weight: 500; font-size: .76rem; color: var(--texto-3); }
.act-incidente .act-punto { background: var(--rojo); }
@media (max-width: 640px) {
  .inc-tipos { grid-template-columns: 1fr; }
  .lista-inc a { grid-template-columns: 48px minmax(0, 1fr); padding: 14px 16px; }
  .li-estado { grid-column: 2; }
  .inc-selector, .inc-selector .campo { width: 100%; }
}

/* ---------- Plan de trabajo y trabajadores ---------- */
.acciones-centro { justify-content: center; }
.plan-resumen { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; margin-bottom: 18px; }
.plan-resumen p { margin: 0; }
.plan-leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .8rem; color: var(--texto-2); }
.plan-leyenda li { display: flex; align-items: center; gap: 8px; }
.plan-leyenda .pc { width: 18px; height: 18px; cursor: default; }
.tabla-plan { font-size: .86rem; }
.tabla-plan th, .tabla-plan td { padding: 8px 6px; }
.tabla-plan .tp-act { min-width: 260px; padding-left: 18px; }
.tabla-plan td.tp-act strong { display: block; font-weight: 700; line-height: 1.35; }
.tabla-plan td.tp-act small { display: block; color: var(--texto-3); font-size: .76rem; margin-top: 2px; }
.tabla-plan .tp-mes { text-align: center; width: 44px; }
.tabla-plan th.tp-hoy { color: var(--ink); background: var(--azul-suave); }
.tabla-plan .tp-fase th { background: #f7f9fc; text-transform: none; letter-spacing: 0; font-size: .86rem; color: var(--texto); padding: 10px 18px; }
.tabla-plan .tp-fase .fase-letra { width: 22px; height: 22px; font-size: .74rem; margin-right: 8px; vertical-align: middle; border-radius: 6px; }
.tabla-plan tbody tr:target td { background: var(--azul-suave); }
.pc { width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--linea-2); background: var(--papel); display: inline-grid; place-items: center; cursor: pointer; padding: 0; color: #fff; transition: transform .1s; }
.pc:hover { transform: scale(1.12); }
.pc .ico { width: 15px; height: 15px; stroke-width: 3; }
.pc-prog { border-color: var(--ink-2); }
.pc-actual { border-color: var(--ambar); background: var(--ambar-suave); }
.pc-atraso { border-color: var(--rojo); background: var(--rojo-suave); }
.pc-ok { border-color: var(--verde); background: var(--verde); }
.plan-pie { margin: 12px 4px 0; max-width: 900px; }
.campo-leyenda { font-size: .82rem; font-weight: 700; color: var(--texto-2); padding: 0; margin-bottom: 8px; }
.meses-sel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.meses-sel label { position: relative; cursor: pointer; }
.meses-sel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.meses-sel span { display: block; text-align: center; padding: 8px 0; border: 1.5px solid var(--linea-2); border-radius: 9px; font-weight: 700; font-size: .84rem; color: var(--texto-2); background: #fbfcfe; }
.meses-sel input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.meses-sel input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: 2px; }
.meses-rapido { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 980px) {
  .plan-resumen { grid-template-columns: auto minmax(0, 1fr); }
  .plan-leyenda { grid-column: 1 / -1; grid-template-columns: repeat(4, auto); justify-content: start; gap: 6px 16px; }
}
@media (max-width: 640px) {
  .plan-resumen { grid-template-columns: 1fr; justify-items: start; }
  .plan-leyenda { grid-template-columns: repeat(2, auto); }
  .meses-sel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
#tablaTrab td:first-child { min-width: 170px; }
.pill-consultor { background: var(--menta); color: var(--ink-2); }
.fila-2:has(> .campo[hidden]) { grid-template-columns: 1fr; }

/* ---------- Ausentismo ---------- */
.tabla-aus .aus-barra-col { width: 30%; min-width: 90px; }
.aus-barra { display: block; height: 8px; border-radius: 99px; background: #edf1f6; overflow: hidden; }
.aus-barra > span { display: block; height: 100%; border-radius: 99px; background: var(--ambar); }
.aus-tipos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aus-tipos li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: .86rem; }
.aus-tipos .aus-barra { grid-column: 1 / -1; height: 6px; }
.aus-tipos b { font-variant-numeric: tabular-nums; }
.aus-comun { background: var(--ambar) !important; } .aus-laboral { background: var(--rojo) !important; } .aus-accidente { background: #e0762f !important; }
.aus-licencia { background: var(--azul) !important; } .aus-otro { background: var(--texto-3) !important; }
.aus-sub { font-size: .86rem; margin: 18px 0 8px; color: var(--texto-2); }
.aus-top { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: .86rem; }
.aus-top li span { display: inline-block; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.aus-top li b { float: right; font-variant-numeric: tabular-nums; }
.aus-dias { display: flex; align-items: center; min-height: 42px; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.lista-inc .li-estado .ico { width: 16px; height: 16px; color: var(--texto-3); }

/* ---------- EPP ---------- */
.fila-vida { display: grid; grid-template-columns: 110px 140px; gap: 10px; }
.epp-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.epp-items li { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--linea); border-radius: 10px; background: #fbfcfe; }
.epp-items label strong { display: block; font-size: .9rem; }
.epp-items label small { display: block; font-size: .76rem; color: var(--texto-3); }
.epp-items input { text-align: center; }
.epp-stock { font-size: .95rem; margin: 0 0 12px; }
.epp-stock b { font-size: 1.6rem; font-weight: 800; }
.fila-2[hidden] { display: none; }

/* ---------- Menú agrupado ---------- */
.lateral-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; margin-right: -6px; padding-right: 6px; }
.lateral-nav a { padding: 8px 12px; }
.lateral-grupo { margin: 12px 12px 4px; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #7f97b6; }
.lateral-pie { margin-top: 10px; }
.lateral-sub { margin-bottom: 14px; }

/* ---------- Matriz de peligros ---------- */
.nr { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 8px; border-radius: 7px; font-weight: 800; font-size: .8rem; color: #fff; }
.nr1 { background: #b42318; } .nr2 { background: #e0762f; } .nr3 { background: #e9b10a; color: #3d2c00; } .nr4 { background: #1f8a73; }
.tabla-pel td { vertical-align: top; }
.tabla-pel .tp-fase th { background: #f7f9fc; text-transform: none; letter-spacing: 0; font-size: .86rem; color: var(--texto); }
.pel-med span { display: block; font-size: .8rem; line-height: 1.4; }
.pel-med b { color: var(--texto-2); font-weight: 700; }
.mapa-riesgo { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: .74rem; margin-bottom: 10px; }
.mapa-riesgo th { font-weight: 700; color: var(--texto-3); text-align: center; padding: 2px; }
.mapa-riesgo tbody th { text-align: right; padding-right: 6px; white-space: nowrap; }
.mapa-riesgo td { height: 34px; text-align: center; font-weight: 800; font-size: .9rem; border-radius: 6px; color: #fff; }
.mapa-riesgo td.nr3 { color: #3d2c00; }
.mapa-riesgo td.vacio { opacity: .28; }
.fila-cod-ancho { grid-template-columns: 220px minmax(0, 1fr); }
.pel-valor { position: sticky; top: 16px; }
.pel-nivel { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; }
.pel-nivel .nr { min-width: 44px; height: 34px; font-size: 1.05rem; }
.pel-nivel b { font-size: .92rem; line-height: 1.3; }
@media (max-width: 640px) { .fila-cod-ancho { grid-template-columns: 1fr; } }

/* ---------- Matriz legal ---------- */
.tabla-legal td { vertical-align: top; }
.leg-norma { min-width: 150px; }
.leg-req { display: block; font-size: .82rem; color: var(--texto-2); margin-top: 4px; line-height: 1.45; }
.leg-ev { font-size: .84rem; max-width: 260px; }

/* ---------- Capacitaciones ---------- */
.nowrap { white-space: nowrap; }
.tabla-cap td { vertical-align: top; }
.asis-herr { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.asis-herr input { max-width: 240px; padding: 7px 10px; }
.asis-lista { list-style: none; margin: 4px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; max-height: 340px; overflow-y: auto; border: 1px solid var(--linea); border-radius: 10px; padding: 8px; background: #fbfcfe; }
.asis-lista label { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: .88rem; font-weight: 600; }
.asis-lista label:hover { background: var(--azul-suave); }
.asis-lista input { margin-top: 3px; accent-color: var(--verde); }
.asis-lista small { display: block; font-weight: 500; font-size: .76rem; color: var(--texto-3); }
#bloqueAsistentes[hidden] { display: none; }
/* ---------- Inspecciones ---------- */
.insp-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 14px; max-width: 1000px; }
.insp-tipo { display: grid; gap: 6px; color: var(--texto); padding: 18px; }
.insp-tipo:hover { border-color: var(--ink-2); text-decoration: none; }
.insp-tipo .ico { width: 26px; height: 26px; color: var(--verde); }
.insp-tipo small { color: var(--texto-3); }
.insp-form { max-width: 1000px; }
.insp-herr { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.insp-items, .insp-res { margin: 0; padding: 0 0 0 22px; display: grid; gap: 6px; }
.insp-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linea); background: #fbfcfe; }
.insp-items li.insp-no { border-color: #f2c4c0; background: var(--rojo-suave); }
.insp-txt { font-size: .9rem; }
.insp-op { display: inline-flex; gap: 4px; }
.insp-op label { position: relative; cursor: pointer; }
.insp-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.insp-op span { display: inline-block; padding: 6px 10px; border-radius: 8px; border: 1.5px solid var(--linea-2); font-size: .78rem; font-weight: 700; color: var(--texto-2); background: #fff; }
.insp-op .op-c input:checked + span { background: var(--verde); border-color: var(--verde); color: #fff; }
.insp-op .op-n input:checked + span { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.insp-op .op-na input:checked + span { background: var(--texto-3); border-color: var(--texto-3); color: #fff; }
.insp-op input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: 2px; }
.insp-res { padding: 14px 22px 18px 40px; }
.insp-res li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .88rem; padding: 4px 0; border-bottom: 1px dashed var(--linea); }
.insp-resumen { display: grid; justify-items: center; gap: 14px; }
.insp-resumen .datos { width: 100%; }
.hall-lista { display: grid; gap: 12px; }
.hall { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--linea); border-left: 4px solid var(--ambar); border-radius: 12px; background: #fbfcfe; }
.hall-vencido { border-left-color: var(--rojo); }
.hall-cerrado { border-left-color: var(--verde); opacity: .8; }
.hall-cab { display: flex; gap: 10px; align-items: center; }
.hall-desc { font-weight: 700; }
.hall-acc { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.hall-acc > span { display: flex; gap: 10px; align-items: center; }
.hall-nuevo { margin-top: 14px; }
.hall-nuevo summary { cursor: pointer; font-weight: 700; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }
.hall-nuevo summary .ico { width: 16px; height: 16px; }
.hall-nuevo form { margin-top: 12px; }
@media (max-width: 640px) { .insp-items li { grid-template-columns: 1fr; } }