:root {
  --azul: #45689F; --azul-oscuro: #34507D; --azul-profundo: #23365a; --azul-claro: #5B9BD5; --celeste: #7FB3E0; --celeste-sut: #EAF2FB;
  --texto: #1a1c21; --texto-sec: #5a5f6e; --texto-ter: #8b90a0; --borde: #dfe3ec; --borde-sut: #eef0f6; --fondo: #f7f8fc; --superficie: #ffffff; --campo: #f9fafc;
  --rojo: #d93a52; --rojo-fondo: #fdeef0; --verde: #00a862; --verde-fondo: #e6f7ef; --ambar: #b8720a; --ambar-fondo: #fdf4e3;
  --pc-verde: #4CB99A; --radio-sm: 8px; --radio: 12px; --radio-lg: 20px; --t: 180ms cubic-bezier(.4,0,.2,1);
  --lienzo-a: #f2f6fc; --lienzo-b: #e3ecf8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --texto: #e9ebf2; --texto-sec: #a2a8bb; --texto-ter: #71768a; --borde: #2b3040; --borde-sut: #232735; --fondo: #0e1017; --superficie: #171a24; --campo: #1e222e;
    --rojo-fondo: #2c1a1f; --verde-fondo: #14261e; --ambar: #e0a24a; --ambar-fondo: #2a2214; --celeste-sut: #1b2436; --lienzo-a: #141a28; --lienzo-b: #1a2335;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 14px; }
a { color: var(--azul-claro); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
.oculto { display: none !important; }

/* ---------- Franja demo ---------- */
.franja { background: #fff7ed; color: #9a3412; font-size: 12px; text-align: center; padding: 5px 12px; border-bottom: 1px solid #fed7aa; }
.franja a { color: #9a3412; font-weight: 700; }
@media (prefers-color-scheme: dark) { .franja { background: #2a1a0e; color: #fdba74; border-color: #4a2a12; } .franja a { color: #fdba74; } }

/* ---------- Barra ---------- */
.barra { height: 58px; background: linear-gradient(90deg, var(--azul-profundo), var(--azul-oscuro)); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 18px; position: sticky; top: 0; z-index: 50; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; white-space: nowrap; }
.marca:hover { text-decoration: none; }
.marca small { display: block; font-weight: 500; font-size: 11px; opacity: .7; }
.marca svg { width: 34px; height: 34px; flex: none; }
.buscador { flex: 1; max-width: 520px; position: relative; }
.buscador input { width: 100%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); color: #fff; border-radius: 99px; padding: 8px 14px 8px 36px; outline: none; }
.buscador input::placeholder { color: rgba(255,255,255,.65); }
.buscador input:focus { background: rgba(255,255,255,.2); }
.buscador svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: .8; }
.nav-barra { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav-barra a, .nav-barra button { color: #fff; opacity: .85; padding: 7px 11px; border-radius: 8px; background: none; border: 0; cursor: pointer; font-weight: 500; white-space: nowrap; }
.nav-barra a:hover, .nav-barra button:hover, .nav-barra .activo { opacity: 1; background: rgba(255,255,255,.12); text-decoration: none; }
.usuario { display: flex; align-items: center; gap: 8px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--celeste); color: var(--azul-profundo); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.menu-usuario { position: absolute; right: 12px; top: 54px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 8px; min-width: 240px; z-index: 60; }
.menu-usuario .quien { padding: 8px 10px 10px; border-bottom: 1px solid var(--borde-sut); margin-bottom: 6px; }
.menu-usuario button, .menu-usuario a { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--texto); }
.menu-usuario button:hover, .menu-usuario a:hover { background: var(--celeste-sut); text-decoration: none; }

.contenido { max-width: 1320px; margin: 0 auto; padding: 22px 22px 60px; }

/* ---------- Componentes ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; margin-bottom: 16px; }
.tarjeta h2 { font-size: 15px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cabecera h1 { font-size: 22px; margin: 0; }
.cabecera .sub { color: var(--texto-sec); font-size: 13px; margin-top: 3px; }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); padding: 8px 14px; border-radius: var(--radio-sm); cursor: pointer; font-weight: 600; font-size: 13px; transition: var(--t); white-space: nowrap; }
.btn:hover { border-color: var(--azul-claro); text-decoration: none; }
.btn-primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-oscuro); color: #fff; }
.btn-peligro { color: var(--rojo); }
.btn-chico { padding: 5px 10px; font-size: 12px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.campo label { font-size: 12px; font-weight: 600; color: var(--texto-sec); }
.campo input, .campo select, .campo textarea, .filtros input, .filtros select { background: var(--campo); border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 8px 10px; outline: none; width: 100%; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--azul-claro); }
.ayuda { font-size: 12px; color: var(--texto-ter); }
.rejilla { display: grid; gap: 12px; }
.r2 { grid-template-columns: 1fr 1fr; } .r3 { grid-template-columns: repeat(3, 1fr); } .r4 { grid-template-columns: repeat(4, 1fr); }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.chip-verde { background: var(--verde-fondo); color: var(--verde); } .chip-rojo { background: var(--rojo-fondo); color: var(--rojo); } .chip-ambar { background: var(--ambar-fondo); color: var(--ambar); }
.chip-gris { background: var(--borde-sut); color: var(--texto-sec); } .chip-azul { background: var(--celeste-sut); color: var(--azul); }
.aviso { border-radius: var(--radio-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 14px; border: 1px solid var(--borde); background: var(--celeste-sut); }
.aviso-rojo { background: var(--rojo-fondo); border-color: transparent; color: var(--rojo); }
.aviso-verde { background: var(--verde-fondo); border-color: transparent; color: var(--verde); }
.aviso-ambar { background: var(--ambar-fondo); border-color: transparent; color: var(--ambar); }

/* ---------- Tabla ---------- */
.tabla-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-sec); background: var(--campo); padding: 9px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap; position: sticky; top: 0; }
.tabla td { padding: 9px 12px; border-bottom: 1px solid var(--borde-sut); vertical-align: middle; }
.tabla tr:hover td { background: var(--celeste-sut); }
.tabla .codigo { font-family: ui-monospace, Consolas, monospace; font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.tabla tr.registro td:first-child { padding-left: 30px; }
.tabla tr.registro .codigo::before { content: '↳ '; color: var(--texto-ter); }
.tabla tr.obsoleto td { opacity: .55; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.filtros select, .filtros input { width: auto; padding: 7px 10px; }
.pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pestanas a { padding: 6px 12px; border-radius: 99px; background: var(--superficie); border: 1px solid var(--borde); color: var(--texto-sec); font-weight: 600; font-size: 12.5px; }
.pestanas a.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.pestanas a:hover { text-decoration: none; border-color: var(--azul-claro); }

/* ---------- Mapa de procesos: UN SOLO DIBUJO, cabe en la pantalla ---------- */
.mapa-pagina { height: calc(100dvh - 58px - 27px); display: flex; flex-direction: column; padding: clamp(8px, 1.6vh, 18px) clamp(12px, 2vw, 28px); gap: clamp(6px, 1.2vh, 12px); max-width: 1500px; margin: 0 auto; }
.mapa-titulo { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.mapa-titulo h1 { margin: 0; font-size: clamp(18px, 2.6vh, 24px); }
.resumen { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--texto-sec); }
.resumen a, .resumen span { padding: 3px 10px; border-radius: 99px; background: var(--superficie); border: 1px solid var(--borde); color: var(--texto-sec); }
.resumen .r-rojo { background: var(--rojo-fondo); color: var(--rojo); border-color: transparent; font-weight: 600; }
.resumen .r-ambar { background: var(--ambar-fondo); color: var(--ambar); border-color: transparent; font-weight: 600; }
.lienzo { flex: 1; min-height: 0; display: flex; gap: clamp(6px, 1vw, 14px); background: linear-gradient(160deg, var(--lienzo-a), var(--lienzo-b)); border-radius: var(--radio-lg); padding: clamp(8px, 1.4vh, 16px); border: 1px solid var(--borde); }
.banda-lateral { width: clamp(46px, 4.2vw, 64px); flex: none; background: var(--azul-oscuro); color: #fff; display: flex; align-items: center; justify-content: center; clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%); padding-right: 12px; }
.banda-lateral.salida { background: var(--pc-verde); }
.banda-lateral span { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; font-size: clamp(11px, 1.5vh, 14px); text-align: center; letter-spacing: .02em; }
.flujo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.nivel { display: flex; flex-direction: column; border-radius: var(--radio); padding: clamp(6px, 1vh, 12px); min-height: 0; }
.nivel-banda { background: linear-gradient(90deg, var(--azul), var(--azul-oscuro)); color: #fff; flex: 1.05; }
.nivel-centro { flex: 1.5; }
.rotulo { margin: 0 0 clamp(4px, .8vh, 8px); font-size: clamp(10px, 1.35vh, 12px); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; opacity: .85; text-align: center; }
.nivel-centro .rotulo { color: var(--azul-oscuro); }
@media (prefers-color-scheme: dark) { .nivel-centro .rotulo { color: var(--celeste); } }
.hileras { flex: 1; min-height: 0; display: flex; gap: clamp(6px, .8vw, 12px); }
.ficha { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(3px, .6vh, 6px); text-align: center; border-radius: var(--radio); background: rgba(255,255,255,.12); color: #fff; padding: clamp(4px, .8vh, 10px) 6px; transition: var(--t); border: 1px solid rgba(255,255,255,.18); }
.ficha:hover { background: rgba(255,255,255,.24); text-decoration: none; transform: translateY(-1px); }
.ficha svg { width: clamp(20px, 3.4vh, 30px); height: clamp(20px, 3.4vh, 30px); }
.ficha .nom { font-weight: 700; font-size: clamp(10.5px, 1.5vh, 13.5px); line-height: 1.15; }
.ficha .cnt { font-size: clamp(10px, 1.3vh, 12px); opacity: .85; }
.alertas { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; }
.alertas b { min-width: 20px; height: 20px; border-radius: 99px; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.alertas .v { background: var(--rojo); } .alertas .p { background: #e39613; }
.hileras-circulos { justify-content: center; align-items: center; gap: clamp(20px, 5vw, 80px); }
.circulo { flex: none; height: 92%; max-height: 190px; aspect-ratio: 1; border-radius: 50%; background: var(--superficie); color: var(--azul-oscuro); border: 3px solid var(--azul); box-shadow: 0 8px 24px rgba(35,54,90,.15); }
.circulo:hover { background: var(--celeste-sut); }
.circulo svg { width: clamp(26px, 5vh, 42px); height: clamp(26px, 5vh, 42px); }
.circulo .nom { font-size: clamp(12px, 2vh, 16px); }
.circulo .cnt { color: var(--texto-sec); opacity: 1; }
@media (prefers-color-scheme: dark) { .circulo { color: var(--celeste); } }
.flecha-cadena { color: var(--azul); font-size: clamp(18px, 3vh, 28px); font-weight: 800; }
.conector { height: clamp(8px, 1.6vh, 16px); display: flex; justify-content: center; }
.conector::before { content: ''; width: 26px; height: 100%; background: var(--azul-claro); clip-path: polygon(30% 0, 70% 0, 70% 45%, 100% 45%, 50% 100%, 0 45%, 30% 45%); opacity: .8; }
.seguimiento { margin-top: clamp(6px, 1vh, 10px); display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--azul-profundo); color: #fff; border-radius: var(--radio); padding: clamp(6px, 1.1vh, 11px); font-weight: 700; font-size: clamp(11px, 1.5vh, 14px); position: relative; }
.seguimiento:hover { text-decoration: none; filter: brightness(1.15); }
.seguimiento .alertas { top: 50%; transform: translateY(-50%); right: 12px; }
@media (max-width: 900px), (max-height: 540px) {
  .mapa-pagina { height: auto; }
  .lienzo { flex-direction: column; }
  .banda-lateral { width: auto; clip-path: none; padding: 8px; border-radius: var(--radio-sm); }
  .banda-lateral span { writing-mode: horizontal-tb; transform: none; }
  .hileras { flex-wrap: wrap; }
  .nivel-banda .ficha { flex: 1 1 140px; min-height: 84px; }
  .hileras-circulos { gap: 12px; padding: 6px 0; }
  .circulo { height: 120px; }
  .flecha-cadena { display: none; }
}

/* ---------- Ficha de documento ---------- */
.ficha-cab { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.ficha-cab .cod { font-family: ui-monospace, Consolas, monospace; font-weight: 800; color: var(--azul); font-size: 14px; }
.ficha-cab h1 { margin: 2px 0 6px; font-size: 22px; }
.ficha-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
.visor { padding: 0; overflow: hidden; }
.visor iframe { width: 100%; height: 72vh; min-height: 480px; border: 0; display: block; background: #525659; }
.visor-barra { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--borde); gap: 8px; flex-wrap: wrap; }
.planilla { overflow: auto; max-height: 72vh; }
.planilla table { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.planilla td, .planilla th { border: 1px solid #b7c3d6; padding: 6px 8px; height: 26px; background: #fff; color: #111; }
.planilla th { background: #dbe6f5; font-weight: 700; }
.planilla .titulo-planilla { background: var(--azul-oscuro); color: #fff; font-size: 14px; text-align: center; }
.planilla .enc { background: #f1f5fb; font-weight: 600; }
.datos dt { font-size: 11px; color: var(--texto-ter); text-transform: uppercase; letter-spacing: .04em; margin-top: 10px; }
.datos dd { margin: 2px 0 0; font-weight: 500; }
.version { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde-sut); }
.version:last-child { border-bottom: 0; }
.version .n { width: 34px; height: 34px; border-radius: 50%; background: var(--celeste-sut); color: var(--azul); display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.version.actual .n { background: var(--azul); color: #fff; }
.actividad li { list-style: none; padding: 6px 0; border-bottom: 1px dashed var(--borde-sut); font-size: 12.5px; }
.actividad { padding: 0; margin: 0; max-height: 330px; overflow: auto; }

/* ---------- Carga ---------- */
.zona { border: 2px dashed var(--borde); border-radius: var(--radio); padding: 28px; text-align: center; color: var(--texto-sec); cursor: pointer; background: var(--superficie); transition: var(--t); }
.zona.encima { border-color: var(--azul-claro); background: var(--celeste-sut); color: var(--azul); }
.codigo-vivo { font-family: ui-monospace, Consolas, monospace; font-size: 20px; font-weight: 800; color: var(--azul); background: var(--celeste-sut); border-radius: var(--radio-sm); padding: 10px 14px; display: inline-block; }

/* ---------- Login ---------- */
.login { min-height: calc(100vh - 27px); display: grid; grid-template-columns: 1.1fr 1fr; }
.login-arte { background: radial-gradient(circle at 20% 20%, #5B9BD5 0, transparent 45%), radial-gradient(circle at 80% 70%, #4CB99A 0, transparent 40%), linear-gradient(150deg, #23365a, #34507D 60%, #45689F); color: #fff; padding: clamp(24px, 6vw, 70px); display: flex; flex-direction: column; justify-content: center; }
.login-arte h1 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; margin: 16px 0; }
.login-arte p { opacity: .8; max-width: 520px; font-size: 15px; line-height: 1.55; }
.login-arte ul { padding-left: 18px; opacity: .85; line-height: 1.8; }
.login-caja { display: flex; align-items: center; justify-content: center; padding: 30px 20px; }
.login-form { width: 100%; max-width: 380px; }
.login-form h2 { margin: 0 0 4px; }
.cuentas { display: grid; gap: 8px; margin: 16px 0; }
.cuenta { display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--borde); background: var(--superficie); border-radius: var(--radio); padding: 12px 14px; cursor: pointer; transition: var(--t); }
.cuenta:hover { border-color: var(--azul-claro); background: var(--celeste-sut); }
.cuenta strong { display: block; } .cuenta small { color: var(--texto-sec); }
.cred { font-size: 12px; color: var(--texto-sec); background: var(--campo); border: 1px dashed var(--borde); border-radius: var(--radio-sm); padding: 8px 10px; }
.cred code { font-weight: 700; }
@media (max-width: 860px) { .login { grid-template-columns: 1fr; } .login-arte { padding: 28px 22px; } .login-arte ul { display: none; } }

/* ---------- Varios ---------- */
.toast-caja { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--verde); box-shadow: 0 10px 30px rgba(0,0,0,.18); border-radius: var(--radio-sm); padding: 10px 14px; max-width: 360px; font-size: 13px; animation: entra .25s; }
.toast.error { border-left-color: var(--rojo); } .toast.info { border-left-color: var(--azul-claro); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.modal-fondo { position: fixed; inset: 0; background: rgba(10,14,24,.5); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--superficie); border-radius: var(--radio); max-width: 560px; width: 100%; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.3); max-height: 90vh; overflow: auto; }
.vacio { text-align: center; color: var(--texto-ter); padding: 30px; }
.marca-busqueda { background: #fff3b0; color: #111; border-radius: 3px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; }
.kpi .l { font-size: 11px; color: var(--texto-ter); text-transform: uppercase; font-weight: 700; } .kpi .v { font-size: 22px; font-weight: 800; }
@media (max-width: 1000px) { .ficha-cuerpo { grid-template-columns: 1fr; } .r3, .r4, .kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .barra { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 8px; }
  .buscador { order: 3; flex-basis: 100%; max-width: none; }
  .marca .txt small { display: none; }
  .nav-barra .opt { display: none; }
  .contenido { padding: 16px 14px 60px; }
  .r2 { grid-template-columns: 1fr; }
  .mapa-pagina { padding: 10px; }
  .visor iframe { height: 60vh; min-height: 360px; }
  .ocultar-movil { display: none; }
}