/* Tecnología, rediseñada (18/10/2026, solo en local). Ver
   tecnologia-nueva.js. Hereda las piezas del dashboard (`.dn`, `.dn-*`);
   aquí va lo propio y el estilo nuevo de lo que ya había. Las esquinas
   siguen rectas: lo manda el sistema de formas de la casa. */

.tn { margin-bottom: 18px; }

/* ── La tarjeta negra de cabecera ─────────────────────────────────────── */
.tn-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; padding: 22px 24px; }
.tn-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--dn-oscuro-suave); }
.tn-cifra { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 6px; }
.tn-cifra b { font-size: 60px; font-weight: 650; letter-spacing: -0.045em; line-height: .95; font-variant-numeric: tabular-nums; color: #fff; }
.tn-cifra span { font-size: 15px; color: var(--dn-oscuro-suave); }
.tn-frase { font-size: 13px; line-height: 1.6; color: var(--dn-oscuro-suave); max-width: 520px; }
.tn-frase em { font-style: normal; color: #ff8a96; font-weight: 600; }
.tn-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tn-btn-claro { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.tn-btn-claro:hover { background: rgba(255,255,255,.14); }
.tn-hero .tn-barra { margin-top: 18px; }
.tn-hero-der { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px 16px 12px; background: rgba(255,255,255,.06); }
.tn-der-cab { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--dn-oscuro-suave); }
.tn-der-cab b { color: #fff; font-variant-numeric: tabular-nums; }

/* La barra partida: se abre al aparecer. */
.tn-barra { display: flex; gap: 3px; height: 12px; }
.tn-barra i { display: block; width: var(--w); min-width: 4px; transition: width .9s cubic-bezier(.2,.8,.2,1); }
.dn:not(.dn-listo) .tn-barra i { width: 0; min-width: 0; }
.tn-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--dn-oscuro-suave); }
.tn-leyenda i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -1px; }
.tn-leyenda b { color: #fff; font-variant-numeric: tabular-nums; }
.tn-b-blanco { background: #fff; }
.tn-b-tinta { background: rgba(255,255,255,.42); }
.tn-b-gris { background: rgba(255,255,255,.18); }
.tn-b-acento { background: var(--dn-acento); }
.tn-b-vacio { background: rgba(255,255,255,.08); }
/* En las tarjetas claras, los mismos tramos en tinta. */
.tn-mini .tn-b-tinta { background: var(--dn-tinta); }
.tn-mini .tn-b-gris { background: var(--border-med); }
.tn-mini .tn-leyenda { color: var(--text-soft); }
.tn-mini .tn-leyenda b { color: var(--dn-tinta); }
.tn-mini { margin-top: auto; padding-top: 14px; }

/* Los palitos: una columna por familia, compañía o mes. */
.tn-palitos { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; align-items: end; height: 120px; }
.tn-palito { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; min-width: 0; }
.tn-palito b { font-size: 12px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.tn-pista { flex: 1; width: 100%; min-height: 0; display: flex; align-items: flex-end; }
.tn-palito i { display: block; width: 100%; height: var(--h); background: rgba(255,255,255,.28); transition: height .9s cubic-bezier(.2,.8,.2,1); }
.tn-palito-hoy i { background: var(--dn-acento); }
.tn-palito span { font-size: 10.5px; color: var(--dn-oscuro-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tn-palito-hoy span { color: #fff; font-weight: 700; }
.dn:not(.dn-listo) .tn-palito i { height: 4% !important; }

/* ── General ─────────────────────────────────────────────────────────── */
.tn-cifras { margin: 6px 0 18px; }
.tn-vivas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tn-viva { min-height: 260px; }
.tn-viva .dn-linea-num { font-size: 44px; }
.tn-sub { margin: 26px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); display: flex; align-items: baseline; gap: 12px; }
.tn-sub small { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-soft); }
/* El widget «Cifras» de siempre dice lo mismo que la cabecera nueva. */
#page-tecnologia-dash.tn-activo .td-widget[data-wid="cifras"] { display: none; }

/* ── Los widgets de siempre, con el estilo nuevo ─────────────────────── */
.td-widget { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--wn-sombra, 0 12px 32px rgba(20,20,26,.06)) !important; }
.td-widget-cab { padding: 14px 16px !important; border-bottom: 1px solid var(--border) !important; background: transparent !important; }
.td-widget-cab h3 { font-family: var(--font) !important; font-size: 13.5px !important; font-weight: 650 !important; letter-spacing: -0.005em !important; text-transform: none !important; color: var(--text) !important; }
.td-widget-cab h3 i { font-style: normal; margin-left: 6px; padding: 2px 8px; font-size: 11px; color: #fff; background: #0e0e10; }
.td-widget-acc button { color: var(--text-soft) !important; }

/* ── IT Stock, Telefonía, MiFi: listas y tarjetas ─────────────────────── */
.tn-activo .ux-card, .tn-activo .mf-card2, .tn-activo .tel-card, .tn-activo .it-card {
  background: var(--surface); box-shadow: var(--wn-sombra, 0 12px 32px rgba(20,20,26,.06)) !important;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s;
}
.tn-activo .ux-card:hover, .tn-activo .mf-card2:hover, .tn-activo .tel-card:hover, .tn-activo .it-card:hover {
  transform: translateY(-2px); box-shadow: var(--wn-sombra-alta, 0 18px 40px rgba(20,20,26,.11)) !important;
}
/* Las cifras de cada tarjeta (código, PIN, número de línea), con más peso. */
.tn-activo .tel-card .tel-numero, .tn-activo .ux-card-tit { letter-spacing: -0.02em; }
/* La barra de búsqueda y filtros, como en el dashboard. */
.tn-activo .ux-barra, .tn-activo .tel-barra { background: var(--surface); box-shadow: var(--wn-sombra, 0 12px 32px rgba(20,20,26,.06)) !important; }
/* Los chips de cifras de la cabecera de siempre: más grandes y legibles. */
.tn-activo .ux-chip b, .tn-activo .tel-stat b, .tn-activo .it-chip b { font-size: 15px; font-weight: 700; }

/* ── Tareas de IT ────────────────────────────────────────────────────── */
#page-tecnologia-tareas #tec-tareas > * { box-shadow: var(--wn-sombra, 0 12px 32px rgba(20,20,26,.06)); }
.tn-nada { display: grid; place-items: center; height: 120px; font-size: 13px; color: var(--dn-oscuro-suave); }
/* El elemento elegido del menú de la izquierda, en la pastilla negra. */
.tn-activo .tt-lados .activo, .tn-activo .tt-lados .activa, .tn-activo .tt-lados [aria-current="true"] { background: #0e0e10 !important; color: #fff !important; }
.tn-activo .tt-lados .activo *, .tn-activo .tt-lados .activa * { color: #fff !important; }

@media (max-width: 1100px) { .tn-vivas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .tn-hero { grid-template-columns: 1fr; } .tn-cifra b { font-size: 48px; } }
@media (max-width: 640px) { .tn-vivas { grid-template-columns: 1fr; } }

/* ── Las filas de filtros de arriba, como el segmentado del dashboard ──
   (estado, familia y los atajos del resumen en IT Stock; las mismas piezas
   en Telefonía y MiFi). Siguen siendo los mismos botones, con lo mismo. */
.tn-activo .it-chips, .tn-activo .it-familias {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 0 8px 12px 0;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--wn-sombra, 0 12px 32px rgba(20,20,26,.06));
}
.tn-activo .it-chip, .tn-activo .it-fam {
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 7px 14px !important; font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.tn-activo .it-chip:hover, .tn-activo .it-fam:hover { color: var(--text); background: var(--surface-2) !important; }
.tn-activo .it-chip.activo, .tn-activo .it-fam.activa { background: #0e0e10 !important; color: #fff !important; }
.tn-activo .it-chip.activo *, .tn-activo .it-fam.activa * { color: #fff !important; background: transparent !important; }
.tn-activo .it-chip.activo i, .tn-activo .it-fam.activa i { background: rgba(255,255,255,.16) !important; border-color: transparent !important; }
:root[data-tema="oscuro"] .tn-activo .it-chip.activo, :root[data-tema="oscuro"] .tn-activo .it-fam.activa { background: var(--text) !important; color: var(--bg) !important; }
:root[data-tema="oscuro"] .tn-activo .it-chip.activo *, :root[data-tema="oscuro"] .tn-activo .it-fam.activa * { color: var(--bg) !important; }
/* El resumen de debajo (15 disponibles, 61 en uso…): una leyenda limpia. */
.tn-activo .it-res { background: transparent !important; border: 0 !important; padding: 4px 10px 4px 0 !important; font-size: 12.5px; color: var(--text-2); }
.tn-activo .it-res b, .tn-activo .it-res strong { font-size: 14px; color: var(--text); }
/* Las pestañas (Dispositivos, En proyectos…): subrayado en tinta, no en rojo. */
.tn-activo .it-tab { font-weight: 600; }
.tn-activo .it-tab.active { color: var(--text) !important; box-shadow: inset 0 -2px 0 #0e0e10 !important; border-bottom-color: transparent !important; }
/* En Telefonía los filtros viven en una rejilla de cuatro columnas
   estrechas y se apilaban: la fila ocupa todo el ancho. */
.tn-activo .tel-stats { display: block !important; }
.tn-activo .tel-stats .it-chips { flex-wrap: wrap; }

/* ══ Tecnología › General como panel de control (18/10/2026) ═══════════
   Todo en tarjetas blancas con borde #E5E7EB; el rojo SOLO para lo urgente
   (fuera de plazo, baja sin recuperar, cuenta viva de alguien que se fue)
   y para los botones principales; el ámbar para el ahorro (pagado sin
   usar). Sin gráficos de adorno. Los widgets de siempre, plegados debajo. */
.tg {
  --tg-borde: #E5E7EB; --tg-tinta: #0F172A; --tg-tinta-2: #475569; --tg-suave: #F8FAFC;
  --tg-rojo: #DC2626; --tg-rojo-fondo: #FEF2F2; --tg-rojo-tinta: #B91C1C; --tg-rojo-borde: #FECACA;
  --tg-ambar-fondo: #FFFBEB; --tg-ambar-tinta: #B45309; --tg-ambar-borde: #FDE68A;
  display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px;
}
:root[data-tema="oscuro"] .tg {
  --tg-borde: var(--border); --tg-tinta: #F4F5F7; --tg-tinta-2: #A7B0BE; --tg-suave: rgba(255,255,255,.04);
  --tg-rojo-fondo: rgba(239,68,68,.12); --tg-rojo-tinta: #FCA5A5; --tg-rojo-borde: rgba(239,68,68,.3);
  --tg-ambar-fondo: rgba(245,158,11,.12); --tg-ambar-tinta: #FCD34D; --tg-ambar-borde: rgba(245,158,11,.3);
}
#page-tecnologia-dash.tg-activo:not(.tg-widgets) #tecdash { display: none; }
#page-tecnologia-dash.tg-activo:not(.tg-widgets) .page-actions .btn:first-child { display: none; } /* «Personalizar» es de los widgets */
.tg-plegar { align-self: center; padding: 8px 14px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--tg-tinta-2); background: transparent; border: 1px dashed var(--tg-borde); cursor: pointer; }
.tg-plegar:hover { color: var(--tg-tinta); border-color: var(--tg-tinta-2); }

/* 1 · Las cuatro cifras. */
.tg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tg-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; font: inherit; text-align: left; color: var(--tg-tinta); background: var(--surface); border: 1px solid var(--tg-borde); box-shadow: var(--wn-sombra, none); cursor: pointer; transition: border-color .15s, transform .15s; }
.tg-kpi:hover { border-color: var(--tg-tinta-2); transform: translateY(-1px); }
.tg-kpi-cab { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--tg-tinta-2); }
.tg-kpi-num { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.tg-kpi-num b { font-size: 40px; font-weight: 650; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.tg-kpi-num span { font-size: 18px; font-weight: 600; color: var(--tg-tinta-2); font-variant-numeric: tabular-nums; }
.tg-kpi-pie { font-size: 12.5px; line-height: 1.45; color: var(--tg-tinta-2); }
.tg-ico { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; color: var(--tg-tinta); background: var(--tg-suave); border: 1px solid var(--tg-borde); }

/* Las píldoras: rojo urgente, ámbar ahorro, gris dato. */
.tg-pill { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.tg-pill-urgente { color: var(--tg-rojo-tinta); background: var(--tg-rojo-fondo); border-color: var(--tg-rojo-borde); }
.tg-pill-aviso { color: var(--tg-ambar-tinta); background: var(--tg-ambar-fondo); border-color: var(--tg-ambar-borde); }
.tg-pill-gris { color: var(--tg-tinta-2); background: var(--tg-suave); border-color: var(--tg-borde); }
.tg-kpi .tg-pill { white-space: normal; }

/* 2 y 3 · Las cajas en dos columnas. */
.tg-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tg-caja { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; color: var(--tg-tinta); background: var(--surface); border: 1px solid var(--tg-borde); box-shadow: var(--wn-sombra, none); min-width: 0; }
.tg-caja-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tg-caja-cab h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.tg-caja-sub { margin: -6px 0 0; font-size: 12.5px; color: var(--tg-tinta-2); }
.tg-cuenta { min-width: 26px; padding: 2px 8px; font-size: 12px; font-weight: 700; text-align: center; color: var(--tg-tinta); background: var(--tg-suave); border: 1px solid var(--tg-borde); font-variant-numeric: tabular-nums; }
.tg-cuenta-urgente { color: #fff; background: var(--tg-rojo); border-color: var(--tg-rojo); }
.tg-sub { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--tg-borde); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tg-tinta-2); }
.tg-sub span { font-variant-numeric: tabular-nums; color: var(--tg-tinta); }
.tg-vacio { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--tg-suave); border: 1px dashed var(--tg-borde); }
.tg-vacio b { font-size: 14px; } .tg-vacio small { font-size: 12.5px; color: var(--tg-tinta-2); }
.tg-nada { font-size: 12.5px; color: var(--tg-tinta-2); }
.tg-mas { font-size: 12px; color: var(--tg-tinta-2); }
.tg-enlace { display: inline-flex; align-items: center; gap: 6px; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--tg-tinta); background: none; border: 0; cursor: pointer; }
.tg-enlace:hover { text-decoration: underline; }

/* Botones: el principal en rojo, el secundario en blanco con borde. */
.tg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; flex: 0 0 auto; transition: background .15s, border-color .15s; }
.tg-btn-primario { color: #fff; background: var(--blue); border: 1px solid var(--blue); }
.tg-btn-primario:hover { background: var(--blue-hover, #c81d33); }
.tg-btn-sec { color: var(--tg-tinta); background: var(--surface); border: 1px solid var(--tg-borde); }
.tg-btn-sec:hover { border-color: var(--tg-tinta-2); background: var(--tg-suave); }

/* Las salidas. */
.tg-salida { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--tg-borde); }
.tg-salida-tarde { border-color: var(--tg-rojo-borde); box-shadow: inset 3px 0 0 var(--tg-rojo); }
.tg-salida-cab { display: flex; align-items: center; gap: 10px; }
.tg-avatar { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--tg-tinta); background: var(--tg-suave); border: 1px solid var(--tg-borde); }
.tg-salida-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tg-salida-quien b { font-size: 14.5px; } .tg-salida-quien small { font-size: 12px; color: var(--tg-tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-prog { height: 6px; background: var(--tg-suave); border: 1px solid var(--tg-borde); }
.tg-prog i { display: block; height: 100%; width: var(--w); background: var(--tg-tinta); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.dn:not(.dn-listo) .tg-prog i { width: 0; }
.tg-prog-txt { font-size: 11.5px; color: var(--tg-tinta-2); font-variant-numeric: tabular-nums; }
.tg-salida-acc { display: flex; justify-content: flex-end; margin-top: 2px; }

/* Listas de tareas y de equipos. */
.tg-tareas, .tg-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tg-tarea, .tg-equipo { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--tg-borde); }
.tg-tareas .tg-tarea:first-child, .tg-lista > li:first-child { border-top: 0; }
.tg-tarea > div, .tg-equipo > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tg-tarea b, .tg-equipo b { font-size: 13px; font-weight: 600; color: var(--tg-tinta); }
.tg-equipo b em { font-style: normal; font-weight: 500; color: var(--tg-tinta-2); font-variant-numeric: tabular-nums; }
.tg-tarea small, .tg-equipo small { font-size: 12px; color: var(--tg-tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-tarea input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 auto; margin: 0; accent-color: var(--tg-tinta); cursor: pointer; }
.tg-tarea-auto { width: 17px; height: 17px; flex: 0 0 auto; border: 1.5px dashed var(--tg-borde); }
.tg-urgente b { color: var(--tg-rojo-tinta); }

/* Apuntar una tarea. */
.tg-nueva { display: flex; gap: 8px; }
.tg-nueva input { flex: 1; min-width: 0; height: 34px; padding: 0 12px; font: inherit; font-size: 13px; color: var(--tg-tinta); background: var(--tg-suave); border: 1px solid var(--tg-borde); outline: none; }
.tg-nueva input:focus { background: var(--surface); border-color: var(--tg-tinta-2); }
.tg-nueva .tg-btn { height: 34px; }

/* Las licencias de Microsoft 365. */
.tg-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tg-tabla th { padding: 6px 0; text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tg-tinta-2); border-bottom: 1px solid var(--tg-borde); }
.tg-tabla td { padding: 8px 0; border-bottom: 1px solid var(--tg-borde); }
.tg-tabla td:last-child { text-align: right; }
.tg-num { font-variant-numeric: tabular-nums; color: var(--tg-tinta-2); white-space: nowrap; padding-right: 10px !important; }

@media (max-width: 1200px) { .tg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .tg-dos { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tg-kpis { grid-template-columns: 1fr; } .tg-tarea, .tg-equipo { flex-wrap: wrap; } }

/* ══ El resto de Tecnología con el panel claro (18/10/2026) ════════════ */
/* «Para hacer»: una o dos cajas, solo si hay algo. */
.tg-hacer { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 16px; }
.tg-pagina .tg { margin-bottom: 18px; }
.tg-kpi[onclick=""] { cursor: default; }
.tg-kpi[onclick=""]:hover { transform: none; border-color: var(--tg-borde); }
@media (max-width: 900px) { .tg-hacer { grid-template-columns: 1fr; } }

/* El rojo solo para lo urgente: «en uso», «móvil» y el código del MiFi
   pasan a tinta; el rojo se queda en los botones principales y los avisos. */
.tg-pagina .it-card.banda-uso { border-left-color: var(--text) !important; }
.tg-pagina .it-card.banda-uso::before { background: var(--text) !important; }
.tg-pagina .it-estado.uso { color: var(--text) !important; background: var(--surface-2) !important; border-color: var(--border-med) !important; }
.tg-pagina .it-estado.uso::before, .tg-pagina .it-estado.uso i { background: var(--text) !important; }
.tg-pagina .tel-tipo.movil { color: var(--text-2) !important; background: var(--surface-2) !important; border-color: var(--border-med) !important; }
.tg-pagina .ux-pill.acento { color: var(--text) !important; background: var(--surface-2) !important; border-color: var(--border-med) !important; }

/* Licencias, Microsoft 365 y Correos: ya eran claras; mismas tarjetas,
   cifras en tinta (el color lo ponen las píldoras) y un solo botón rojo
   por pantalla. */
#page-licencias .ux-cifras, #page-m365 .ux-cifras { border-color: #E5E7EB; }
#page-m365 .ux-cifra b { color: var(--text) !important; }
#page-correos .co-card-acc .btn-primary { color: var(--text) !important; background: var(--surface) !important; border: 1px solid var(--border-med) !important; box-shadow: none !important; }
#page-correos .co-card-acc .btn-primary:hover { border-color: var(--text) !important; }
/* Los filtros de Licencias no tenían estilo (salían como botones del navegador): el segmentado de la casa. */
#page-licencias .lic-chips { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid #E5E7EB; box-shadow: var(--wn-sombra, none); }
#page-licencias .lic-chips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: transparent; border: 0; cursor: pointer; }
#page-licencias .lic-chips .chip:hover { color: var(--text); background: var(--surface-2); }
#page-licencias .lic-chips .chip b { font-size: 11px; padding: 1px 6px; background: var(--surface-2); color: var(--text-2); }
#page-licencias .lic-chips .chip.activo { color: #fff; background: #0e0e10; }
#page-licencias .lic-chips .chip.activo b { color: #fff; background: rgba(255,255,255,.16); }
:root[data-tema="oscuro"] #page-licencias .lic-chips .chip.activo { color: var(--bg); background: var(--text); }
.tg-pagina .it-res.uso i { background: var(--text) !important; } .tg-pagina .it-res.uso, .tg-pagina .it-res.uso b { color: var(--text) !important; }
.tg-pagina .it-chip.aviso i, .tg-pagina .it-chip.aviso b { color: #B45309 !important; }
/* Licencias: las cifras viejas se van, las dicen las cuatro de arriba. */
#page-licencias.tg-pagina #lic-cuerpo > .ux-cifras { display: none; }
/* Microsoft 365: sus cifras como las del resto de Tecnología; el número en
   tinta y el color solo donde hay algo que hacer (personas por traer). */
#page-m365 .mf-cifras { gap: 14px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
#page-m365 .mf-cifra { padding: 16px 18px !important; background: var(--surface) !important; border: 1px solid #E5E7EB !important; box-shadow: var(--wn-sombra, none) !important; }
:root[data-tema="oscuro"] #page-m365 .mf-cifra { border-color: var(--border) !important; }
#page-m365 .mf-cifra b { font-size: 36px !important; font-weight: 650 !important; letter-spacing: -0.04em; color: var(--text) !important; }
#page-m365 .mf-cifra.aviso b { color: #B45309 !important; }