/* bundle.css = css/oses-apps.css del repositorio oses-design-system: los estilos de producción. */
/* app.css — Telefonía Osés, sobre el sistema de diseño «Osés Apps de datos».
   Los colores, radios y demás valores salen de tokens.css (cargado antes); aquí solo se usan.
   Papeles del color: --primary estructura · --accent «aquí pasa algo» (rellenos y marcas)
   · --accent-ink texto naranja · --danger error y acción destructiva · --ok/--warn-ink solo en etiquetas. */
/* Controles nativos (casillas, fechas, barras de scroll) en el tema que toca */
:root{color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--font-sans);font-variant-numeric:tabular-nums;display:flex;flex-direction:column;height:100vh;overflow:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* header */
/* Cabecera: la marca es lo primero que encoge (flex-shrink alto, con puntos suspensivos); las pestañas y el usuario no se cortan.
   Azul Osés en los dos temas, con la versión del logotipo para fondos oscuros (osés en naranja, CONSTRUCCIÓN en blanco), en SVG.
   OJO con los SVG del logotipo: los huecos de las letras son subtrazados y necesitan fill-rule="evenodd"; sin él, la «o» y la «é» salen macizas. */
header{background:var(--cabecera);color:var(--on-cabecera);padding:0 20px;display:flex;align-items:stretch;gap:20px;flex:0 0 auto;min-height:66px}
header .brand{display:flex;flex-direction:row;align-items:center;gap:16px;padding:8px 0;min-width:0;flex:0 100 auto}
header .brand img{height:46px;width:auto;flex:0 0 auto;display:block}
header .brand .txt{display:flex;flex-direction:column;justify-content:center;min-width:0;padding-left:16px;border-left:1px solid rgba(255,255,255,.22)}
header h1{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header .sub{font-size:12px;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav.tabs{display:flex;align-items:flex-end;gap:2px;margin-left:auto;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{background:transparent;border:0;color:rgba(255,255,255,.72);padding:16px 14px 12px;border-bottom:3px solid transparent;white-space:nowrap;font-weight:500}
nav.tabs button:hover{color:#fff}
nav.tabs button[aria-selected="true"]{color:#fff;border-bottom-color:var(--accent)}
nav.tabs button .n{display:inline-block;margin-left:6px;font-size:11px;padding:1px 6px;border-radius:9px;background:rgba(255,255,255,.16)}

/* layout */
.layout{display:flex;flex:1 1 auto;min-height:0}
aside{width:270px;flex:0 0 270px;border-right:1px solid var(--line);background:var(--panel);overflow-y:auto;padding:14px 14px 40px;display:flex;flex-direction:column;gap:16px}
aside .search{position:relative}
aside .search input{width:100%;padding:9px 10px 9px 32px;border:1px solid var(--line-strong);border-radius:6px;background:var(--bg)}
aside .search svg{position:absolute;left:10px;top:11px;width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2}
.facet h3{margin:0 0 6px;font-size:12px;font-weight:600;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.facet h3 button{border:0;background:none;color:var(--accent-ink);font-size:11px;padding:0}
.facet label{display:flex;align-items:center;gap:8px;padding:3px 4px;border-radius:4px;cursor:pointer}
.facet label:hover{background:var(--hover)}
.facet label input{margin:0;accent-color:var(--primary)}
.facet label .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.facet label .c{color:var(--muted);font-size:12px}
.facet label.zero{opacity:.45}
.facet .more{border:0;background:none;color:var(--primary);font-size:12px;padding:2px 4px}
aside .reset{border:1px solid var(--line-strong);background:var(--panel);border-radius:6px;padding:7px;width:100%}
.switch{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);font-size:13px}
.switch input{accent-color:var(--accent)}
.notice{font-size:12px;color:var(--muted);line-height:1.4}

main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;overflow:hidden}
main.stack{overflow:auto}
main.stack .tablewrap{flex:0 0 auto;max-height:55vh;min-height:220px}
main.stack .strip,main.stack .charts,main.stack .toolbar{flex:0 0 auto}
.strip{display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--panel);overflow-x:auto;flex:0 0 auto}
.kpi{padding:12px 20px;border-right:1px solid var(--line);min-width:130px}
.kpi .v{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.kpi .v small{font-size:13px;font-weight:400;color:var(--muted);margin-left:2px}
.kpi .l{font-size:12px;color:var(--muted);margin-top:2px}
.kpi.filtered .v{color:var(--accent-ink)}

.charts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-bottom:1px solid var(--line);flex:0 0 auto}
.chart{background:var(--panel);padding:12px 20px 10px}
.chart h3{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--muted)}
.bars{display:flex;flex-direction:column;gap:3px}
.bar{display:grid;grid-template-columns:minmax(90px,170px) 1fr 54px;align-items:center;gap:8px;font-size:12px;cursor:pointer;border-radius:3px;padding:1px 2px}
.bar:hover{background:var(--hover)}
.bar .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .tr{height:9px;background:var(--primary-soft);border-radius:2px;overflow:hidden}
.bar .tr i{display:block;height:100%;background:var(--primary)}
.bar .vl{text-align:right;color:var(--muted)}
.bar.on .tr i{background:var(--accent)}

.toolbar{display:flex;align-items:center;gap:10px;padding:8px 20px;border-bottom:1px solid var(--line);background:var(--panel);flex:0 0 auto;flex-wrap:wrap}
.toolbar .count{font-weight:500}
.toolbar .count b{color:var(--accent-ink)}
.toolbar .sp{flex:1}
.toolbar button,.toolbar .dd>button{border:1px solid var(--line-strong);background:var(--panel);border-radius:6px;padding:6px 10px;font-size:13px}
.toolbar button:hover{background:var(--hover)}
.toolbar button.aviso{border-color:var(--accent);color:var(--accent-ink)} /* datos personales a la vista */
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent-ink);border-radius:12px;padding:2px 8px 2px 10px;font-size:12px;font-weight:500}
.chip button{border:0;background:none;padding:0;color:inherit;font-size:14px;line-height:1}
.dd{position:relative}
.dd .menu{display:none;position:absolute;right:0;top:calc(100% + 4px);background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;box-shadow:var(--shadow);padding:8px;z-index:30;min-width:230px;max-height:360px;overflow:auto;columns:1}
.dd.open .menu{display:block}
.dd .menu label{display:flex;gap:8px;padding:4px 6px;border-radius:4px;cursor:pointer;white-space:nowrap}
.dd .menu label:hover{background:var(--hover)}

