:root{--azul:#047BBF;--azul-osc:#332E56;--gris-100:#f4f5f7;--gris-200:#e5e7eb;--gris-300:#cbd5e1;--gris-500:#6b7280;--gris-900:#111827;--verde:#16a34a;--rojo:#dc2626;--ambar:#d97706}

/* ── Notificaciones tipo "toast" (confirmación de acciones) ── */
#toast-contenedor{position:fixed;top:1.2rem;right:1.2rem;z-index:100;display:flex;flex-direction:column;gap:.6rem;max-width:calc(100% - 2.4rem)}
.toast{background:#fff;border-left:4px solid var(--verde);border-radius:8px;padding:.8rem 1.1rem;box-shadow:0 10px 28px rgba(0,0,0,.16);font-size:.88rem;font-weight:600;color:var(--gris-900);opacity:0;transform:translateX(24px);transition:opacity .25s ease,transform .25s ease;max-width:340px;display:flex;align-items:center;gap:.5rem}
.toast.mostrar{opacity:1;transform:translateX(0)}
.toast-exito{border-left-color:var(--verde)}
.toast-error{border-left-color:var(--rojo)}
.toast-icono{font-weight:700}
.toast-exito .toast-icono{color:var(--verde)}
.toast-error .toast-icono{color:var(--rojo)}
@media(max-width:480px){#toast-contenedor{left:1.2rem;right:1.2rem;top:.8rem}.toast{max-width:100%}}
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
/* Evita que el navegador del celular "infle" el tamaño de letra por su cuenta en algunos textos
   y no en otros (pasa sobre todo con textos largos vs cortos) — así el tamaño que se ve es
   siempre el que se definió acá, consistente entre todos los enlaces del menú. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--gris-100);color:var(--gris-900)}
.app{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--azul-osc);color:#fff;display:flex;flex-direction:column;position:fixed;height:100vh}
.logo{padding:1.2rem;font-size:1.15rem;font-weight:700;border-bottom:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center}
.logo-marca{color:#4db8ff}
.logo-img{width:38px;height:38px;border-radius:50%;flex:none;display:block}
.sidebar nav{flex:1;padding:.8rem 0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.sidebar nav::-webkit-scrollbar{display:none}
.sidebar nav a{display:block;padding:.5rem 1.2rem;color:#cbd5e1;text-decoration:none;font-size:.78rem;border-left:3px solid transparent}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar nav a.activo{background:rgba(4,123,191,.25);border-left-color:var(--azul);color:#fff}
.nav-grupo{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;background:none;border:none;font-family:inherit;text-align:left;padding:.75rem 1.2rem;margin-top:.2rem;font-size:.66rem;text-transform:uppercase;color:#64748b;letter-spacing:.05em;cursor:pointer;transition:background .15s,color .15s}
.nav-grupo:hover{background:rgba(255,255,255,.06);color:#94a3b8}
.nav-grupo-flecha{font-size:.65rem;color:#64748b;transition:transform .2s ease,color .15s}
/* Contador de "pendientes" en el menú (ej. tickets nuevos/por confirmar) — rojo, chiquito, no
   quita espacio del texto del link ni de la flecha de expandir/colapsar. */
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#dc2626;color:#fff;font-size:.68rem;font-weight:700;margin-left:.4rem;line-height:1;vertical-align:middle}
.nav-badge-observado{background:#f59e0b}
.nav-grupo>span:first-child{display:flex;align-items:center}
.nav-seccion.abierto > .nav-grupo{color:#94a3b8}
.nav-seccion.abierto > .nav-grupo .nav-grupo-flecha{transform:rotate(90deg);color:#cbd5e1}
.nav-seccion-links{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.nav-seccion.abierto > .nav-seccion-links{grid-template-rows:1fr}
.nav-seccion-links-inner{overflow:hidden;min-height:0}
.nav-subseccion .nav-grupo{padding-left:1.6rem;font-size:.74rem;text-transform:none;letter-spacing:0;color:#cbd5e1;margin-top:0}
.nav-subseccion .nav-grupo:hover{color:#fff}
.nav-subseccion.abierto .nav-grupo{color:#fff}
.nav-subseccion .nav-seccion-links-inner a{padding-left:2.4rem;font-size:.74rem}
#tabla.oculta-linea .col-linea{display:none}
.usuario-box{padding:1rem 1.2rem;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem}
.usuario-box .nombre{font-weight:600}
.usuario-box .rol{color:#94a3b8;font-size:.78rem;margin-bottom:.5rem}
.usuario-box .salir{color:#f87171;text-decoration:none;font-size:.8rem}
.contenido{flex:1;margin-left:230px;min-width:0}
.topbar{background:#fff;padding:1rem 1.5rem;border-bottom:1px solid var(--gris-200);display:flex;align-items:center;gap:.8rem}
.topbar h1{font-size:1.3rem}
.cuerpo{padding:1.5rem}
.btn-hamburguesa{display:none;background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--gris-900);padding:.2rem .4rem;flex-shrink:0}
.notif-wrap{position:relative;margin-left:auto}
.notif-campana{position:relative;background:none;border:none;font-size:1.25rem;line-height:1;cursor:pointer;padding:.3rem .4rem;border-radius:8px}
.notif-campana:hover{background:var(--gris-100)}
.notif-campana .nav-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;font-size:.6rem;padding:0 4px}
.notif-panel{position:absolute;right:0;top:calc(100% + .5rem);width:340px;max-width:90vw;background:#fff;border:1px solid var(--gris-200);border-radius:12px;box-shadow:0 12px 36px rgba(15,23,42,.15);z-index:60;overflow:hidden}
.notif-panel-cab{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-bottom:1px solid var(--gris-200)}
.notif-marcar-todas{background:none;border:none;color:var(--azul);font-size:.75rem;cursor:pointer;padding:0}
.notif-marcar-todas:hover{text-decoration:underline}
.notif-lista{max-height:360px;overflow-y:auto}
.notif-vacio{padding:1.6rem 1rem;text-align:center;color:var(--gris-500);font-size:.85rem}
.notif-item{display:block;padding:.7rem 1rem;border-bottom:1px solid var(--gris-100);text-decoration:none;color:inherit;font-size:.82rem;line-height:1.4}
.notif-item:hover{background:var(--gris-100)}
.notif-item:last-child{border-bottom:none}
.notif-item.no-leida{background:#eff6ff}
.notif-item-fecha{display:block;color:var(--gris-500);font-size:.72rem;margin-top:.2rem}
.overlay-menu{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:39}
.overlay-menu.activo{display:block}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.5rem}
.kpi{background:#fff;border:1px solid var(--gris-200);border-radius:12px;padding:1.2rem;border-left:4px solid var(--azul)}
.kpi-num{font-size:1.8rem;font-weight:800}
.kpi-lbl{color:var(--gris-500);font-size:.85rem;margin-top:.3rem}

/* Tarjetas KPI "ricas": ícono + número grande + hasta 3 sub-estadísticas debajo, en tiles.
   Mismo grid que .kpi-grid, una variante con más información por tarjeta. */
/* auto-fit reparte el ancho disponible entre las tarjetas que haya (3, 5, las que sean) —
   todas del mismo ancho, en una sola fila mientras alcance el espacio, sin quedar carriles
   vacíos como pasaba con un número fijo de columnas. */
.kpi-rica-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem;margin-bottom:1.5rem}
.kpi-rica{background:#fff;border:1px solid var(--gris-200);border-radius:12px;padding:.9rem 1rem;border-left:4px solid var(--azul);display:flex;flex-direction:column;gap:.7rem;min-width:0}
.kpi-rica-cabecera{display:flex;align-items:center;gap:.8rem}
.kpi-rica-cabecera{min-width:0}
.kpi-rica-cabecera>div{min-width:0}
.kpi-rica-icono{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;background:#dbeafe;color:var(--azul)}
.kpi-rica-num{font-size:1.3rem;font-weight:800;line-height:1.15;white-space:nowrap}
.kpi-rica-lbl{color:var(--gris-500);font-size:.72rem;margin-top:.1rem;overflow-wrap:break-word}
.kpi-rica-tit{font-size:.92rem;font-weight:800;color:var(--gris-900);overflow-wrap:break-word}
.kpi-rica-cabecera:has(.kpi-rica-tit) .kpi-rica-icono{width:28px;height:28px;border-radius:8px;font-size:.85rem}
.kpi-rica-subs{display:flex;gap:.4rem}
.kpi-rica-sub{flex:1;background:var(--gris-100);border-radius:8px;padding:.4rem .3rem;text-align:center;min-width:0}
.kpi-rica-sub b{display:block;font-size:.92rem;font-weight:800;color:var(--gris-900)}
.kpi-rica-sub span{display:block;font-size:.56rem;color:var(--gris-500);text-transform:uppercase;letter-spacing:.01em;margin-top:.15rem}
.kpi-rica-sub b.verde{color:var(--verde)}
.kpi-rica-sub b.ambar{color:var(--ambar)}
.kpi-rica-sub b.rojo{color:var(--rojo)}
.kpi-rica-sub b.azul{color:var(--azul)}
.kpi-rica.verde{border-left-color:var(--verde)}
.kpi-rica.verde .kpi-rica-icono{background:#dcfce7;color:#166534}
.kpi-rica.morado{border-left-color:#7c3aed}
.kpi-rica.morado .kpi-rica-icono{background:#ede9fe;color:#7c3aed}
.kpi-rica.rojo{border-left-color:var(--rojo)}
.kpi-rica.rojo .kpi-rica-icono{background:#fee2e2;color:#991b1b}
.kpi-rica.cian{border-left-color:#0891b2}
.kpi-rica.cian .kpi-rica-icono{background:#cffafe;color:#0e7490}

.inicio-saludo{margin-bottom:1.5rem;background:#fff;border:1px solid var(--gris-200);border-radius:12px;padding:1.2rem 1.4rem}
.inicio-saludo h2{margin:0 0 .3rem;font-size:1.3rem}
.inicio-ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem 1.5rem;margin-top:.7rem}
.inicio-ficha > div{display:flex;flex-direction:column;gap:.1rem}
.inicio-ficha-lbl{font-size:.7rem;font-weight:700;color:var(--gris-500);text-transform:uppercase;letter-spacing:.03em}
.inicio-ficha > div > span:last-child{font-size:.92rem;color:var(--gris-900)}
.inicio-vacio{color:var(--gris-500);font-size:.9rem}
.barra{display:flex;gap:.8rem;margin-bottom:1rem;align-items:center;flex-wrap:wrap}
.barra input,.barra select{padding:.55rem .8rem;border:1px solid var(--gris-200);border-radius:8px;font-size:.9rem}
.barra select{
  background-color:var(--azul-osc);color:#fff;border-color:var(--azul-osc);font-weight:600;cursor:pointer;
  appearance:none;-webkit-appearance:none;padding-right:2.1rem;accent-color:var(--azul-osc);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:14px 14px;
  transition:background-color .15s;
}
.barra select:hover{background-color:#413a6e}
.barra select:focus{outline:none;box-shadow:0 0 0 3px rgba(51,46,86,.4)}
/* La lista desplegable (options) es una ventana del sistema operativo, no HTML normal —
   la mayoría de sus estilos no se pueden tocar por CSS. Esto es lo poco que sí toman los
   navegadores basados en Chromium: color de fondo/texto de cada opción y, con suerte,
   el resaltado de la opción seleccionada via accent-color (arriba). */
.barra select option{color:var(--gris-900);background:#fff;font-weight:400}
.barra select option:checked,.barra select option:hover{background:var(--azul-osc) linear-gradient(0deg,var(--azul-osc) 0%,var(--azul-osc) 100%);color:#fff}
/* Desplegable propio (HTML normal, no el <select> del sistema operativo) para filtros con
   muchas opciones — en el celular, el <select> nativo abre un selector de pantalla completa;
   este se despliega hacia abajo, compacto, con scroll, igual que el resto de la app. */
.filtro-desplegable{position:relative}
.filtro-desplegable-btn{
  background-color:var(--azul-osc);color:#fff;border:1px solid var(--azul-osc);font-weight:600;cursor:pointer;
  padding:.45rem 1.9rem .45rem .75rem;border-radius:8px;font-size:.84rem;font-family:inherit;
  display:inline-flex;align-items:center;gap:.4rem;position:relative;transition:background-color .15s;
  max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.filtro-desplegable-btn:hover{background-color:#413a6e}
.filtro-desplegable-btn:focus{outline:none;box-shadow:0 0 0 3px rgba(51,46,86,.4)}
.filtro-desplegable-flecha{position:absolute;right:.65rem;top:50%;transform:translateY(-50%);font-size:.65rem;transition:transform .15s}
.filtro-desplegable.abierto .filtro-desplegable-flecha{transform:translateY(-50%) rotate(180deg)}
.filtro-desplegable .resultados-lista{min-width:200px;left:0;max-height:200px}
.filtro-desplegable .resultados-item{padding:.5rem .8rem;font-size:.86rem}
.filtro-desplegable .resultados-item.activo{background:var(--azul-osc);color:#fff}
@media(max-width:700px){.filtro-desplegable-btn{max-width:none;width:100%}}
.barra input[type=text]{
  flex:1;max-width:340px;border-radius:999px;padding-left:2.5rem;
  background-repeat:no-repeat;background-position:.9rem center;background-size:17px 17px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047BBF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  transition:border-color .15s,box-shadow .15s;
}
.barra input[type=text]:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(4,123,191,.15)}
.panel{background:#fff;border:1px solid var(--gris-200);border-radius:12px;padding:1.2rem;margin-bottom:1.2rem}
.panel h3{margin-bottom:1rem;font-size:1.05rem}
.panel-cabecera{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.panel-cabecera h3{margin-bottom:0}
.panel-contador{color:var(--gris-500);font-size:.85rem}
.pill-prov{background:var(--azul-osc);color:#fff;padding:.25rem .7rem;border-radius:20px;font-size:.75rem;font-weight:600;display:inline-block}
.tel{color:var(--azul);font-weight:600;text-decoration:none;font-size:.85rem}
.tel:hover{text-decoration:underline}
.info-banner{display:flex;gap:.7rem;align-items:center;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;border-radius:10px;padding:.8rem 1rem;margin-bottom:1rem;font-size:.82rem;color:#1e3a8a}
.info-banner kbd{background:#fff;border:1px solid #bfdbfe;border-radius:5px;padding:.1rem .4rem;font-family:monospace;font-size:.78rem}
.buscar-sim{display:flex;gap:.6rem}
.buscar-sim input{flex:1}
.sim-vinculo{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:1rem;margin-top:.8rem}
.sim-vinculo-cabecera{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.9rem}
.sim-vinculo-titulo{display:flex;gap:.7rem;align-items:center}
.sim-vinculo-icono{width:14px;height:14px;border-radius:4px;background:#16a34a;flex-shrink:0}
.sim-vinculo-lbl{font-size:.7rem;font-weight:700;color:#166534;letter-spacing:.03em}
.sim-vinculo-iccid{font-weight:700;color:var(--gris-900);font-size:.92rem;margin-top:.15rem}
.sim-vinculo .quitar{background:#fff;border:1px solid #bbf7d0;color:#166534;padding:.3rem .7rem;border-radius:7px;font-size:.78rem;font-weight:600;cursor:pointer}
.sim-vinculo .quitar:hover{background:#dcfce7}
.sim-vinculo-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.sim-vinculo-datos>div{background:#fff;border:1px solid #bbf7d0;border-radius:8px;padding:.6rem .8rem}
.sim-vinculo-datos label{display:block;font-size:.66rem;font-weight:700;color:#166534;letter-spacing:.03em;margin-bottom:.3rem}
.sim-vinculo-datos>div>div{font-size:.85rem;font-weight:600;color:var(--gris-900)}
@media(max-width:600px){.sim-vinculo-datos{grid-template-columns:1fr}}

/* ── Vínculo azul (colaborador/equipo seleccionado) ── */
.vinculo-azul{background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:1rem;margin-top:.6rem}
.vinculo-azul .sim-vinculo-icono{background:var(--azul)}
.vinculo-azul .sim-vinculo-lbl{color:#1e40af}
.vinculo-azul .quitar{border-color:#bfdbfe;color:#1e40af}
.vinculo-azul .quitar:hover{background:#dbeafe}

/* ── Buscador con resultados tipo autocompletar ── */
.resultados-busqueda{position:relative}
.resultados-busqueda>input{width:100%;padding:.45rem .65rem;border:1px solid var(--gris-200);border-radius:8px;font-size:.85rem}
.resultados-lista{position:absolute;z-index:30;background:#fff;border:1px solid var(--gris-200);border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.14);max-height:230px;overflow-y:auto;width:100%;margin-top:.35rem}
.resultados-item{padding:.6rem .9rem;cursor:pointer;border-bottom:1px solid var(--gris-100)}
.resultados-item:last-child{border-bottom:none}
.resultados-item:hover{background:var(--gris-100)}
.res-tit{font-weight:600;font-size:.85rem;color:var(--gris-900)}
.res-sub{font-size:.75rem;color:var(--gris-500);margin-top:.1rem}
.resultados-vacio{padding:.7rem .9rem;color:var(--gris-500);font-size:.82rem}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:.75rem .8rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:#fff;background:var(--azul-osc);border:1px solid var(--azul-osc)}
td{padding:.7rem .8rem;border:1px solid var(--gris-300);font-size:.88rem}
.nowrap{white-space:nowrap}
tbody tr:hover td{background:var(--gris-100)}
.vacio{text-align:center;color:var(--gris-500);padding:2rem!important}
.mono{font-family:monospace;font-size:.82rem}
.badge{padding:.2rem .55rem;border-radius:20px;font-size:.72rem;font-weight:600}
.badge.activo,.badge.disponible{background:#dcfce7;color:#166534}
.badge.asignado,.badge.asignada,.badge.activa{background:#dbeafe;color:#1e40af}
.badge.inactivo,.badge.baja,.badge.cesado,.badge.devuelta,.badge.vencida{background:#fee2e2;color:#991b1b}
.badge.mantenimiento{background:#fef3c7;color:#92400e}
.badge.danado{background:#fed7aa;color:#9a3412}
.badge.perdida{background:#fed7aa;color:#9a3412}
.badge.reportado{background:#fef3c7;color:#92400e}
.badge.finalizado{background:#dcfce7;color:#166534}
.badge.concreto_registrado{background:#e0e7ff;color:#3730a3}
.badge.cerrado{background:#f3f4f6;color:#374151}
/* Chip de filtro activo (dashboard interactivo) — bien visible arriba de los gráficos,
   con una x para quitarlo, así siempre se ve de un vistazo qué está filtrado. */
.filtro-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--azul);color:#fff;padding:.3rem .5rem .3rem .7rem;border-radius:20px;font-size:.78rem;font-weight:600}
.filtro-chip button{background:rgba(255,255,255,.25);border:none;color:#fff;width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:.75rem;line-height:1;display:flex;align-items:center;justify-content:center}
.filtro-chip button:hover{background:rgba(255,255,255,.45)}

/* Campos que van juntos (un par excluyente "elige uno", o simplemente relacionados como
   un checkbox y su detalle) — se agrupan en su propia caja para que se lean como un
   conjunto, sin que otro campo de la grilla se meta en medio. */
.grupo-exclusivo,.grupo-campo{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem 1.3rem;background:#fff;border:1px dashed var(--gris-200);border-radius:8px;padding:.6rem .9rem}
.grupo-exclusivo-tit,.grupo-campo-tit{font-size:.72rem;font-weight:700;color:var(--gris-500);letter-spacing:.03em}
.grupo-exclusivo .chk-lbl,.grupo-campo .chk-lbl{margin-bottom:0}
.badge.vigente{background:#dcfce7;color:#166534}
.badge.proxima{background:#fef3c7;color:#92400e}
.badge.renovar{background:#fee2e2;color:#991b1b}
.renov-detalle{display:block;color:var(--gris-500);font-size:.7rem;margin-top:.2rem}
tr.fila-renovar{background:#fef2f2}
tr.fila-proxima{background:#fffbeb}
.btn{background:var(--azul-osc);color:#fff;border:none;padding:.55rem 1.1rem;border-radius:8px;cursor:pointer;font-size:.88rem;font-weight:600}
.btn:hover{background:#241f3d}
.btn-sec{background:#fff;border:1px solid var(--gris-200);padding:.55rem 1.1rem;border-radius:8px;cursor:pointer;font-size:.88rem}
.btn-mini{background:var(--gris-100);border:1px solid var(--gris-200);padding:.3rem .7rem;border-radius:6px;cursor:pointer;font-size:.78rem}
/* Confirmar dentro de un panel-bloqueo (asignación/SST relacionado) — distinto del azul de
   selección para que se note que es la acción final, y más compacto que .btn */
.btn-confirmar{background:var(--verde);color:#fff;border:none;padding:.4rem .9rem;border-radius:7px;cursor:pointer;font-size:.82rem;font-weight:600}
.btn-confirmar:hover{background:#15803d}
.btn-mini:hover{background:var(--azul);color:#fff}
.btn-mini.btn-peligro{background:#fef2f2!important;color:#dc2626;border-color:#fecaca}
.btn-mini.btn-peligro:hover{background:#dc2626!important;color:#fff;border-color:#dc2626}
/* Botón solo-ícono, para tablas con muchas columnas donde "Editar"/"Eliminar" en texto no entra. */
.btn-icono{background:var(--gris-100);border:1px solid var(--gris-200);width:26px;height:26px;padding:0;border-radius:6px;cursor:pointer;font-size:.85rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.btn-icono:hover{background:var(--gris-200)}
.btn-icono-peligro:hover{background:#fee2e2}
.toggle-si-no{display:flex;gap:.4rem}
.btn-toggle{background:#fff;border:1px solid var(--gris-200);padding:.4rem 1rem;border-radius:8px;cursor:pointer;font-size:.85rem;color:var(--gris-500)}
.btn-toggle.activo{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:600}
/* Selector restringido a quienes ya tienen un rol asignado en Usuarios (panel "Asigna primero a
   estas personas") — reemplaza la búsqueda libre cuando el rol tiene 1+ titulares registrados. */
.opciones-candidato-rol{display:flex;gap:.6rem;flex-wrap:wrap}
.btn-candidato-rol{background:#eff6ff;border:1px solid #bfdbfe;padding:.6rem 1.1rem;border-radius:20px;cursor:pointer;font-size:.85rem;color:#1e40af;font-weight:500;transition:background .15s ease,box-shadow .15s ease}
.btn-candidato-rol::before{content:"👤 ";}
.btn-candidato-rol:hover{background:#dbeafe}
.btn-candidato-rol.activo{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:600;box-shadow:0 2px 6px rgba(4,123,191,.35)}
/* Fila de "Nuevo caso": N.° SST + SST relacionado (responsive: se apila en tablet/celular) */
.fila-sst{display:flex;gap:.9rem;flex-wrap:wrap;align-items:flex-start}
.fila-sst-campo{flex:0 0 200px}
.fila-sst-relacionados{flex:1 1 220px;min-width:220px}
.fila-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.9rem}
.fila-4col{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:.9rem}
@media(max-width:900px){
  .fila-sst-campo{flex:1 1 100%}
  .fila-sst-relacionados{flex:1 1 100%;min-width:0}
  .fila-3col{grid-template-columns:1fr}
  .fila-4col{grid-template-columns:1fr}
}

/* Configurar checklists (Operaciones) */
.config-etapa-tit{font-weight:700;font-size:.95rem;color:var(--azul-osc);margin:1.6rem 0 .8rem}
.config-checklist{border:1px solid var(--gris-200);border-radius:10px;padding:1rem;margin-bottom:.8rem}
.config-checklist-tit{font-weight:600;font-size:.9rem;margin-bottom:.6rem}
.config-checklist-tit .rol{font-weight:400;color:var(--gris-500);font-size:.8rem}
.input-item,.input-nuevo{padding:.5rem .75rem;border:1px solid var(--gris-200);border-radius:8px;font-size:.85rem;color:var(--gris-900);background:#fff}
.input-item:focus,.input-nuevo:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(4,123,191,.12)}
.fila-acciones{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.modal-fondo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;align-items:center;justify-content:center}
.modal-fondo.activo{display:flex}
.modal{background:#fff;border-radius:14px;padding:1.5rem;width:90%;max-width:560px;max-height:90vh;overflow-y:auto}
.modal h3{margin-bottom:1.2rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.form-grid .col-full{grid-column:1/-1}
.form-grid label{display:block;font-size:.78rem;font-weight:600;margin-bottom:.3rem;color:var(--gris-500)}
.form-grid input,.form-grid select{width:100%;padding:.45rem .65rem;border:1px solid var(--gris-200);border-radius:8px;font-size:.85rem}
.form-grid input:disabled,.form-grid select:disabled{background:var(--gris-100);color:var(--gris-500);cursor:not-allowed}
.modal-pie{display:flex;justify-content:flex-end;gap:.7rem;margin-top:1.3rem}
.nota{font-size:.8rem;color:var(--gris-500);margin-top:.8rem}
.mini-grid{display:flex;gap:1.5rem;flex-wrap:wrap}
.mini-num{font-weight:700;color:var(--azul);font-size:1.1rem}
/* Login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--azul-osc)}
.login-card{background:#fff;padding:2.2rem;border-radius:16px;width:90%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-logo{font-size:1.6rem;font-weight:800;color:var(--azul-osc);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}
.login-logo-img{width:56px;height:56px;border-radius:50%;flex:none;display:block}
.login-sub{text-align:center;color:var(--gris-500);font-size:.85rem;margin:.3rem 0 1.5rem}
.login-card label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:.9rem 0 .35rem;color:var(--azul-osc)}
.login-card input{width:100%;padding:.65rem .8rem;border:1px solid var(--gris-200);border-radius:8px;font-size:.95rem}
.login-dni-wrap{display:flex;align-items:stretch;border:1px solid var(--gris-200);border-radius:8px;overflow:hidden}
.login-dni-wrap input{border:none;border-radius:0;flex:1;min-width:0}
.login-dni-wrap input:focus{outline:none}
.login-dni-sufijo{display:flex;align-items:center;padding:0 .8rem;background:var(--gris-100);color:var(--gris-500);font-size:.9rem;font-weight:600;white-space:nowrap;border-left:1px solid var(--gris-200)}
.btn-login{width:100%;background:var(--azul);color:#fff;border:none;padding:.7rem;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;margin-top:1.3rem}
.alerta-error{background:#fee2e2;color:#991b1b;padding:.7rem;border-radius:8px;font-size:.85rem;text-align:center}
.login-soporte{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--gris-200);text-align:center}
.login-soporte-tit{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gris-500);margin-bottom:.5rem}
.login-soporte-contactos{display:flex;justify-content:center;flex-wrap:nowrap;gap:.4rem}
.login-soporte-nombre{display:block;font-size:.82rem;font-weight:400;color:var(--gris-500);margin-bottom:.5rem}
.login-soporte a{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--azul-osc);text-decoration:none;font-weight:600;white-space:nowrap}
.login-soporte a:hover{color:var(--azul)}
@media(max-width:360px){.login-soporte a{font-size:.75rem}}
.aviso-pendiente{background:#fffbeb;border-left:3px solid #f59e0b;color:#92400e;padding:.4rem .55rem;border-radius:4px;font-size:.78rem;margin-top:.4rem}
/* Hoja de resumen del checklist: ficha de datos del caso, en vez de un párrafo con "·" entre cada dato */
.resumen-caso{background:var(--gris-100);border-radius:10px;padding:.8rem 1rem;margin-bottom:1rem}
.resumen-caso-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.7rem 1rem}
.resumen-item{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.resumen-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.03em;color:var(--gris-500);font-weight:700}
.resumen-valor{font-size:.85rem;color:var(--gris-900);font-weight:500;overflow-wrap:break-word}
/* Panel para lo que hay que resolver antes de poder marcar un ítem (asignar roles, indicar
   capataz, decidir SST relacionado) — una ficha aparte, en vez de texto suelto flotando al final */
.panel-bloqueo{background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:1.1rem 1.2rem;margin:1rem 0}
.panel-bloqueo .acta-seccion-tit{margin-top:0;color:#1e40af}
/* Cada fase del checklist en su propia tarjeta de color, para que se lean como pasos separados en
   vez de una lista larga y plana — 3 colores del mismo set que ya usa la app, van rotando. */
.fase-caja{border-radius:10px;padding:.9rem 1rem;margin:.9rem 0;border-left:4px solid var(--gris-200)}
.fase-caja .fase-caja-tit{font-weight:700;font-size:.82rem;margin-bottom:.6rem}
.fase-caja.fase-c0{background:#eff6ff;border-left-color:var(--azul)}
.fase-caja.fase-c0 .fase-caja-tit{color:#1e40af}
.fase-caja.fase-c1{background:#f0fdf4;border-left-color:var(--verde)}
.fase-caja.fase-c1 .fase-caja-tit{color:#166534}
.fase-caja.fase-c2{background:#fffbeb;border-left-color:var(--ambar)}
.fase-caja.fase-c2 .fase-caja-tit{color:#92400e}
/* ── Responsive: el sidebar se convierte en menú deslizable en tablet/celular ── */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .25s ease;z-index:40;box-shadow:2px 0 12px rgba(0,0,0,.15)}
  .sidebar.abierto{transform:translateX(0)}
  .contenido{margin-left:0}
  .btn-hamburguesa{display:inline-block}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .cuerpo{padding:1rem}
  .topbar{padding:.8rem 1rem}
  .topbar h1{font-size:1.1rem}
  .barra{flex-direction:column;align-items:stretch}
  .barra input[type=text]{max-width:100%}
  .barra select,.barra button,.barra .btn,.barra .btn-sec{width:100%}
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
}
@media(max-width:480px){
  .modal{padding:1.1rem}
  .modal-scroll{padding:1rem 1.1rem}
  .wizard-paso{width:88px}
  .wizard-paso .circulo{width:28px;height:28px;font-size:.8rem}
  .wizard-paso .etiqueta{font-size:.66rem}
  .wizard-linea{min-width:10px;margin-top:14px}
}

/* ── Tablas con scroll horizontal (para no romper el layout en pantallas angostas) ── */
/* El redondeo de esquina va acá (no en <table>/<th>): border-radius en una celda no se
   recorta bien cuando border-collapse:collapse está activo — deja un triángulo/rayita
   visible en la esquina en vez de una curva limpia. Recortando por fuera con overflow
   se evita ese problema en cualquier navegador. */
.tabla-scroll{overflow:auto hidden;-webkit-overflow-scrolling:touch;border:1px solid var(--gris-300);border-radius:8px}
.tabla-scroll table{border:none}
/* "Mis casos" (Operaciones) tiene muchas columnas — letra más chica y menos relleno para que
   entren todas sin verse apretadas ni obligar a hacer scroll horizontal en pantallas normales. */
#tabla-mis-casos th{font-size:.66rem;padding:.5rem .5rem}
#tabla-mis-casos td{font-size:.78rem;padding:.5rem .5rem}
#tabla-mis-casos .col-sst-destacado{font-weight:700}

/* ── Todas las tablas del sistema → tarjetas apiladas en móvil/tablet (sin scroll horizontal) ── */
/* Mismo punto de quiebre que el sidebar (900px), para que sea coherente: cuando el menú se */
/* colapsa a hamburguesa, las tablas también pasan a tarjetas. */
@media(max-width:900px){
  .tabla-responsive thead{display:none}
  .tabla-responsive, .tabla-responsive tbody{display:block;width:100%}
  .tabla-responsive tr{display:block;border:1px solid var(--gris-200);border-radius:10px;padding:.9rem 1rem;margin-bottom:.8rem;background:#fff}
  .tabla-responsive td{display:block;border:none;padding:.3rem 0}
  .tabla-responsive td.vacio{padding:1.2rem 0}
  .tabla-responsive td[data-label]::before{content:attr(data-label);display:block;font-size:.66rem;font-weight:700;color:var(--gris-500);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.15rem}
  #tabla-actas td.cod{display:none}
  .tabla-scroll{overflow:visible;border:none;border-radius:0}
}

/* ── Modal grande y ventana de personal ── */
.modal-lg{max-width:720px;padding:0;display:flex;flex-direction:column;max-height:92vh}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.5rem;border-bottom:1px solid var(--gris-200)}
.modal-head h3{margin:0;font-size:1.1rem}
.modal-x{font-size:1.6rem;color:var(--gris-500);cursor:pointer;line-height:1}
.modal-x:hover{color:var(--gris-900)}
.modal-scroll{padding:1.3rem 1.5rem;overflow-y:auto;flex:1}
.modal-lg .modal-pie{padding:1rem 1.5rem;border-top:1px solid var(--gris-200);margin-top:0}
.email-banner{display:flex;gap:.9rem;align-items:center;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;border-radius:10px;padding:.9rem 1.1rem;margin-bottom:1.3rem}
.email-ico{width:38px;height:38px;background:var(--azul);color:#fff;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.email-lbl{font-size:.68rem;font-weight:700;color:#1e40af;letter-spacing:.03em}
.email-val{font-size:1rem;font-weight:700;color:#1e3a8a;font-family:monospace;margin-top:.15rem}
.email-lbl span{font-weight:400;text-transform:none;letter-spacing:0;color:#3b5bab}
.email-val-input{width:100%;font-size:1rem;font-weight:700;color:#1e3a8a;font-family:monospace;margin-top:.25rem;border:1px solid #bfdbfe;border-radius:6px;padding:.4rem .6rem;background:#fff}
.email-val-input:focus{outline:2px solid var(--azul);outline-offset:1px}
.seccion{font-size:.72rem;font-weight:700;color:var(--azul);letter-spacing:.04em;margin:1.1rem 0 .6rem;padding-bottom:.4rem;border-bottom:1px solid var(--gris-100)}
.seccion:first-of-type{margin-top:0}
/* Recuadro neutro para agrupar una sección completa (título + campos) cuando un formulario
   tiene varios bloques largos y conviene separarlos a simple vista — mismo estilo sin color
   que .config-checklist, para no mezclar colores de estado con agrupación de formulario. */
.seccion-caja{border:1px solid var(--gris-200);border-radius:10px;padding:1rem 1.1rem;margin-bottom:1rem}
.seccion-caja .seccion{margin-top:0}
.req{color:#dc2626}
.opc{color:var(--gris-500);font-weight:400;font-size:.72rem}

/* ── Tabla de personal (estilo tarjeta) ── */
.cod{color:var(--gris-500);font-size:.8rem}
.persona{display:flex;align-items:center;gap:.7rem}
.avatar{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.8rem;flex-shrink:0}
.persona-nom{font-weight:700;font-size:.85rem;color:var(--gris-900);line-height:1.2}
.persona-sub{font-size:.75rem;color:var(--gris-500);line-height:1.2}
.email{font-size:.8rem;color:var(--azul)}
.centro{text-align:center}
.acciones{display:flex;gap:.35rem}
.acc-btn{width:30px;height:30px;border:none;border-radius:7px;cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:.15s}
.acc-btn.ver{background:#f1f5f9;color:#475569}
.acc-btn.ver:hover{background:#e2e8f0}
.acc-btn.editar{background:var(--azul);color:#fff}
.acc-btn.editar:hover{background:#0369a1}
.acc-btn.borrar{background:#ef4444;color:#fff}
.acc-btn.borrar:hover{background:#dc2626}
.acc-btn:disabled{background:var(--gris-200)!important;color:var(--gris-500)!important;cursor:not-allowed;opacity:.8}

/* Gestión de permisos */
.tabla-matriz{width:100%;table-layout:auto;border-collapse:collapse;font-size:.72rem}
.tabla-matriz th,.tabla-matriz td{padding:.35rem .25rem;border-bottom:1px solid var(--gris-100);text-align:center;white-space:normal;word-break:normal;overflow-wrap:break-word}
.tabla-matriz th:first-child,.tabla-matriz td:first-child{text-align:left;width:160px;max-width:160px}
.tabla-matriz thead th{border-bottom:2px solid var(--gris-200);font-size:.68rem;line-height:1.2;vertical-align:bottom;font-weight:700}
.matriz-modulo td{background:var(--gris-100);font-weight:700;color:var(--azul-osc);text-align:left!important;padding:.45rem .5rem;font-size:.78rem}
.tabla-matriz input[type=checkbox]{width:14px;height:14px;cursor:pointer}
.tabla-matriz input[type=checkbox]:disabled{cursor:not-allowed;opacity:.6}

.matriz-movil{display:none}
.matriz-movil select{width:100%;padding:.6rem .8rem;border:1px solid var(--gris-200);border-radius:8px;font-size:.95rem;margin-bottom:1rem;background:#fff}
.matriz-movil .filtro-desplegable{margin-bottom:1rem}
.matriz-movil .filtro-desplegable-btn{width:100%}
.matriz-movil-modulo{font-weight:700;color:var(--azul-osc);margin:1.2rem 0 .4rem;padding-bottom:.3rem;border-bottom:1px solid var(--gris-200)}
.matriz-movil-modulo:first-of-type{margin-top:0}
.matriz-movil-item{display:flex;align-items:flex-start;gap:.7rem;padding:.65rem 0;border-bottom:1px solid var(--gris-100);cursor:pointer}
.matriz-movil-item input[type=checkbox]{width:22px;height:22px;flex:none;margin-top:.1rem;cursor:pointer}
.matriz-movil-item input[type=checkbox]:disabled{cursor:not-allowed;opacity:.6}
.matriz-movil-item span{font-size:.88rem;line-height:1.3}
.matriz-movil-item small{display:block;color:var(--gris-500);font-size:.72rem;margin-top:.15rem}
.matriz-movil-aviso{background:var(--gris-100);padding:.7rem 1rem;border-radius:8px;color:var(--gris-500);font-size:.85rem;margin-bottom:1rem}
@media(max-width:1320px){
  .matriz-escritorio{display:none}
  .matriz-movil{display:block}
}

/* ── Ventana de perfil ── */
.perfil-cabecera{display:flex;align-items:center;gap:1rem;background:linear-gradient(135deg,#fef2f2,#fee2e2);border-radius:12px;padding:1.2rem;margin-bottom:1.4rem}
.perfil-avatar{width:64px;height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.4rem;flex-shrink:0}
.perfil-info{flex:1}
.perfil-nombre{font-size:1.15rem;font-weight:800;color:var(--gris-900);line-height:1.2}
.perfil-sub{font-size:.95rem;color:var(--gris-500);font-weight:500}
.perfil-cargo{font-size:.8rem;color:var(--gris-500);margin-top:.3rem;text-transform:uppercase;letter-spacing:.02em}
.perfil-datos{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 2rem}
.perfil-datos label{display:block;font-size:.7rem;font-weight:700;color:var(--gris-500);letter-spacing:.03em;margin-bottom:.25rem}
.perfil-datos>div>div{font-size:.92rem;color:var(--gris-900);font-weight:500}
.perfil-datos .email{color:var(--azul);font-family:monospace;font-size:.85rem}

/* ── Confirmación de borrado ──
   Antes: título entero en rojo + bloque relleno de rosa — "grita" demasiado para
   una acción que igual ya pide escribir un código a propósito. Ahora: el rojo se
   usa solo como acento (icono, borde, botón), el resto queda neutro — el mismo
   criterio que usan Linear/GitHub/Stripe en sus confirmaciones destructivas. */
.modal-h3-peligro{display:flex;align-items:center;gap:.6rem;color:var(--gris-900)}
.modal-ico-peligro{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#fef2f2;font-size:.92rem;flex-shrink:0}
.borrar-aviso{font-size:.9rem;color:var(--gris-500);margin-bottom:.8rem}
.borrar-persona{background:var(--gris-100);border:1px solid var(--gris-200);border-left:3px solid #dc2626;border-radius:8px;padding:.7rem 1rem;font-weight:600;color:var(--gris-900);margin-bottom:1.1rem;font-size:.9rem}
.borrar-instr{font-size:.88rem;color:var(--gris-500);margin-bottom:.6rem}
.borrar-instr strong{background:var(--gris-100);color:var(--gris-900);border:1px solid var(--gris-200);padding:.15rem .55rem;border-radius:5px;font-family:monospace;font-size:.9rem}
#borrar-input{width:100%;padding:.6rem .8rem;border:1.5px solid var(--gris-200);border-radius:8px;font-size:1rem;font-family:monospace;text-align:center;letter-spacing:.05em;transition:border-color .15s,box-shadow .15s}
#borrar-input:focus{border-color:#dc2626;outline:none;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.borrar-error{color:#dc2626;font-size:.8rem;margin-top:.5rem;text-align:center}
.btn-peligro{background:#dc2626!important}
.btn-peligro:hover:not(:disabled){background:#b91c1c!important}
.btn-peligro:disabled{background:var(--gris-200)!important;color:var(--gris-500)!important;cursor:not-allowed}
@media(max-width:600px){.perfil-datos{grid-template-columns:1fr}}

/* ── Actas: asistente de pasos ── */
.wizard-pasos{display:flex;align-items:flex-start;justify-content:center;margin-bottom:2rem}
.wizard-paso{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:150px}
.wizard-paso .circulo{width:36px;height:36px;border-radius:50%;background:var(--gris-200);color:var(--gris-500);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;transition:.15s}
.wizard-paso.activo .circulo{background:var(--azul-osc);color:#fff}
.wizard-paso.hecho .circulo{background:var(--verde);color:#fff}
.wizard-paso .etiqueta{font-size:.78rem;color:var(--gris-500);font-weight:600;text-align:center}
.wizard-paso.activo .etiqueta{color:var(--azul-osc)}
.wizard-linea{flex:1;height:2px;background:var(--gris-200);margin-top:18px;min-width:20px;max-width:80px}
.wizard-linea.hecha{background:var(--verde)}
.wizard-paso.bloqueada .circulo{background:var(--gris-200);color:var(--gris-500)}
.wizard-paso .wizard-sub{font-size:.66rem;color:var(--gris-500);font-weight:600;line-height:1.5}
.flujo-stepper{flex-wrap:wrap;row-gap:1.1rem;margin-bottom:.9rem}
.flujo-progreso{height:8px;background:var(--gris-200);border-radius:20px;overflow:hidden;margin:.2rem 0 .5rem}
.flujo-progreso-barra{height:100%;background:var(--azul);border-radius:20px;transition:width .3s ease}
.flujo-progreso-txt{font-size:.8rem;color:var(--gris-500);text-align:center;font-weight:600;margin-bottom:.3rem}
.flujo-progreso-txt b{color:var(--gris-900)}
.flujo-fechas-generales{font-size:.78rem;color:var(--gris-500);text-align:center;margin-bottom:1rem}
.flujo-fechas-generales b{color:var(--gris-900)}

/* ── Tracker de fases: quién va, quién sigue, quién espera (calculado en vivo, no por etapa) ── */
.tracker-guia{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-bottom:1rem;padding:.8rem;background:var(--gris-100);border-radius:10px}
.tracker-guia-fase{display:flex;gap:.35rem}
.tracker-guia-actor{width:34px;height:34px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:700;color:#fff}
.tracker-guia-actor.completo{background:var(--verde)}
.tracker-guia-actor.en_curso{background:var(--azul)}
.tracker-guia-actor.pendiente{background:#f59e0b}
.tracker-guia-actor.bloqueado{background:var(--gris-200);color:var(--gris-500)}
.tracker-guia-flecha{color:var(--gris-500);font-size:.9rem;margin:0 .15rem}
.tracker-titulo{font-weight:700;font-size:.9rem;color:var(--gris-900);margin:1rem 0 .6rem}
.tracker-fases{display:flex;flex-direction:column}
.tracker-fase{display:flex;align-items:flex-start;gap:.9rem}
.tracker-fase-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--gris-200);color:var(--gris-500);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem}
.tracker-fase-num.hecha{background:var(--verde);color:#fff}
.tracker-fase-actores{display:flex;flex-wrap:wrap;gap:.6rem;padding-bottom:.9rem;flex:1}
.tracker-linea-v{width:2px;height:16px;background:var(--gris-200);margin-left:13px}
.tracker-linea-v.hecha{background:var(--verde)}
.tracker-actor{border:1px solid var(--gris-200);border-radius:10px;padding:.55rem .7rem;min-width:150px;background:#fff}
.tracker-actor-completo{border-color:#86efac;background:#f0fdf4}
.tracker-actor-curso{border-color:#93c5fd;background:#eff6ff}
.tracker-actor-pendiente{border-color:#fde68a;background:#fffbeb}
.tracker-actor-bloqueado{opacity:.55}
.tracker-actor-nombre{font-weight:600;font-size:.82rem;color:var(--gris-900);margin-bottom:.25rem}
.tracker-actor-sub{font-size:.72rem;color:var(--gris-500);margin-top:.3rem}
.tracker-actor-plazo{font-size:.72rem;color:#92400e;margin-top:.25rem;font-weight:600}
.tracker-carril-tit{font-weight:700;font-size:.85rem;color:var(--gris-900);margin:.8rem 0 .5rem;padding-top:.6rem;border-top:1px dashed var(--gris-200)}

/* ── Actas: tarjetas de caso ── */
.caso-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.caso-card{background:#fff;border:1px solid var(--gris-200);border-radius:12px;padding:1.3rem;border-top:4px solid var(--gris-200);cursor:pointer;transition:.15s}
.caso-card:hover:not(.deshabilitado){box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-2px)}
.caso-card.deshabilitado{opacity:.55;cursor:not-allowed}
.caso-card .caso-icono{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:.9rem}
.caso-card h4{font-size:1rem;margin-bottom:.5rem}
.caso-card p{font-size:.82rem;color:var(--gris-500);margin-bottom:.9rem;line-height:1.4}
.caso-tag{display:inline-block;padding:.25rem .6rem;border-radius:20px;font-size:.72rem;font-weight:600}
.caso-proximo{display:inline-block;margin-top:.6rem;font-size:.72rem;color:var(--gris-500);font-weight:700;letter-spacing:.03em}
@media(max-width:900px){.caso-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.caso-grid{grid-template-columns:1fr}}

/* ── Actas: vista previa del documento ── */
.acta-doc{background:#fff;border:1px solid var(--gris-200);border-radius:10px;padding:2.6rem 3.2rem;max-width:850px;margin:0 auto;font-size:.87rem;line-height:1.7;color:var(--gris-900)}
.acta-doc h2{text-align:center;font-size:1.02rem;margin-bottom:1.4rem;letter-spacing:.02em}
.acta-doc .acta-campo{font-weight:700}
.acta-doc ul{margin:.6rem 0 1rem 1.3rem}
.acta-doc li{margin-bottom:.3rem}
.acta-doc .acta-seccion-tit{font-weight:700;margin:1.1rem 0 .5rem}
.acta-doc .acta-firma-caja{margin-top:2rem;padding-top:1.2rem;border-top:1px dashed var(--gris-200);font-size:.78rem;color:var(--gris-500);text-align:center}
.acta-firmas{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;margin-top:2rem}
.acta-firma-bloque{text-align:center}
.acta-firma-bloque .lbl{font-size:.7rem;font-weight:700;color:var(--gris-500);letter-spacing:.03em;margin-bottom:.5rem}
.acta-firma-bloque img{max-width:100%;height:150px;object-fit:contain;border-bottom:1px solid var(--gris-900)}
.acta-firma-bloque .nombre{font-weight:700;font-size:.85rem;margin-top:.5rem}
.acta-firma-bloque .rol{font-size:.78rem;color:var(--gris-500)}
@media(max-width:700px){.acta-firmas{grid-template-columns:1fr}}
.acta-firmas-sola{grid-template-columns:1fr;justify-items:center}
.acta-firmas-sola .acta-firma-bloque{max-width:320px;width:100%}
@media(max-width:600px){.acta-doc{padding:1.8rem 1.4rem}}

/* ── Actas: encabezado con logo/N°/fecha (Devolución por cese) ── */
.acta-cab-caso{display:flex;justify-content:space-between;align-items:flex-start;gap:1.2rem;margin-bottom:1.4rem;padding-bottom:1rem;border-bottom:2px solid var(--gris-900)}
.acta-cab-caso-izq{display:flex;align-items:center;gap:.8rem}
.acta-cab-caso-izq img{width:44px;height:44px;object-fit:contain;flex-shrink:0}
.acta-cab-caso-tit{font-size:.95rem;font-weight:700;letter-spacing:.01em;line-height:1.35;max-width:380px}
.acta-cab-caso-der{text-align:right;font-size:.8rem;white-space:nowrap}
.acta-cab-caso-der div{margin-bottom:.15rem}
.acta-campos-lista p{margin-bottom:.5rem}
.acta-tabla-equipos{width:100%;border-collapse:collapse;margin:.8rem 0 1.2rem;font-size:.82rem}
.acta-tabla-equipos th,.acta-tabla-equipos td{border:1px solid var(--gris-200);padding:.5rem .6rem;text-align:left}
.acta-tabla-equipos th{background:var(--gris-100);font-size:.72rem;letter-spacing:.02em;text-transform:uppercase;color:var(--gris-500)}
.acta-validacion-item{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.5rem;font-size:.85rem}
.acta-validacion-item .caja{width:15px;height:15px;border:1.5px solid var(--gris-900);border-radius:3px;flex-shrink:0;margin-top:.15rem;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;line-height:1}
@media(max-width:600px){.acta-cab-caso{flex-direction:column}.acta-cab-caso-der{text-align:left}}
.acta-guia-firma{margin-top:2rem;max-width:220px;text-align:center}
.acta-guia-firma .linea{height:60px;border-bottom:1px solid var(--gris-900)}
.acta-guia-firma img{max-width:100%;height:60px;object-fit:contain;border-bottom:1px solid var(--gris-900)}
.acta-guia-firma .nombre{font-weight:700;font-size:.85rem;margin-top:.5rem}
.acta-guia-firma .rol{font-size:.78rem;color:var(--gris-500)}
.acta-qr-caja{text-align:center;margin-top:1.5rem;padding-top:1.2rem;border-top:1px dashed var(--gris-200)}
.acta-qr-caja canvas{max-width:140px;height:auto;border:1px solid var(--gris-200);border-radius:8px;padding:.4rem;background:#fff}
.acta-qr-caja p{font-size:.72rem;color:var(--gris-500);margin-top:.4rem}

/* ── Actas: enlace generado ── */
.enlace-generado{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:1.2rem;margin-top:1.2rem}
.enlace-generado .enlace-texto{background:#fff;border:1px solid #bbf7d0;border-radius:8px;padding:.6rem .9rem;font-family:monospace;font-size:.78rem;word-break:break-all;margin:.7rem 0}
.enlace-vence{font-size:.78rem;color:#92400e;background:#fef3c7;border-radius:6px;padding:.4rem .7rem;display:inline-block;margin-top:.6rem}
.btn-whatsapp{background:#25D366;color:#fff;border:none;padding:.55rem 1.1rem;border-radius:8px;cursor:pointer;font-size:.88rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.btn-whatsapp:hover{background:#1ebe5b}

/* ── Firma con canvas (dedo / mouse) ── */
.firma-caja{border:2px dashed var(--gris-200);border-radius:10px;background:#fbfbfc;touch-action:none;width:100%;max-width:520px;height:200px;display:block;margin:0 auto;cursor:crosshair}
.firma-acciones{display:flex;gap:.7rem;justify-content:center;margin-top:.9rem}

/* ── Dashboard: tarjetas por tipo + gráficos ── */
.tipo-botones{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.8rem}
.tipo-btn{flex:1;min-width:140px;background:var(--gris-100);border:2px solid transparent;border-radius:12px;padding:1.1rem 1rem;cursor:pointer;text-align:center;transition:.15s;display:flex;flex-direction:column;gap:.3rem;font-family:inherit}
.tipo-btn:hover{background:#eff6ff}
.tipo-btn.activo{background:#eff6ff;border-color:var(--azul)}
.tipo-btn-num{font-size:1.8rem;font-weight:800;color:var(--azul-osc)}
.tipo-btn-lbl{font-size:.85rem;color:var(--gris-500);font-weight:600}
.licencia-tipo-grid{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.8rem}
.licencia-tipo-tile{flex:1;min-width:160px;border-radius:12px;padding:1.1rem 1rem;text-align:center;display:flex;flex-direction:column;gap:.3rem}
.licencia-tipo-num{font-size:1.8rem;font-weight:800}
.licencia-tipo-lbl{font-size:.85rem;color:var(--gris-900);font-weight:600}
.licencia-tipo-fecha{font-size:.72rem;color:var(--gris-600,#4b5563)}
.dash-charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1rem}
.dash-chart-card{background:var(--gris-100);border-radius:10px;padding:1rem}
.dash-chart-tit{font-size:.75rem;font-weight:700;color:var(--gris-500);margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.03em}
.dash-chart-vacio{text-align:center;color:var(--gris-500);font-size:.85rem;padding:2.5rem 0}
.dash-chart-nota{margin-top:.7rem;font-size:.8rem;color:var(--gris-500);background:#fff;border:1px solid var(--gris-200);border-radius:8px;padding:.6rem .8rem;line-height:1.5}
.dash-chart-nota b{color:var(--gris-900)}
.dash-gasto-total{font-size:1.7rem;font-weight:800;color:var(--azul-osc);margin-bottom:.6rem}
.dash-top-grupo{margin-bottom:.4rem}
.dash-top-grupo:last-child{margin-bottom:0}
.dash-top-item{display:flex;justify-content:space-between;align-items:center;padding:.55rem .7rem;font-size:.85rem;background:#fff;border-radius:6px;cursor:pointer;transition:.1s}
.dash-top-item:hover{background:#eff6ff}
.dash-top-item b{color:var(--gris-900);font-weight:600}
.dash-top-item span{color:var(--azul-osc);font-weight:800;background:var(--gris-100);border-radius:20px;padding:.1rem .6rem;font-size:.8rem}
.dash-top-detalle{background:#f9fafb;border:1px solid var(--gris-200);border-radius:6px;padding:.5rem .8rem;margin-top:.3rem}
.dash-top-detalle-item{font-size:.78rem;color:var(--gris-500);padding:.25rem 0;font-family:monospace}
.dash-renov-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.dash-renov-tile{border-radius:10px;padding:1.1rem;display:flex;flex-direction:column;gap:.3rem}
.dash-renov-tile.renov{background:#fee2e2}
.dash-renov-tile.proxima{background:#fef3c7}
.dash-renov-tile .dash-renov-num{font-size:2rem;font-weight:800}
.dash-renov-tile.renov .dash-renov-num{color:#991b1b}
.dash-renov-tile.proxima .dash-renov-num{color:#92400e}
.dash-renov-tile .dash-renov-lbl{font-size:.82rem;font-weight:600;color:var(--gris-900)}
.dash-renov-tile .dash-renov-detalle{font-size:.72rem;color:var(--gris-500)}
@media(max-width:700px){.dash-charts-grid{grid-template-columns:1fr}}
@media(max-width:600px){.dash-renov-grid{grid-template-columns:1fr}}

/* ── Página pública de firma (sin sesión) ── */
.firmar-body{min-height:100vh;background:var(--gris-100);padding:2.2rem 1rem}
.firmar-wrap{max-width:900px;margin:0 auto}
.firmar-header{text-align:center;margin-bottom:1.5rem}
.firmar-header .logo-mini{font-weight:800;color:var(--azul-osc);font-size:1.3rem}
.firmar-estado-msg{background:#fff;border-radius:14px;padding:2.8rem 1.5rem;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.06);max-width:480px;margin:0 auto}
.firmar-estado-msg .icono-grande{font-size:2.6rem;margin-bottom:1rem}
.firmar-estado-msg h2{font-size:1.1rem;margin-bottom:.5rem}
.firmar-estado-msg p{color:var(--gris-500);font-size:.9rem}
.firmar-panel{background:#fff;border-radius:14px;padding:3rem 3.5rem;box-shadow:0 10px 30px rgba(0,0,0,.06);margin-top:1.2rem}
@media(max-width:600px){.firmar-panel{padding:1.8rem 1.4rem}}

/* ── Checkbox de accesorios (ficha de laptop) ── */
.chk-lbl{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--gris-500);font-weight:600;cursor:pointer}
.chk-lbl input{width:auto}
.lic-fechas-tipo{display:flex;gap:1rem;margin-top:.5rem;padding-left:1.7rem}
.lic-fechas-tipo>div{flex:1;max-width:180px}
.lic-tipo-fijo{background:var(--gris-100);border:1px solid var(--gris-200);border-radius:8px;padding:.55rem .8rem;font-size:.9rem;font-weight:600;color:var(--gris-900)}
.lic-fecha-mini-lbl{display:block;font-size:.7rem;font-weight:600;color:var(--gris-500);margin-bottom:.25rem}

/* ── Ver licencia ── */
.lic-ver{padding:1.4rem 1.6rem}
.lic-ver-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:1.2rem;margin-bottom:1.2rem;border-bottom:1px solid var(--gris-200)}
.lic-ver-tipo{font-size:1.35rem;font-weight:800;color:var(--azul-osc);line-height:1.25}
.lic-ver-persona{display:flex;align-items:center;gap:.8rem;background:var(--gris-100);border-radius:10px;padding:.8rem .9rem;margin-bottom:1.2rem}
.lic-ver-persona .avatar{width:40px;height:40px;font-size:.85rem;flex-shrink:0}
.lic-ver-persona-nom{font-weight:700;color:var(--gris-900);font-size:.95rem}
.lic-ver-persona-dni{color:var(--gris-500);font-size:.8rem;font-family:monospace;margin-top:.1rem}
.lic-ver-fechas{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:.2rem}
.lic-ver-fecha-item{display:flex;gap:.7rem;align-items:flex-start}
.lic-ver-fecha-ico{font-size:1.3rem;line-height:1;margin-top:.1rem}
.lic-ver-fecha-lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--gris-500)}
.lic-ver-fecha-val{font-weight:700;color:var(--gris-900);font-size:1rem;margin-top:.1rem}
.lic-ver-vigencia{font-size:.78rem;font-weight:600;margin-top:.25rem}
.lic-ver-vigencia.ok{color:var(--verde)}
.lic-ver-vigencia.pronto{color:var(--ambar)}
.lic-ver-vigencia.vencida{color:var(--rojo)}
.lic-ver-obs{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--gris-200);font-size:.9rem;color:var(--gris-900)}

/* ── Paginación de tablas (Personal, Usuarios, etc.) — evita renderizar cientos de filas de golpe ── */
.tabla-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem;font-size:.82rem;color:var(--gris-500)}
.tabla-meta b{color:var(--gris-900)}
.paginacion{display:flex;gap:.3rem;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:1rem}
.paginacion button{min-width:34px;height:34px;padding:0 .5rem;border:1px solid var(--gris-200);background:#fff;border-radius:8px;cursor:pointer;font-size:.82rem;color:var(--gris-900);transition:background .12s}
.paginacion button:hover:not(:disabled){background:var(--gris-100)}
.paginacion button.activa{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:700}
.paginacion button:disabled{opacity:.4;cursor:default}
.paginacion .gap{border:none;background:none;cursor:default;min-width:18px}