/* Plataforma PMT — identidad oficial: azul marino #030B40, azul tecnológico #08265A,
   amarillo neón #D7FF00. Sin dependencias externas. */
:root {
  --marino: #030B40;
  --tecno: #08265A;
  --neon: #D7FF00;
  --neon-suave: #f4ffbf;
  --blanco: #FFFFFF;
  --gris-claro: #F5F7FA;
  --gris-texto: #475569;
  --texto: #0b1533;
  --borde: #e5e9f0;
  --borde-fuerte: #cfd6e2;
  --azul-claro: #e8eefb;
  --ok: #0f9d58;
  --ok-suave: #e7f7ee;
  --alerta: #b7791f;
  --alerta-suave: #fff6e0;
  --peligro: #d92d20;
  --peligro-suave: #fdecea;
  --info: #2557d6;
  --radio: 14px;
  --radio-chico: 10px;
  --sombra: 0 1px 2px rgb(3 11 64 / .05), 0 6px 24px rgb(3 11 64 / .06);
  --sombra-alta: 0 10px 40px rgb(3 11 64 / .14);
  --lateral: 264px;
  --lateral-plegado: 76px;
  --t: .18s cubic-bezier(.2, .7, .2, 1);
  --fuente: "Inter", "Segoe UI Variable", "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--blanco); color: var(--texto); font: 15px/1.55 var(--fuente); -webkit-font-smoothing: antialiased; }
a { color: var(--tecno); text-decoration: none; font-weight: 500; }
a:hover { color: var(--marino); text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4rem; letter-spacing: -.015em; color: var(--marino); }
h1 { font-size: 1.65rem; font-weight: 750; }
h2 { font-size: 1.06rem; font-weight: 700; }
h3 { font-size: .95rem; font-weight: 650; }
p { margin: 0 0 .75rem; }
img { max-width: 100%; }
.suave { color: var(--gris-texto); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .95em; }
.num { font-variant-numeric: tabular-nums; }
.oculto, .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ico.g { width: 26px; height: 26px; }
.ico.xg { width: 34px; height: 34px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--tecno) 45%, transparent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ====== Acceso (login) ====== */
.acceso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--blanco); }
.acceso-marca {
  position: relative; overflow: hidden; color: #fff; padding: 48px;
  background: radial-gradient(1200px 600px at -10% -20%, #12357a 0%, transparent 60%), radial-gradient(800px 500px at 120% 120%, #0d2d6b 0%, transparent 60%), var(--marino);
  display: flex; flex-direction: column; justify-content: space-between;
}
.acceso-marca::after { content: ""; position: absolute; inset: auto -20% -40% auto; width: 520px; height: 520px; border-radius: 50%; border: 2px solid rgb(215 255 0 / .18); }
.acceso-marca .emblema { width: 132px; height: 132px; filter: drop-shadow(0 10px 30px rgb(215 255 0 / .18)); }
.acceso-marca h2 { color: #fff; font-size: 2.1rem; margin: 26px 0 10px; letter-spacing: -.02em; max-width: 16ch; }
.acceso-marca p { color: #c8d3ee; max-width: 42ch; font-size: 1.02rem; }
.acceso-marca .linea-neon { width: 64px; height: 4px; border-radius: 4px; background: var(--neon); }
.acceso-marca .pie { color: #8fa2cf; font-size: 13px; position: relative; z-index: 1; }
.acceso-form { display: grid; place-items: center; padding: 32px 20px; }
.tarjeta-acceso { width: 100%; max-width: 410px; }
.tarjeta-acceso h1 { font-size: 1.75rem; }
.marca { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.marca img { width: 46px; height: 46px; }
.marca-texto strong { display: block; font-size: 16px; color: var(--marino); letter-spacing: -.01em; }
.marca-texto span { display: block; font-size: 13px; color: var(--gris-texto); }
@media (max-width: 900px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso-marca { padding: 28px 22px 26px; min-height: auto; }
  .acceso-marca h2 { font-size: 1.45rem; margin-top: 14px; }
  .acceso-marca .emblema { width: 84px; height: 84px; }
  .acceso-marca .pie, .acceso-marca p { display: none; }
  .acceso-form { align-items: start; padding-top: 28px; }
}

/* ====== Formularios ====== */
.campo { margin-bottom: 16px; }
.campo label, .etiqueta { display: block; font-weight: 650; font-size: 13px; margin-bottom: 6px; color: var(--marino); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=datetime-local], input[type=number], input[type=file], select, textarea {
  width: 100%; padding: 11px 13px; font: inherit; color: inherit; background: var(--blanco);
  border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio-chico); transition: border-color var(--t), box-shadow var(--t);
}
textarea { min-height: 96px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #aeb8ca; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tecno); box-shadow: 0 0 0 4px rgb(8 38 90 / .12); }
input[type=file] { padding: 9px; background: var(--gris-claro); }
.ayuda { font-size: 12.5px; color: var(--gris-texto); margin-top: 5px; }
.error { font-size: 13px; color: var(--peligro); margin-top: 5px; font-weight: 500; }
.codigo-input { font-size: 26px; letter-spacing: .35em; text-align: center; font-weight: 700; }
.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 18px; }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: 6px 0; }
.casilla input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--marino); }
.casilla.deshabilitada { color: #94a3b8; }
.dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }

/* ====== Botones ====== */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 18px;
  font: inherit; font-weight: 650; font-size: 14px; letter-spacing: .005em; border-radius: var(--radio-chico);
  border: 1.5px solid var(--marino); background: var(--marino); color: #fff; cursor: pointer; text-decoration: none;
  transition: transform var(--t), background var(--t), box-shadow var(--t), color var(--t);
}
.boton:hover { background: var(--tecno); color: #fff; text-decoration: none; box-shadow: 0 6px 18px rgb(3 11 64 / .18); }
.boton:active { transform: translateY(1px); }
.boton.bloque { width: 100%; }
.boton.neon { background: var(--neon); border-color: var(--neon); color: var(--marino); }
.boton.neon:hover { background: #c9f000; color: var(--marino); box-shadow: 0 8px 22px rgb(215 255 0 / .35); }
.boton.secundario { background: var(--blanco); color: var(--marino); border-color: var(--borde-fuerte); }
.boton.secundario:hover { background: var(--gris-claro); color: var(--marino); box-shadow: none; }
.boton.peligro { background: var(--blanco); color: var(--peligro); border-color: #f5c2bd; }
.boton.peligro:hover { background: var(--peligro-suave); color: var(--peligro); box-shadow: none; }
.boton.peligro-lleno { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.boton.chico { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.boton.grande { min-height: 56px; font-size: 16.5px; padding: 14px 22px; border-radius: 14px; }
.boton[aria-busy=true] { pointer-events: none; opacity: .75; }
.boton[aria-busy=true]::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.enlace-boton { background: none; border: 0; padding: 0; font: inherit; color: var(--tecno); cursor: pointer; font-weight: 600; }

/* ====== Avisos ====== */
.aviso { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; border: 1px solid; animation: aparecer .25s ease-out; }
.aviso .ico { margin-top: 1px; }
.aviso.ok { background: var(--ok-suave); border-color: #b7e4c9; color: #0b5d36; }
.aviso.error { background: var(--peligro-suave); border-color: #f5c2bd; color: #8f1d14; margin-top: 0; }
.aviso.alerta { background: var(--alerta-suave); border-color: #f3dca4; color: #7a4f0f; }
.aviso.info { background: var(--azul-claro); border-color: #c9d6f4; color: var(--tecno); }
@keyframes aparecer { from { opacity: 0; transform: translateY(-4px); } }
.secreto { display: block; word-break: break-all; padding: 11px 13px; margin-top: 8px; background: var(--blanco); border: 1.5px dashed #9fb3e0; border-radius: 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--marino); }

/* ====== Estructura del panel ====== */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns var(--t); }
.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--marino); color: #c9d3ec;
  display: flex; flex-direction: column; padding: 18px 14px; gap: 6px; z-index: 30;
  background-image: radial-gradient(500px 300px at 0% 0%, rgb(18 53 122 / .7), transparent 70%);
}
.lateral-marca { display: flex; align-items: center; gap: 12px; padding: 6px 8px 18px; color: #fff; text-decoration: none; }
.lateral-marca:hover { text-decoration: none; color: #fff; }
.lateral-marca img { width: 42px; height: 42px; flex: none; }
.lateral-marca strong { display: block; font-size: 17px; letter-spacing: .02em; }
.lateral-marca span { display: block; font-size: 12px; color: #9fb0d6; line-height: 1.3; }
.lateral-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: #7083b3; padding: 14px 12px 6px; font-weight: 700; }
.lateral a.item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px;
  color: #c9d3ec; font-weight: 550; font-size: 14.5px; transition: background var(--t), color var(--t);
}
.lateral a.item:hover { background: rgb(255 255 255 / .07); color: #fff; text-decoration: none; }
.lateral a.item.activo { background: rgb(215 255 0 / .1); color: #fff; }
.lateral a.item.activo::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--neon); }
.lateral a.item.activo .ico { color: var(--neon); }
.lateral .pie-lateral { margin-top: auto; padding: 12px; border-radius: 12px; background: rgb(255 255 255 / .05); font-size: 12px; color: #9fb0d6; }
.lateral .pie-lateral strong { color: #fff; display: block; font-size: 13px; }
.plegar { margin-top: 8px; display: flex; align-items: center; gap: 10px; background: none; border: 0; color: #9fb0d6; font: inherit; font-size: 13px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.plegar:hover { background: rgb(255 255 255 / .07); color: #fff; }
.app.plegado { grid-template-columns: var(--lateral-plegado) minmax(0, 1fr); }
.app.plegado .lateral .txt, .app.plegado .lateral-grupo, .app.plegado .pie-lateral, .app.plegado .lateral-marca div { display: none; }
.app.plegado .lateral a.item, .app.plegado .plegar { justify-content: center; }
.app.plegado .plegar .ico { transform: scaleX(-1); }

.principal { min-width: 0; display: flex; flex-direction: column; }
.superior {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px 28px;
  background: rgb(255 255 255 / .9); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--borde);
}
.superior .muni { display: flex; flex-direction: column; line-height: 1.25; }
.superior .muni strong { color: var(--marino); font-size: 15px; }
.superior .muni span { color: var(--gris-texto); font-size: 12.5px; }
.superior .derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.chip-usuario { display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 5px; border: 1px solid var(--borde); border-radius: 999px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--marino); color: var(--neon); display: grid; place-items: center; font-weight: 750; font-size: 13px; flex: none; }
.chip-usuario .nombre { font-size: 13.5px; font-weight: 600; color: var(--marino); padding-right: 6px; }
.boton-menu { display: none; background: none; border: 1px solid var(--borde); border-radius: 10px; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--marino); cursor: pointer; }
.contenido { width: 100%; max-width: 1320px; padding: 26px 28px 56px; animation: aparecer .25s ease-out; }
.encabezado { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.encabezado p { margin: 0; }
.migas { font-size: 13px; color: var(--gris-texto); margin-bottom: 6px; display: flex; gap: 6px; align-items: center; }
.migas a { color: var(--gris-texto); font-weight: 500; }

@media (max-width: 1024px) {
  .app, .app.plegado { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 280px; transform: translateX(-100%); transition: transform var(--t); box-shadow: var(--sombra-alta); }
  .app.menu-abierto .lateral { transform: none; }
  .app.menu-abierto::after { content: ""; position: fixed; inset: 0; background: rgb(3 11 64 / .45); z-index: 25; }
  .app.plegado .lateral .txt, .app.plegado .lateral-grupo, .app.plegado .pie-lateral, .app.plegado .lateral-marca div { display: revert; }
  .plegar { display: none; }
  .boton-menu { display: inline-flex; }
  .superior { padding: 10px 16px; }
  .contenido { padding: 20px 16px 48px; }
  .chip-usuario .nombre { display: none; }
}

/* ====== Tarjetas ====== */
.caja { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; margin-bottom: 18px; box-shadow: var(--sombra); }
.caja h2 { margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.caja-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.caja-cab h2 { margin: 0; }
.rejilla { display: grid; gap: 18px; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rejilla-principal { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); }
@media (max-width: 1100px) { .rejilla-principal { grid-template-columns: minmax(0, 1fr); } }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.cifra { position: relative; overflow: hidden; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); transition: transform var(--t), box-shadow var(--t); }
.cifra:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.cifra .chip-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--azul-claro); color: var(--tecno); margin-bottom: 14px; }
.cifra.destacada .chip-ico { background: var(--marino); color: var(--neon); }
.cifra.ok .chip-ico { background: var(--ok-suave); color: var(--ok); }
.cifra.peligro .chip-ico { background: var(--peligro-suave); color: var(--peligro); }
.cifra.alerta .chip-ico { background: var(--alerta-suave); color: var(--alerta); }
.cifra span.et { display: block; font-size: 13px; color: var(--gris-texto); font-weight: 550; }
.cifra strong { display: block; font-size: 28px; font-weight: 780; margin-top: 2px; color: var(--marino); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cifra small { display: block; color: var(--gris-texto); font-size: 12.5px; margin-top: 4px; }
.cifra.destacada { background: linear-gradient(135deg, var(--marino), var(--tecno)); border-color: var(--marino); }
.cifra.destacada span.et, .cifra.destacada small { color: #b9c6e6; }
.cifra.destacada strong { color: #fff; }
.cifra.destacada::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; border: 2px solid rgb(215 255 0 / .35); }

/* ====== Tablas ====== */
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; margin-bottom: 16px; }
.buscador { position: relative; margin-bottom: 14px; }
.buscador .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--gris-texto); }
.buscador input { padding: 15px 16px 15px 48px; font-size: 16px; border-radius: 14px; box-shadow: var(--sombra); }
.tabla-scroll { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
th { background: var(--gris-claro); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-texto); font-weight: 700; white-space: nowrap; }
tbody tr { transition: background var(--t); }
tbody tr:hover { background: #fafbff; }
tr:last-child td { border-bottom: 0; }
td.nowrap { white-space: nowrap; }
td.der, th.der { text-align: right; }
.vacio { text-align: center; color: var(--gris-texto); padding: 36px 20px; }
.vacio .ico { width: 40px; height: 40px; color: #b6c1d6; display: block; margin: 0 auto 10px; }

.etiq { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--gris-claro); border: 1px solid var(--borde); color: #334155; margin: 0 4px 4px 0; white-space: nowrap; }
.etiq::before { content: none; }
.etiq.ok { background: var(--ok-suave); border-color: #b7e4c9; color: #0b5d36; }
.etiq.alerta { background: var(--alerta-suave); border-color: #f3dca4; color: #7a4f0f; }
.etiq.peligro { background: var(--peligro-suave); border-color: #f5c2bd; color: #8f1d14; }
.etiq.info { background: var(--azul-claro); border-color: #c9d6f4; color: var(--tecno); }
.etiq.marino { background: var(--marino); border-color: var(--marino); color: var(--neon); }
.estado { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.estado.emitida { background: var(--azul-claro); color: var(--tecno); }
.estado.en_gestion { background: var(--alerta-suave); color: var(--alerta); }
.estado.anulada { background: var(--peligro-suave); color: var(--peligro); }
.estado.pagada { background: var(--ok-suave); color: var(--ok); }
.estado.borrador { background: var(--gris-claro); color: var(--gris-texto); }
.placa { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 800; letter-spacing: .08em; padding: 3px 9px; border: 2px solid var(--marino); border-radius: 7px; color: var(--marino); background: #fff; font-size: 13px; }
.monto { font-weight: 750; color: var(--marino); font-variant-numeric: tabular-nums; white-space: nowrap; }

.lista-codigos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 14px 0; list-style: none; }
.lista-codigos li { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; padding: 9px; text-align: center; border: 1px solid var(--borde); border-radius: 8px; background: var(--gris-claro); }
.qr { display: flex; justify-content: center; padding: 14px; border: 1px solid var(--borde); border-radius: var(--radio); margin: 12px 0; background: #fff; }
.qr svg { width: 220px; height: 220px; max-width: 100%; }
.paginacion { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 14px; }
.paginacion .acciones a, .paginacion .acciones span { padding: 7px 12px; border: 1px solid var(--borde); border-radius: 9px; background: #fff; }
.paginacion .acciones span { color: #94a3b8; }
.zona-peligro { border-color: #f5c2bd; }
.zona-peligro h2 { color: var(--peligro); }

/* ====== Gráficas SVG ====== */
.grafica { width: 100%; height: auto; display: block; overflow: visible; }
.grafica .eje { stroke: var(--borde); stroke-width: 1; }
.grafica .txt-eje { fill: var(--gris-texto); font-size: 11px; font-family: var(--fuente); }
.grafica .barra { fill: var(--tecno); transition: fill var(--t), opacity var(--t); }
.grafica .barra.hoy { fill: var(--marino); }
.grafica .barra-tope { fill: var(--neon); }
.grafica g.punto:hover .barra { fill: var(--marino); }
.grafica g.punto .zona { fill: transparent; cursor: pointer; }
.grafica g.punto:hover .zona { fill: rgb(8 38 90 / .05); }
.barras-h { display: grid; gap: 12px; }
.barra-h .fila { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 5px; }
.barra-h .fila span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-h .pista { height: 10px; border-radius: 999px; background: var(--gris-claro); overflow: hidden; }
.barra-h .relleno { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--tecno), var(--marino)); transform-origin: left; animation: crecer .6s ease-out; }
.barra-h:first-child .relleno { background: linear-gradient(90deg, var(--marino), var(--tecno)); box-shadow: inset -6px 0 0 var(--neon); }
@keyframes crecer { from { transform: scaleX(0); } }
.ancho-0 { width: 0 } .ancho-5 { width: 5% } .ancho-10 { width: 10% } .ancho-15 { width: 15% } .ancho-20 { width: 20% } .ancho-25 { width: 25% } .ancho-30 { width: 30% } .ancho-35 { width: 35% } .ancho-40 { width: 40% } .ancho-45 { width: 45% } .ancho-50 { width: 50% } .ancho-55 { width: 55% } .ancho-60 { width: 60% } .ancho-65 { width: 65% } .ancho-70 { width: 70% } .ancho-75 { width: 75% } .ancho-80 { width: 80% } .ancho-85 { width: 85% } .ancho-90 { width: 90% } .ancho-95 { width: 95% } .ancho-100 { width: 100% }
.dona-caja { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.dona { width: 168px; height: 168px; flex: none; }
.dona circle { fill: none; stroke-width: 22; transition: stroke-width var(--t); }
.dona circle.seg:hover { stroke-width: 27; }
.dona .centro-num { font-size: 26px; font-weight: 800; fill: var(--marino); font-family: var(--fuente); }
.dona .centro-txt { font-size: 11px; fill: var(--gris-texto); font-family: var(--fuente); }
.leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 13.5px; }
.leyenda li { display: flex; align-items: center; gap: 9px; }
.leyenda i { width: 11px; height: 11px; border-radius: 4px; display: inline-block; }
.c-emitida { stroke: var(--tecno); background: var(--tecno); } .c-en_gestion { stroke: #e9a23b; background: #e9a23b; }
.c-anulada { stroke: var(--peligro); background: var(--peligro); } .c-pagada { stroke: var(--ok); background: var(--ok); }
.tooltip { position: fixed; z-index: 60; pointer-events: none; background: var(--marino); color: #fff; font-size: 12.5px; padding: 7px 10px; border-radius: 9px; box-shadow: var(--sombra-alta); opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; max-width: 260px; }
.tooltip.visible { opacity: 1; transform: none; }
.tooltip b { color: var(--neon); }

.mapa { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); background: #eef2f7; }
.mapa svg { display: block; width: 100%; height: auto; }
.mapa .pt { fill: var(--neon); stroke: var(--marino); stroke-width: 2.5; transition: r var(--t); }
.mapa .pt.anulada { fill: #fff; stroke: var(--peligro); }
.mapa g.p:hover .pt { r: 9; }
.mapa .atribucion { font-size: 11px; color: var(--gris-texto); padding: 6px 10px; background: #fff; border-top: 1px solid var(--borde); }

/* ====== Línea de tiempo y galería ====== */
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 6px; }
.linea-tiempo li { position: relative; padding: 0 0 18px 26px; border-left: 2px solid var(--borde); }
.linea-tiempo li:last-child { border-left-color: transparent; padding-bottom: 0; }
.linea-tiempo li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--tecno); }
.linea-tiempo li.peligro::before { border-color: var(--peligro); }
.linea-tiempo li.ok::before { border-color: var(--ok); }
.linea-tiempo li.alerta::before { border-color: #e9a23b; }
.linea-tiempo strong { display: block; color: var(--marino); font-size: 14px; }
.linea-tiempo .cuando { font-size: 12.5px; color: var(--gris-texto); }
.linea-tiempo .detalle { font-size: 13.5px; margin-top: 3px; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.galeria a { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--borde); background: var(--gris-claro); }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.galeria a:hover img { transform: scale(1.04); }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 22px; margin: 0; }
.datos div { min-width: 0; }
.datos dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-texto); font-weight: 700; margin-bottom: 3px; }
.datos dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }
.visor-pdf { width: 100%; height: 640px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--gris-claro); }
.cabecera-boleta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; padding: 22px; border-radius: var(--radio); margin-bottom: 18px; background: linear-gradient(135deg, var(--marino), var(--tecno)); color: #fff; box-shadow: var(--sombra-alta); position: relative; overflow: hidden; }
.cabecera-boleta::after { content: ""; position: absolute; right: 18%; top: -60px; width: 180px; height: 180px; border-radius: 50%; border: 2px solid rgb(215 255 0 / .25); }
.cabecera-boleta .numero { font-size: 26px; font-weight: 800; letter-spacing: .02em; color: #fff; }
.cabecera-boleta .sub { color: #b9c6e6; font-size: 13.5px; }
.cabecera-boleta .monto-g { font-size: 30px; font-weight: 800; color: var(--neon); font-variant-numeric: tabular-nums; }
.cabecera-boleta .acciones { position: relative; z-index: 1; }
details.accion { border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 10px; background: #fff; }
details.accion summary { cursor: pointer; padding: 12px 14px; font-weight: 650; color: var(--marino); display: flex; align-items: center; gap: 10px; list-style: none; }
details.accion summary::-webkit-details-marker { display: none; }
details.accion[open] summary { border-bottom: 1px solid var(--borde); }
details.accion .cuerpo { padding: 14px; }

/* ====== Interfaz del agente (móvil) ====== */
.movil { background: var(--gris-claro); min-height: 100vh; padding-bottom: 92px; }
.movil-barra { position: sticky; top: 0; z-index: 20; background: var(--marino); color: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 12px rgb(3 11 64 / .25); }
.movil-barra img { width: 36px; height: 36px; }
.movil-barra .t strong { display: block; font-size: 16px; line-height: 1.2; }
.movil-barra .t span { display: block; font-size: 12px; color: #9fb0d6; }
.movil-barra .der { margin-left: auto; }
.movil-barra .der button { background: rgb(255 255 255 / .08); border: 0; color: #fff; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; }
.movil-cuerpo { max-width: 640px; margin: 0 auto; padding: 16px; animation: aparecer .2s ease-out; }
.movil-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-top: 1px solid var(--borde); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 20px rgb(3 11 64 / .06); }
.movil-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 12px; color: var(--gris-texto); font-size: 12px; font-weight: 650; text-decoration: none; }
.movil-nav a .ico { width: 24px; height: 24px; }
.movil-nav a.activo { color: var(--marino); background: var(--azul-claro); }
.movil-nav a.central { color: var(--marino); }
.movil-nav a.central .burbuja { width: 52px; height: 52px; margin-top: -26px; border-radius: 18px; background: var(--neon); display: grid; place-items: center; box-shadow: 0 8px 20px rgb(3 11 64 / .25); border: 4px solid #fff; }
.tarjeta-m { background: #fff; border-radius: 18px; padding: 18px; margin-bottom: 14px; box-shadow: var(--sombra); border: 1px solid var(--borde); }
.tarjeta-m h2 { font-size: 17px; }
.saludo { background: linear-gradient(135deg, var(--marino), var(--tecno)); color: #fff; border: 0; position: relative; overflow: hidden; }
.saludo::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 170px; height: 170px; border-radius: 50%; border: 2px solid rgb(215 255 0 / .3); }
.saludo h2 { color: #fff; font-size: 20px; }
.saludo .mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; position: relative; z-index: 1; }
.saludo .mini div { background: rgb(255 255 255 / .08); border-radius: 12px; padding: 10px; }
.saludo .mini strong { display: block; font-size: 20px; color: var(--neon); font-variant-numeric: tabular-nums; }
.saludo .mini span { font-size: 11.5px; color: #c4cfea; }
.cta-emitir { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 18px; background: var(--neon); color: var(--marino); font-weight: 800; font-size: 18px; text-decoration: none; box-shadow: 0 10px 26px rgb(3 11 64 / .18); margin-bottom: 14px; }
.cta-emitir:hover { text-decoration: none; color: var(--marino); }
.cta-emitir .burbuja { width: 52px; height: 52px; border-radius: 16px; background: var(--marino); color: var(--neon); display: grid; place-items: center; }
.cta-emitir small { display: block; font-size: 13px; font-weight: 600; color: #2b3a12; }
.fila-boleta { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--borde); color: inherit; text-decoration: none; }
.fila-boleta:last-child { border-bottom: 0; }
.fila-boleta:hover { text-decoration: none; }
.fila-boleta .info { flex: 1; min-width: 0; }
.fila-boleta .info strong { display: block; color: var(--marino); font-size: 14.5px; }
.fila-boleta .info span { display: block; font-size: 12.5px; color: var(--gris-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.paso { text-align: center; font-size: 12px; font-weight: 700; color: var(--gris-texto); }
.paso .bar { height: 6px; border-radius: 6px; background: var(--borde); margin-bottom: 6px; transition: background var(--t); }
.paso.activo { color: var(--marino); }
.paso.activo .bar { background: var(--marino); }
.paso.hecho .bar { background: var(--neon); }
.movil .campo label { font-size: 14px; }
.movil input, .movil select, .movil textarea { font-size: 17px; padding: 14px 15px; border-radius: 13px; }
.placa-input { text-transform: uppercase; font-family: ui-monospace, Menlo, monospace; font-weight: 800; letter-spacing: .12em; font-size: 24px !important; text-align: center; border: 3px solid var(--marino) !important; }
.opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.opciones label { position: relative; }
.opciones input { position: absolute; opacity: 0; inset: 0; }
.opciones span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 8px; border: 1.5px solid var(--borde-fuerte); border-radius: 13px; font-size: 14px; font-weight: 650; background: #fff; transition: all var(--t); }
.opciones input:checked + span { border-color: var(--marino); background: var(--marino); color: var(--neon); }
.opciones input:focus-visible + span { outline: 3px solid rgb(8 38 90 / .3); }
.lista-infracciones { display: grid; gap: 8px; max-height: 360px; overflow-y: auto; padding: 2px; }
.lista-infracciones label { position: relative; display: block; }
.lista-infracciones input { position: absolute; opacity: 0; }
.lista-infracciones .op { display: block; padding: 13px 14px; border: 1.5px solid var(--borde-fuerte); border-radius: 14px; background: #fff; transition: all var(--t); }
.lista-infracciones .op strong { display: flex; justify-content: space-between; gap: 10px; color: var(--marino); }
.lista-infracciones .op span { display: block; font-size: 13.5px; color: var(--gris-texto); margin-top: 3px; }
.lista-infracciones input:checked + .op { border-color: var(--marino); box-shadow: 0 0 0 3px rgb(215 255 0 / .9); background: #fbfff0; }
.lista-infracciones label[hidden] { display: none; }
.gps-caja { display: flex; align-items: center; gap: 12px; padding: 13px; border-radius: 14px; border: 1.5px dashed var(--borde-fuerte); background: #fff; }
.gps-caja .estado-gps { flex: 1; font-size: 13.5px; color: var(--gris-texto); }
.gps-caja.ok { border-style: solid; border-color: #9ad7b5; background: var(--ok-suave); }
.gps-caja.ok .estado-gps { color: #0b5d36; font-weight: 600; }
.fotos-prev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.fotos-prev img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--borde); }
.boton-foto { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; border-radius: 14px; border: 2px dashed var(--tecno); color: var(--tecno); font-weight: 700; background: #fff; cursor: pointer; }
.boton-foto input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.barra-accion { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: #fff; border-top: 1px solid var(--borde); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 10px; box-shadow: 0 -6px 24px rgb(3 11 64 / .08); }
.barra-accion .boton { flex: 1; }
.movil.con-accion { padding-bottom: 96px; }
.resumen-confirmar { display: grid; gap: 2px; }
.resumen-confirmar .r { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--borde); font-size: 14.5px; }
.resumen-confirmar .r span:first-child { color: var(--gris-texto); }
.resumen-confirmar .r span:last-child { text-align: right; font-weight: 650; color: var(--marino); }
.exito { text-align: center; padding: 26px 18px; }
.exito .sello { width: 88px; height: 88px; margin: 0 auto 14px; border-radius: 28px; background: var(--neon); color: var(--marino); display: grid; place-items: center; box-shadow: 0 12px 30px rgb(3 11 64 / .2); animation: pop .4s cubic-bezier(.2, 1.4, .4, 1); }
.exito .sello .ico { width: 46px; height: 46px; stroke-width: 2.6; }
.exito .numero-g { font-size: 28px; font-weight: 850; color: var(--marino); letter-spacing: .02em; margin: 6px 0; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
[data-paso] { animation: aparecer .2s ease-out; }
.js [data-paso][hidden] { display: none; }

/* ====== Verificación pública ====== */
.verificacion { max-width: 520px; margin: 0 auto; padding: 32px 16px; }
.verificacion .sello-v { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 16px; margin: 18px 0; font-weight: 700; }
.verificacion .sello-v.valida { background: var(--ok-suave); color: #0b5d36; }
.verificacion .sello-v.anulada, .verificacion .sello-v.invalida { background: var(--peligro-suave); color: #8f1d14; }

@media (max-width: 640px) {
  h1 { font-size: 1.35rem; }
  .caja { padding: 16px; }
  .cifra strong { font-size: 24px; }
  .visor-pdf { height: 460px; }
}
.mt { margin-top: 20px; }
.sin-lista { margin: 4px 0 0; padding-left: 18px; }
.js [data-solo-paso][hidden] { display: none; }
[hidden] { display: none !important; }
.flex-1, .barra-accion form { flex: 1; display: flex; }
.texto-peligro { color: var(--peligro) !important; }
/* Ajustes tras revisión visual */
.saludo .suave { color: #c4cfea; }
.fila-boleta .info strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-accion > .boton.secundario { flex: 0 0 auto; padding-left: 20px; padding-right: 20px; }
.barra-accion .boton { white-space: nowrap; }
.filtros .acciones { flex-wrap: nowrap; }
.fila-boleta .der { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
@media (max-width: 640px) {
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cifras .cifra.destacada { grid-column: 1 / -1; }
  .cifra { padding: 14px; }
  .cifra .chip-ico { width: 36px; height: 36px; margin-bottom: 10px; }
  .cifra strong { font-size: 21px; }
  .superior .muni span { display: none; }
}
.lateral-marca strong { font-size: 14.5px; letter-spacing: .01em; white-space: nowrap; }

/* B3.5 · Superadministración */
fieldset.sin-borde { border: 0; margin: 0; padding: 0; min-width: 0; }
.matriz td, .matriz th { text-align: center; }
.matriz td:first-child, .matriz th:first-child { text-align: left; }
.matriz form { display: inline; }
.matriz .celda { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.matriz input[type=text] { width: 140px; font-size: 12.5px; padding: 6px 8px; }
.lista-modulos { display: flex; flex-wrap: wrap; gap: 6px; }