.tablewrap{flex:1 1 auto;overflow:auto;background:var(--panel)}
table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}
thead th{position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--line-strong);text-align:left;padding:8px 12px;font-weight:600;font-size:12px;color:var(--muted);white-space:nowrap;cursor:pointer;user-select:none;z-index:5}
thead th:hover{color:var(--ink)}
/* buscador por columna, encima del rótulo */
thead th input.cq{display:block;width:100%;min-width:70px;margin:0 0 6px;padding:3px 6px;border:1px solid var(--line-strong);border-radius:5px;background:var(--panel);font-size:12px;font-weight:400;color:var(--ink);cursor:text}
thead th input.cq:not(:placeholder-shown){border-color:var(--primary)}
thead th{vertical-align:bottom}
thead th.sorted{color:var(--primary)}
thead th .ar{font-size:10px;margin-left:4px}
tbody td{padding:6px 12px;border-bottom:1px solid var(--line);white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--hover)}
tbody tr.sel td{background:var(--sel)}
td.num{text-align:right}
td.mask{color:var(--muted);letter-spacing:.15em}
.tag{display:inline-block;padding:1px 7px;border-radius:4px;font-size:12px;font-weight:500}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.warn{background:var(--warn-soft);color:var(--warn-ink)}
.tag.bad{background:var(--accent-soft);color:var(--accent-ink)}
.tag.info{background:var(--primary-soft);color:var(--primary)}
.empty{padding:60px 20px;text-align:center;color:var(--muted)}
.empty button{border:1px solid var(--line-strong);background:var(--panel);border-radius:6px;padding:6px 12px;margin-top:10px}

