:root{
 --primary:#094963;--primary-dark:#06323f;--primary-light:#0e6283;
 --accent:#A19814;--accent-dark:#847c10;--accent-light:#c3ba33;
 --bg:#eef2f6;--surface:#fff;--text:#10303b;--muted:#5d7783;--border:#dbe4ea;
 --danger:#c0392b;--success:#2e7d32;--radius:14px;--shadow:0 10px 30px rgba(9,73,99,.10);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--primary)}
.icon{width:20px;height:20px;vertical-align:middle;stroke:currentColor;fill:none}
.topbar{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;box-shadow:0 6px 24px rgba(9,73,99,.25);position:sticky;top:0;z-index:20}
.brandwrap{display:flex;align-items:center;gap:14px;min-width:0}
.logo{height:44px;width:auto;display:block}
.brand{font-weight:800;font-size:19px;letter-spacing:.3px;line-height:1.1;white-space:nowrap}
.brand small{display:block;font-weight:500;font-size:11px;opacity:.72;letter-spacing:2.4px;text-transform:uppercase;margin-top:2px}
.userchip{display:flex;align-items:center;gap:12px;font-size:13.5px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:6px 8px 6px 15px;border-radius:999px}
.userchip .who{opacity:.92}.userchip .who b{font-weight:700}
.headright{display:flex;align-items:center;gap:12px}
.pending{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:7px 12px;border-radius:999px;white-space:nowrap}
.pending b{font-weight:800}
.pending-on{background:rgba(161,152,20,.38);border-color:rgba(195,186,51,.75)}
.pending .icon{opacity:.9}
.wrap{max-width:1160px;margin:26px auto 64px;padding:0 20px}
.nav{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 22px}
.nav a.navicon{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--primary);font-weight:600;text-decoration:none;transition:.15s;box-shadow:0 1px 3px rgba(9,73,99,.05)}
.nav a.navicon .lbl{font-size:14px}
.nav a.navicon:hover{border-color:var(--primary-light);transform:translateY(-1px);box-shadow:var(--shadow)}
.nav a.navicon.active{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border-color:transparent}
.nav.subnav a.navicon{background:transparent;border-color:transparent;color:var(--muted);padding:9px 13px;box-shadow:none}
.nav.subnav a.navicon.active,.nav.subnav a.navicon:hover{background:#fff;color:var(--primary);border-color:var(--border)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.page-head h1{margin:0}
.page-head .sub{color:var(--muted);font-size:14px;margin-top:3px}
h1{font-size:25px;margin:0 0 8px;color:var(--primary);font-weight:800}
h2{font-size:17px;margin:26px 0 12px;color:var(--primary);display:flex;align-items:center;gap:8px;font-weight:700}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;border:0;border-radius:11px;padding:12px 20px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;box-shadow:0 5px 16px rgba(161,152,20,.32);transition:.15s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-sec{background:#fff;color:var(--primary);border:1px solid var(--border);box-shadow:none}
.btn-sec:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-danger{background:linear-gradient(135deg,#d64541,var(--danger));box-shadow:0 5px 16px rgba(192,57,43,.3)}
.btn-sm{padding:8px 14px;font-size:13.5px;border-radius:9px}
.btn:disabled{opacity:.62;cursor:progress;transform:none;filter:none}
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--primary);cursor:pointer;text-decoration:none;transition:.14s;vertical-align:middle}
.ibtn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.ibtn-del{color:var(--danger);border-color:#f0d2cd}
.ibtn-del:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
/* FASE 70: boton desactivado (3 botones fijos del listado: el de Borrar sin permiso, o el de
   Ver/Editar en tipos de fichero que el visor no abre). Va despues de .ibtn-del para pisarle el rojo. */
.ibtn-off{color:#98a0ad;background:#f5f6f8;border-color:var(--border);cursor:not-allowed}
.ibtn-off:hover{background:#f5f6f8;color:#98a0ad;border-color:var(--border)}
/* FASE 83/84: boton «Ver», el del visor de la plataforma (un resaltador). Va con otro color para que
   se distinga del boton Editar, que sigue abriendo Collabora.
   FASE 94: este color lo lleva SOLO el boton Ver del listado de la busqueda por palabras (el que abre
   el visor propio con las palabras resaltadas); en el resto de listados el boton Ver es el normal. */
.ibtn-hl{color:#a3600a;background:#fffaf0;border-color:#f0dcb8}
.ibtn-hl:hover{background:#a3600a;color:#fff;border-color:#a3600a}
/* FASE 84: si el visor no puede abrir ese documento, el boton sale apagado como los demas. Va despues
   del resaltador para pisarle el color. */
.ibtn-hl.ibtn-off,.ibtn-hl.ibtn-off:hover{color:#98a0ad;background:#f5f6f8;border-color:var(--border);cursor:not-allowed}
/* FASE 71: permisos bloqueados (sin Ver no se puede Editar ni Borrar) y selectores grises. */
table.list select.gsel:disabled{background:#f1f2f5;color:#9aa2ae;border-color:var(--border);cursor:not-allowed}
fieldset.permbox label:has(input:disabled){opacity:.55;cursor:not-allowed}
/* FASE 75: buscador con dos modos (IA / por palabras) y desplegable de palabras. */
.modebar{display:flex;gap:8px;margin:4px 0 14px}
.modebtn{border:1px solid var(--border);background:#fff;color:var(--primary);border-radius:999px;padding:7px 16px;font:inherit;font-size:.95rem;cursor:pointer;transition:.14s}
.modebtn:hover{background:#f2f6fc}
.modebtn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.searchbox textarea{flex:1 1 auto;min-height:76px;resize:vertical;padding:12px 14px;border:1px solid var(--border);border-radius:12px;font:inherit;line-height:1.45;box-sizing:border-box}
.searchbox textarea:focus{outline:2px solid var(--primary);outline-offset:-1px}
.acwrap{position:relative}
.aclist{position:absolute;top:calc(100% + 6px);left:0;right:130px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 34px rgba(15,23,42,.16);z-index:30;max-height:270px;overflow:auto;padding:4px}
.aclist button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px;font:inherit;cursor:pointer}
.aclist button:hover,.aclist button.sel{background:#eef3fb}
.aclist button.sel{outline:1px solid var(--primary)}
.ibtn-form{display:inline-block;margin:0 2px}
td .ibtn,td .ibtn-form{margin-right:4px}
.rowacts{display:inline-flex;align-items:center;gap:4px;flex-wrap:nowrap;white-space:nowrap}
.rowacts .ibtn,.rowacts .ibtn-form{margin-right:0}
td.acc,th.acc{white-space:nowrap;width:1%}
table.list th.ctr,table.list td.ctr{text-align:center}
/* FASE 109: en los listados los botones de accion van pegados al BORDE DERECHO de la tabla. Antes
   quedaban a 14-26 px del borde (el margen derecho del ultimo boton —y el de su formulario, que se
   suman— y lo que sobraba al final de la celda) y ese hueco, a la derecha de los botones, es lo que se
   veia. Aqui la celda empuja su contenido a la derecha y al ultimo boton (y al boton de dentro de su
   formulario) se le quita el margen derecho. El hueco ENTRE botones no se toca: lo pone `.rowacts` con
   su `gap`, o el margen del boton que va delante. Va DESPUES de la regla de `.ctr` a proposito: la
   columna de acciones del resumen de /super lleva `acc ctr` y asi tambien queda a la derecha. */
table.list th.acc,table.list td.acc{text-align:right}
table.list td.acc > :last-child,table.list td.acc > :last-child .ibtn{margin-right:0}
.topbar .ibtn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);color:#fff;width:36px;height:36px}
.topbar .ibtn:hover{background:rgba(255,255,255,.28)}
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:0 1px 3px rgba(9,73,99,.05)}
table.list{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
table.list thead th,table.list:not(.kv) tbody tr:first-child th{background:var(--primary);color:#fff;text-align:left;font-weight:700;padding:8px 12px;border-bottom:1px solid var(--primary-dark);font-size:12px;letter-spacing:.4px;text-transform:uppercase}
table.list thead th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
table.list thead th.sortable:hover{background:var(--primary-light)}
table.list thead th .arrow{opacity:.45;margin-left:6px;font-size:11px}
table.list thead th.sort-asc .arrow,table.list thead th.sort-desc .arrow{opacity:1}
table.list thead tr.filterrow th{background:#fff;padding:5px 7px;border-bottom:1px solid var(--border);text-transform:none;letter-spacing:0}
.tfilter{width:100%;min-width:70px;padding:6px 9px;border:1px solid var(--border);border-radius:8px;font-size:12.5px;font-weight:400;color:var(--text);text-transform:none;letter-spacing:0}
.tfilter:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(161,152,20,.16)}
.numfilter{display:flex;gap:4px;align-items:center;justify-content:center}
.numfilter .nfop,.numfilter .nfilter{text-align:center}
table.list thead tr.filterrow th.ctr .tfilter,table.list thead tr.filterrow th.ctr .cfilter,table.list thead tr.filterrow th.ctr .mfbtn{text-align:center}
.numfilter .nfop{width:46px;padding:6px 4px;border:1px solid var(--border);border-radius:8px;font-size:12.5px;background:#fff;color:var(--text);font-weight:400}
.numfilter .nfilter{width:62px;min-width:0;padding:6px 7px;border:1px solid var(--border);border-radius:8px;font-size:12.5px;font-weight:400;color:var(--text)}
.numfilter .nfop:focus,.numfilter .nfilter:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(161,152,20,.16)}
.cfilter{width:100%;min-width:84px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;font-size:12.5px;font-weight:400;background:#fff;color:var(--text);text-transform:none;letter-spacing:0}
.cfilter:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(161,152,20,.16)}
.mfilter{display:block;min-width:84px}
.mfbtn{width:100%;min-width:84px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;font-size:12.5px;font-weight:400;background:#fff;color:var(--text);text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:inherit;line-height:1.2}
.mfbtn:after{content:'\25BE';float:right;margin-left:6px;opacity:.55}
.mfbtn:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(161,152,20,.16)}
.mfpanel{position:fixed;z-index:60;display:block;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:6px 10px;min-width:150px;max-height:60vh;overflow:auto}
.mfpanel[hidden]{display:none}
.mfpanel label{display:flex;align-items:center;gap:7px;margin:7px 0;font-size:12.5px;font-weight:500;color:var(--text);white-space:nowrap;cursor:pointer}
.mfpanel input[type=checkbox]{width:auto;margin:0}
table.list td{padding:7px 12px;border-bottom:1px solid #eef2f5}
table.list td .ibtn{width:29px;height:29px;border-radius:8px}
table.list td .tag{font-size:11px;padding:2px 8px}
table.list tbody tr.alt{background:#f4f8fa}
table.list tbody tr:hover{background:#e9f2f7}
table.list tbody tr:last-child td{border-bottom:0}
.tcontrols{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
/* Tablas mejoradas por app.js (.tcjs): filtros y paginacion en la MISMA linea, sin salirse nunca
   de la tarjeta (si no caben, la paginacion baja sola a la linea siguiente). */
.tcontrols.tcjs{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;max-width:100%;min-width:0}
.tcontrols.tcjs .tcfilters{flex:1 1 200px;min-width:0}
.tcontrols.tcjs .tcpager{flex:0 1 auto;min-width:0;border-top:0;padding-top:0}
.tcontrols.tcjs .tsearch{flex:1 1 220px;width:auto;max-width:360px;min-width:0;padding:6px 12px;font-size:14px}
/* Buscador y "Por pagina" con TOPE de ancho. En la ficha de usuario (dentro de un formulario) el
   buscador se estiraba a lo ancho y el desplegable heredaba el ancho de los campos del formulario. */
.form .tcontrols.tcjs .tsearch{flex:0 1 220px;width:220px;max-width:240px}
/* Etiquetas de los controles de la tabla (Buscar, Reset, Por pagina...): NO llevan el estilo de las
   etiquetas del formulario (.form label: negrita, display:block y margen), que hacian que "Por pagina"
   saliera pegada/encima del desplegable y unos pixeles mas abajo que el buscador. */
.tcontrols .tsize,.tcontrols .tcount,.tcontrols .tpageinfo{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400;font-size:13px;color:var(--muted);white-space:nowrap;line-height:1.2}
.tcontrols .tsize{flex:0 0 auto}
.tcontrols.tcjs .tsizesel{width:auto;min-width:0;max-width:120px}
.form .tcontrols.tcjs .tsizesel{padding:6px 9px;font-size:13px}
.tcontrols.tcjs .tcount{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tcontrols.tcjs .tpager{gap:6px;flex-wrap:nowrap}
.tcontrols.tcjs .tpager .btn{min-width:30px;padding:5px 8px;flex:0 0 auto}
/* Campos de las tablas dentro de un formulario (filtros de columna y permisos): conservan su tamano
   compacto. Si heredaran el de los campos del formulario (width:100%, relleno grande) las filas
   saldrian muy altas y los campos no casarian entre si. */
.form table.list .tfilter,.form table.list .cfilter,.form table.list .mfbtn,
.form table.list .nfop,.form table.list .nfilter{padding:6px 8px;font-size:12.5px}
.tcfilters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tcpager{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;border-top:1px solid #eef2f5;padding-top:8px}
.tcontrols .tsearch{flex:1;min-width:220px;padding:11px 14px;font-size:14.5px;border:1px solid var(--border);border-radius:10px}
.tcontrols .tsearch:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(161,152,20,.18)}
.tcount{color:var(--muted);font-size:13px;white-space:nowrap}
.tcontrols .btn{width:auto}
.tsize{color:var(--muted);font-size:13px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tsizesel,.tin select,.tsize select{padding:5px 8px;border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--text);background:#fff}
.tsizesel:focus,.tsize select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(161,152,20,.16)}
.tform{display:inline-flex;align-items:center;gap:8px;margin:0}
.tpager{display:inline-flex;align-items:center;gap:8px}
.tpager .btn{min-width:34px;width:auto;justify-content:center;padding:6px 10px}
.tpageinfo{color:var(--muted);font-size:13px;white-space:nowrap}
.alert{transition:opacity .4s ease, transform .4s ease}
.form{max-width:640px}
.form.form-wide{max-width:none}
.form.form-wide>label{max-width:640px}
.gpermblock{margin-top:6px}
.gperm{max-width:100%}
.gperm .tablewrap{margin-top:4px}
.gperm table.list{min-width:0}
.gperm table.list th,.gperm table.list td{padding:6px 12px}
.gperm table.list td:first-child{width:38%}
.gperm table.list label{display:flex;align-items:center;gap:8px;margin:0;font-weight:500;font-size:14px}
.gperm input[type=checkbox]{width:auto;margin:0}
.gperm select.gsel{width:auto;min-width:110px;padding:5px 8px;font-size:13px;border-radius:8px;line-height:1.25}
.form label{display:block;font-weight:600;margin:16px 0 6px;font-size:14px;color:#20414d}
.form input,.form select{width:100%;padding:12px 13px;font-size:15px;border:1px solid var(--border);border-radius:10px;background:#fff;transition:.15s}
.form input:focus,.form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(161,152,20,.18)}
.form input[type=checkbox]{width:auto;margin-right:8px}
.form .hint{color:var(--muted);font-size:13px;font-weight:400}
.form .hint-ok{color:#15803d;font-weight:600}
.form .hint-err{color:#b91c1c;font-weight:600}
.form input:disabled,.form select:disabled{background:#f1f5f9;color:#94a3b8;cursor:not-allowed}
.form input[type=file]{padding:10px 12px;cursor:pointer}
.form input[type=file]::file-selector-button{font:inherit;font-weight:700;margin-right:14px;padding:10px 18px;border:1px solid var(--primary);border-radius:10px;background:#fff;color:var(--primary);cursor:pointer;transition:.15s}
.form input[type=file]::file-selector-button:hover{background:var(--primary);color:#fff}
.form input[type=file]::-webkit-file-upload-button{font:inherit;font-weight:700;margin-right:14px;padding:10px 18px;border:1px solid var(--primary);border-radius:10px;background:#fff;color:var(--primary);cursor:pointer;transition:.15s}
.form input[type=file]::-webkit-file-upload-button:hover{background:var(--primary);color:#fff}
.form label.check{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.form label.check input[type=checkbox]{width:auto;margin:0}
.form fieldset.permbox{border:1px solid var(--border);border-radius:var(--radius);margin:18px 0 0;padding:2px 16px 16px;background:#f8fbfc}
.form fieldset.permbox legend{padding:0 8px;font-weight:700;font-size:13px;color:var(--primary);letter-spacing:.6px;text-transform:uppercase}
.form fieldset.permbox label{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-weight:500;font-size:14px}
.form fieldset.permbox input[type=checkbox]{width:auto;margin:0}
.fsel{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fsel .fsr{position:absolute;width:1px;height:1px;padding:0;border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.fsel-info{color:var(--muted);font-size:13.5px}
.fsel-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px rgba(9,73,99,.18);padding:6px;min-width:230px}
.fsel-menu button{display:block;width:100%;text-align:left;padding:11px 13px;border:0;border-radius:9px;background:none;font:inherit;color:var(--text);cursor:pointer}
.fsel-menu button:hover{background:#eef4f7;color:var(--primary)}
.pwfield{position:relative;display:block}
.pwfield input{padding-right:46px}
.pwtoggle{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pwtoggle:hover{color:var(--primary);background:#eef4f7}
.copyrow{display:flex;align-items:center;gap:8px}
.copyrow .pwfield{flex:1;min-width:0}
.copyrow input{padding:9px 12px;border:1px solid var(--border);border-radius:10px;font:inherit;font-size:14.5px;width:100%;background:#fff}
.copybtn{flex:0 0 auto;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--primary);cursor:pointer;transition:.14s}
.copybtn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.copybtn.copied{background:var(--success);color:#fff;border-color:var(--success)}
.connbox{max-width:640px;margin:10px 0 0;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:0 1px 3px rgba(9,73,99,.06)}
.connbox h2{margin:0 0 10px;font-size:17px}
.connbox table.list.kv{min-width:0;width:100%;font-size:14px}
.connbox table.list.kv th{width:118px;color:var(--muted);font-weight:600;padding:6px 10px}
.connbox table.list.kv td{padding:6px 10px}
.connbox .copyrow{max-width:330px}
/* Descargas de la exportacion: enlaces subrayados, uno por linea (no botones). */
.expdl{margin-top:12px}
.expdl a{display:block;margin:5px 0;color:var(--primary);text-decoration:underline;font-size:14.5px}
.expdl a:hover{color:var(--accent-dark)}
.expdl a:focus{outline:2px solid var(--primary-light);outline-offset:2px}
/* Espacio excedido: en rojo, tanto en el listado como en la ficha. */
.excedido{color:#b3261e;font-weight:700}
.formactions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.upprog{margin-top:18px}
.upbar{height:12px;border-radius:999px;background:#e6edf1;border:1px solid var(--border);overflow:hidden}
.upbar>span{display:block;height:100%;width:0;background:linear-gradient(135deg,var(--primary-light),var(--primary));transition:width .25s ease}
.upbar.indet>span{width:100%;background:repeating-linear-gradient(115deg,var(--primary-light) 0 14px,var(--primary) 14px 28px);background-size:56px 100%;animation:upmove .9s linear infinite}
@keyframes upmove{from{background-position:0 0}to{background-position:56px 0}}
.upinfo{margin-top:8px;font-size:13.5px;color:var(--muted)}
.alert{padding:13px 16px;border-radius:11px;margin:0 0 18px;font-size:14.5px;border:1px solid transparent}
.alert-err{background:#fdecea;color:#8a1f14;border-color:#f2c4bd}
.alert-ok{background:#eaf5ec;color:#1f5d28;border-color:#bfe0c5}
.toasts{position:fixed;top:84px;right:18px;z-index:80;display:flex;flex-direction:column;gap:10px;width:min(420px,92vw);pointer-events:none}
.toasts .alert{margin:0;position:relative;padding-right:42px;pointer-events:auto;box-shadow:0 14px 34px rgba(9,73,99,.22);animation:toastin .26s ease}
.toasts .alert-err{background:#fdecea;color:#8a1f14;border-color:#f2c4bd}
.toasts .alert-ok{background:#eaf5ec;color:#1f5d28;border-color:#bfe0c5}
.alert-close{position:absolute;top:7px;right:7px;width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:18px;line-height:1;cursor:pointer;opacity:.65}
.alert-close:hover{opacity:1;background:rgba(0,0,0,.07)}
@keyframes toastin{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--primary);color:#fff;white-space:nowrap}
.tag-ok{background:var(--success)}.tag-super{background:var(--accent-dark)}
.tag-pend{background:#a3600a}
/* FASE 98: las etiquetas (badge) que iban pegadas al nombre del documento en los dos listados —el papel
   («emitida»/«recibida», FASE 96) y la marca «revisar» del importe (FASE 91) y del emisor (FASE 96)— se
   quitaron a peticion del usuario. Sus reglas (.badge, .badge-revisar, .badge-papel) se van con ellas:
   no las usa ninguna otra pantalla. Lo leido sigue guardado y sale como texto (importe y emisor). */
.pick{width:34px;text-align:center}
.pick input{width:16px;height:16px;vertical-align:middle;cursor:pointer}
.bulk{margin:12px 0 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bulk .btn{margin:0}
table.list td.det,table.list th.det{max-width:420px;overflow-wrap:anywhere}
.admincards{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:16px;margin:18px 0}
.admincard{background:linear-gradient(160deg,#fff,#f4f8fa);border:1px solid var(--border);border-radius:var(--radius);padding:22px;text-decoration:none;color:var(--primary);font-weight:700;box-shadow:var(--shadow);transition:.16s;display:flex;flex-direction:column;gap:6px}
.admincard:hover{transform:translateY(-3px);border-color:var(--primary-light)}
.admincard .n{font-size:34px;font-weight:800;color:var(--accent-dark);line-height:1}
.admincards.mix{grid-template-columns:repeat(8,1fr)}
.admincards.mix .admincard.sm{padding:12px 14px;gap:2px;font-size:12.5px}
.admincards.mix .admincard.sm .n{font-size:22px}
.admincards.mix .admincard.big{grid-column:span 2;padding:24px;font-size:15px}
.admincards.mix .admincard.big .n{font-size:38px}
.searchbox{display:flex;gap:10px;margin-top:16px}
.searchbox input{flex:1;padding:16px 18px;font-size:16px;border:1px solid var(--border);border-radius:12px}
.searchbox input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(161,152,20,.18)}
.result{border-bottom:1px solid #eef2f5;padding:16px 0}
.result:last-child{border-bottom:0}
.result .meta{font-size:13px;color:var(--muted)}
.result .frag{font-size:14px;margin:6px 0}
.actions{white-space:nowrap}
.actions a{margin-right:8px}
.examples{margin-top:16px;font-size:14px}
.examples button{background:none;border:0;color:var(--primary);cursor:pointer;font-size:14px;padding:3px 0;display:block;text-align:left}
.loginpage{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.loginhero{position:relative;background:linear-gradient(150deg,var(--primary),var(--primary-dark));color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:48px;overflow:hidden}
.loginhero .hlogo{height:60px;width:auto;display:block;align-self:flex-start}
.loginhero h2{color:#fff;font-size:31px;margin:26px 0 10px;font-weight:800;line-height:1.2}
.loginhero .lead{opacity:.86;max-width:460px;font-size:15.5px}
.loginhero .feats{margin-top:22px;display:flex;flex-direction:column;gap:12px;font-size:14.5px}
.loginhero .feats div{display:flex;align-items:center;gap:10px;opacity:.94}
.loginhero .art{position:absolute;right:-30px;bottom:-24px;width:58%;max-width:560px;opacity:.95}
.loginpanel{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--bg)}
.login-card{width:100%;max-width:410px;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 20px 50px rgba(9,73,99,.16)}
.logincardbody{padding:38px 36px 36px}
.cardlogo{height:52px;width:auto;display:block;margin:0 auto 20px}
.login-card h1{font-size:23px;margin-top:0}
.login-card .formactions{justify-content:center;margin-top:28px}
.login-card .formactions .btn{min-width:190px;justify-content:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:1080px){.admincards.mix{grid-template-columns:repeat(4,1fr)}}
@media(max-width:880px){.loginpage{grid-template-columns:1fr}.loginhero{display:none}.grid2{grid-template-columns:1fr}}
@media(max-width:760px){.nav a.navicon .lbl{display:none}.nav a.navicon{padding:11px}}
@media(max-width:640px){.searchbox{flex-direction:column}.btn{width:100%;justify-content:center}h1{font-size:21px}.card{padding:22px}.admincards.mix{grid-template-columns:repeat(2,1fr)}}
/* FASE 62/63: pagina suelta del visor Office (solo el editor, a pantalla completa) */
body.officeonly{margin:0;padding:0;background:#fff;overflow:hidden;height:100%}
body.officeonly #officeframe{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;border:0;display:block;background:#fff}


/* FASE 68: permisos propios del grupo junto a su nombre en la ficha de usuario */
.gpermpropio{margin-left:6px;white-space:nowrap}
.gpermpropio .tag{font-size:11px;padding:1px 6px}

/* FASE 80: visor de PDF propio (las palabras buscadas se resaltan sobre el documento) */
body.pdfonly{margin:0;background:#5b6770;color:var(--text)}
body.pdfonly #pdfbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;padding:9px 14px;font-size:13.5px;box-shadow:0 4px 16px rgba(0,0,0,.28)}
body.pdfonly #pdfnombre{font-weight:700;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.pdfonly #pdfpalabras{opacity:.95}
body.pdfonly .pdfcnt{opacity:.75;font-size:12px}
body.pdfonly #pdfcuenta{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);padding:3px 10px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
body.pdfonly #pdfcuenta.pdfnada{background:rgba(192,57,43,.38);border-color:rgba(192,57,43,.65)}
body.pdfonly .pdfhueco{flex:1}
body.pdfonly #pdfbar button{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:16px;line-height:1;padding:5px 11px;border-radius:9px;cursor:pointer;min-width:34px}
body.pdfonly #pdfbar button:hover{background:rgba(255,255,255,.26)}
body.pdfonly #pdfpag{opacity:.92;white-space:nowrap;font-variant-numeric:tabular-nums}
#pdfpaginas{padding:18px 12px 64px;display:flex;flex-direction:column;align-items:center;gap:16px}
.pdfpagina{position:relative;background:#fff;box-shadow:0 6px 22px rgba(0,0,0,.35)}
.pdfpagina canvas.pdflona{display:block}
/* la capa de texto de pdf.js (invisible): las reglas son las de su propia hoja de estilos */
.pdfpagina .pdfcapa{position:absolute;text-align:initial;inset:0;overflow:clip;opacity:1;line-height:1;-webkit-text-size-adjust:none;text-size-adjust:none;transform-origin:0 0;caret-color:CanvasText;z-index:2}
.pdfpagina .pdfcapa span,.pdfpagina .pdfcapa br{color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0% 0%}
.pdfpagina .pdfcapa ::selection{background:rgba(0,0,255,.25)}
.pdfpagina .pdfhl{position:absolute;z-index:3;pointer-events:none;background:rgba(255,213,0,.30);outline:1px solid rgba(199,150,0,.75);border-radius:2px}
.pdfpagina .pdfhl.activo{background:rgba(255,140,0,.45);outline:2px solid #c0392b;box-shadow:0 0 0 2px rgba(192,57,43,.22)}
.pdfaviso{background:#fff;padding:16px 20px;border-radius:10px;color:var(--danger);font-weight:600}
/* FASE 81: PDF con las paginas rotadas (p. ej. los listados apaisados). pdf.js marca el contenedor
de la capa de texto con data-main-rotation y espera que el CSS lo rote (lo hace su propio visor):
sin estas reglas, el texto queda descuadrado y los resaltados caen fuera de la palabra. */
.pdfpagina .pdfcapa[data-main-rotation="90"]{transform:rotate(90deg) translateY(-100%)}
.pdfpagina .pdfcapa[data-main-rotation="180"]{transform:rotate(180deg) translate(-100%,-100%)}
.pdfpagina .pdfcapa[data-main-rotation="270"]{transform:rotate(270deg) translateX(-100%)}
/* FASE 82: botones para resetear la busqueda de documentos (pestana Con IA / Por palabras).
   El boton 'Limpiar' de cada formulario no parte su texto. (FASE 85: el «Limpiar busqueda» que
   salia debajo de «Resultados» se ha quitado; sus reglas .qreset ya no hacen falta.) */
.btn-reset{white-space:nowrap}
/* FASE 86: barra de progreso de la busqueda con IA (mientras el modelo entiende la pregunta, busca,
   lee los documentos y redacta la respuesta). Reutiliza la barra .upbar de las subidas, para que todo
   el producto se vea igual. */
.procbuscar{margin:18px 0 4px;padding:14px 16px 12px;border:1px solid var(--border);border-radius:var(--radius);background:#f8fbfc}
.procbuscar[hidden]{display:none}
.procbuscar .upinfo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.procbuscar .procpct{font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums;min-width:42px}
.procbuscar a{color:var(--primary)}
.procbuscar .procdet{color:var(--muted)}
.procbuscar .procreloj{color:var(--muted);font-variant-numeric:tabular-nums}
.procbuscar .procesc{margin:8px 0 0;font-size:13px;color:var(--muted)}
/* FASE 104: administración del servidor (/sistema). Bloques de cada tarea (actualizaciones, seguridad,
   cortafuegos, pruebas de velocidad, apagado) y la salida cruda que devuelve el agente del host. */
.syscard{border:1px solid var(--border);border-radius:var(--radius);background:#f8fbfc;padding:16px 18px 6px;margin:0 0 16px}
.syscard h3{margin:0 0 6px;font-size:15px;color:var(--primary);font-weight:700}
.syscard p{margin:0 0 12px;font-size:13.5px}
.syscard .formactions{margin-top:0;padding-bottom:10px}
.sysgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin:0 0 4px}
.sysgrid .syscard{margin:0}
/* Tarjeta a ancho completo (ej. el bloqueo de ataques de /sistema, que ocupa todo el ancho de la pagina) */
.sysgrid .syscard-wide{grid-column:1/-1}
.salida{background:#0f172a;color:#dbeafe;border-radius:10px;padding:14px 16px;font-size:12.5px;line-height:1.5;
        font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word;
        max-height:340px;overflow:auto;margin:0 0 18px}
.salida[hidden]{display:none}   /* la salida ya sale en la ventana emergente: en la pagina no se repite */
@media(max-width:640px){.sysgrid{grid-template-columns:1fr}}
/* FASE 105: la salida de las acciones de /sistema sale en ventanas emergentes (el <dialog> nativo: sin
   librerías y sin JavaScript inline, así que la CSP del servidor sigue igual). Una avisa de que la tarea
   está corriendo (con cronómetro) y la otra enseña el resultado con la salida del agente dentro. */
.sysmodal{border:0;border-radius:var(--radius);padding:0;width:min(920px,94vw);max-height:88vh;color:var(--text);
          background:var(--surface);box-shadow:0 24px 60px rgba(9,73,99,.35)}
.sysmodal::backdrop{background:rgba(6,50,63,.55)}
.sysmodalcab{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:13px 18px;
             background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
             border-radius:var(--radius) var(--radius) 0 0}
.sysmodalcab h3{margin:0;font-size:15.5px;font-weight:700;color:#fff}
.sysmodalx{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:18px;
           line-height:1;padding:2px 10px;border-radius:9px;cursor:pointer}
.sysmodalx:hover{background:rgba(255,255,255,.28)}
.sysmodalcuerpo{padding:16px 18px;overflow:auto;max-height:calc(88vh - 130px)}
.sysmodalcuerpo .alert{margin:0 0 12px}
.sysmodalcuerpo .salida{max-height:52vh;margin:0}
.sysmodalpie{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:12px 18px;
             border-top:1px solid var(--border);background:#f8fbfc;border-radius:0 0 var(--radius) var(--radius)}
.sysreloj{font-size:40px;font-weight:800;color:var(--primary);line-height:1.1;margin:0 0 12px;
          font-variant-numeric:tabular-nums}
.sysnota{color:var(--muted);font-size:13px;margin:10px 0 0}
.sysmodal .btn{width:auto}
@media(max-width:640px){.sysmodalpie .btn{flex:1}}
@media(prefers-reduced-motion:reduce){.sysmodal .upbar.indet>span{animation:none;background:var(--primary)}}
/* FASE 107: la doble autenticación. El QR es un SVG EN LÍNEA (parte del HTML: sin ficheros, sin
   JavaScript y sin tocar la CSP), así que aquí solo se le da tamaño y fondo. Y los códigos de respaldo,
   que se enseñan una sola vez, en una rejilla que se copia bien a mano. */
.qrbox2fa{margin:0 0 12px}
.qrbox2fa svg{width:190px;height:190px;display:block;background:#fff;border:1px solid var(--border);
              border-radius:var(--radius);padding:6px}
.secreto2fa{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;
            letter-spacing:.06em;word-break:break-all}
.codigos2fa{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;list-style:none;
            padding:0;margin:0 0 14px}
.codigos2fa li{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;
               letter-spacing:.08em;background:#fff;border:1px solid var(--border);border-radius:9px;
               padding:8px 10px;text-align:center}
@media(max-width:640px){.qrbox2fa svg{width:100%;height:auto;max-width:230px}}