:root{
  --azul:#2563EB; --azul-h:#1d4fc4; --navy:#0F2236; --muted:#5a6b7b;
  --linea:#e3ddd0; --linea-suave:#f0ece3; --bg:#f5f3ee; --card:#ffffff;
  --error:#b00020; --ok:#0f6e56;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; color:var(--navy); background:var(--bg); line-height:1.5;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
h1{font-size:20px;margin:.2rem 0 0}
h2{font-size:16px;margin:0 0 14px}
.muted{color:var(--muted);font-size:13px}

input{
  width:100%; padding:9px 11px; border:1px solid var(--linea); border-radius:8px;
  font-size:14px; font-family:inherit; background:#fff; color:var(--navy);
}
input:focus{outline:2px solid var(--azul); outline-offset:1px; border-color:var(--azul)}
label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin:10px 0 4px}
button{font-family:inherit; cursor:pointer}

.btn-primary{
  background:var(--azul); color:#fff; border:0; border-radius:8px;
  padding:11px 18px; font-size:14px; font-weight:600; margin-top:14px;
}
.btn-primary:hover{background:var(--azul-h)}
.btn-ghost{
  background:transparent; border:1px solid var(--linea); border-radius:8px;
  padding:7px 12px; font-size:13px; color:var(--navy);
}
.btn-ghost:hover{background:var(--bg)}
.link-danger{background:none; border:0; color:var(--error); font-size:13px; text-decoration:underline; padding:0}

