/* Monitoreo HSE PTT · complemento de app.css (mismo lenguaje visual que Mantenimiento, Compras e Intranet). */

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 80; background: var(--contrast); color: var(--contrast-ink); padding: .6rem 1rem; border-radius: 999px; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.page-head.compacto { margin: 1.5rem 0 1.1rem; }
.page-head.compacto h1 { font-size: 1.9rem; }
@media (min-width: 768px) { .page-head.compacto h1 { font-size: 2.3rem; } }
.nowrap { white-space: nowrap; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.recorte { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dos-lineas { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.campo-err { color: var(--bad); font-size: .74rem; }
.girando { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation: none; } }
.badges { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.chips-lista { display: flex; flex-wrap: wrap; gap: .3rem; }

/* Avisos en línea */
.aviso { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem 1rem; border-radius: 1.1rem; font-size: .88rem; background: var(--chip); }
.aviso > svg { flex: none; margin-top: .1rem; }
.aviso.ok { background: var(--ok-bg); color: var(--ok); } .aviso.warn { background: var(--warn-bg); color: var(--warn); }
.aviso.bad { background: var(--bad-bg); color: var(--bad); } .aviso.info { background: var(--info-bg); color: var(--info); }

/* Estado vacío */
.vacio { display: grid; justify-items: center; gap: .5rem; text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.vacio h3 { color: var(--ink); font-size: 1.05rem; }

/* Menú lateral agrupado y desplegable del menú superior */
.side nav .grupo { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); padding: .9rem .8rem .3rem; }
.nav .area { position: relative; }
.nav .area > button { border: 0; background: transparent; white-space: nowrap; padding: .5rem 1rem; border-radius: 999px; font-size: .88rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; }
.nav .area > button:hover { background: var(--chip); color: var(--ink); }
.nav .area > button.active { background: var(--contrast); color: var(--contrast-ink); }
.nav-menu { position: fixed; z-index: 45; background: var(--solid); border: 1px solid var(--card-border); border-radius: 1.2rem; box-shadow: var(--pop); padding: .4rem; min-width: 14rem; display: grid; gap: .1rem; }
.nav-menu a { display: flex; align-items: center; gap: .55rem; padding: .6rem .8rem; border-radius: .9rem; font-size: .88rem; color: var(--muted); }
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--chip); color: var(--ink); }
.nav-menu a.active { background: var(--contrast); color: var(--contrast-ink); }
.bottom-nav > a { flex: 1; }
.bottom-nav > a:has(.scan) { flex: none; }

/* Login: segundo paso (código) y foto lateral */
.codigo-2fa { font-size: 1.6rem !important; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.paso { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); margin-bottom: .5rem; }
/* Foto con el sujeto a la derecha; la izquierda queda oscura para que el texto se lea. Mientras la foto
   no exista, se ve el degradado grafito a rojo PTT. */
.login-side {
  background:
    linear-gradient(90deg, rgba(14,15,18,.88) 0%, rgba(14,15,18,.62) 48%, rgba(14,15,18,.12) 82%),
    linear-gradient(180deg, rgba(14,15,18,.3) 0%, rgba(14,15,18,0) 40%, rgba(14,15,18,.72) 100%),
    image-set(url("/assets/img/login-monitoreo.webp") type("image/webp"), url("/assets/img/login-monitoreo.jpg") type("image/jpeg")) 88% center / cover no-repeat,
    linear-gradient(160deg, #2a2c31 0%, #E41F26 140%);
}

/* Banner del inicio: la foto nítida a la derecha se funde con la misma foto desenfocada que llena el resto. */
.bienvenida { --foto: image-set(url("/assets/img/inicio-monitoreo.webp") type("image/webp"), url("/assets/img/inicio-monitoreo.jpg") type("image/jpeg"));
  position: relative; isolation: isolate; overflow: hidden; color: #fff; min-height: 13rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem;
  background: #17181c; border: 0; }
.bienvenida::before { content: ""; position: absolute; inset: -3rem; z-index: -2;
  background: var(--foto) center / cover no-repeat, linear-gradient(135deg, #2a2c31 0%, #E41F26 160%);
  filter: blur(32px) brightness(.45) saturate(1.15); }
.bienvenida::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; aspect-ratio: 2.2; z-index: -1;
  background: linear-gradient(90deg, rgba(14,15,18,.35) 0%, rgba(14,15,18,0) 45%), var(--foto) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, #000 42%); }
@media (max-width: 767px) {
  .bienvenida::after { background: linear-gradient(180deg, rgba(14,15,18,.15) 0%, rgba(14,15,18,.75) 100%), var(--foto) 60% center / cover no-repeat; }
}
.bienvenida h1 { font-size: 2rem; font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
@media (min-width: 768px) { .bienvenida { min-height: 15rem; padding: 2rem 2.2rem; } .bienvenida h1 { font-size: 2.6rem; } }
.bienvenida p { opacity: .88; max-width: 40rem; }
.bienvenida .bigstats { margin-top: 1rem; }
.bienvenida .bigstat .ico { color: rgba(255,255,255,.6); }
.bienvenida .bigstat span { color: rgba(255,255,255,.78); }
@media (max-width: 767px) { .bienvenida .bigstats { gap: 1rem 1.6rem; } .bienvenida .bigstat b { font-size: 2rem; } }

/* Filtros: barra de campos que se adapta; en el celular se pliegan */
.filtros { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); align-items: end; }
.filtros label { display: grid; gap: .25rem; font-size: .74rem; color: var(--muted); min-width: 0; }
.filtros select, .filtros input { width: 100%; min-width: 0; border: 1px solid var(--field-border); border-radius: 999px; padding: .55rem .9rem; background: var(--solid); font-size: .86rem; color: var(--ink); }
.filtros select:focus, .filtros input:focus { outline: none; border-color: var(--accent); }
.filtros-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.filtros-head .buscar { flex: 1 1 16rem; min-width: 0; display: flex; align-items: center; gap: .5rem; background: var(--solid); border: 1px solid var(--field-border); border-radius: 999px; padding: .55rem .9rem; }
.filtros-head .buscar input { border: 0; outline: none; background: transparent; width: 100%; font-size: .9rem; min-width: 0; }
.filtros-activos { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
.filtros-activos button { display: inline-flex; align-items: center; gap: .3rem; border: 0; border-radius: 999px; padding: .25rem .4rem .25rem .7rem; font-size: .76rem; background: var(--contrast); color: var(--contrast-ink); }
.filtros-activos button svg { opacity: .7; }
@media (max-width: 767px) { .filtros.plegado { display: none; } }
@media (min-width: 768px) { .solo-movil { display: none !important; } }

/* KPI con número grande */
.kpis { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .kpis.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.kpi-mini { padding: 1.1rem 1.2rem; }
.kpi-mini .val { font-size: 2.1rem; font-weight: 300; letter-spacing: -.02em; line-height: 1; margin-top: .6rem; font-variant-numeric: tabular-nums; }
.kpi-mini .lbl { color: var(--muted); font-size: .84rem; margin-top: .3rem; }
.card.dark .kpi-mini .lbl, .card.dark.kpi-mini .lbl { color: var(--contrast-muted); }
.kpi-mini .ico-box { width: 2.2rem; height: 2.2rem; border-radius: .8rem; display: grid; place-items: center; background: var(--solid); box-shadow: var(--shadow); }
.card.dark.kpi-mini .ico-box { background: var(--contrast-chip); box-shadow: none; }
.kpi-mini.alerta .val { color: var(--bad); }
a.kpi-mini { display: block; }

/* Gráficos SVG propios */
.dona { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.dona circle[class] { fill: none; }
.dona svg { width: 10.5rem; height: 10.5rem; flex: none; }
.dona .centro b { font-size: 1.9rem; font-weight: 300; fill: var(--ink); }
.dona .centro span { font-size: .7rem; fill: var(--muted); }
.dona ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; flex: 1; min-width: 10rem; }
.dona li { display: flex; align-items: center; gap: .55rem; font-size: .86rem; }
.dona li i { width: .75rem; height: .75rem; border-radius: .25rem; flex: none; }
.dona li b { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.barras { display: grid; gap: .55rem; }
.barra-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .75rem; font-size: .84rem; }
.barra-h .n { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.barra-h .n b { color: var(--ink); font-weight: 600; }
.barra-h .pista { grid-column: 1 / -1; display: flex; height: .55rem; border-radius: 99px; overflow: hidden; background: var(--chip); }
.barra-h .pista i { display: block; height: 100%; }
.barra-h .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.barra-h:hover .nombre, button.barra-h:hover .nombre { text-decoration: underline; }
button.barra-h { border: 0; background: none; padding: 0; text-align: left; width: 100%; color: inherit; }
.columnas svg { width: 100%; height: auto; display: block; overflow: visible; }
.columnas text { font-size: 10px; fill: var(--muted); font-family: inherit; }
.columnas .eje { stroke: var(--line); }
.c-cerrada { background: var(--ok); fill: var(--ok); stroke: var(--ok); }
.c-pendiente { background: var(--warn); fill: var(--warn); stroke: var(--warn); }
.c-vencida { background: var(--bad); fill: var(--bad); stroke: var(--bad); }
.c-generada { background: var(--ink); fill: var(--ink); stroke: var(--ink); }
.c-abierta { background: var(--info); fill: var(--info); stroke: var(--info); }
.c-validar { background: var(--violet); fill: var(--violet); stroke: var(--violet); }
.semaforo { font-weight: 600; font-variant-numeric: tabular-nums; }
.semaforo.ok { color: var(--ok); } .semaforo.warn { color: var(--warn); } .semaforo.bad { color: var(--bad); }

/* Listado de acciones: tabla en escritorio, tarjetas en el celular */
.tarjetas { display: grid; gap: .75rem; }
.tarjeta { display: grid; gap: .45rem; padding: 1rem 1.1rem; border-radius: 1.3rem; background: var(--solid); border: 1px solid var(--card-border); box-shadow: var(--shadow); color: inherit; }
.tarjeta:hover { border-color: var(--field-border); }
.tarjeta .arriba { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .76rem; color: var(--muted); }
.tarjeta .arriba .badges { margin-left: auto; }
.tarjeta h3 { font-size: 1rem; font-weight: 500; overflow-wrap: anywhere; }
.tarjeta .meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .78rem; color: var(--muted); }
.tarjeta .meta span { display: inline-flex; align-items: center; gap: .3rem; }
@media (min-width: 900px) { .vista-tabla .tarjetas { display: none; } }
@media (max-width: 899px) { .vista-tabla .table-wrap { display: none; } }
.folio { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.tbl td .folio { display: block; }
.paginacion { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: 1rem; font-size: .85rem; color: var(--muted); }
.paginacion .icon-btn { width: 2.3rem; height: 2.3rem; box-shadow: none; }
.paginacion .icon-btn[disabled] { opacity: .4; pointer-events: none; }

/* Formulario de hallazgo: bloques de acciones */
.bloque-accion { border: 1px solid var(--line); border-radius: 1.3rem; padding: 1rem; display: grid; gap: .8rem; grid-template-columns: repeat(6, minmax(0, 1fr)); background: color-mix(in srgb, var(--solid) 55%, transparent); }
.bloque-accion > * { grid-column: 1 / -1; }
@media (min-width: 560px) { .bloque-accion .half { grid-column: span 3; } }
.bloque-accion .titulo { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 500; color: var(--ink); }
.bloque-accion .titulo .btn { margin-left: auto; }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .9rem; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-column: 1 / -1; min-width: 0; }
.form fieldset > * { grid-column: 1 / -1; }
@media (min-width: 560px) { .form fieldset .half { grid-column: span 3; } .form fieldset .tercio { grid-column: span 2; } }
.form legend { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: .3rem; padding: 0; }
.form .req::after { content: " *"; color: var(--accent); }
.fuentes-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.fuentes-grid .choice { display: grid; gap: .15rem; }
.fuentes-grid .choice small { font-size: .72rem; opacity: .7; }

/* Archivos: imágenes y evidencias */
.archivos { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.archivo { position: relative; display: grid; gap: .35rem; padding: .5rem; border-radius: 1.1rem; background: var(--solid); border: 1px solid var(--card-border); box-shadow: var(--shadow); min-width: 0; }
.archivo .vista { aspect-ratio: 4 / 3; border-radius: .8rem; background: var(--chip); display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.archivo .vista img { width: 100%; height: 100%; object-fit: cover; }
.archivo .nombre { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivo .peso { font-size: .68rem; color: var(--faint); }
.archivo .quitar { position: absolute; top: .9rem; right: .9rem; width: 2rem; height: 2rem; box-shadow: none; }
.subir { border: 1.5px dashed var(--field-border); border-radius: 1.1rem; display: grid; place-items: center; gap: .35rem; text-align: center; padding: 1rem; color: var(--muted); font-size: .8rem; cursor: pointer; min-height: 8rem; background: transparent; }
.subir:hover, .subir:focus-within { border-color: var(--accent); color: var(--ink); }
.subir input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Ficha de acción */
.ficha-estado { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.pasos { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .9rem; }
.pasos span { font-size: .74rem; padding: .3rem .7rem; border-radius: 999px; background: var(--chip); color: var(--muted); }
.pasos span.hecho { background: var(--ok-bg); color: var(--ok); }
.pasos span.actual { background: var(--contrast); color: var(--contrast-ink); }
.acciones-estado { display: flex; flex-wrap: wrap; gap: .5rem; }
.timeline .tl-dot svg { width: .8rem; height: .8rem; }
.evento-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; font-size: .88rem; }
.evento-cabeza time { font-size: .74rem; color: var(--faint); }

/* Administración */
.maestro { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .maestro { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.tbl tbody tr.sel td { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.json { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; background: var(--field); border-radius: .8rem; padding: .5rem .7rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 10rem; overflow: auto; }
.opciones-editor { display: grid; gap: .4rem; }
.opcion-fila { display: flex; gap: .4rem; align-items: center; }
.opcion-fila input { flex: 1; min-width: 0; border: 1px solid var(--field-border); border-radius: .8rem; padding: .5rem .75rem; background: var(--field); font-size: .88rem; color: var(--ink); }
.opcion-fila .icon-btn { width: 2.2rem; height: 2.2rem; box-shadow: none; }

@media print {
  .side, .barra, .bottom-nav, .tema-fab, .pie, .filtros-head, .filtros, .no-print { display: none !important; }
  body { background: #fff !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
}
.multi-lista .check small { color: var(--muted); display: block; font-size: .74rem; }
.card.dark .barra-h .n { color: var(--contrast-muted); }
.card.dark .barra-h .n b { color: var(--contrast-ink); }
.card.dark .barra-h .pista { background: var(--contrast-chip); }
.card.dark .semaforo.ok { color: #4ade80; } .card.dark .semaforo.warn { color: #fbbf24; } .card.dark .semaforo.bad { color: #f87171; }
.card.dark .legend { color: var(--contrast-muted); }
.kpis.dos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

/* Tablero del inicio */
.panel-banner { min-height: 15rem; gap: 1rem; }
.panel-banner-cabeza { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 2rem; }
.panel-banner-cabeza > div:first-child { min-width: 0; flex: 1 1 22rem; }
.panel-controles { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bienvenida .seg { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); backdrop-filter: blur(10px); }
.bienvenida .seg button { color: rgba(255,255,255,.8); }
.bienvenida .seg button.on { background: #fff; color: #1d1f24; }
.bienvenida .btn.actualizar { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); color: #fff; box-shadow: none; }
.bienvenida .actualizado { color: rgba(255,255,255,.7); }
.girando-ico svg { animation: girar 1s linear infinite; }
.bienvenida .bigstats { margin-top: .4rem; gap: 1.2rem 2.6rem; }
.bienvenida a.bigstat { color: inherit; border-radius: 1rem; }
.bienvenida a.bigstat:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.bienvenida .bigstat b.alerta { color: #ff8a8a; }
.bienvenida .bigstat span { max-width: 11rem; display: block; }
@media (min-width: 768px) { .panel-banner { min-height: 17rem; } .bienvenida .bigstat b { font-size: 3rem; } }
.recargando { opacity: .6; transition: opacity .2s; }
.kpi-mini .lbl:first-child { margin-top: 0; }
.variacion { display: inline-flex; align-items: center; gap: .25rem; font-size: .76rem; color: var(--muted); margin-top: .45rem; }
.variacion.ok { color: var(--ok); } .variacion.bad { color: var(--bad); }
.evolucion svg { width: 100%; height: auto; display: block; overflow: visible; }
.evolucion text { font-size: 10px; fill: var(--muted); font-family: inherit; }
.evolucion .eje { stroke: var(--line); }
.evolucion .area-plazo { fill: var(--warn); opacity: .35; }
.evolucion .area-vencida { fill: var(--bad); opacity: .55; }
.evolucion .linea-pendiente { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.evolucion .punto { fill: var(--solid); stroke: var(--ink); stroke-width: 1.5; }
.evolucion .subtitulo { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; fill: var(--faint); }
.evolucion .zona { fill: transparent; }
.evolucion .zona:hover { fill: var(--chip); }
.antiguedad .stackbar { height: 1rem; }
.antiguedad ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.antiguedad li { display: grid; grid-template-columns: .8rem minmax(0, 1fr) auto 2.6rem; align-items: center; gap: .55rem; font-size: .86rem; }
.antiguedad li i { width: .75rem; height: .75rem; border-radius: .25rem; }
.antiguedad li b { font-variant-numeric: tabular-nums; font-weight: 600; }
.antiguedad li .muted { font-size: .76rem; text-align: right; }
a.barra-h { color: inherit; }
.pie .version { font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .panel-banner .bigstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .8rem; }
  .panel-banner .bigstat b { font-size: 2rem; }
  .panel-banner .bigstat .ico { display: none; }
  .panel-controles .seg { width: 100%; justify-content: space-between; }
}

/* Tablero: filas con tarjetas de igual alto; la columna derecha apila antigüedad y próximos vencimientos */
.panel-fila { align-items: stretch; }
.panel-fila > .card { display: flex; flex-direction: column; }
.panel-columna { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.panel-columna > .card:last-child { flex: 1; }
.panel-fila .evolucion { flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* Antigüedad: de verde a rojo oscuro según cuánto lleva vencida */
.c-atraso-1 { background: color-mix(in srgb, var(--bad) 45%, var(--warn)); }
.c-atraso-2 { background: var(--bad); }
.c-atraso-3 { background: color-mix(in srgb, var(--bad) 62%, #000); }
.antiguedad .stackbar { gap: 2px; background: transparent; }
/* Pendiente por fuente: columnas apiladas */
.columnas-fuente { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(5.4rem, 1fr); gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.col-fuente { display: grid; grid-template-rows: auto 10rem auto auto; justify-items: center; gap: .35rem; color: inherit; border-radius: 1rem; padding: .5rem .25rem; text-align: center; }
.col-fuente:hover { background: var(--chip); }
.col-total { font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; align-self: end; }
.col-pila { align-self: end; width: 2.4rem; display: flex; flex-direction: column; border-radius: .6rem; overflow: hidden; min-height: .5rem; }
.col-pila i { display: block; min-height: 0; }
.col-nombre { font-size: .74rem; line-height: 1.2; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.col-venc { font-size: .7rem; color: var(--bad); font-weight: 600; }
.col-venc.al-dia { color: var(--ok); }
/* Ranking de responsables */
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.ranking a { display: grid; grid-template-columns: 1.2rem auto minmax(0, 1fr) 3rem 3rem; align-items: center; gap: .7rem; padding: .5rem; border-radius: 1rem; color: inherit; }
.ranking a:hover { background: var(--chip); }
.ranking .puesto { font-size: .8rem; color: var(--faint); font-variant-numeric: tabular-nums; text-align: center; }
.ranking .quien { display: grid; gap: .25rem; min-width: 0; }
.ranking .quien b { font-weight: 500; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .medidor { display: block; height: .35rem; border-radius: 99px; background: var(--chip); overflow: hidden; }
.ranking .medidor i { display: block; height: 100%; background: var(--bad); border-radius: 99px; }
.ranking .cifras { display: grid; justify-items: end; line-height: 1.1; }
.ranking .cifras b { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .ranking a { grid-template-columns: auto minmax(0, 1fr) 2.4rem 2.4rem; gap: .5rem; padding: .5rem .25rem; }
  .ranking .puesto { display: none; }
}

/* Controles del tablero bajo el subtítulo: la derecha del banner queda libre para la foto */
.panel-banner-cabeza { flex-direction: column; align-items: flex-start; gap: .8rem; }
.panel-banner-cabeza > div:first-child { flex: none; max-width: 40rem; }
@media (max-width: 767px) {
  .panel-banner::after { background: linear-gradient(180deg, rgba(14,15,18,.62) 0%, rgba(14,15,18,.78) 45%, rgba(14,15,18,.9) 100%), var(--foto) 62% 30% / cover no-repeat; }
}