/* quality view */
.quality{padding:20px;overflow:auto;flex:1 1 auto}
.quality h2{margin:0 0 4px;font-size:16px}
.quality p{margin:0 0 16px;color:var(--muted);max-width:70ch}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.qcheck{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;display:flex;align-items:center;gap:12px;text-align:left;width:100%}
.qcheck:hover{border-color:var(--primary)}
.qcheck .n{font-size:22px;font-weight:600;min-width:52px;text-align:right;letter-spacing:-.02em}
.qcheck .n.zero{color:var(--muted)}
.qcheck .n.some{color:var(--accent-ink)}
.qcheck .d{flex:1;min-width:0}
.qcheck .d b{display:block;font-weight:500}
.qcheck .d span{font-size:12px;color:var(--muted)}
.qsec{margin:22px 0 8px;font-size:12px;font-weight:600;color:var(--muted)}

/* drawer */
.drawer{position:fixed;top:0;right:0;height:100%;width:min(460px,100%);background:var(--panel);box-shadow:var(--shadow);transform:translateX(105%);transition:transform .2s ease;z-index:50;display:flex;flex-direction:column}
.drawer.open{transform:none}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}
.drawer header{background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line);padding:14px 18px;display:flex;align-items:center;gap:12px}
.drawer header h2{margin:0;font-size:16px;flex:1;min-width:0}
.drawer header button{border:0;background:none;font-size:20px;color:var(--muted);padding:2px 6px}
.drawer .body{overflow:auto;padding:12px 18px 30px}
.drawer dl{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;margin:0}
.drawer dt{color:var(--muted);font-size:12px;padding-top:2px}
.drawer dd{margin:0;word-break:break-word}
.drawer dd.mask{color:var(--muted);letter-spacing:.15em}
.drawer h4{margin:18px 0 8px;font-size:12px;color:var(--muted);font-weight:600;border-top:1px solid var(--line);padding-top:12px}
.drawer .linkrow{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);cursor:pointer}
.drawer .linkrow:hover{color:var(--primary)}
.drawer .linkrow span:last-child{color:var(--muted);font-size:12px}
.backdrop{position:fixed;inset:0;background:var(--velo);z-index:40;display:none}
.backdrop.show{display:block}

/* Sin sitio para todo en una fila: las pestañas bajan a una segunda, a todo el ancho.
   1480 px y no 1180: con las cinco pestañas de esta app y la zona de usuario, por debajo de eso el nombre de la app quedaba en «T…». */
@media (max-width:1480px){
  header{flex-wrap:wrap;column-gap:16px;row-gap:0}
  header .brand{flex:1 1 0}
  nav.tabs{order:3;margin-left:0;flex:1 0 100%;border-top:1px solid rgba(255,255,255,.14)}
  nav.tabs button{padding:10px 14px 8px}
}
@media (max-width:560px){ header .sub{display:none} header .brand img{height:34px} }
@media (max-width:900px){
  .layout{flex-direction:column;overflow:auto}
  aside{width:100%;flex:0 0 auto;border-right:0;border-bottom:1px solid var(--line);max-height:none}
  main{overflow:visible}
  .charts{grid-template-columns:1fr}
  body{overflow:auto;height:auto}
  .tablewrap{overflow:auto;max-height:70vh}
}