/* ---- Login ---- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.login-card{
  background:var(--card); border:1px solid var(--linea); border-radius:14px;
  padding:28px; width:100%; max-width:380px;
}
.login-card .logo{margin-bottom:14px}
.login-card .btn-primary{width:100%}

/* ---- Topbar ---- */
.topbar{display:flex; align-items:center; gap:20px; background:#fff; padding:14px 24px; border-bottom:1px solid var(--linea)}
.topbar .logo img{display:block}
.tabs{flex:1; display:flex; gap:16px}
.tab{background:transparent; border:0; cursor:pointer; color:var(--muted); font-weight:600; font-size:14px; padding:6px 2px; border-bottom:2px solid transparent}
.tab.active{color:var(--navy); border-bottom:2px solid var(--azul)}
.user{display:flex; align-items:center; gap:12px}
.user .muted{color:var(--muted)}

/* ---- Contenido ---- */
.content{max-width:1000px; margin:0 auto; padding:24px}
.card{
  background:var(--card); border:1px solid var(--linea); border-radius:12px;
  padding:20px; margin-bottom:18px;
}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid .col-2{grid-column:1 / -1}
.grid .actions{grid-column:1 / -1; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
@media(max-width:640px){.grid{grid-template-columns:1fr}}

/* ---- Tabla ---- */
.tabla{width:100%; border-collapse:collapse; font-size:14px}
.tabla th{
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--muted); border-bottom:1px solid var(--linea); padding:8px 6px;
}
.tabla td{padding:9px 6px; border-bottom:1px solid var(--linea-suave)}
.tabla .td-fin{text-align:right}

/* ---- Mensajes ---- */
.msg{font-size:13px; margin:8px 0 0}
.msg.error{color:var(--error)}
.msg.ok{color:var(--ok)}

/* ---- Catálogo: select, cabecera de tarjeta, badges ---- */
select{
  width:100%; padding:9px 11px; border:1px solid var(--linea); border-radius:8px;
  font-size:14px; font-family:inherit; background:#fff; color:var(--navy);
}
select:focus{outline:2px solid var(--azul); outline-offset:1px; border-color:var(--azul)}

.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.card-head h2{margin:0}

.tabla .num{text-align:right}
.muted-cell{color:var(--muted)}

.badge{display:inline-block; font-size:12px; font-weight:600; padding:2px 9px; border-radius:999px; background:#eef1f4; color:#41526b}
.badge-modulo{background:#e7efff; color:#1d4fc4}
.badge-licencia{background:#eaf7f0; color:#0f6e56}
.badge-mantenimiento{background:#fbeede; color:#9a5b12}

/* ---- Contratos ---- */
.block-label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin:16px 0 8px}
.actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px}
.modlist{border:1px solid var(--linea-suave); border-radius:8px; padding:4px 14px; max-height:300px; overflow:auto}
.modrow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--linea-suave)}
.modrow:last-child{border-bottom:0}
.modrow label{display:flex; align-items:center; gap:8px; margin:0; font-size:14px; font-weight:500; color:var(--navy)}
.modcost-wrap{display:flex; align-items:center; gap:4px; font-size:13px; color:var(--muted); white-space:nowrap}
.modcost{width:110px}
.inline-field{display:flex; flex-direction:column}
.inline-field input{width:150px}
.inline-field span{margin-top:4px; font-size:12px}

/* ---- Portal del cliente ---- */
.datos{display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; margin:0}
.datos > div{display:flex; flex-direction:column}
.datos dt{font-size:12px; font-weight:600; color:var(--muted)}
.datos dd{margin:0; font-size:14px}
@media(max-width:640px){.datos{grid-template-columns:1fr}}
.bloque-app{margin-bottom:18px}
.bloque-app h3{font-size:15px; margin:0 0 8px}
.tabla tfoot td{padding-top:10px; border-top:1px solid var(--linea); border-bottom:0}
.servicios{margin:0; padding-left:18px; font-size:14px}
.servicios li{padding:3px 0}

/* ---- Presupuesto: panel de totales ---- */
.totales{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px}
@media(max-width:640px){.totales{grid-template-columns:1fr}}
.tot-col{border:1px solid var(--linea); border-radius:10px; padding:14px 16px; background:var(--linea-suave)}
.tot-titulo{font-size:12px; font-weight:700; color:var(--azul); text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px}
.tot-linea{display:flex; justify-content:space-between; font-size:14px; padding:3px 0; color:var(--muted)}
.tot-linea span:last-child{font-variant-numeric:tabular-nums; color:var(--navy)}
.tot-total{border-top:1px solid var(--linea); margin-top:6px; padding-top:8px; font-weight:700; font-size:16px}
.tot-total span{color:var(--navy) !important}
.link-accion{background:transparent; border:0; color:var(--azul); font-weight:600; cursor:pointer; padding:0; font-size:14px}
.link-accion:hover{text-decoration:underline}

/* ---- Software y servicios: fichas ---- */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; margin:10px 0 4px}
.cat-card{position:relative; border:1px solid var(--linea); border-radius:10px; padding:14px 16px; background:#fff}
.cat-card.futuro{opacity:.8; border-style:dashed}
.cat-nombre{font-weight:600; font-size:14px; color:var(--navy)}
.cat-precio{font-size:22px; font-weight:700; color:var(--navy); margin-top:8px}
.cat-unidad{font-size:12px; color:var(--muted); margin-top:2px}
.cat-badge{position:absolute; top:10px; right:10px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; background:#fbeede; color:#9a5b12; padding:2px 8px; border-radius:999px}
.sub-titulo{font-size:12px; font-weight:700; color:var(--azul); text-transform:uppercase; letter-spacing:.4px; margin:18px 0 2px}
.tag-futuro{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; background:#fbeede; color:#9a5b12; padding:1px 6px; border-radius:999px; margin-left:4px}

/* ---- Presupuesto: maquetacion fina (mise en place) ---- */
.presu-layout{display:grid; grid-template-columns:1fr 320px; gap:30px; align-items:start}
@media(max-width:900px){.presu-layout{grid-template-columns:1fr}}

.eyebrow{font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--muted); margin:24px 0 12px}
.presu-main > .eyebrow:first-child{margin-top:0}

.campos-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.campos-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px}
@media(max-width:560px){.campos-2,.campos-3{grid-template-columns:1fr}}
.campo label{margin:0 0 6px}
.campo .hint{display:block; font-size:11px; color:var(--muted); margin-top:5px}

.mod-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media(max-width:620px){.mod-grid{grid-template-columns:1fr}}
.mod-item{display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--linea); border-radius:9px; background:#fff; transition:border-color .12s ease, background .12s ease}
.mod-item:hover{border-color:#c2d0e2}
.mod-item:has(.pchk:checked){border-color:var(--azul); background:#f4f8ff}
.mod-pick{display:flex; align-items:center; gap:9px; flex:1 1 auto; min-width:0; margin:0; cursor:pointer}
.mod-pick .pchk{width:auto; margin:0; flex:0 0 auto; accent-color:var(--azul)}
.mod-nombre{font-size:13px; font-weight:500; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mod-precio{flex:0 0 auto; display:flex; align-items:center; gap:4px; font-size:12px; color:var(--muted)}
.mod-precio input{width:80px; padding:5px 8px; font-size:13px; text-align:right; border:1px solid var(--linea); border-radius:7px}

.presu-resumen{position:sticky; top:18px; border:1px solid var(--linea); border-radius:12px; padding:18px 18px 20px; background:var(--linea-suave)}
.res-bloque + .res-bloque{margin-top:16px; padding-top:14px; border-top:1px solid var(--linea)}
.res-eyebrow{font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--azul); margin-bottom:8px}
.res-linea{display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--muted); padding:3px 0}
.res-linea span:last-child{color:var(--navy); font-variant-numeric:tabular-nums; white-space:nowrap}
.res-total{display:flex; justify-content:space-between; gap:10px; margin-top:8px; padding-top:10px; border-top:1px solid var(--linea); font-weight:700; font-size:17px; color:var(--navy)}
.res-total span:last-child{font-variant-numeric:tabular-nums}

/* Desplegable "Mi aplicación" (estilo presupuesto) */
.acc{border:1px solid var(--linea); border-radius:12px; background:#fff; overflow:hidden}
.acc + .acc{margin-top:12px}
.acc > summary{list-style:none; cursor:pointer; padding:14px 16px; font-weight:700; color:var(--navy)}
.acc > summary::-webkit-details-marker{display:none}
.acc-row{display:flex; align-items:center; gap:12px}
.acc-name{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acc-total{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--navy)}
.acc-chev{flex:0 0 auto; width:8px; height:8px; margin-left:2px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(-45deg); transition:transform .2s}
.acc[open] .acc-chev{transform:rotate(45deg)}
.acc > summary:hover{background:var(--linea-suave)}
.acc-body{padding:2px 16px 16px}
.acc-body .res-bloque{margin-top:0; padding-top:0; border-top:0}
.btn-block{width:100%; margin-top:18px}
.presu-resumen .msg{display:block; margin-top:10px; text-align:center}

/* --- Precios editables (Software y servicios) --- */
.precio-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin:10px 0 4px}
.precio-card{border:1px solid var(--linea); border-radius:10px; padding:14px 16px; background:#fff}
.precio-nombre{font-weight:600; font-size:14px; color:var(--navy); margin-bottom:6px}
.precio-nombre-edit{font-weight:600; font-size:14px; color:var(--navy); margin-bottom:8px; padding:6px 9px}
.precio-campo{display:block; margin:8px 0 0}
.precio-campo span{display:block; font-size:11px; color:var(--muted); margin:0 0 4px}
.precio-campo input{padding:7px 9px}

/* --- Licencias editables en el presupuesto --- */
.campo.lic .lic-row{display:flex; align-items:center; gap:6px}
.campo.lic .lic-row input{width:100%; padding:8px 9px}
.campo.lic .lic-row input[id$="_p"]{max-width:84px}
.campo.lic .lic-x,.campo.lic .lic-eur{color:var(--muted); font-size:13px}
.precio-check{display:flex; align-items:center; gap:7px; margin-top:10px; font-size:12px; color:var(--navy)}
.precio-check input{width:auto; margin:0}
.precio-check span{font-weight:600}

/* --- Campos de precio: azul al pulsar/enfocar --- */
.precio-input:focus{
  background:#e8f0ff; border-color:var(--azul);
  outline:2px solid var(--azul); outline-offset:1px;
}

/* --- Mantenimiento: selección múltiple --- */
.mant-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media(max-width:620px){.mant-grid{grid-template-columns:1fr}}
.mant-item{display:flex; align-items:center; gap:9px; padding:8px 12px; border:1px solid var(--linea); border-radius:9px; background:#fff; cursor:pointer; transition:border-color .12s ease, background .12s ease}
.mant-item:hover{border-color:#c2d0e2}
.mant-item:has(.mchk:checked){border-color:var(--azul); background:#f4f8ff}
.mant-item.bloqueado{opacity:.55; cursor:not-allowed}
.mant-item .mchk{width:auto; margin:0; flex:0 0 auto; accent-color:var(--azul)}
.mant-nombre{font-size:13px; font-weight:600; color:var(--navy)}
.mant-aviso{margin-left:auto; font-size:11px; color:var(--muted)}

/* --- Portal cliente: presupuestos pendientes --- */
.presu-card{border:1px solid var(--linea); border-radius:12px; padding:16px 18px; margin-bottom:14px; background:#fff}
.presu-card + .presu-card{margin-top:0}
.presu-cab{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.presu-cab h3{margin:0; font-size:16px; color:var(--navy)}
.presu-estado{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; background:#fbeede; color:#9a5b12; padding:3px 9px; border-radius:999px}
.presu-reloj{font-size:13px; color:var(--muted); margin-bottom:10px}
.presu-reloj strong{color:var(--azul); font-variant-numeric:tabular-nums}
.presu-desglose{border:1px solid var(--linea); border-radius:12px; padding:14px 16px; background:var(--linea-suave); margin:4px 0 12px}
.pago-verif{margin-top:6px; font-size:13px; line-height:1.7}
.up-msg{margin-top:8px}
.seg-layout{display:flex; gap:18px; align-items:flex-start}
.seg-lista{flex:0 0 240px; display:flex; flex-direction:column; gap:8px}
.seg-item{text-align:left; border:1px solid var(--linea); border-radius:10px; padding:10px 12px; background:#fff; cursor:pointer; display:flex; flex-direction:column; gap:2px; font:inherit}
.seg-item:hover{border-color:#cdd6e0}
.seg-item.active{border-color:var(--azul); background:var(--linea-suave)}
.seg-item-nom{color:var(--navy); font-weight:600; font-size:14px}
.seg-item-sub{color:var(--muted); font-size:12px}
.seg-detalle{flex:1; min-width:0}
.seg-detalle-cab h3{margin:0 0 10px; color:var(--navy)}
.seg-meta{font-size:12.5px; color:var(--muted); line-height:1.6; padding:4px 0 6px}
@media (max-width:720px){ .seg-layout{flex-direction:column} .seg-lista{flex:1 1 auto; width:100%} }
.presu-card .tabla{margin-bottom:12px}
.presu-firma{margin-top:14px; padding-top:14px; border-top:1px solid var(--linea)}
.ac-check{display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--navy); font-weight:500; margin:10px 0 12px}
.ac-check input{width:auto; margin:2px 0 0}
.presu-estado.ok{background:#eaf7f0; color:#0f6e56}
.presu-forma{font-size:13px; color:var(--navy); background:#f4f8ff; border:1px solid #dbe7ff; border-radius:9px; padding:10px 12px; margin-bottom:12px}
.presu-forma-imp{color:var(--muted); margin-top:4px}
.mant-usuarios{max-width:320px; margin-top:10px}
.presu-acciones{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.presu-acciones .btn-ghost,.presu-acciones .btn-primary{flex:0 0 auto}
.badge.ok{background:#eaf7f0; color:#0f6e56}
.badge.pend{background:#fbeede; color:#9a5b12}
.banner{padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px; font-weight:500}
.banner.ok{background:#eaf7f0; color:#0f6e56; border:1px solid #bfe6d4}
.banner.warn{background:#fbeede; color:#9a5b12; border:1px solid #f0d9b5}
.presu-estado.pago{background:#e7efff; color:#1d4fc4}

/* Modal de justificante en Seguimiento */
.seg-modal-ov{position:fixed; inset:0; background:rgba(15,34,54,.55); display:flex; align-items:center; justify-content:center; z-index:1000; padding:24px}
.seg-modal{background:#fff; border-radius:12px; width:min(900px,95vw); height:min(85vh,900px); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.3)}
.seg-modal-cab{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #e6e9ee}
.seg-modal-x{background:transparent; border:0; color:var(--muted); font-weight:600; cursor:pointer; font-size:15px}
.seg-modal-x:hover{color:var(--navy)}
.seg-modal-cuerpo{flex:1; background:#f1f1f1}
.seg-modal-cuerpo iframe{width:100%; height:100%; border:0; display:block}
.seg-modal-pie{padding:10px 18px; border-top:1px solid #e6e9ee; text-align:right}

/* Cabecera del detalle de seguimiento con acción de eliminar */
.seg-detalle-cab{display:flex; align-items:center; justify-content:space-between; gap:12px}
.seg-detalle-cab .link-danger{cursor:pointer; font-weight:600}
/* Modal de contraseña de administrador */
.seg-modal-pass{width:min(420px,95vw); height:auto}
.seg-pass-cuerpo{padding:18px}
.seg-pass-cuerpo .muted{margin:0 0 8px}
.seg-pass-cuerpo input{width:100%; box-sizing:border-box}
.seg-pass-cuerpo .msg{margin:10px 0 0}
.seg-modal-pass .seg-modal-pie{display:flex; align-items:center; justify-content:flex-end; gap:14px}

/* Acciones de descarga dentro de cada bloque de seguimiento */
.seg-acciones{margin-top:10px; padding-top:8px; border-top:1px solid #eef1f4; font-size:14px}
.seg-acciones .link-accion{cursor:pointer}

/* Soporte: formulario de incidencias */
textarea{
  width:100%; padding:9px 11px; border:1px solid var(--linea); border-radius:8px;
  font-size:14px; font-family:inherit; background:#fff; color:var(--navy); box-sizing:border-box; resize:vertical;
}
textarea:focus{outline:2px solid var(--azul); outline-offset:1px; border-color:var(--azul)}
.soporte-lista{margin-top:6px}

/* Soporte (back-office): tarjetas de incidencia */
.tk-card{border:1px solid var(--linea); border-left:4px solid var(--linea); border-radius:10px; padding:14px 16px; margin-bottom:12px; background:#fff}
.tk-card.prio-alta{border-left-color:var(--error)}
.tk-card.prio-normal{border-left-color:var(--azul)}
.tk-card.prio-baja{border-left-color:#9aa7b3}
.tk-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.tk-empresa{font-weight:700; color:var(--navy)}
.tk-asunto{color:var(--navy); margin-top:2px}
.tk-meta{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:10px; font-size:13px; color:var(--muted)}
.tk-meta strong{color:var(--navy); font-weight:600}
.tk-desc{margin-top:10px; padding-top:10px; border-top:1px solid #eef1f4; font-size:14px; color:var(--navy); white-space:pre-wrap}
.tk-estado{padding:6px 9px; border:1px solid var(--linea); border-radius:8px; font-size:13px; background:#fff; color:var(--navy)}
.tk-prio{font-weight:600}
.tk-prio-alta{color:var(--error)}
.tk-prio-normal{color:var(--azul)}
.tk-prio-baja{color:#6b7785}

/* Campanita de notificaciones (portal cliente) */
.notif-wrap{position:relative; display:inline-block}
.notif-btn{position:relative; background:transparent; border:0; cursor:pointer; font-size:20px; line-height:1; padding:6px}
.notif-badge{position:absolute; top:0; right:0; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:var(--error); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center}
.notif-panel{position:absolute; right:0; top:42px; width:340px; max-width:88vw; max-height:60vh; overflow:auto; background:#fff; border:1px solid var(--linea); border-radius:12px; box-shadow:0 14px 40px rgba(15,34,54,.18); z-index:1000}
.notif-cab{padding:12px 16px; font-weight:700; color:var(--navy); border-bottom:1px solid #eef1f4}
.notif-item{padding:12px 16px; border-bottom:1px solid #f1f3f6}
.notif-item.no-visto{background:#f3f8ff}
.notif-item-cab{display:flex; align-items:center; justify-content:space-between; gap:8px}
.notif-asunto{font-weight:600; color:var(--navy)}
.notif-coment{margin-top:6px; font-size:13.5px; color:var(--navy); white-space:pre-wrap}
.notif-fecha{margin-top:6px; font-size:11.5px; color:var(--muted)}
.notif-vacio{padding:16px}
.badge.ok{background:#eaf7f0; color:#0f6e56}

/* Soporte admin: respuesta y tarjeta resuelta */
.tk-respuesta{margin-top:12px; padding-top:10px; border-top:1px solid #eef1f4}
.tk-respuesta label{margin:0 0 4px}
.tk-respuesta-pie{display:flex; align-items:center; gap:12px; margin-top:8px}
.tk-card.tk-resuelta{border-left-color:#0f6e56; background:#f3faf6}
.tk-card.tk-resuelta .tk-empresa{color:#0f6e56}

/* Cabecera de Soporte + activar avisos */
.soporte-cab{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.soporte-avisos{display:flex; align-items:center; gap:10px}
/* Modo "solo soporte" (app del móvil): se oculta la navegación del back-office */
body.modo-soporte #vistaApp .tabs{display:none}

/* "Mis incidencias" desplegable en el portal del cliente */
.tk-toggle{display:flex; align-items:center; gap:8px; width:100%; margin-top:18px; padding:10px 0; background:none; border:0; border-top:1px solid #eef1f4; color:var(--navy); font-weight:700; font-size:14px; cursor:pointer; text-align:left}
.tk-toggle:hover{color:var(--azul)}
.tk-toggle-ico{color:var(--azul); font-size:12px}
#tkPanel{margin-top:6px}

/* Cronómetro de atención en las tarjetas de Soporte */
.tk-tiempo{margin-top:10px; font-size:13.5px; color:var(--navy); background:#f3f6fb; border-radius:8px; padding:6px 10px; display:inline-block}
.tk-tiempo-live{background:#fff4e5; color:#9a5b12}
.tk-tiempo .tk-cron{font-variant-numeric:tabular-nums}

/* Sub-línea bajo una res-linea (desgloses) */
.res-sub{font-size:12px; margin:-4px 0 6px}

/* --- Vista global de facturas (back-office) --- */
.fac-filtros{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:12px 0 14px}
.fac-filtros select, .fac-filtros input[type=search]{
  padding:8px 10px; border:1px solid var(--linea); border-radius:8px;
  font-size:14px; background:#fff; color:var(--navy)
}
.fac-filtros input[type=search]{flex:1 1 220px; min-width:180px}
.fac-totales{display:flex; gap:18px; flex-wrap:wrap; align-items:baseline; margin:6px 0 12px; font-size:14px}
.tabla-scroll{overflow-x:auto}