/* cabecera: usuario */
header .user{flex:0 0 auto;display:flex;align-items:center;gap:10px;font-size:12px;color:rgba(255,255,255,.85);padding-left:14px;white-space:nowrap}
header .user a{color:#fff}
header .user button{background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:5px;padding:4px 9px;font-size:12px}
header .user button:hover{background:rgba(255,255,255,.22)}
/* sensibles en la ficha */
.sens-box{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--bg)}
.sens-box p{margin:0 0 8px;font-size:12px;color:var(--muted)}
.sens-box input{width:100%;padding:7px 9px;border:1px solid var(--line-strong);border-radius:6px;background:var(--panel);margin-bottom:8px}
.sens-box button{border:0;background:var(--primary);color:var(--on-primary);border-radius:6px;padding:7px 12px}
.sens-box button.sec{background:transparent;color:var(--primary);border:1px solid var(--line-strong)}
.sens-box .err{color:var(--danger);font-size:12px;margin-top:6px}
.sens-box dl{margin-top:4px}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login form{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:26px 28px;width:min(360px,92vw);display:flex;flex-direction:column;gap:10px}
.login h1{margin:0 0 4px;font-size:18px}
.login .logo{height:54px;width:auto;align-self:flex-start;margin:0 0 6px}
.login label{font-size:12px;color:var(--muted)}
.login input{padding:9px 10px;border:1px solid var(--line-strong);border-radius:6px;background:var(--bg)}
.login button{border:0;background:var(--primary);color:var(--on-primary);border-radius:6px;padding:10px;margin-top:6px;font-weight:500}
.login .err{color:var(--danger);font-size:13px;min-height:18px}
.aud{padding:20px;overflow:auto}
.aud table{width:100%;font-size:13px}
/* edición en la ficha (solo admin) */
.acciones{display:flex;gap:8px;margin:0 0 12px}
.acciones button,.toolbar button.pri{border:0;background:var(--primary);color:var(--on-primary);border-radius:6px;padding:7px 12px}
.toolbar button.pri:hover{background:var(--primary);opacity:.9}
.acciones button.sec{background:transparent;color:var(--primary);border:1px solid var(--line-strong)}
/* líneas de empresa dentro de la ficha del empleado */
.ficha .lt-tit{grid-column:1/-1;font-size:12px;font-weight:600;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.ficha [hidden]{display:none}
/* alta / baja desde la tabla de «Altas y bajas» */
button.ab{border:1px solid var(--line-strong);background:transparent;color:var(--primary);border-radius:6px;padding:2px 10px;font-size:12px}
button.ab.baja{color:var(--accent-ink)}
button.ab:hover{background:var(--bg)}
.notice.aviso{border-left:3px solid var(--accent);padding:6px 10px;margin:0 0 12px;background:var(--bg)}
.ficha{display:grid;grid-template-columns:150px 1fr;gap:8px 12px;align-items:center}
.ficha>label{color:var(--muted);font-size:12px}
.ficha input:not([type=checkbox]),.ficha select{width:100%;min-width:0;padding:6px 8px;border:1px solid var(--line-strong);border-radius:6px;background:var(--panel)}
.ficha h4,.ficha .notice,.ficha .err,.ficha .acciones,.ficha #reauthBox{grid-column:1/-1}
.ficha .acciones{margin:8px 0 0}
.ficha .err{color:var(--danger);font-size:12px;min-height:1em}
.ficha .sensfila{display:flex;gap:8px;align-items:center}
.ficha .borrar{display:flex;gap:4px;align-items:center;font-size:12px;color:var(--muted);white-space:nowrap}
/* anillos */
.pies{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line);flex:0 0 auto}
main.stack .pies{flex:0 0 auto}
/* tres anillos: en fila; si no caben, dos arriba y el tercero a todo el ancho (sin dejar un hueco gris al lado) */
.pies.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1300px){.pies.n3{grid-template-columns:repeat(2,minmax(0,1fr))} .pies.n3 .pie:last-child{grid-column:1/-1}}
@media (max-width:900px){.pies.n3{grid-template-columns:1fr} .pies.n3 .pie:last-child{grid-column:auto}}
/* cuatro anillos: 2x2, para que las leyendas (equipos, modelos) no se corten */
.pies.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.pies.n4{grid-template-columns:1fr}}
/* cinco anillos (Cruce de datos y Empleados personal): el primero ocupa la fila entera y los otros cuatro van de dos en dos */
.pies.n5{grid-template-columns:repeat(2,minmax(0,1fr))}
.pies.n5 .pie:first-child{grid-column:1/-1}
@media (max-width:900px){.pies.n5{grid-template-columns:1fr}}
.pie .pbody{display:flex;align-items:center;gap:16px}
.pie svg{width:112px;height:112px;flex:0 0 auto}
.pie .sl{stroke:var(--panel);stroke-width:2;stroke-linejoin:round}
.pie .sl[data-f]{cursor:pointer}
.pie .sl:hover{opacity:.78}
/* con una porción elegida siguen todas a la vista: la elegida entera y las demás atenuadas, para poder cambiar o quitar el filtro */
.pie svg:has(.sl.on) .sl:not(.on){opacity:.3} .pie svg:has(.sl.on) .sl:not(.on):hover{opacity:.6}
.pie .pley:has(.pl.on) .pl:not(.on){opacity:.6}
.pie .s1{fill:var(--s1)} .pie .s2{fill:var(--s2)} .pie .s3{fill:var(--s3)} .pie .s4{fill:var(--s4)} .pie .s5{fill:var(--s5)} .pie .s0{fill:var(--s0)}
.pie .pt{font-size:15px;font-weight:600;fill:var(--ink);text-anchor:middle}
.pie .ps{font-size:9px;fill:var(--muted);text-anchor:middle}
.pie .pley{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:12px}
.pie .pl{display:grid;grid-template-columns:10px minmax(0,1fr) auto 38px;align-items:center;gap:8px;padding:1px 4px;border-radius:3px}
.pie .pl.clic{cursor:pointer} .pie .pl.clic:hover{background:var(--hover)} .pie .pl.on{background:var(--sel);font-weight:600}
.pie .sw{width:10px;height:10px;border-radius:2px;display:block}
.pie i.s1{background:var(--s1)} .pie i.s2{background:var(--s2)} .pie i.s3{background:var(--s3)} .pie i.s4{background:var(--s4)} .pie i.s5{background:var(--s5)} .pie i.s0{background:var(--s0)}
.pie .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pie .vl{text-align:right;font-variant-numeric:tabular-nums}
.pie .pc{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.tip{position:fixed;z-index:60;pointer-events:none;background:var(--ink);color:var(--panel);font-size:12px;padding:4px 8px;border-radius:5px;white-space:nowrap;box-shadow:var(--shadow)}
.ficha .sensfila .cod{flex:0 0 96px;width:96px}

/* ---- sistema de diseño v2 ---- */
/* Páginas secundarias (Auditoría, Versiones): la página hace scroll entera. Sustituye al style="height:auto;overflow:auto". */
body.pagina-sec{height:auto;overflow:auto;display:block}
body.pagina-sec header .user{margin-left:auto}
/* Módulo de versionado: sus nombres de variable se atan a los del sistema (antes, estilos en línea en versiones.html). */
#versiones{max-width:980px;--papel:var(--panel);--linea:var(--line);--navy:var(--primary);--texto-2:var(--muted);--texto-3:var(--muted);--rojo:var(--accent);--parcial:var(--primary)}
#versiones .ver-vivo{background:var(--ok-soft);color:var(--ok);border-color:transparent}
/* Pestañas con panel asociado */
nav.tabs button:focus-visible{outline-color:var(--on-cabecera)}
main[role="tabpanel"]:focus{outline:none}
/* Ficha lateral: foco al abrir */
.drawer:focus{outline:none}
.drawer header button:hover{color:var(--ink)}
/* Botón destructivo de la ficha */
.acciones button.peligro{background:transparent;color:var(--danger);border:1px solid var(--line-strong)}
.acciones button.peligro:hover{border-color:var(--danger)}
/* Impresión: papel blanco, sin cabecera azul ni fondos oscuros, logotipo en color */
@media print{
  :root{--bg:#fff;--panel:#fff;--ink:#1c1e2e;--muted:#6a6f82;--line:#e2e4ec}
  html,body{height:auto;overflow:visible;background:#fff;color:var(--ink)}
  body{display:block}
  header{background:#fff;color:var(--ink);border-bottom:2px solid var(--marca-azul)}
  header .brand img{content:url(/logo-oses.svg)}
  header .brand .txt{border-left-color:var(--line)}
  nav.tabs,header .user,aside,.toolbar button,.toolbar .dd,.backdrop,.drawer,.pies,.charts,.tip{display:none!important}
  .layout,main,.tablewrap{display:block;overflow:visible;height:auto;max-height:none}
  thead th{position:static}
  tbody td{white-space:normal;max-width:none}
}
/* Enlace con aspecto de botón sobre la cabecera («Volver»): sin JS en línea, compatible con una CSP estricta */
header .user a.boton{background:rgba(255,255,255,.12);border-radius:5px;padding:4px 9px;font-size:12px;text-decoration:none;color:#fff}
header .user a.boton:hover{background:rgba(255,255,255,.22)}
tbody tr:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
tbody tr:focus-visible td{background:var(--hover)}