/* Expedientes · 1.2 · limpio: blanco, líneas finas, poco color y poco texto. */
@font-face{font-family:Inter;src:url(inter.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{
  --ink:#16181d;--ink2:#4b5160;--mut:#9aa0ab;--line:#eceef2;--soft:#f6f7f9;--soft2:#fafbfc;
  --az:#1a3a6b;--az-l:#eef2f8;--rojo:#d4384e;--rojo-l:#fdecef;--ambar:#c27a12;--ambar-l:#fdf3e2;--verde:#17935f;--verde-l:#e8f6ef;
  --r:12px;--sombra:0 18px 40px -18px rgba(20,30,50,.28)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:14.5px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1{font-size:26px;font-weight:680;letter-spacing:-.025em;margin:0 0 24px;line-height:1.2}
h2{font-size:16px;font-weight:650;margin:0 0 12px;letter-spacing:-.01em}
h3{font-size:18px;font-weight:650;margin:0 0 16px}
p{margin:0 0 12px}
.ic{flex:none;vertical-align:middle}
.oculto{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0}
.mut{color:var(--mut)} .rojo{color:var(--rojo)} .verde{color:var(--verde)}
.sp{flex:1}
.pq{font-size:13px}

/* ---- Barra de arriba ---- */
.top{display:flex;align-items:center;gap:28px;height:64px;padding:0 40px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:20}
.marca{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15.5px;white-space:nowrap}
.marca i{width:26px;height:26px;border-radius:8px;background:var(--az);color:#fff;font-style:normal;font-size:13px;display:flex;align-items:center;justify-content:center}
.nav{display:flex;gap:22px;font-weight:520}
.nav a{color:var(--mut);display:flex;align-items:center;gap:6px}
.nav a .ic{display:none}
.nav a:hover,.nav a.on{color:var(--ink)}
.yo{position:relative}
.yo summary{list-style:none;cursor:pointer;display:flex}
.yo summary::-webkit-details-marker{display:none}
.yo .menu{right:0;top:44px}
.yo .quien{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin:0 0 6px}
.yo .quien b{display:block;font-weight:620}
.yo .quien span{color:var(--mut);font-size:12.5px}

/* ---- Página ---- */
.w{max-width:1180px;margin:0 auto;padding:36px 40px 90px}
.w.estrecho{max-width:880px}
.w.ancho{max-width:1280px}

/* ---- Botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:560;font-size:14px;color:var(--ink);cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:#dcdfe5;background:var(--soft2)}
.btn.p{background:var(--az);border-color:var(--az);color:#fff}
.btn.p:hover{background:#15305a}
.btn.g{border-color:transparent;background:transparent;color:var(--ink2)}
.btn.g:hover{background:var(--soft)}
.btn.s{height:32px;padding:0 11px;font-size:13.5px}
.btn.rojo{color:var(--rojo)}
.btn[disabled]{opacity:.55;cursor:default}
.ib{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink2);background:none;border:0;cursor:pointer;flex:none}
.ib:hover{background:var(--soft)}
.enlinea{display:flex;gap:8px;align-items:center}
form{margin:0}

/* ---- Pequeñas piezas ---- */
.av{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;flex:none;letter-spacing:0}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.cd{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap}
.cd.r{background:var(--rojo-l);color:var(--rojo)} .cd.a{background:var(--ambar-l);color:var(--ambar)}
.cd.n{background:var(--soft);color:var(--ink2)} .cd.v{background:var(--verde-l);color:var(--verde)}
.lb{font-size:11.5px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px}
.lb .n{letter-spacing:0}
.vacio{color:var(--mut);text-align:center;padding:28px 12px;font-size:14px}
.vacio b{display:block;color:var(--ink2);font-weight:600;margin:6px 0 2px}
hr.l{border:0;border-top:1px solid var(--line);margin:26px 0}
.volver{display:inline-flex;align-items:center;gap:4px;color:var(--mut);font-size:13.5px;margin:0 0 18px}
.volver:hover{color:var(--ink)}

/* ---- Avisos ---- */
.aviso{max-width:1180px;margin:18px auto 0;padding:11px 16px;border-radius:10px;background:var(--verde-l);color:#0f6e47;font-weight:520;font-size:14px}
.aviso.err{background:var(--rojo-l);color:#a82339}
.w .aviso{margin:0 0 20px}
.enlace{max-width:1180px;margin:18px auto 0;padding:14px 16px;border-radius:10px;background:var(--ambar-l);font-size:14px}
.enlace b{display:block;font-weight:560;margin:0 0 8px}
.enlace input{width:100%;height:38px;border:1px solid #efd9b1;border-radius:8px;padding:0 10px;background:#fff;font-size:13px}

/* ---- Filas ---- */
.row{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 12px;border-radius:10px;color:var(--ink)}
a.row:hover,.row.h{background:var(--soft)}
.row .n,.row .der{margin-left:auto;color:var(--mut);font-size:13px;display:flex;align-items:center;gap:8px}
.row .t{min-width:0;flex:1}
.row .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t small{display:block;color:var(--mut);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Formularios ---- */
.in{height:42px;border:1px solid var(--line);border-radius:10px;padding:0 14px;width:100%;background:#fff;color:var(--ink);outline:none}
textarea.in{height:auto;padding:10px 14px}
.in:focus{border-color:#b9c6dc;box-shadow:0 0 0 3px var(--az-l)}
select.in{padding-right:8px}
.fld{display:block;margin:0 0 16px}
.fld>span{display:block;font-size:13px;color:var(--ink2);margin:0 0 6px;font-weight:520}
.fld input:not([type=checkbox]):not([type=radio]),.fld select,.fld textarea{height:42px;border:1px solid var(--line);border-radius:10px;padding:0 14px;width:100%;background:#fff;outline:none}
.fld textarea{height:auto;padding:10px 14px}
.fld input:focus,.fld select:focus{border-color:#b9c6dc;box-shadow:0 0 0 3px var(--az-l)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.chk{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink2);cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--az)}
.grupo{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--line)}
.grupo>.t{font-weight:600;padding-top:9px}
.acciones{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--line);padding-top:24px}

/* ---- Pastillas para elegir (un clic) ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line);font-weight:520;color:var(--ink2);background:#fff;cursor:pointer;user-select:none}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:hover{border-color:#dcdfe5}
.chip:has(input:checked),.chip.on{border-color:var(--az);background:var(--az-l);color:var(--az);font-weight:600}
.chip .dot{width:7px;height:7px}
.chip.bloque{width:100%;min-height:46px;padding:10px 14px;align-items:flex-start}
.chip.bloque b{display:block;color:var(--ink);font-weight:600}
.chip.bloque small{display:block;color:var(--mut);font-weight:450;font-size:13px}
.chip .caja{width:17px;height:17px;border:1.5px solid #d3d7de;border-radius:5px;flex:none;margin-top:1px;display:flex;align-items:center;justify-content:center}
.chip:has(input:checked) .caja{background:var(--az);border-color:var(--az)}
.chip:has(input:checked) .caja::after{content:'';width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}

/* ---- Menús ---- */
.desp{position:relative;display:inline-block}
.desp>summary{list-style:none;cursor:pointer}
.desp>summary::-webkit-details-marker{display:none}
.menu{position:absolute;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sombra);padding:6px;min-width:240px;z-index:30;right:0;top:40px}
.menu a,.menu button{display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 10px;border-radius:8px;font-weight:520;border:0;background:none;cursor:pointer;text-align:left;font-size:14px;color:var(--ink)}
.menu a:hover,.menu button:hover{background:var(--soft)}
.menu .rojo{color:var(--rojo)}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.menu form{display:block}

/* ---- Diálogos ---- */
dialog{border:0;border-radius:16px;padding:0;box-shadow:0 30px 70px -30px rgba(0,0,0,.4);color:var(--ink);max-width:calc(100vw - 32px)}
dialog::backdrop{background:rgba(20,24,32,.28)}
dialog .dc{width:460px;max-width:100%;padding:26px}
dialog .dc h3{display:flex;align-items:center}
.pie{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 20px}
.seg label{border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;align-items:center;gap:12px;font-weight:600;cursor:pointer}
.seg label:has(input:checked){border-color:var(--az);background:var(--az-l)}
.seg input{position:absolute;opacity:0}

/* ---- El visor (panel a la derecha) ---- */
dialog.visor{margin:0 0 0 auto;height:100vh;max-height:100vh;width:640px;max-width:100vw;border-radius:0}
.visor .dc{width:100%;height:100%;padding:0;display:flex;flex-direction:column}
.visor .cab{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.visor .cab .t{min-width:0;flex:1}
.visor .cab .t b{display:block;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visor .cab .t small{color:var(--mut);font-size:12.5px}
.visor iframe{flex:1;border:0;width:100%;background:var(--soft)}
.visor .img{flex:1;overflow:auto;background:var(--soft);display:flex;align-items:flex-start;justify-content:center;padding:24px}
.visor .img img{max-width:100%;box-shadow:0 1px 3px rgba(0,0,0,.1);border-radius:4px;background:#fff}
.visor .vacio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--soft)}
.visor .pie2{display:flex;gap:8px;padding:14px 20px;border-top:1px solid var(--line);align-items:center;flex-wrap:wrap}
.visor .pie2 .menu{top:auto;bottom:44px}

/* ---- Cabecera de un expediente ---- */
.cabexp{display:flex;align-items:center;gap:16px}
.cabexp h1{margin:0}
.cabexp .meta{color:var(--mut);display:flex;align-items:center;gap:8px;margin-top:2px;flex-wrap:wrap}
.steps{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut);font-weight:520;margin:22px 0 34px;flex-wrap:wrap}
.steps button{background:none;border:0;padding:4px 2px;cursor:pointer;color:inherit;font-weight:inherit;display:inline-flex;align-items:center;gap:6px}
.steps button:hover{color:var(--ink)}
.steps .ok{color:var(--verde);font-weight:600} .steps .ya{color:var(--az);font-weight:600}
.steps i{width:28px;height:1px;background:var(--line);flex:none}
.steps .ya::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--az)}
.dosc{display:flex;gap:56px;align-items:flex-start}
.dosc>main{flex:1;min-width:0}
.dosc>aside{width:280px;flex:none}

/* ---- El árbol de carpetas ---- */
.secc{margin:0 0 28px;border-radius:12px;transition:background .15s}
.secc .hd{display:flex;align-items:center;gap:10px;margin:0 0 4px;padding:0 4px 0 12px;min-height:40px}
.secc .hd h2{margin:0;font-size:16px}
.secc .hd .n{color:var(--mut);font-size:13px}
.secc .hd .vc{color:var(--mut);display:inline-flex}
.fila{display:flex;align-items:center;gap:12px;min-height:44px;padding:4px 8px 4px calc(12px + var(--n, 0) * 26px);border-radius:10px;position:relative}
.fila:hover{background:var(--soft)}
.fila .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila.car .nm{font-weight:560}
.fila .meta{color:var(--mut);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fila .der{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--mut);font-size:13px;flex:none}
.fila .hov{opacity:0;transition:opacity .1s}
.fila:hover .hov,.fila:focus-within .hov,.secc .hd:hover .hov{opacity:1}
.fila .tog{width:16px;display:inline-flex;color:var(--mut);transition:transform .15s;background:none;border:0;padding:0;cursor:pointer}
.fila.abierta>.tog{transform:rotate(90deg)}
.fila a.doc{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.fila .est{font-size:12px;color:var(--ambar);display:inline-flex;align-items:center;gap:4px}
.fila .fir{font-size:13px;font-weight:560;display:inline-flex;align-items:center;gap:4px}
.fila .fir.ok{color:var(--verde)} .fila .fir.no{color:var(--ambar)}
.hijos.cerrado{display:none}
.soltar{color:var(--mut);padding:14px 12px;border:1px dashed #e3e6ec;border-radius:12px;margin:4px 0 0;text-align:center;font-size:13.5px;cursor:pointer;display:block}
.soltar:hover{border-color:#cfd5de;color:var(--ink2)}
.soltando{background:var(--az-l) !important;outline:1.5px dashed #9fb2d4;outline-offset:-2px}
.nuevo-doc{background:var(--verde-l)}

/* ---- Lo que falta, equipo ---- */
.falt .row{min-height:38px;padding:0 4px}
.falt .row.ok{color:var(--mut)}
.equipo{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.av.mas{background:var(--soft);color:var(--mut);border:1px dashed #d8dce3;cursor:pointer}

/* ---- Lo leído (propuestas): una línea, se confirma o no ---- */
.prop{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;margin:0 0 10px;flex-wrap:wrap;background:var(--soft2)}
.prop .t{flex:1;min-width:220px}
.prop .t b{font-weight:600}
.prop .t small{display:block;color:var(--mut);font-size:13px}
.prop details summary{cursor:pointer;color:var(--ink2);font-size:13px;list-style:none}
.prop .mas{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;width:100%}
.prop .mas .in{height:34px;width:auto;font-size:13px}

/* ---- Lista de expedientes ---- */
.filtros{display:flex;gap:22px;font-weight:540;color:var(--mut);margin:0 0 14px;padding:0 12px;flex-wrap:wrap;align-items:center}
.filtros a:hover,.filtros a.on{color:var(--ink)}
.filtros a.on{font-weight:600}
.ex{display:grid;grid-template-columns:16px minmax(0,1.3fr) minmax(0,1.6fr) 90px 110px 96px;gap:12px;align-items:center;min-height:56px;padding:0 12px;border-radius:10px}
.ex:hover{background:var(--soft)}
.ex b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex .as{color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex .nu{color:var(--mut);font-size:13px}
.ex .fa{font-size:13px;color:var(--ink2)}
.ex .pz{text-align:right}
.ex.cerrado{opacity:.55}
.buscador{position:relative;width:300px}
.buscador .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--mut)}
.buscador .in{padding-left:38px}
.cabl{display:flex;align-items:center;gap:14px;margin:0 0 22px;flex-wrap:wrap}
.cabl h1{margin:0}

/* ---- Inicio ---- */
.dos2{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.drive{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:13.5px;margin-top:40px}
.drive.mal{color:var(--ambar)}

/* ---- Buscar ---- */
.encontrado{display:flex;gap:18px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:14px;margin:0 0 24px}
.encontrado img{width:88px;height:112px;object-fit:cover;object-position:top;border-radius:6px;border:1px solid var(--line);background:var(--soft)}

/* ---- Personas, plantillas, ajustes ---- */
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla td,.tabla th{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}
.tabla th{font-size:11.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.lado{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start}
.mats a{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:10px;color:var(--ink2);font-weight:520}
.mats a.on,.mats a:hover{background:var(--soft);color:var(--ink)}
.bloq{margin:0 0 34px}
.bloq .row{border-bottom:1px solid var(--line);border-radius:0;padding-left:4px}
.bloq .row:last-of-type{border-bottom:0}
.add{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.add .in{height:36px;width:auto;flex:1;min-width:160px}
.caja-ajuste{border:1px solid var(--line);border-radius:14px;padding:22px;margin:0 0 20px}
.caja-ajuste h2{display:flex;align-items:center;gap:10px}

/* ---- La subida (abajo a la derecha) ---- */
.subida{position:fixed;right:24px;bottom:24px;width:380px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sombra);padding:16px;z-index:50}
.subida .cab{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font-size:14px}
.subida .cab .cuenta{color:var(--mut);font-size:13px}
.subida .pr{height:4px;border-radius:4px;background:var(--soft);overflow:hidden;margin:0 0 10px}
.subida .pr i{display:block;height:100%;background:var(--az);width:0;transition:width .2s}
.subida .lista{max-height:220px;overflow:auto}
.subida .it{display:flex;align-items:center;gap:10px;font-size:13px;padding:5px 0}
.subida .it .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subida .es{color:var(--mut);white-space:nowrap} .subida .es.ok{color:var(--verde)} .subida .es.err{color:var(--rojo)} .subida .es.dup{color:var(--ambar)}
.subida .res{margin-top:8px;font-size:13.5px;border-top:1px solid var(--line);padding-top:10px}

/* ---- Nuevo expediente: documentos adjuntos ---- */
.adj{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.adj .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adj select{height:32px;border:1px solid var(--line);border-radius:8px;font-size:13px;max-width:240px}
.adj button{border:0;background:none;color:var(--mut);cursor:pointer;font-size:15px}
.soltar-g{border:1px dashed #dfe3ea;border-radius:12px;padding:22px;text-align:center;color:var(--mut);cursor:pointer;display:block}
.soltar-g:hover{border-color:#cfd5de}
.sugiere{border:1px solid var(--line);border-radius:10px;margin-top:6px;overflow:hidden}
.sugiere button{display:flex;width:100%;align-items:center;gap:10px;padding:9px 14px;background:#fff;border:0;border-bottom:1px solid var(--line);cursor:pointer;text-align:left}
.sugiere button:last-child{border-bottom:0}
.sugiere button:hover{background:var(--soft)}
.sugiere small{color:var(--mut);margin-left:auto}

/* ---- Entrar y páginas sueltas ---- */
.puerta{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--soft2)}
.puerta .card{width:400px;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px}
.puerta .marca{margin:0 0 26px}
.puerta h1{margin:0 0 6px;font-size:24px}
.puerta p{color:var(--mut)}
.puerta .btn.p{width:100%;height:42px;margin-top:6px}
.puerta .chk{margin:0 0 18px;font-size:13.5px}

/* ---- Páginas que se abren con un enlace (cliente) y el panel del cliente ---- */
.tag{display:inline-block;font-size:11.5px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin:0 0 6px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px}
.card.pad{padding:22px}
.pasos{display:flex;justify-content:space-between;position:relative;margin:4px 0}
.pasos::before{content:'';position:absolute;left:12%;right:12%;top:21px;height:2px;background:var(--line)}
.pasos .bar2{position:absolute;left:12%;top:21px;height:2px;background:var(--verde);max-width:76%}
.pasos .paso{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;font-weight:560;color:var(--mut);text-align:center}
.pasos .paso .o{width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center}
.pasos .paso.ok{color:var(--ink)} .pasos .paso.ok .o{background:var(--verde);border-color:var(--verde)}
.pasos .paso.ya{color:var(--az)} .pasos .paso.ya .o{border-color:var(--az)}
.falta{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.falta .f{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:150px;padding:18px 14px;border:1.5px dashed #d9e0ea;border-radius:14px;text-align:center;cursor:pointer;background:#fff}
.falta .f:hover{border-color:var(--az)}
.falta .f .ci{width:52px;height:52px;border-radius:50%;background:var(--az);display:flex;align-items:center;justify-content:center}
.falta .f b{font-weight:600}
.falta .f small{color:var(--mut);font-size:12.5px}
.falta .f.ok{border:1px solid var(--line);cursor:default}
.falta .f.ok .ci{background:var(--verde-l)}
.docs-cli .row{border-bottom:1px solid var(--line);border-radius:0}
.abrirDoc{padding:12px 18px;display:flex;align-items:center;gap:14px}
.soloMovil{display:none}
.firma-pad{width:100%;height:220px;border:1.5px dashed #d9e0ea;border-radius:12px;touch-action:none;display:block;background:#fff}

/* ---- Móvil ---- */
@media (max-width:760px){
  .top{padding:0 16px;gap:14px;height:56px}
  .nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);justify-content:space-around;gap:0;padding:6px 0 calc(6px + env(safe-area-inset-bottom));z-index:40}
  .nav a{flex-direction:column;gap:2px;font-size:11px;padding:4px 10px}
  .nav a .ic{display:block}
  .top .btn.p .t{display:none}
  .top .btn.p{width:36px;padding:0}
  .w,.w.estrecho{padding:22px 16px 110px}
  h1{font-size:22px}
  .aviso,.enlace{margin:12px 16px 0}
  .dosc{flex-direction:column;gap:30px}
  .dosc>aside{width:100%}
  .dos2,.lado{grid-template-columns:1fr;gap:30px}
  .grupo{grid-template-columns:1fr;gap:10px;padding:18px 0}
  .grupo>.t{padding:0}
  .g2{grid-template-columns:1fr}
  .ex{grid-template-columns:12px minmax(0,1fr) auto;row-gap:0;padding:8px 10px}
  .ex .as{grid-column:2;grid-row:2;font-size:13px}
  .ex .nu,.ex .fa{display:none}
  .ex .pz{grid-column:3;grid-row:1 / span 2}
  .buscador{width:100%}
  .fila .meta{display:none}
  .fila .hov{opacity:1}
  .steps i{width:14px}
  dialog.visor{width:100vw}
  .falta{grid-template-columns:1fr 1fr}
  .soloAncho{display:none}
  .soloMovil{display:flex;width:56px;height:56px;border-radius:16px;background:var(--az-l);align-items:center;justify-content:center;flex:none}
  .abrirDoc .btn{flex:1;background:var(--az);color:#fff;border-color:transparent}
  .subida{right:16px;left:16px;bottom:80px;width:auto}
  .cabexp .btn.g{display:none}
}
form.o{display:inline-flex}
.menu form.o{display:block}
.card.sec{padding:22px}
.dos2>*{min-width:0}
/* ---- Elegir despacho ---- */
.elegir{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--soft2);padding:24px}
.desps{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.desp-card{display:block;width:340px;max-width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;cursor:pointer;font:inherit;color:inherit}
.desp-card:hover{border-color:#cfd6e2;box-shadow:var(--sombra)}
.desp-card .hd{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.desp-card .lg{width:44px;height:44px;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex:none}
.desp-card b{display:block;font-size:17px;font-weight:680}
.desp-card small{display:block;color:var(--mut);font-size:13px}
.desp-card .nums{display:flex;gap:26px}
.desp-card .nums b{font-size:22px}
.marca .lg{width:26px;height:26px;border-radius:8px;color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;font-weight:700}
.cambia summary{list-style:none;cursor:pointer}
.cambia summary::-webkit-details-marker{display:none}
.cambia .menu{left:0;right:auto;top:44px;width:280px}
.cambia .menu .lg{width:22px;height:22px;border-radius:6px;font-size:11px}
.lado>*{min-width:0}
@media (max-width:760px){
  .cabexp{flex-wrap:wrap;gap:12px}
  .cabexp .av{width:40px !important;height:40px !important;font-size:14px !important}
  .cabexp>div:nth-child(2){flex:1;min-width:0}
  .cabexp .sp{display:none}
  .cabexp h1{font-size:21px}
  .fila{padding-right:0}
  .fila .der{gap:2px}
  .mats{display:flex;flex-wrap:wrap;gap:4px}
  .steps{margin:16px 0 24px}
}
@media (max-width:760px){
  .cabexp .meta{display:block;font-size:13.5px}
  .cabexp .meta .dot{display:none}
  .steps{gap:12px}
  .steps i{display:none}
  .secc .hd h2{font-size:15px}
}

/* ---- Portada: la semana y con qué seguir ---- */
.semana{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.dia{border:1px solid var(--line);border-radius:14px;padding:12px;min-height:118px}
.dia.hoy{border-color:var(--az)}
.dia .ds{display:block;color:var(--mut);font-size:12px}
.dia .dn{display:block;font-size:22px;font-weight:680;margin:2px 0 8px}
.dia.hoy .dn{color:var(--az)}
.dia .plz{display:block;font-size:12.5px;font-weight:560;background:var(--soft);color:var(--ink);border-radius:8px;padding:5px 7px;margin:0 0 5px;line-height:1.3}
.dia .plz:hover{background:#eef0f4}
.dia .plz span{font-weight:450;color:var(--mut)}
.seguir{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tarjeta{display:block;border:1px solid var(--line);border-radius:14px;padding:16px;color:var(--ink)}
.tarjeta:hover{border-color:#dcdfe5}
.tarjeta b{display:block;font-weight:620;margin:12px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tarjeta small{display:block;color:var(--mut);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tarjeta .fc{display:block;font-size:12.5px;margin-top:8px}
.tarjeta .barra{display:flex;gap:3px;margin-top:14px}
.tarjeta .barra i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.tarjeta .barra i.on{background:var(--az)}
@media (max-width:760px){
  .semana{grid-template-columns:repeat(3,1fr)}
  .seguir{grid-template-columns:1fr 1fr}
}

/* ---- Al arrastrar: a dónde va ---- */
.guia{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:12px;padding:11px 16px;font-size:14px;display:flex;align-items:center;gap:9px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5);z-index:60;max-width:calc(100vw - 32px)}
.guia b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guia .g1{color:#9aa0ab;white-space:nowrap}
.secc.soltando,.fila.soltando{background:var(--az-l) !important;box-shadow:inset 3px 0 0 var(--az);outline:0}
.secc.soltando{border-radius:12px}

.seguir>*{min-width:0}
@media (max-width:760px){.tarjeta{padding:14px}}

/* ---- Expedientes en tarjetas ---- */
.vista{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:none}
.vista a{width:36px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--mut);background:#fff}
.vista a.on{background:var(--soft);color:var(--ink)}
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rejilla>*{min-width:0}
.tj{display:block;border:1px solid var(--line);border-radius:14px;padding:16px 18px;color:var(--ink)}
.tj:hover{border-color:#dcdfe5}
.tj.cerrado{opacity:.6}
.tj-top{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.tj-top .num{color:var(--mut);font-size:12.5px;font-weight:560}
.tj b{display:block;font-weight:640;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tj small{display:block;color:var(--mut);font-size:13.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tj-gente{display:flex;align-items:center;gap:7px;margin:14px 0 0;color:var(--ink2);font-size:13px;min-width:0}
.tj-gente>span{margin-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tj-pie{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:13px;color:var(--ink2);min-width:0}
.tj-pie .fc{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.barra{display:flex;gap:3px;width:70px;flex:none}
.barra i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.barra i.on{background:var(--az)}
kbd{border:1px solid var(--line);border-radius:6px;padding:2px 6px;font:inherit;font-size:12px;color:var(--mut);background:var(--soft)}
.buscador kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
@media (max-width:980px){.rejilla{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.rejilla{grid-template-columns:1fr}.buscador kbd{display:none}}

/* =====================================================================
   1.3 · La piel: el rail oscuro a la izquierda, el calendario del mes,
   las fechas y las notas. Todo lo de arriba sigue igual; esto sólo
   cambia el marco y añade las piezas nuevas.
   ===================================================================== */
:root{--rail:#11131a;--rail-t:#9aa1b1;--fe:#f3f4f7}
body{display:flex;min-height:100vh}
.cuerpo{flex:1;min-width:0}
.top{flex-direction:column;align-items:stretch;gap:0;width:238px;flex:none;height:100vh;
  padding:18px 12px 12px;background:var(--rail);color:#fff;border-bottom:0;border-right:0;position:sticky;top:0;z-index:30}
.top .marca{color:#fff;font-size:15px;padding:4px 8px;min-height:36px}
.top .marca .lg,.top .marca i{width:28px;height:28px;border-radius:9px}
.top .marca .ic{margin-left:auto;opacity:.7}
.top>.btn.p{margin:16px 2px 6px;height:40px;justify-content:center}
.top .nav{flex-direction:column;gap:2px;margin:10px 0 0}
.top .nav a{height:40px;padding:0 10px;border-radius:10px;color:var(--rail-t);gap:11px;font-weight:520}
.top .nav a .ic{display:block}
.top .nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.top .nav a.on{background:rgba(255,255,255,.1);color:#fff}
.top .lbr{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#666d7d;margin:22px 12px 6px}
.top .desps-r{display:flex;flex-direction:column;gap:2px}
.top .desps-r button{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border-radius:9px;
  background:none;border:0;color:var(--rail-t);font:inherit;font-size:13.5px;cursor:pointer;text-align:left}
.top .desps-r button:hover{background:rgba(255,255,255,.06);color:#fff}
.top .desps-r button.on{color:#fff;font-weight:560}
.top .desps-r .pu{width:8px;height:8px;border-radius:50%;flex:none}
.top .yo{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.top .yo summary{align-items:center;gap:10px;padding:6px;border-radius:10px}
.top .yo summary:hover{background:rgba(255,255,255,.06)}
.top .yo summary .nb{font-size:13.5px;color:#fff;font-weight:520;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .yo .menu{left:0;right:auto;top:auto;bottom:52px;width:256px}
.top .cambia{display:block}
.top .cambia .menu{left:0;right:auto;top:48px;width:214px}
.top .cambia summary{display:flex;align-items:center;gap:10px;border-radius:10px}
.top .cambia summary:hover{background:rgba(255,255,255,.06)}
.aviso,.enlace{max-width:1180px;margin-left:40px;margin-right:40px}

/* ---- Fechas: la pastilla de un vencimiento ---- */
.fe{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:99px;font-size:12.5px;font-weight:560;
  white-space:nowrap;background:var(--fe);color:var(--ink2);flex:none}
.fe.r{background:var(--rojo-l);color:var(--rojo)}
.fe.a{background:var(--ambar-l);color:var(--ambar)}
.fe.v{background:var(--verde-l);color:var(--verde)}
.fila .fe,.ex .fe{margin-left:4px}
.ponfe{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:99px;font-size:12.5px;
  border:1px dashed #d7dbe2;color:#aeb4c0;background:none;cursor:pointer;white-space:nowrap}
.ponfe:hover{border-color:var(--az);color:var(--az)}
.tramo{display:flex;align-items:center;gap:9px;padding:2px 8px 8px calc(12px + var(--n,0)*26px);color:var(--mut);font-size:13px}

/* ---- Notas: no se ven, pero la fila lo dice ---- */
.fila.connota::before,.secc.connota>.hd::before{content:'';position:absolute;left:2px;top:9px;bottom:9px;width:2px;border-radius:2px;background:#ccd1da}
.secc .hd{position:relative}
.fila.connota:hover::before,.secc.connota>.hd:hover::before{background:var(--az)}
.notaln{display:block;color:var(--mut);font-size:13px;font-style:italic;margin:-4px 0 6px;
  padding-left:calc(12px + var(--n,0)*26px + 31px);padding-right:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* ---- Tareas: una fila más dentro de la carpeta ---- */
.fila.tar .caja{width:18px;height:18px;border:1.5px solid #d3d7de;border-radius:6px;flex:none;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.fila.tar .caja:hover{border-color:var(--az)}
.fila.tar.ok .caja{background:var(--verde);border-color:var(--verde)}
.fila.tar.ok .nm{color:var(--mut);text-decoration:line-through}
.fila.tar .nm{font-weight:450}
.addt{display:flex;align-items:center;gap:8px;padding:2px 8px 6px calc(12px + var(--n,0)*26px);}
.addt button{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:#aeb4c0;font:inherit;font-size:13.5px;cursor:pointer;padding:6px 4px;border-radius:8px}
.addt button:hover{color:var(--az)}
.addt input{height:34px;border:1px solid var(--line);border-radius:9px;padding:0 11px;background:#fff;min-width:0;flex:1}
.addt input[type=date]{flex:none;width:150px;color:var(--ink2)}

/* ---- El calendario del mes ---- */
.mes{border:1px solid var(--line);border-radius:16px;padding:8px;background:#fff;position:relative}
.mescab{display:flex;align-items:center;gap:10px;padding:8px 10px 14px}
.mescab b{font-size:17px;font-weight:650;letter-spacing:-.01em}
.mescab .ib{width:30px;height:30px;border:1px solid var(--line);border-radius:9px}
.dows{display:grid;grid-template-columns:repeat(7,1fr);font-size:11.5px;color:var(--mut);padding:0 2px 6px}
.dows span{padding-left:10px}
.rej-mes{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:86px;gap:3px}
.cel{border-radius:11px;padding:8px 10px;position:relative;display:block;color:inherit;border:0;background:none;text-align:left;font:inherit;cursor:default}
.cel .d{font-size:14px;font-weight:560;color:var(--ink2)}
.cel.fu .d{color:#c8ccd5;font-weight:450}
.cel.fs .d{color:#b9bec9}
.cel.hoy{background:var(--az)}
.cel.hoy .d{color:#fff;font-weight:700}
.cel.tiene{cursor:pointer}
.cel.tiene:hover{background:var(--soft)}
.cel.hoy:hover{background:var(--az)}
.marcas{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.mk{width:6px;height:6px;border-radius:50%;background:var(--rojo);display:block}
.mk.a{background:var(--ambar)} .mk.n{background:#c3c9d4}
.cel.hoy .mk{background:#fff}
.globo{position:absolute;background:#fff;border-radius:14px;box-shadow:0 26px 54px -18px rgba(17,19,26,.4),0 0 0 1px rgba(17,19,26,.07);
  padding:12px 12px 10px;width:300px;z-index:25;display:none}
.cel:hover>.globo,.cel:focus-within>.globo{display:block}
.globo .dia2{font-size:12px;color:var(--mut);margin:0 0 6px;padding:0 4px}
.globo a.it{display:flex;align-items:flex-start;gap:9px;padding:7px 8px;border-radius:9px;font-size:13.5px;color:var(--ink)}
.globo a.it:hover{background:var(--soft)}
.globo a.it .t2{flex:1;min-width:0}
.globo a.it em{font-style:normal;color:var(--mut);font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* el mes pequeño del lateral de un expediente */
.mes.chico{padding:6px}
.mes.chico .mescab{padding:4px 6px 10px}
.mes.chico .mescab b{font-size:14px}
.mes.chico .mescab .ib{width:26px;height:26px}
.mes.chico .dows span{padding:0;text-align:center;font-size:10.5px}
.mes.chico .rej-mes{grid-auto-rows:38px;gap:2px}
.mes.chico .cel{padding:4px 0 0;text-align:center;border-radius:9px}
.mes.chico .cel .d{font-size:12.5px}
.mes.chico .marcas{justify-content:center;gap:3px;margin-top:3px}
.mes.chico .mk{width:5px;height:5px}
.mes.chico .globo{width:250px;left:auto;right:0}

/* ---- Lo que vence, en lista ---- */
.venc{display:flex;align-items:center;gap:10px;min-height:38px;padding:4px 6px;border-radius:9px;font-size:13.5px;color:inherit}
a.venc:hover{background:var(--soft)}
.venc .t3{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.venc .t3 em{font-style:normal;color:var(--mut);font-size:12.5px;margin-left:6px}

@media (max-width:760px){
  body{display:block}
  .cuerpo{display:block}
  .top{flex-direction:row;align-items:center;width:auto;height:56px;padding:0 14px;gap:12px;position:sticky;top:0}
  .top .marca{padding:0;min-height:0;font-size:14.5px}
  .top .marca .lg,.top .marca i{width:26px;height:26px;border-radius:8px}
  .top .marca .ic{margin-left:2px}
  .top>.btn.p{margin:0 0 0 auto;height:34px;width:34px;padding:0}
  .top .nav{position:fixed;left:0;right:0;bottom:0;top:auto;flex-direction:row;background:var(--rail);border-top:0;
    justify-content:space-between;gap:0;margin:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:40}
  .top .nav a{flex-direction:column;gap:2px;font-size:10.5px;padding:4px 2px;height:auto;border-radius:10px;
    flex:1 1 0;min-width:0;text-align:center;line-height:1.15}
  .top .nav a span,.top .nav a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top .nav a.on{background:none;color:#fff}
  .top .lbr,.top .desps-r{display:none}
  .top .yo{margin-top:0;border-top:0;padding-top:0}
  .top .yo summary .nb{display:none}
  .top .yo .menu{left:auto;right:0;top:44px;bottom:auto}
  .top .cambia .menu{left:0;top:44px}
  .aviso,.enlace{margin-left:16px;margin-right:16px}
  .rej-mes{grid-auto-rows:64px;gap:2px}
  .cel{padding:5px 6px;border-radius:9px}
  .cel .d{font-size:12.5px}
  .marcas{margin-top:5px;gap:3px}
  .mk{width:5px;height:5px}
  .dows span{padding-left:6px;font-size:10.5px}
  .globo{position:fixed;left:12px;right:12px;bottom:76px;top:auto;width:auto}
  .mes.chico .globo{position:fixed;right:12px;left:12px}
  .notaln{padding-left:calc(12px + var(--n,0)*26px + 31px)}
}

.puerta,.elegir{flex:1;min-width:0}

/* la marca de nota y el plegado de las tres secciones */
.nt{position:absolute;left:1px;top:8px;bottom:8px;width:3px;border-radius:2px;background:#ccd1da;border:0;padding:0;cursor:pointer;z-index:2}
.nt:hover{background:var(--az)}
.secc .hd .tog{width:16px;display:inline-flex;color:var(--mut);transition:transform .15s;background:none;border:0;padding:0;cursor:pointer;margin-left:-4px}
.secc .hd.abierta>.tog{transform:rotate(90deg)}
.secc .hd{cursor:pointer;border-radius:10px}
.secc .hd:hover{background:var(--soft)}
.fila .cn{min-width:14px;text-align:right}
@media (max-width:760px){
  .secc .hd{padding-right:0;gap:8px}
  .secc .hd h2{min-width:0;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .secc .hd .vc{display:none}
  .fila .der{gap:4px}
  .addt input[type=date]{width:130px}
  .addt form{flex-wrap:wrap}
}
@media (max-width:760px){.dosc{align-items:stretch}.dosc>main{width:100%;min-width:0}}

/* =====================================================================
   1.3.1 · Coherencia: el hilo de arriba, la cabecera de cada pantalla y
   la puerta de los despachos con la misma piel.
   ===================================================================== */
.hilo{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mut);margin:0 0 14px;flex-wrap:wrap}
.hilo a{color:var(--mut)}
.hilo a:hover{color:var(--ink)}
.hilo>span:last-child{color:var(--ink2);font-weight:520}
.hilo .ic{opacity:.5}
.cabp{display:flex;align-items:flex-end;gap:16px;margin:0 0 26px}
.cabp .tt{min-width:0}
.cabp h1{margin:0}
.cabp .sub{color:var(--mut);font-size:14px;margin:6px 0 0}
.cabp .sub b{color:var(--ink2);font-weight:600}
.cabp .sub .rojo{color:var(--rojo);font-weight:600}

/* la puerta: elegir despacho */
body.puerta-oscura{background:var(--rail);display:block}
.puerta-oscura .elegir{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--rail);padding:24px;color:#fff}
.elegir-cab{text-align:center;margin:0 0 38px}
.elegir-cab .mrc{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:14.5px;opacity:.85;margin:0 0 26px}
.elegir-cab .mrc .lg{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:13px}
.elegir-cab h1{color:#fff;margin:0;font-size:30px;letter-spacing:-.03em}
.elegir-cab p{color:#8b92a3;margin:8px 0 0}
.puerta-oscura .desp-card{background:#fff;border:0;color:var(--ink);box-shadow:0 20px 50px -24px rgba(0,0,0,.6);transition:transform .12s, box-shadow .12s}
.puerta-oscura .desp-card:hover{transform:translateY(-2px);box-shadow:0 26px 60px -24px rgba(0,0,0,.75)}
.desp-card .hd{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.desp-card .hd .fl{color:var(--mut)}
.desp-card .nums b{font-size:26px;letter-spacing:-.02em}
.desp-card .nums small{display:block;color:var(--mut);font-size:12.5px;margin-top:2px}
.elegir-pie{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:14px;color:#6b7280;font-size:13px}
.elegir-pie button{background:none;border:0;color:#9aa1b1;font:inherit;font-size:13.5px;cursor:pointer;padding:6px 14px;border-radius:9px}
.elegir-pie button:hover{background:rgba(255,255,255,.07);color:#fff}
@media (max-width:760px){.elegir-cab h1{font-size:24px}.desps{flex-direction:column;width:100%}.desp-card{width:100%}}
/* filtros: el estado como un solo mando */
.segs{display:inline-flex;background:var(--soft);border-radius:11px;padding:3px;gap:2px}
.segs a{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:8px;font-size:13.5px;font-weight:520;color:var(--ink2)}
.segs a:hover{color:var(--ink)}
.segs a.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(20,30,50,.1)}
.sepf{width:1px;height:22px;background:var(--line);margin:0 4px}
/* las tarjetas se levantan un poco al pasar */
.tarjeta,.tj{transition:box-shadow .14s, transform .14s, border-color .14s}
.tarjeta:hover,.tj:hover{transform:translateY(-1px);box-shadow:0 12px 26px -16px rgba(20,30,50,.3);border-color:#e0e4ea}

/* =====================================================================
   1.4 · DISEÑO
   Una sola capa que manda sobre todo lo anterior: superficie, ritmo,
   tipografía y color. La página deja de ser un folio en blanco: el
   contenido vive en paneles, y cada cosa tiene su peso.
   ===================================================================== */
:root{
  --fondo:#f4f6f8; --sup:#fff; --sup2:#fafbfc;
  --line:#e6e9ef; --line2:#f0f2f6;
  --ink:#12141a; --ink2:#454c59; --mut:#848b99;
  --az:#1a3a6b; --az2:#234a85; --az-l:#eef2f9;
  --r1:10px; --r2:14px; --r3:18px;
  --sh1:0 1px 2px rgba(18,22,32,.05);
  --sh2:0 1px 2px rgba(18,22,32,.05), 0 10px 22px -14px rgba(18,22,32,.35);
  --sh3:0 24px 48px -20px rgba(18,22,32,.35), 0 0 0 1px rgba(18,22,32,.05);
}
body{background:var(--fondo);color:var(--ink);letter-spacing:-.01em}
.cuerpo{background:var(--fondo)}
.w{padding:32px 36px 90px}
h1{font-size:28px;font-weight:700;letter-spacing:-.032em;line-height:1.15}
h2{font-size:15.5px;font-weight:650;letter-spacing:-.015em}
.lb{font-size:11px;letter-spacing:.1em}

/* ---- El panel: la pieza sobre la que se apoya todo ---- */
.panel{background:var(--sup);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh1)}
.panel-cab{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line2)}
.panel-cab h2{margin:0}
.panel-cab .n{color:var(--mut);font-size:12.5px;font-weight:560;background:var(--sup2);border:1px solid var(--line2);border-radius:99px;padding:1px 8px}

/* ---- La cabecera de cada pantalla ---- */
.hilo{font-size:12.5px;margin:0 0 12px;letter-spacing:-.005em}
.cabp{margin:0 0 22px}
.cabp .sub{font-size:13.5px;margin:7px 0 0}

/* ---- Botones ---- */
.btn{height:38px;border-radius:var(--r1);font-weight:560;border-color:var(--line);box-shadow:var(--sh1)}
.btn:hover{border-color:#d8dce4;background:#fff}
.btn.p{background:var(--az);border-color:var(--az);color:#fff;box-shadow:0 1px 2px rgba(26,58,107,.3),0 6px 14px -8px rgba(26,58,107,.6)}
.btn.p:hover{background:var(--az2);border-color:var(--az2)}
.btn.g{box-shadow:none;background:transparent;border-color:transparent}
.btn.g:hover{background:rgba(18,22,32,.05)}
.btn.s{height:32px;border-radius:9px}
.ib{border-radius:9px}
.ib:hover{background:rgba(18,22,32,.05)}

/* ---- Campos ---- */
.in,.fld input:not([type=checkbox]):not([type=radio]),.fld select,.fld textarea{border-color:var(--line);border-radius:var(--r1);background:#fff;box-shadow:var(--sh1)}
.in:focus,.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:#a9bcd8;box-shadow:0 0 0 3.5px rgba(26,58,107,.1)}
.fld>span{font-size:12.5px;font-weight:560;color:var(--ink2)}
.buscador .in{height:46px;font-size:14.5px}
.buscador kbd{background:var(--sup2);border:1px solid var(--line);border-radius:7px;padding:3px 7px;font-size:11px;color:var(--mut);font-family:inherit}

/* ---- Pastillas de estado ---- */
.cd{height:25px;font-size:12px;font-weight:620;letter-spacing:-.01em}
.fe{height:25px;font-size:12px;font-weight:620;letter-spacing:-.01em;border:1px solid transparent}
.fe.n{background:var(--sup2);border-color:var(--line2);color:var(--ink2)}
.fe.a{background:#fdf4e4;border-color:#f6e4c4;color:#a9690a}
.fe.r{background:#fdedf0;border-color:#f8d6dd;color:#c22a41}
.chip{border-radius:var(--r1);border-color:var(--line);box-shadow:var(--sh1);font-size:13.5px}
.segs{background:#eceff3;border:1px solid var(--line2)}

/* ---- Las tres carpetas: paneles de verdad ---- */
.secc{background:var(--sup);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh1);margin:0 0 14px;overflow:hidden}
.secc .hd{margin:0;padding:13px 14px 13px 12px;min-height:54px;border-radius:0;border-bottom:1px solid var(--line2)}
.secc .hd:hover{background:var(--sup2)}
.secc>.hijos{padding:6px}
.secc .hd h2{font-size:15.5px}
.secc .hd .n{color:var(--mut);font-size:12.5px;font-weight:560}
.fila{min-height:46px;border-radius:var(--r1)}
.fila:hover{background:var(--sup2)}
.fila .nm{font-size:14px}
.fila.car .nm{font-weight:580}
.fila .meta{font-size:12.5px}
.soltar{margin:6px;border-color:#e2e6ec;background:var(--sup2)}

/* ---- Lista de expedientes: un panel con líneas finas ---- */
.lista{overflow:hidden}
.lista .ex{min-height:58px;padding:0 18px;border-radius:0;border-bottom:1px solid var(--line2)}
.lista .ex:last-child{border-bottom:0}
.lista .ex:hover{background:var(--sup2)}
.lista .ex b{font-size:14.5px;font-weight:620}
.rejilla{gap:14px}
.tarjeta,.tj{background:var(--sup);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh1)}
.tarjeta:hover,.tj:hover{box-shadow:var(--sh2);border-color:#dde2ea;transform:translateY(-2px)}
.tarjeta b,.tj b{font-size:15.5px;font-weight:650;letter-spacing:-.02em}

/* ---- Cifras de cabecera (inicio) ---- */
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 20px}
.cifra{background:var(--sup);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh1);padding:16px 18px;display:block;color:inherit}
a.cifra:hover{border-color:#dde2ea;box-shadow:var(--sh2)}
.cifra .k{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.cifra .v{font-size:30px;font-weight:700;letter-spacing:-.04em;margin:8px 0 0;line-height:1}
.cifra .v small{font-size:13px;font-weight:500;color:var(--mut);letter-spacing:-.01em;margin-left:7px}
.cifra.al .v{color:var(--rojo)}

/* ---- El calendario ---- */
.mes{border-radius:var(--r3);border-color:var(--line);box-shadow:var(--sh1);padding:0;overflow:hidden}
.mescab{padding:16px 18px 14px}
.mescab b{font-size:16.5px;letter-spacing:-.02em}
.dows{padding:0 8px 8px;background:var(--sup2);border-bottom:1px solid var(--line2);margin:0 0 6px}
.dows span{padding:8px 0 0 10px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.rej-mes{grid-auto-rows:78px;gap:2px;padding:0 6px 6px}
.cel{border-radius:var(--r1);padding:7px 9px}
.cel .d{font-size:13px;font-weight:600}
.cel.hoy{background:var(--az);box-shadow:0 4px 12px -4px rgba(26,58,107,.55)}
.mk{width:6px;height:6px}
.globo{border-radius:var(--r2);box-shadow:var(--sh3);padding:10px}
.globo .dia2{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;padding:2px 6px 6px}
.mes.chico{border:0;box-shadow:none;padding:0}
.mes.chico .dows{background:none;border:0;padding:0 0 4px;margin:0}
.mes.chico .rej-mes{padding:0}

/* ---- El lateral del expediente ---- */
.dosc{gap:26px}
.dosc>aside{width:292px}
aside .lb{margin:0 0 10px}
.ladoP{background:var(--sup);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh1);padding:14px}
.ladoP+.ladoP{margin-top:14px}
.venc{border-radius:9px}
.falt .row{min-height:34px}

/* ---- Lo leído (propuestas) ---- */
.prop{background:var(--sup);border-color:var(--line);border-radius:var(--r3);box-shadow:var(--sh1);padding:14px 18px;position:relative;overflow:hidden}
.prop::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ambar)}

/* ---- Tablas y cajas ---- */
.tabla{background:var(--sup);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh1);overflow:hidden;border-collapse:separate;border-spacing:0}
.tabla th{background:var(--sup2);padding:11px 14px;border-bottom:1px solid var(--line2)}
.tabla td{padding:12px 14px;border-bottom:1px solid var(--line2)}
.tabla tr:last-child td{border-bottom:0}
.caja-ajuste{background:var(--sup);border-radius:var(--r3);border-color:var(--line);box-shadow:var(--sh1);padding:20px 22px}
.bloq{background:var(--sup);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh1);padding:6px 14px}
.bloq .row{border-color:var(--line2)}
.grupo{border-top-color:var(--line2)}
.encontrado{background:var(--sup);border-color:var(--line);border-radius:var(--r3);box-shadow:var(--sh1)}
.card{border-color:var(--line);border-radius:var(--r3);box-shadow:var(--sh1)}
.mats a{font-size:14px}
.drive{margin-top:30px}

/* ---- Diálogos ---- */
dialog{border-radius:20px;box-shadow:0 40px 80px -30px rgba(10,14,22,.55)}
dialog::backdrop{background:rgba(14,18,26,.42);backdrop-filter:blur(2px)}
dialog .dc{padding:24px}
dialog .dc h3{font-size:17px;letter-spacing:-.02em}

/* ---- El rail ---- */
.top{width:242px;padding:16px 12px 12px;background:var(--rail);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.05)}
.top .marca{min-height:40px;font-size:14.5px;letter-spacing:-.015em}
.top>.btn.p{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);color:#fff;box-shadow:none;font-weight:560}
.top>.btn.p:hover{background:rgba(255,255,255,.16)}
.top .nav a{font-size:14px;letter-spacing:-.01em}
.top .yo summary .nb{letter-spacing:-.01em}

@media (max-width:760px){
  .w,.w.estrecho{padding:18px 14px 110px}
  h1{font-size:23px}
  .cifras{grid-template-columns:1fr 1fr;gap:10px}
  .cifra{padding:13px 14px}
  .cifra .v{font-size:24px}
  .dosc{gap:20px}
  .top{width:auto;padding:0 14px}
}
/* el mes, con lo que vence escrito en la casilla */
.rej-mes{grid-auto-rows:88px}
span.ev{display:block;font-size:11.5px;font-weight:560;line-height:1.3;color:var(--ink2);background:var(--sup2);
  border:1px solid var(--line2);border-left:2px solid #c9ced8;border-radius:6px;padding:3px 6px;margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
span.ev.a{background:#fdf6ea;border-color:#f4e5c9;border-left-color:var(--ambar);color:#95600b}
span.ev.r{background:#fdeef1;border-color:#f8dae0;border-left-color:var(--rojo);color:#bc2a40}
.evq{display:block;font-size:11px;color:var(--mut);margin-top:4px;padding-left:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cel.hoy .ev{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.18);border-left-color:#fff;color:#fff}
.cel.hoy .evq{color:rgba(255,255,255,.7)}
.cel.tiene:hover{background:var(--sup2)}
/* la línea de «esta semana» */
.semanilla{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--sup);border:1px solid var(--line);
  border-radius:var(--r2);box-shadow:var(--sh1);padding:11px 14px;margin:14px 0 0;font-size:13.5px;color:var(--mut)}
.semanilla a{color:var(--ink2);font-weight:560}
.semanilla a:hover{color:var(--az)}
.semanilla .k{display:inline-flex;align-items:center;gap:7px;color:var(--mut);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em}
.semanilla .pt{color:#c9ced8}
/* la lista con caras */
.ex{grid-template-columns:30px minmax(0,1.25fr) minmax(0,1.5fr) 86px 100px 26px 92px;gap:14px}
.ex .qn{display:flex;justify-content:center}
.ex .fa{color:var(--ink2);font-weight:520}
.ex .nu{font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .ex{grid-template-columns:30px minmax(0,1fr) auto;row-gap:0;padding:10px 14px}
  .ex .as{grid-column:2;grid-row:2}
  .ex .qn{display:none}
}
.lista>div:last-child .ex{border-bottom:0}
.rej-mes{grid-template-columns:repeat(7,minmax(0,1fr))}
.cel{min-width:0;overflow:hidden}
.marcas.estrecho{display:none}
@media (max-width:760px){
  span.ev,.evq{display:none}
  .marcas.estrecho{display:flex}
  .rej-mes{grid-auto-rows:62px}
}
/* formularios largos dentro de un panel */
.formp{padding:4px 24px 24px}
.formp .grupo:first-child{border-top:0;padding-top:22px}
.formp .acciones{border-top-color:var(--line2);margin-top:4px}
.w.estrecho .panel .fld:last-of-type{margin-bottom:0}

/* =====================================================================
   El chat de la portada
   ===================================================================== */
.w.chat{max-width:860px;padding:0 28px;height:calc(100vh - 0px);display:flex;flex-direction:column}
.chat{display:flex;flex-direction:column;flex:1;min-height:0}
.ch-hilo{flex:1;overflow-y:auto;padding:30px 0 16px;scroll-behavior:smooth}
.ch-hilo::-webkit-scrollbar{width:8px}
.ch-hilo::-webkit-scrollbar-thumb{background:#dfe3ea;border-radius:8px}

.ch-hola{padding:8vh 0 0;text-align:center}
.ch-hola h1{font-size:32px;margin:0 0 10px}
.ch-hola p{color:var(--mut);font-size:15px;max-width:520px;margin:0 auto 26px}
.ch-res{display:flex;gap:10px;justify-content:center;margin:0 0 26px;flex-wrap:wrap}
.ch-res .r{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--sup);border:1px solid var(--line);
  border-radius:var(--r2);box-shadow:var(--sh1);padding:12px 20px;min-width:104px;color:inherit}
.ch-res .r:hover{border-color:#dde2ea;box-shadow:var(--sh2)}
.ch-res .r b{font-size:24px;font-weight:700;letter-spacing:-.03em}
.ch-res .r span{font-size:12px;color:var(--mut)}

.ch-msg{display:flex;gap:11px;margin:0 0 22px;align-items:flex-start}
.ch-msg.yo{justify-content:flex-end}
.ch-msg.yo .b{background:var(--az);color:#fff;border-radius:16px 16px 4px 16px;padding:10px 15px;max-width:78%;font-size:14.5px;
  box-shadow:0 2px 6px -2px rgba(26,58,107,.45)}
.ch-msg.ev .b{background:var(--sup);border:1px solid var(--line);border-radius:4px 16px 16px 16px;box-shadow:var(--sh1);
  padding:14px 16px;max-width:92%;min-width:0;flex:1}
.ic-ev{width:28px;height:28px;border-radius:9px;background:var(--rail);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:700;flex:none;margin-top:2px}
.ch-t{margin:0 0 10px;font-size:14.5px;line-height:1.5}
.ch-t:last-child{margin-bottom:0}
.ch-t b{font-weight:650}
.ch-lista{display:flex;flex-direction:column;gap:2px;margin:0 0 6px}
.ch-fila{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r1);color:inherit;min-height:46px}
.ch-fila:hover{background:var(--sup2)}
.ch-fila .t{flex:1;min-width:0}
.ch-fila .t b{display:block;font-weight:580;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-fila .t small{display:block;color:var(--mut);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-mas{color:var(--mut);font-size:13px;padding:4px 10px}
.ch-ficha{border:1px solid var(--line2);border-radius:var(--r2);overflow:hidden;margin:0 0 10px}
.ch-ficha .cab{display:flex;align-items:center;gap:12px;padding:13px 14px;background:var(--sup2);border-bottom:1px solid var(--line2);color:inherit}
.ch-ficha .cab:hover{background:#f4f6f9}
.ch-ficha .cab .t{flex:1;min-width:0}
.ch-ficha .cab .t b{display:block;font-weight:650;font-size:15px}
.ch-ficha .cab .t small{color:var(--mut);font-size:12.5px}
.ch-ficha .dd{display:flex;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line2);font-size:13.5px}
.ch-ficha .dd:last-child{border-bottom:0}
.ch-ficha .dd span{color:var(--mut);width:104px;flex:none}
.ch-ficha .dd b{font-weight:560;min-width:0}
.ch-chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.ch-chips.grande{justify-content:center;margin:0}
.ch-chip{background:var(--sup);border:1px solid var(--line);border-radius:99px;padding:8px 15px;font:inherit;font-size:13.5px;
  color:var(--ink2);cursor:pointer;box-shadow:var(--sh1)}
.ch-chip:hover{border-color:var(--az);color:var(--az)}
.ch-bot{display:flex;gap:8px;margin:12px 0 0;flex-wrap:wrap}

.ch-caja{padding:0 0 20px;flex:none}
.ch-in{display:flex;align-items:flex-end;gap:8px;background:var(--sup);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 2px 6px -2px rgba(18,22,32,.08), 0 14px 30px -20px rgba(18,22,32,.5);padding:8px 8px 8px 16px}
.ch-in:focus-within{border-color:#a9bcd8;box-shadow:0 0 0 3.5px rgba(26,58,107,.1), 0 14px 30px -20px rgba(18,22,32,.5)}
.ch-in textarea{flex:1;border:0;outline:none;resize:none;font:inherit;font-size:15px;line-height:1.45;padding:9px 0;
  max-height:140px;background:none;min-width:0}
.ch-env{width:36px;height:36px;border-radius:12px;border:0;background:var(--az);color:#fff;display:flex;align-items:center;
  justify-content:center;cursor:pointer;flex:none}
.ch-env:hover{background:var(--az2)}
.ch-pie{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:12px;padding:9px 6px 0}
.ch-pie span{display:inline-flex;align-items:center;gap:6px}
.ch-pie .ic{opacity:.5}
.ch-pensando{display:flex;gap:5px;padding:4px 0}
.ch-pensando i{width:6px;height:6px;border-radius:50%;background:#c8cdd6;animation:chp 1s infinite}
.ch-pensando i:nth-child(2){animation-delay:.15s} .ch-pensando i:nth-child(3){animation-delay:.3s}
@keyframes chp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (max-width:760px){
  .w.chat{padding:0 14px;height:calc(100vh - 56px)}
  .ch-hilo{padding:16px 0 10px}
  .ch-hola{padding:4vh 0 0}
  .ch-hola h1{font-size:25px}
  .ch-caja{padding:0 0 calc(86px + env(safe-area-inset-bottom))}
  .ch-msg.ev .b{max-width:100%}
  .ch-res .r{padding:10px 14px;min-width:88px}
}

/* ---- El recorrido de «Nuevo expediente» ---- */
.pasosw{display:flex;align-items:center;gap:6px;list-style:none;margin:0 0 18px;padding:0;flex-wrap:wrap}
.pasosw li{display:flex;align-items:center;gap:9px;padding:8px 14px 8px 10px;border-radius:99px;color:var(--mut);
  font-size:13.5px;font-weight:540;cursor:pointer;background:var(--sup);border:1px solid var(--line);box-shadow:var(--sh1)}
.pasosw li .n{width:22px;height:22px;border-radius:50%;background:var(--sup2);border:1px solid var(--line);color:var(--mut);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:650;flex:none}
.pasosw li:hover{border-color:#d8dce4;color:var(--ink2)}
.pasosw li.ya{color:var(--ink2)}
.pasosw li.ya .n{background:var(--verde-l);border-color:#cfe9dd;color:var(--verde)}
.pasosw li.on{background:var(--az);border-color:var(--az);color:#fff;box-shadow:0 2px 6px -2px rgba(26,58,107,.5)}
.pasosw li.on .n{background:rgba(255,255,255,.2);border-color:transparent;color:#fff}
.paso .grupo:first-child{border-top:0;padding-top:22px}
.pasosnav{display:flex;align-items:center;gap:8px}
#avisoPaso{margin:0 0 14px}
.chip .av{margin:-2px 2px -2px -4px}
@media (max-width:760px){
  .pasosw li .x{display:none}
  .pasosw li.on .x{display:inline}
  .pasosw{gap:4px}
  .pasosw li{padding:7px 11px}
}
.descrip{background:var(--sup);border:1px solid var(--line);border-left:3px solid var(--az);border-radius:var(--r2);
  box-shadow:var(--sh1);padding:14px 18px;margin:0 0 18px;font-size:14.5px;line-height:1.55;color:var(--ink2);max-width:860px}

/* =====================================================================
   RITMO · la proporción entre las cosas
   Una sola escala de espacios (4·8·12·16·24·32) para todo. Nada a ojo.
   ===================================================================== */
:root{--e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:24px;--e6:32px}

/* La página: hilo → título → contenido, siempre igual */
.w{padding:var(--e6) var(--e6) 96px}
.hilo{margin:0 0 var(--e3)}
.cabp{margin:0 0 var(--e5);align-items:flex-start}
.cabp .sub{margin:var(--e2) 0 0}
.pasosw{margin:0 0 var(--e5)}

/* La cabecera de un expediente */
.cabexp{gap:var(--e4);margin:0 0 var(--e4)}
.cabexp .meta{margin-top:var(--e1)}
.descrip{max-width:none;margin:0 0 var(--e5);padding:var(--e3) var(--e4);border-radius:var(--r2)}
.steps{margin:0 0 var(--e5);gap:var(--e3)}
.prop{margin:0 0 var(--e3);padding:var(--e3) var(--e4)}

/* Los paneles: mismo aire dentro y entre ellos */
.secc{margin:0 0 var(--e4)}
.secc .hd{min-height:52px;padding:var(--e3) var(--e3) var(--e3) var(--e3);gap:var(--e2)}
.secc>.hijos{padding:var(--e2) var(--e2) var(--e3)}
.secc .hd h2{margin-right:var(--e1)}
.fila{min-height:44px;padding:var(--e1) var(--e2) var(--e1) calc(var(--e3) + var(--n, 0) * 24px)}
.fila .der{gap:var(--e2)}
.addt{padding:var(--e1) var(--e2) var(--e1) calc(var(--e3) + var(--n, 0) * 24px)}
.addt button{padding:6px var(--e1)}
.soltar{margin:var(--e2) var(--e1) var(--e1);padding:var(--e4) var(--e3)}
.notaln{margin:-2px 0 var(--e1)}

/* Las dos columnas */
.dosc{gap:var(--e5)}
.dosc>aside{width:300px}
.ladoP{padding:var(--e4)}
.ladoP+.ladoP{margin-top:var(--e4)}
.ladoP .lb{margin:0 0 var(--e3)}
.venc{min-height:36px;padding:var(--e1) var(--e2)}
.equipo{gap:var(--e2)}
.falt .row{min-height:32px;padding:0 var(--e1)}

/* Listas y rejillas */
.rejilla{gap:var(--e4)}
.tarjeta{padding:var(--e4)}
.lista .ex{min-height:56px;padding:0 var(--e4)}
.filtros{margin:0 0 var(--e4);gap:var(--e2)}
.buscador{margin:0 0 var(--e4) !important}
.cifras{gap:var(--e4);margin:0 0 var(--e4)}
.cifra{padding:var(--e4)}

/* El calendario */
.mescab{padding:var(--e4) var(--e4) var(--e3)}
.rej-mes{padding:0 var(--e2) var(--e2);gap:var(--e1)}
.cel{padding:var(--e2)}
.marcas{margin-top:var(--e2)}
.mes.chico .rej-mes{padding:0;gap:2px}
.mes.chico .mescab{padding:var(--e1) var(--e1) var(--e3)}

/* Formularios */
.formp{padding:0 var(--e5) var(--e5)}
.grupo{padding:var(--e5) 0;gap:var(--e5)}
.paso .grupo:first-child,.formp .grupo:first-child{padding-top:var(--e5)}
.fld{margin:0 0 var(--e4)}
.acciones{padding-top:var(--e5)}
.g2{gap:0 var(--e4)}
.chips{gap:var(--e2)}

/* El chat */
.ch-msg{margin:0 0 var(--e5)}
.ch-msg.ev .b{padding:var(--e3) var(--e4)}
.ch-fila{padding:var(--e2) var(--e2);min-height:44px}
.ch-ficha{margin:0 0 var(--e3)}
.ch-ficha .dd{padding:var(--e2) var(--e3)}

/* ---- El asistente: piezas nuevas ---- */
.pest{display:flex;gap:4px;background:#eceff3;border:1px solid var(--line2);border-radius:12px;padding:3px;margin:0 0 var(--e4);align-self:flex-start;width:max-content;max-width:100%}
.pest a{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:9px;font-size:13.5px;font-weight:540;color:var(--ink2)}
.pest a:hover{color:var(--ink)}
.pest a.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(20,30,50,.1)}
.pest a .ic{opacity:.7}
.chat.exp{height:calc(100vh - 210px);min-height:420px}
.ch-flojo{color:var(--mut);font-size:13.5px}
.ch-ojo{display:flex;align-items:center;gap:9px;background:#fdf6ea;border:1px solid #f4e5c9;border-radius:12px;
  padding:10px 12px;margin:0 0 10px;font-size:13.5px;color:#8a5f0b}
.ch-ojo .ic{flex:none}
.ch-recap{display:flex;gap:var(--e2);flex-wrap:wrap;margin:0 0 var(--e3)}
.ch-r{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2);background:var(--sup2);
  border:1px solid var(--line2);border-radius:99px;padding:5px 11px}
.ch-r b{font-weight:600}
.ch-r::before{content:'✓';color:var(--verde);font-weight:700}
.ch-r.falta{color:var(--mut);border-style:dashed}
.ch-r.falta::before{content:'·';color:var(--mut)}
.ch-mini{display:flex;align-items:center;gap:10px;background:var(--sup2);border:1px solid var(--line2);
  border-radius:12px;padding:10px 12px;margin:0 0 10px}
.ch-mini .t{flex:1;min-width:0}
.ch-mini .t b{display:block;font-size:14px;font-weight:620}
.ch-mini .t small{display:block;color:var(--mut);font-size:12.5px}
.ch-tiempo{margin:0 0 var(--e2)}
.ch-linea{display:flex;gap:12px;padding:7px 2px;align-items:flex-start}
.ch-linea .cu{width:78px;flex:none;color:var(--mut);font-size:12.5px;padding-top:2px;text-align:right}
.ch-linea .pt{width:9px;flex:none;display:flex;flex-direction:column;align-items:center;padding-top:5px}
.ch-linea .pt i{width:7px;height:7px;border-radius:50%;background:#c9ced8;display:block}
.ch-linea .pt s{flex:1;width:1.5px;background:var(--line);display:block;margin-top:4px;min-height:12px}
.ch-linea .q{flex:1;min-width:0;font-size:13.8px;line-height:1.45}
.ch-linea .q em{font-style:normal;color:var(--mut)}
.ch-linea.hoy .pt i{background:var(--az)}
.ch-lista .ch-fila .cd{flex:none}
@media (max-width:760px){
  .chat.exp{height:calc(100vh - 250px)}
  .pest a{padding:0 11px;font-size:13px}
  .ch-linea .cu{width:60px;font-size:11.5px}
}
.ch-dia{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);
  padding:10px 0 4px 90px;margin:0}
.ch-tiempo>.ch-dia:first-child{padding-top:2px}
@media (max-width:760px){.ch-dia{padding-left:72px}}

/* ===========================================================
   1.6.1 — EL TABLERO DE CASILLAS
   El historial no aporta: lo que aporta son cosas que se pulsan.
   Cada casilla es un objeto real del expediente y cuenta su historia.
   =========================================================== */
.ch-casos{display:flex;flex-direction:column;gap:var(--e1);margin:0 0 var(--e3)}
.ch-caso{display:flex;align-items:center;gap:var(--e3);width:100%;text-align:left;
  background:var(--sup);border:1px solid var(--line);border-radius:12px;
  padding:var(--e2) var(--e3);cursor:pointer;font:inherit;color:inherit;
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease}
.ch-caso:hover{border-color:#d6dae3;box-shadow:0 2px 10px rgba(20,30,50,.07);transform:translateY(-1px)}
.ch-caso:active{transform:none;box-shadow:none}
.ch-caso:focus-visible{outline:2px solid var(--az);outline-offset:2px}
.ch-caso .ic-w{width:34px;height:34px;flex:none;border-radius:10px;background:var(--soft);
  display:inline-flex;align-items:center;justify-content:center}
.ch-caso .ic-w .ic{display:block}
.ch-caso .t{flex:1;min-width:0}
.ch-caso .t b{display:block;font-size:14.2px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.ch-caso .t small{display:block;font-size:12.5px;color:var(--mut);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-caso .cd{flex:none}
.ch-caso .fl{flex:none;color:#c3c8d2;display:inline-flex;align-items:center;transition:color .14s ease, transform .14s ease}
.ch-caso:hover .fl{color:var(--ink2);transform:translateX(2px)}

/* Lo que urge se marca por el borde, no a gritos. */
.ch-caso.urge{border-color:#f3cfd6}
.ch-caso.urge .ic-w{background:var(--rojo-l)}
.ch-caso.urge:hover{border-color:#e9b6c0;box-shadow:0 2px 10px rgba(212,56,78,.12)}
.ch-caso.hecho .t b{color:var(--ink2)}
.ch-caso.hecho .ic-w{background:var(--verde-l)}

.ch-caso + .ch-mas{margin-top:2px}
form.o{display:inline-flex;margin:0}

@media (max-width:760px){
  .ch-caso{gap:var(--e2);padding:var(--e2)}
  .ch-caso .ic-w{width:30px;height:30px;border-radius:9px}
  .ch-caso .t b{font-size:13.6px}
  .ch-caso .fl{display:none}
}
.ch-lb{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--mut);margin:var(--e4) 0 var(--e2)}
.ch-casos + .ch-mas{margin:calc(var(--e3) * -1) 0 var(--e3);padding-left:var(--e3)}

/* 1.6.2 — Los menús de «⋯» no se cortan: la tarjeta de la carpeta ya no
   recorta lo que sobresale; las esquinas se redondean en sus piezas. */
.secc{overflow:visible}
.secc>.hd{border-radius:var(--r3) var(--r3) 0 0}
.secc>:last-child{border-bottom-left-radius:var(--r3);border-bottom-right-radius:var(--r3)}
.secc details.desp[open]{position:relative;z-index:40}
/* Si abajo no cabe, el menú se abre hacia arriba. */
.menu.arriba{top:auto !important;bottom:40px}

/* 1.6.2 — La nota se ve desde fuera: línea ámbar y una pastilla con el
   principio de lo escrito. Se pulsa y se abre entera. */
.nt{background:#e7b456}
.nt:hover{background:#c27a12}
.pn{display:inline-flex;align-items:center;gap:5px;height:25px;max-width:240px;padding:0 9px;border-radius:99px;
  background:#fdf6e7;border:1px solid #f3e1b9;color:#8a5f0b;font:inherit;font-size:12px;font-weight:560;cursor:pointer;flex:none}
.pn span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn .ic{flex:none}
.pn:hover{background:#fbeccc;border-color:#ecd29a}
.hd .pn{margin-right:var(--e2)}
@media (max-width:760px){ .pn{padding:0 7px} .pn span{display:none} }

/* =====================================================================
   1.6.3 · PROPORCIÓN
   Una sola escala de controles y un mismo borde izquierdo en todas las
   pantallas. Todo lo de abajo corrige reglas que chocaban entre sí.
   ===================================================================== */

/* -- El borde izquierdo: todas las pantallas empiezan en el mismo sitio.
      Las estrechas lo son por la derecha, no se centran. -- */
.w.estrecho{max-width:1180px}
.w.estrecho>*{max-width:880px}

/* -- Controles: 40 px los normales, 34 px los compactos. Mismo radio,
      mismo relleno, y el mismo desplegable en todos los selectores. -- */
.in,.fld input,.fld select,select.in{height:40px;padding:0 12px;border-radius:10px;font-size:14px}
.in.s,.enlinea .in,.add .in,.mas .in{height:34px}
textarea.in,.fld textarea{height:auto;padding:10px 12px}
.btn{height:40px}
.btn.s{height:34px;padding:0 12px}
select.in,.fld select,input[list].in,.fld input[list]{
  -webkit-appearance:none;appearance:none;padding-right:36px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa0ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center}
input[list]::-webkit-calendar-picker-indicator{opacity:0}

/* -- Filtros: pastillas del mismo tamaño y sin sangría propia, para que
      caigan sobre el mismo borde que el buscador. -- */
.filtros.fchips{padding:0;gap:8px;margin:0 0 var(--e4)}
.filtros.fchips .chip,.filtros.fchips summary.chip{height:34px;font-size:13.5px}
.filtros.fchips .chip.on{font-weight:600}

/* -- Tarjetas de expediente: misma altura en cada fila y cada línea en
      el mismo sitio, tenga o no plazo. -- */
a.tj{display:flex;flex-direction:column}
.tj-top{min-height:26px;margin-bottom:10px}
.tj-pie{margin-top:auto;padding-top:14px}

/* -- «Cambiar el cálculo» del plazo leído, alineado con su texto. -- */
.prop .prop-mas{flex-basis:100%;margin-left:34px}
.prop .prop-mas summary{font-size:13px;cursor:pointer;display:inline-block}

/* -- Lo que falta del cliente: tres botones iguales que llenan la fila. -- */
.acc3{display:flex;flex-wrap:wrap;gap:8px;margin:var(--e3) 0 0}
.acc3>*{flex:1 1 auto}
.acc3>form{display:flex}
.acc3 .btn{width:100%}

/* -- Ajustes: sin hueco muerto bajo el título de Drive. -- */
.caja-ajuste h2 + .drive{margin-top:var(--e2)}

/* -- El «Atrás» del recorrido cae sobre el borde de las etiquetas. -- */
#aAtras{margin-left:-12px}

/* -- Registro: separadores de día y filas iguales. -- */
.reg-dia{margin:var(--e5) 0 var(--e2)}
.reg-dia:first-of-type{margin-top:0}
.reg-fila{border-bottom:1px solid var(--line2);border-radius:0;min-height:48px}
.reg-fila .der{font-variant-numeric:tabular-nums}

/* -- Panel del cliente: el icono de cada casilla a la misma altura aunque
      el texto ocupe una o dos líneas. -- */
.falta .f{justify-content:flex-start;padding-top:22px}

/* -- Móvil: el alto del asistente lo mide app.js (lo que queda entre su
      borde de arriba y la barra de abajo); aquí sólo lo que sobra. -- */
@media (max-width:760px){
  .chat .ch-pie>span:first-child{display:none}
  .prop .prop-mas{margin-left:0}
  /* Las filas de carpeta: el nombre primero. Fuera lo accesorio. */
  /* Cada fila: nombre y, a la derecha, sólo la fecha y el «⋯». Lo demás
     (ojo, contador, pastilla de nota, «+» de subcarpeta) se queda para el
     ordenador; la línea ámbar sigue marcando la nota. */
  .fila .nm,.secc .hd h2{flex:1 1 0;min-width:0}
  .fila .vc,.secc .hd .vc,.fila .der .pn,.secc .hd .pn,.fila.car .der .cn,.secc .hd .n,
  .fila.car .der .hov details.desp:first-child{display:none}
  .fila .der{flex:none;gap:6px}
  .fila .der .hov{display:flex;flex-wrap:nowrap}
}
.color40{width:34px;height:34px;flex:none;border:1px solid var(--line);border-radius:10px;padding:3px;background:#fff;cursor:pointer}
.formp > div.grupo:first-of-type{border-top:0}
.grupo .g2 .fld,.grupo > div > .fld:last-child{margin-bottom:0}

@media (min-width:761px){.fila .vc{display:inline-flex}}
@media (max-width:760px){
  /* El nombre de la carpeta grande, entero: puede ir en dos líneas. */
  .secc .hd h2{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;font-size:15px}
}

/* =====================================================================
   1.7 · EL LANZADOR (sustituye a la conversación)
   ===================================================================== */
.cabl .sub{margin:6px 0 0;font-size:14.5px}
.lz{position:relative;margin:0 0 var(--e5)}
.lz .in{height:56px;font-size:16px;padding:0 56px 0 48px;border-radius:14px;
  box-shadow:0 1px 2px rgba(20,30,50,.05),0 8px 24px -12px rgba(20,30,50,.18)}
.lz .in::-webkit-search-cancel-button{display:none}
.lz .in:focus{border-color:#c9d3e4;box-shadow:0 0 0 4px rgba(26,58,107,.08),0 8px 24px -12px rgba(20,30,50,.18)}
.lz.modo .in{border-color:var(--az)}
.lz-lupa{position:absolute;left:17px;top:18px;color:var(--mut);pointer-events:none;display:flex}
.lz kbd{position:absolute;right:14px;top:17px;font:600 11px/20px inherit;color:var(--mut);border:1px solid var(--line);
  border-radius:6px;padding:0 7px;background:var(--sup2)}
.lz-dd{position:absolute;left:0;right:0;top:62px;z-index:60;background:var(--sup);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 22px 48px -14px rgba(20,30,50,.28);padding:var(--e2);max-height:min(62vh,560px);overflow-y:auto}
.lz-g{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:var(--e3) var(--e3) var(--e1)}
.lz-g:first-child{padding-top:var(--e2)}
.lz-vacio{color:var(--mut);font-size:14px;padding:var(--e2) var(--e3) var(--e1)}
.lz-it{display:flex;align-items:center;gap:var(--e3);padding:9px var(--e3);border-radius:10px;color:var(--ink);min-height:52px}
.lz-it.on{background:var(--az-l)}
.lz-it .t{flex:1;min-width:0}
.lz-it .t b{display:block;font-size:14.5px;font-weight:580;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lz-it .t small{display:block;color:var(--mut);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lz-it .k{flex:none;color:var(--mut);font-size:12.5px;opacity:0}
.lz-it.on .k{opacity:1}
.lz-ico{width:32px;height:32px;border-radius:9px;background:var(--soft);display:flex;align-items:center;justify-content:center;flex:none}

/* Accesos directos */
.tiles3,.tiles4{display:grid;gap:var(--e4);margin:0 0 var(--e6)}
.tiles3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{display:flex;align-items:center;gap:var(--e4);padding:18px 20px;background:var(--sup);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--sh1);color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-width:0;
  transition:border-color .14s, box-shadow .14s, transform .14s}
.tile:hover{border-color:#d6dae3;box-shadow:0 4px 14px -6px rgba(20,30,50,.16);transform:translateY(-1px)}
.tile>span:last-child{min-width:0}
.tile b{display:block;font-size:15px;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile small{display:block;color:var(--mut);font-size:13px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.ico.az{background:var(--az)} .ico.ro{background:var(--rojo-l)} .ico.cl{background:var(--az-l)} .ico.am{background:var(--ambar-l)} .ico.gr{background:var(--soft)}

/* Listas de la portada y columnas del resumen */
.dos2.portada,.dos2.resumen{gap:var(--e5)}
.lista-p{padding:var(--e1)}
.lista-p .row{min-height:58px;padding:var(--e2) var(--e3)}
.lista-p .row .t b{font-weight:600}
.lista-p .vacio{padding:var(--e5) var(--e3)}
a.ch-caso{text-decoration:none}
.resumen .ch-casos{margin:0}
.resumen .panel.vacio{padding:var(--e5)}
.mas-enl{display:inline-block;color:var(--mut);font-size:13px;margin:var(--e2) 0 0 var(--e3)}
.mas-enl:hover{color:var(--ink)}

@media (max-width:980px){ .tiles4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  .tiles3{grid-template-columns:1fr;gap:var(--e2)}
  .tiles4{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e2)}
  .tile{padding:14px}
  .tiles4 .tile small{display:none}
  .dos2.portada,.dos2.resumen{grid-template-columns:1fr}
  .lz .in{height:50px;font-size:15px}
  .lz kbd{display:none}
  .lz-lupa{top:15px}
  .lz-dd{top:56px;max-height:60vh}
}
@media (max-width:760px){ .tiles4 .tile b{white-space:normal;line-height:1.2} }

/* =====================================================================
   2.0 · PREMIUM — lo mejor de los entornos anteriores, en una sola capa
   ---------------------------------------------------------------------
   · Titulares en Source Serif 4; el resto en Inter.
   · Cada despacho tiene su color (--acento): la marca, el botón principal,
     la opción activa del menú y el paso actual. Así nunca hay duda de en
     qué despacho se está.
   · Los estados son píldoras de color lleno (los colores de Ciro):
       rojo = sin empezar / urge · amarillo huevo = en marcha ·
       verde con letra roja = presentado, esperando · verde = cerrado.
     Lo pasado de fecha lleva rayas diagonales.
   · Tarjetas blancas separadas sobre un lienzo claro, con el mismo aire
     dentro y entre ellas. Un solo borde izquierdo para todas las pantallas.
   ===================================================================== */
@font-face{font-family:"Source Serif 4";src:url(serif-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(serif-500.woff2) format('woff2');font-weight:500;font-display:swap}
:root{
  --acento:#1a3a6b;
  --lienzo:#f4f5f7;--sup:#fff;--sup2:#f8f9fb;--line:#e6e8ec;--line2:#eef0f3;
  --ink:#14171d;--ink2:#4a505c;--mut:#8b909a;
  --rail:#121a2b;--oro:#b8975a;
  --e-rojo:#d6283f;--e-amar:#f2b705;--e-verde:#11875e;
  --r:14px;--r2:14px;--sh1:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05);
  --sh2:0 12px 32px -12px rgba(16,24,40,.22);
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif}
body{background:var(--lienzo)}
.cuerpo{background:var(--lienzo)}

/* ---- Titulares ---- */
h1,.cabp h1,.cabl h1,.cabe h1{font-family:var(--serif);font-weight:600;letter-spacing:-.012em;font-size:30px;line-height:1.15}
.puerta h1,.entrar h1{font-family:var(--serif);font-weight:600}
.cabp .sub,.cabl .sub{font-size:14px;color:var(--mut);margin-top:6px}
.hilo{font-size:12.5px;color:var(--mut)}
.hilo a:hover{color:var(--acento)}
.lb{font-size:11px;letter-spacing:.09em;color:#8b909a;font-weight:650}

/* ---- El rail: oscuro, a toda la altura, con la marca del despacho ---- */
.top{background:var(--rail) !important;z-index:30}
.top .marca{padding:6px 8px 14px;margin:0 0 6px;border-bottom:1px solid rgba(255,255,255,.07);min-height:0}
.top .marca .lg{width:34px;height:34px;border-radius:9px;font-family:var(--serif);font-size:17px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;background:var(--acento) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.top .marca .nb{font-family:var(--serif);font-size:16px;font-weight:600;color:#fff;letter-spacing:-.005em;line-height:1.2;white-space:normal}
.top>.btn.p{height:40px;border-radius:10px;background:var(--acento) !important;border-color:transparent !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) !important}
.top>.btn.p:hover{filter:brightness(1.1)}
.top .nav a{position:relative;height:40px;border-radius:9px;color:rgba(255,255,255,.66)}
.top .nav a:hover{color:#fff;background:rgba(255,255,255,.05)}
.top .nav a.on{color:#fff;background:rgba(255,255,255,.08)}
.top .nav a.on::before{content:'';position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--oro)}
.top .lbr{color:rgba(255,255,255,.38);font-size:10.5px;letter-spacing:.12em}
.top .desps-r button{color:rgba(255,255,255,.72);height:36px;border-radius:9px}
.top .desps-r button:hover{color:#fff;background:rgba(255,255,255,.05)}
.top .desps-r .pu{width:9px;height:9px;border-radius:3px}

/* ---- Página ---- */
.w,.w.ancho{max-width:1240px}
.cabp,.cabl{margin-bottom:22px}

/* ---- Tarjetas y paneles: blancas, separadas, mismo aire ---- */
.panel,.tile,.tj,.secc,.ladoP,.cifra{background:var(--sup) !important;border:1px solid var(--line) !important;border-radius:var(--r) !important;box-shadow:var(--sh1) !important}
.tile:hover,.tj:hover{box-shadow:var(--sh2) !important;border-color:#dfe2e8 !important;transform:translateY(-1px)}
.tile .ico.az{background:var(--acento) !important}
.tile .ico.cl svg{stroke:var(--acento)}

/* ---- Botones ---- */
.btn.p{background:var(--acento) !important;border-color:var(--acento) !important;color:#fff !important}
.btn.p:hover{filter:brightness(1.08)}
.btn{border-radius:10px}
.chip.on,.segs a.on{border-color:var(--acento) !important;color:var(--acento) !important}
.segs a.on{background:#fff !important;box-shadow:var(--sh1)}
.vista a.on{color:var(--acento) !important}

/* ---- Píldoras de estado: color lleno y letra blanca ---- */
.cd,.fe,.fp{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;
  font-size:12px;font-weight:650;letter-spacing:.005em;white-space:nowrap;border:0 !important;line-height:1}
.cd svg{stroke:currentColor}
.cd.r,.fe.r{background:var(--e-rojo) !important;color:#fff !important}
.cd.a,.fe.a{background:var(--e-amar) !important;color:#fff !important;text-shadow:0 1px 1px rgba(90,60,0,.35)}
.cd.v,.fe.v{background:var(--e-verde) !important;color:#fff !important}
.cd.n,.fe.n{background:#eef0f3 !important;color:var(--ink2) !important}
.cd.pas,.fe.pas{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.3) 0 5px,transparent 5px 10px) !important}
.fp-encargo{background:var(--e-rojo);color:#fff}
.fp-documentos{background:var(--e-amar);color:#fff;text-shadow:0 1px 1px rgba(90,60,0,.35)}
.fp-presentado{background:var(--e-verde);color:#ff5a6a;text-shadow:0 0 1px rgba(255,255,255,.5),0 1px 1px rgba(0,0,0,.25)}
.fp-resuelto{background:var(--e-verde);color:#fff}

/* ---- Expedientes en tarjetas ---- */
.tj{padding:18px 20px !important}
.tj b{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:-.005em}
.tj .tj-pie{align-items:center}
.tj .tj-pie .barra i.on{background:var(--acento) !important}

/* ---- Expedientes en lista: una tarjeta por expediente, columnas fijas ---- */
.ex-h,.exl .ex{display:grid;grid-template-columns:104px minmax(0,1fr) 128px 150px 104px 110px;align-items:center;column-gap:18px}
.ex-h{padding:18px 20px 8px;font-size:11.5px;font-weight:600;color:#8b909a;letter-spacing:.02em}
.exl{display:flex;flex-direction:column;gap:10px;background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important}
.exl>div{display:block}
.exl .ex{min-height:68px;padding:12px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1);transition:box-shadow .15s,transform .15s}
.exl .ex:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.exl .ex .nu{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums;font-weight:560}
.exl .ex .qc{display:flex;align-items:center;gap:12px;min-width:0}
.exl .ex .qc .tt{display:flex;flex-direction:column;min-width:0}
.exl .ex .qc b{font-family:var(--serif);font-size:16.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exl .ex .qc .as{font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exl .ex .qn{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2)}
.exl .ex .dc{font-size:13px;color:var(--mut)}
.exl .ex .dc i{font-style:normal;color:var(--e-verde);font-weight:650}
.exl .ex .pz{display:flex;justify-content:flex-end}
.exl .ex.cerrado{opacity:.7}

/* ---- Portada y listas ---- */
.lista-p .row{border-radius:10px;min-height:56px}
.lista-p .row b{font-weight:600}
.lista-p .row:hover{background:var(--sup2)}

/* ---- Expediente: cabecera, pasos y carpetas ---- */
.cabe .av,.cabe>.av{box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)}
.pasos .paso.on,.pasos .on{color:var(--acento) !important}
.pasos .paso.on::before,.pasos .on .pt{background:var(--acento) !important}
.secc .hd h2{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:-.005em}
.secc .hd{min-height:58px}
.secc .fila{min-height:46px}

/* ---- Pestañas ---- */
.tabs a.on,.pest a.on{color:var(--ink) !important}

/* ---- Calendario: el día de hoy con el color del despacho ---- */
.cel.hoy,.mes .hoy b,.mini .hoy{background:var(--acento) !important}

@media (max-width:760px){
  .top{min-height:0}
  h1,.cabp h1,.cabl h1,.cabe h1{font-size:25px}
  .ex-h{display:none}
  .exl .ex{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"qc pz" "fa fa";row-gap:10px;padding:14px 16px}
  .exl .ex .nu,.exl .ex .qn,.exl .ex .dc{display:none}
  .exl .ex .qc{grid-area:qc}.exl .ex .pz{grid-area:pz}.exl .ex .fa{grid-area:fa}
}
.tj .tj-pie .barra{display:none}
.cabexp{gap:16px}
.cabexp .fp{margin-right:8px}
.cabexp h1{font-size:32px}
.ex-h span:last-child{text-align:right}
.secc .hijos.cerrado{display:none}
.secc:has(.hd:not(.abierta)) .hd{border-bottom-color:transparent}
.grp-car{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:#8b909a}
.grp-car .n{letter-spacing:0}
.grp-car button{border:0;background:none;font:inherit;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:#8b909a;cursor:pointer;padding:2px 4px}
.grp-car button:hover{color:var(--acento);text-decoration:underline}
.grp-car .pt{color:#c9ced8}
/* La puerta: cada despacho con su color arriba y su nombre en serif */
.puerta-oscura{background:var(--rail) !important}
.desp-card{position:relative;overflow:hidden;border-radius:16px !important}
.desp-card::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:var(--acento)}
.desp-card .hd b,.desp-card .hd strong{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.005em}
.desp-card .lg{font-family:var(--serif);font-weight:600;font-size:22px;border-radius:12px !important}
.desp-card .nums b{font-family:var(--serif);font-weight:600;font-size:34px}
.desp-card:hover{transform:translateY(-2px)}
.elegir-cab h1{font-size:40px}
.elegir-cab .mrc .lg{background:rgba(255,255,255,.1) !important;font-family:var(--serif)}
/* El color del despacho manda en todo lo que antes era azul fijo */
body{--az:var(--acento)}
/* Un solo borde izquierdo: las pantallas estrechas lo son por la derecha */
.w.estrecho{max-width:1240px !important}
.w.estrecho>*{max-width:880px}
/* Calendario: lo que vence, en píldora de color lleno */
span.ev{border:0 !important;border-radius:6px !important;font-weight:620}
span.ev.r{background:var(--e-rojo) !important;color:#fff !important}
span.ev.a{background:var(--e-amar) !important;color:#fff !important;text-shadow:0 1px 1px rgba(90,60,0,.35)}
span.ev:not(.r):not(.a){background:#eef0f3 !important;color:var(--ink2) !important}
.cabcal h2,.cal-hd h2,.calm h2{font-family:var(--serif);font-weight:600}
.desp-card .hd b{font-size:19px !important;white-space:nowrap}
@media (max-width:760px){
  .cabexp{flex-wrap:wrap;row-gap:10px}
  .cabexp>div:first-of-type{flex:1 1 calc(100% - 64px);min-width:0}
  .cabexp .sp{display:none}
  .cabexp h1{font-size:26px}
  .cabexp .meta{white-space:normal;font-size:13px}
  .cabexp .fp{margin-left:62px}
  .exl .ex .fa{display:flex !important}
  .exl .ex .qc b{font-size:16px}
}
@media (max-width:760px){
  .grp-car button,.grp-car .pt{display:none}
  .top .nav a.on::before{left:50%;top:auto;bottom:-1px;width:22px;height:3px;margin-left:-11px;border-radius:3px 3px 0 0}
}

/* ---- 2.0 · Proporción: todas las casillas de estado miden lo mismo ----
   Paso, plazo, fecha y «falta»: 112 × 26, texto centrado. Si un texto no
   cabe (un intervalo largo), se corta con «…» y se lee entero al pasar. */
.cd,.fe,.fp{box-sizing:border-box;width:112px;min-width:112px;max-width:112px;height:26px;justify-content:center;
  padding:0 8px !important;overflow:hidden;text-overflow:ellipsis;font-size:12px !important;font-weight:650 !important}
.cd svg,.fe svg{flex:none;width:13px;height:13px}
.cd>*,.fe>*{flex:none}
/* Los huecos que las alojan, del mismo ancho, para que todo caiga en columna */
.lista-p .row .der,.exl .ex .pz,.exl .ex .fa{min-width:112px;display:flex;justify-content:flex-end}
.exl .ex .fa{justify-content:flex-start}
.cabexp .fp,.cabexp .cd{margin:0 0 0 8px}
@media (max-width:760px){.cd,.fe,.fp{width:100px;min-width:100px;max-width:100px}.lista-p .row .der,.exl .ex .pz,.exl .ex .fa{min-width:100px}}
/* En el lateral, más estrecho, todas iguales pero más cortas */
.ladoP .cd,.ladoP .fe{width:84px;min-width:84px;max-width:84px}
.ladoP .row .der,.ladoP .der{min-width:84px}

/* ---- 2.0 · El plazo, siempre azul ----
   Plazos y fechas llevan un solo color, azul (el del día de hoy en el
   calendario), para no confundirlos con los estados (rojo, amarillo, verde).
   Lo que ya ha vencido conserva las rayas diagonales. */
:root{--plazo:#1a3a6b}
.cd.plz,.fe,.fe.r,.fe.a,.fe.n,.fe.v{background:var(--plazo) !important;color:#fff !important;text-shadow:none !important}
span.ev,span.ev.r,span.ev.a{background:var(--plazo) !important;color:#fff !important;text-shadow:none !important}
.cel.hoy span.ev{background:rgba(255,255,255,.18) !important}
.marcas .mk:not(.n){background:var(--plazo) !important}
.cel.hoy .marcas .mk:not(.n){background:#fff !important}

/* ============================================================
   Comunicaciones · subir fácil · quién se ocupa de cada documento
   ============================================================ */

/* --- La banda de subir: lo más fácil de todo --- */
.sub-b{display:flex;align-items:center;gap:14px;padding:16px 18px;margin:0 0 18px;
  background:#fff;border:1.5px dashed #c3cede;border-radius:14px;cursor:pointer;
  transition:border-color .15s,background .15s}
.sub-b:hover{border-color:var(--azul,#1a3a6b);background:#f7faff}
.sub-b.soltando{border-color:var(--azul,#1a3a6b);background:#eef4ff;border-style:solid}
.sub-b .ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border-radius:12px;background:#e8eefb}
.sub-b .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.sub-b .t b{font-size:15.5px;font-weight:600}
.sub-b .t small{color:var(--mut,#6b7280);font-size:13px}
.sub-b .btn{pointer-events:none}
@media(max-width:700px){.sub-b .t small{display:none}.sub-b{padding:13px 14px}}

/* --- Quién se ocupa de un documento --- */
.fila .der .resp{display:inline-flex;align-items:center;flex:none}
.fila .der .resp .av{box-shadow:0 0 0 2px #fff}
.menu .menu-tit{padding:6px 10px 2px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut,#8a919c);font-weight:600}
.menu form.o .av{flex:none}
.menu form.o button svg:last-child{margin-left:auto}

/* --- Comunicaciones --- */
.cm-cab{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;margin:0 0 18px}
.cm-cab .t{display:flex;flex-direction:column;min-width:0}
.cm-cab .t b{font-size:15px;font-weight:600}
.cm-cab .t small{color:var(--mut,#6b7280);font-size:13px}
.cm-cab .cm-no{color:#c9485b}
.cm-idio{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;
  background:#eef2f7;color:#41506a;font-size:13px;font-weight:560}

.cm-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:0 0 20px}
.cm-p{display:flex;flex-direction:column;gap:4px;padding:14px 15px;background:#fff;border:1px solid var(--line);
  border-radius:14px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.cm-p:hover{border-color:#b9c6da;box-shadow:0 2px 10px rgba(20,32,58,.06)}
.cm-p.on{border-color:var(--azul,#1a3a6b);box-shadow:0 0 0 1.5px var(--azul,#1a3a6b) inset}
.cm-p .ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
  background:#eef2f9;color:#1a3a6b;margin:0 0 6px}
.cm-p b{font-size:15px;font-weight:600}
.cm-p small{color:var(--mut,#6b7280);font-size:12.8px;line-height:1.45}

.cm-ayuda{margin:0 0 20px;font-size:14px}
.cm-red{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px 14px;margin:0 0 22px}
.cm-red-h{display:flex;align-items:center;gap:9px;margin:0 0 14px}
.cm-red-h b{font-size:15.5px;font-weight:600}
.cm-red-h a{font-size:13px;text-decoration:none}
.cm-eti{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;
  background:#e8eefb;color:#1a3a6b;font-size:12px;font-weight:600}
.cm-g2{display:flex;gap:10px;align-items:flex-end;margin:0 0 12px;flex-wrap:wrap}
.cm-g2 .fld{flex:1;min-width:150px;margin:0}
.cm-cuerpo{font-family:inherit;line-height:1.6;font-size:14.5px;resize:vertical}
.cm-pie{display:flex;align-items:center;gap:10px;margin:14px 0 0;flex-wrap:wrap}
.btn.wa{background:#1f9d55;border-color:#1f9d55;color:#fff}
.btn.wa:hover{background:#1b8a4b;border-color:#1b8a4b}
.btn.wa:disabled,.cm-pie .btn:disabled{opacity:.45;cursor:not-allowed}

.cm-hist{margin:0 0 10px}
.cm-h{background:#fff;border:1px solid var(--line);border-radius:12px;margin:0 0 8px;overflow:hidden}
.cm-h>summary{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none;font-size:14px}
.cm-h>summary::-webkit-details-marker{display:none}
.cm-h .ca{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;
  background:#eef2f7;color:#41506a;font-size:12px;font-weight:600;flex:none}
.cm-h .ca.wa{background:#e6f5ec;color:#1b7a44}
.cm-h .as{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-h pre{margin:0;padding:0 14px 14px;white-space:pre-wrap;font-family:inherit;font-size:14px;line-height:1.6;color:#41506a}
.cm-h .ca.mal{background:#fdeaee;color:#c9253f}

@media(max-width:700px){
  .cm-cab{flex-wrap:wrap;gap:10px}
  .cm-cab .t{flex:1 1 100%;order:2;min-width:0}
  .cm-cab .t small{white-space:normal;word-break:break-word}
  .cm-cab .av{order:1}
  .cm-cab .sp{display:none}
  .cm-cab .cm-idio{order:3}
  .cm-cab .btn{order:4}
  .cm-rej{grid-template-columns:1fr;gap:10px}
  .cm-red{padding:14px}
  .cm-red-h{flex-wrap:wrap;gap:7px}
  .cm-red-h a{flex:1 1 100%;text-align:left}
  .cm-pie .btn{flex:1 1 100%;justify-content:center}
  .cm-pie .mut{display:none}
  .cm-h>summary{flex-wrap:wrap;gap:7px}
  .cm-h .as{flex:1 1 100%;white-space:normal}
}

/* Tres pestañas no caben en un móvil: la tira se desliza, la página no. */
@media(max-width:700px){
  .pest{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%}
  .pest::-webkit-scrollbar{display:none}
  .pest a{flex:none;white-space:nowrap}
}

/* --- El asistente: la pantalla entera es la conversación --- */
.w.chat{display:flex;flex-direction:column;height:calc(100vh - 64px);max-width:860px;margin:0 auto;padding-bottom:0}
.w.chat .hilo{flex:none}
.ch{display:flex;flex-direction:column;flex:1;min-height:0}
.ch-lb{margin:16px 0 6px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#8a919c;font-weight:600}
.ch-limpia{background:none;border:0;color:#8a919c;font-size:12px;cursor:pointer;padding:0;text-decoration:underline}
.ch-limpia:hover{color:#41506a}
.ch-pie form.o{display:inline}
.ch-msg.ev .b{padding:14px 16px;max-width:88%}
@media(max-width:760px){.w.chat{height:calc(100vh - 56px)}}

/* =====================================================================
   FICHA · de dónde sale cada dato, qué documento vale y qué plazo está
   comprobado. Lo que no consta, se dice que no consta.
   ===================================================================== */
.fk{display:flex;flex-direction:column;gap:22px;max-width:980px}
.fk-bloq .lb{display:flex;align-items:center;gap:8px}
.fk-rej{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.fk-c.ancho{grid-column:1/-1}
.fk-c:nth-child(odd){border-right:1px solid var(--line2)}
.fk-c.ancho{border-right:0}
.fk-c{display:flex;gap:14px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--line2);min-width:0}
.fk-c .k{width:132px;flex:none;color:var(--mut,#6b7280);font-size:13px;padding-top:1px}
.fk-c .v{flex:1;min-width:0;font-size:14.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.fk-sin{color:#aab1bb;font-style:normal}
.fk-ed{background:none;border:0;cursor:pointer;color:#9aa0ab;padding:2px;display:inline-flex}
.fk-ed:hover{color:var(--ink)}

.fk-h{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.fk-hh{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line2);
  color:inherit;text-decoration:none}
.fk-hh:last-child{border-bottom:0}
.fk-hh.doc:hover{background:var(--soft,#f6f8fa)}
.fk-hh .tx{flex:1;min-width:0;font-size:14.5px;display:flex;flex-direction:column;gap:2px}
.fk-hh .tx small{color:var(--mut,#6b7280);font-size:12.6px}
.fk-hh .der{display:flex;align-items:center;gap:8px;flex:none}
.fk-vacio{margin:0;background:#fff;border:1px dashed #d6dde7;border-radius:14px;padding:14px 16px;
  color:var(--mut,#6b7280);font-size:13.8px;line-height:1.55}

/* La procedencia de un dato */
.fu{display:inline-block;line-height:24px;height:24px;padding:0 10px;border-radius:999px;
  font-size:11.8px;font-weight:650;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;
  vertical-align:middle;min-width:0}
.f-doc{background:#e5f6ef;color:#0f7a51}
.f-cli{background:#fdf1dd;color:#9a6208}
.f-hip{background:#f1ecfd;color:#5f45ab}
.f-com{background:#fdeaee;color:#c9253f}

/* El estado de un documento */
.fd{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  font-size:11.5px;font-weight:650;white-space:nowrap}
.d-bor{background:#eef1f5;color:#5b6474}
.d-apr{background:#e8eefb;color:#1a3a6b}
.d-fir{background:#e5f6ef;color:#0f7a51}
.d-pre{background:#e0f2f4;color:#0b6b74}
.d-vig{background:#1a3a6b;color:#fff}
.fila .der .fd{flex:none}
.menu form.o .fd{margin-right:auto}

/* Si un plazo está comprobado o no */
.vf{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;
  font-size:11.8px;font-weight:700;white-space:nowrap}
.v-si{background:#e5f6ef;color:#0f7a51}
.v-no{background:#fdeaee;color:#ff2f3a}
.v-cambio{background:#fdf1dd;color:#b3560a}

@media(max-width:760px){
  .fk-rej{grid-template-columns:1fr}
  .fk-c:nth-child(odd){border-right:0}
  .fk-c{flex-direction:column;gap:3px;padding:11px 14px;min-height:0}
  .fk-c .k{width:auto}
  .fk-hh{flex-wrap:wrap;padding:12px 14px}
  .fk-bloq .lb{flex-wrap:wrap}
  .fk-bloq .lb .mut{display:none}
  .fk-hh .der{width:100%;justify-content:flex-start}
  .fu{max-width:100%}
}

/* --- Tarjeta de expediente con los ocho campos --- */
.rejilla{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
.tj-rej{display:flex;flex-direction:column;margin:14px 0 0;border-top:1px solid var(--line2);padding-top:4px}
.tj-f{display:flex;gap:10px;align-items:flex-start;padding:7px 0;min-height:30px}
.tj-f .k{width:128px;flex:none;color:var(--mut,#6b7280);font-size:12.3px;padding-top:2px}
.tj-f .v{flex:1;min-width:0;font-size:13.4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.35}
.tj-sin{color:#aab1bb;font-style:normal;font-size:13px}
.tj-q{color:var(--mut,#6b7280);font-size:12.3px}
.tj-doc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.tj-falta{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:#fdeaee;color:#c9253f;font-size:11.5px;font-weight:700}
.tj-f .vf{font-size:11px;height:21px;padding:0 8px}
.tj .av{flex:none}
@media(max-width:760px){
  .rejilla{grid-template-columns:1fr}
  .tj-f{flex-direction:column;gap:2px;padding:6px 0}
  .tj-f .k{width:auto}
}

/* =====================================================================
   PROPORCIÓN · 2.3 · la ficha y las tarjetas, a la misma altura
   Misma medida para todo: la fila, la pastilla y la caja de la fecha.
   Esta capa va la última a propósito: gana sobre lo anterior.
   ===================================================================== */
/* 46px es la altura de fila que ya tenía el entorno: manda esa, para que la
   ficha, el archivo y las tarjetas midan exactamente lo mismo. */
:root{--fila-alto:46px;--col-pn:210px;--col-fe:112px;--col-acc:44px;--gap-rej:10px;--col-eti:124px}

/* Toda pastilla mide lo mismo de alto, venga de donde venga */
.fu,.fd,.vf,.cd,.fe,.fp,.est,.fir{height:26px;font-size:12px;font-weight:650;line-height:26px}
.fu,.vf,.fd{box-sizing:border-box;display:inline-block;padding:0 10px;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;max-width:100%}

/* Cualquier fila de la ficha: una rejilla fija. Nada se coloca a ojo. */
.fk-hh{display:grid;grid-template-columns:minmax(0,1fr) var(--col-pn) var(--col-fe) var(--col-acc);
  align-items:center;gap:var(--gap-rej);height:var(--fila-alto);padding:0 16px;
  border-bottom:1px solid var(--line2);color:inherit;text-decoration:none}
.fk-hh>*{grid-row:1}
.fk-hh .nm{display:flex;align-items:center;gap:11px;min-width:0}
.fk-hh .nm>svg,.fk-hh .nm>span.icx,.fk-hh .nm>span:first-child:not(.tx){flex:none}
.fk-hh .tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.fk-hh .tx b{font-weight:520;font-size:14.5px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fk-hh .tx small{color:var(--mut,#6b7280);font-size:12.3px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fk-hh .tx small:empty{display:none}
.fk-hh .et{display:flex;justify-content:flex-end;min-width:0}
.fk-hh .et>*{width:100%}            /* una sola caja de estado para todas las filas */
.fk-hh .fc{display:flex;justify-content:flex-end;width:var(--col-fe);min-width:var(--col-fe)}
.fk-hh .fc>*{width:100%}   /* la fecha, siempre la misma caja */
.fk-hh .acc{display:flex;justify-content:flex-end;width:var(--col-acc);min-width:var(--col-acc)}
.fk-hh .acc form.o{display:flex}

/* Los ocho campos de arriba: también todos iguales */
.fk-c{height:var(--fila-alto);align-items:center;padding:0 16px}
.fk-c .v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-wrap:nowrap}
.fk-c.ancho .v{min-width:0}

/* Las cinco filas de una tarjeta: etiqueta a la misma anchura, valor a la derecha */
.tj-f{display:grid;grid-template-columns:var(--col-eti) minmax(0,1fr);align-items:center;gap:var(--gap-rej);height:var(--fila-alto);padding:0}
.tj-f>*{grid-row:1}
.tj-f .k{width:auto;padding:0;font-size:12.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tj-f .v{min-width:0;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-content:flex-start;gap:6px}
.tj-f .v>*{flex:none}
.tj-f .v>span.tj-doc,.tj-f .v>span:not([class]){flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Dentro de una tarjeta el sitio es menor: las mismas cajas, más cortas */
.tj-f .fe,.tj-f .cd{width:92px;min-width:92px;max-width:92px;height:24px;font-size:11.5px !important}
.tj-f .vf{width:88px;min-width:88px;max-width:88px;font-size:11px;height:24px;line-height:24px}
.tj-f .fd{height:24px;line-height:24px;font-size:11px;max-width:92px}
.tj-f .av{width:22px;height:22px}

@media (max-width:760px){
  :root{--fila-alto:46px;--col-pn:150px;--col-fe:100px;--col-acc:36px}
  .fk-hh{grid-template-columns:minmax(0,1fr) var(--col-fe) var(--col-acc);padding:0 14px}
  .fk-hh .et{grid-column:1/-1;grid-row:2;justify-content:flex-start}
  .fk-hh{height:auto;padding:12px 14px;row-gap:8px}
  .fk-c{height:auto;padding:11px 14px}
  .fk-c .v{white-space:normal}
  .tj-f{grid-template-columns:1fr;height:auto;row-gap:1px;padding:5px 0}
  .tj-f>*{grid-row:auto}
  .tj-f .v{white-space:normal}
}

/* Una sola altura de fila en toda la aplicación. Nada a ojo, nada distinto. */
.fila,.fk-hh,.fk-c,.tj-f,
.lista .ex,.exl .ex,.lista-p .row,.secc .hd,.ex-h,
.lz-it,.cm-h>summary,.fk-h .fk-hh{
  min-height:var(--fila-alto) !important;
  height:var(--fila-alto) !important;
  box-sizing:border-box;
}
.secc .hd h2{font-size:15.5px;line-height:1.2}
.tj-f{height:var(--fila-alto) !important}
@media (max-width:760px){
  .fk-hh,.fk-c,.tj-f{height:auto !important;min-height:var(--fila-alto) !important}
}

/* La derecha de cualquier fila del archivo, en columnas fijas:
   estados · quién se ocupa · fecha · acciones. La fecha y los botones
   caen siempre en el mismo sitio, tenga la fila lo que tenga. */
.fila .der{display:flex;align-items:center;gap:var(--gap-rej);justify-content:flex-end}
.fila .der>*{flex:none}
.fila .der .est,.fila .der .fir{height:26px;line-height:26px}
.fila .der .resp{width:26px;display:flex;justify-content:center}
.fila .der .cd,.fila .der .fe{width:var(--col-fe);min-width:var(--col-fe)}
.fila .der .hov{width:var(--col-acc);min-width:var(--col-acc);display:flex;justify-content:flex-end}
.fila .der:not(:has(.fe)):not(:has(.cd))::after{content:"";width:var(--col-fe);flex:none}
.fila .der:not(:has(.resp))::before{content:"";width:26px;flex:none;order:-1}
.fila.car .der .cn{width:26px;text-align:center}

/* =====================================================================
   3.0 · SISTEMA VISUAL — Canarias Law Firm · Castellana Law Firm
   Azul marino, blanco y gris muy claro. Tipografía sans, márgenes amplios,
   líneas finas, pocas cajas. La belleza viene de la alineación, no del adorno.
   Esta capa va la última: manda sobre todo lo anterior.
   ===================================================================== */
:root{
  --rail:#142B3D;          /* navegación lateral */
  --ink:#162B3C;           /* texto principal */
  --ink2:#3C4E60;
  --acento:#18516B;        /* acción principal (lo pisa el color del despacho) */
  --accion:#18516B;        /* la acción principal, siempre la misma */
  --lienzo:#FAFBFC;        /* fondo */
  --sup:#FFFFFF;           /* superficie */
  --sup2:#F6F8FA;
  --line:#E2E8F0;          /* bordes */
  --line2:#EDF1F6;
  --mut:#64748B;           /* texto secundario */
  --r:8px;--r2:8px;
  --sh1:0 1px 2px rgba(22,43,60,.04);
  --sh2:0 10px 28px -14px rgba(22,43,60,.20);
  /* Colores semánticos, discretos y siempre con texto al lado */
  --sem-ambar:#9A6B08;--sem-ambar-f:#FDF4E3;   /* pendiente de comprobación */
  --sem-azul:#1E5C86;--sem-azul-f:#EAF2F8;     /* en revisión */
  --sem-verde:#15704F;--sem-verde-f:#E9F5F0;   /* validado */
  --sem-rojo:#B3243A;--sem-rojo-f:#FCECEF;     /* error o vencimiento determinado */
}
body,.cuerpo{background:var(--lienzo);color:var(--ink)}

/* Los títulos dejan de ser serif: misma familia para todo */
h1,.cabp h1,.cabl h1,.cabe h1,.puerta h1,.entrar h1,
.tj b,.exl .ex .qc b,.top .marca .nb,.top .marca .lg,.secc .hd h2{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important}
h1,.cabp h1,.cabl h1,.cabe h1{font-size:28px;font-weight:600;letter-spacing:-.018em;line-height:1.2}
h2,.secc .hd h2{font-size:18px;font-weight:600;letter-spacing:-.01em}
h3{font-size:18px;font-weight:600}
.lb{font-size:12px;letter-spacing:.06em;color:var(--mut);font-weight:600;text-transform:uppercase}
.mut{color:var(--mut)}

/* El rail: 232px, azul marino */
.top{background:var(--rail) !important;width:232px}
.top .marca .lg{background:var(--acento) !important;border-radius:8px}
.top>.btn.p,.btn.p{background:var(--accion) !important;border-color:var(--accion) !important;color:#fff !important}
.fe,.cd.plz,span.ev{background:var(--accion) !important}
.d-vig,.pest a.on{color:inherit}
.d-vig{background:var(--accion)}
.vg-d .ir,.vg-at .lb a,.hilo a:hover{color:var(--accion)}
.btn.p:hover{filter:brightness(1.12)}
.btn,.in,.chip,.panel,.tj,.secc,.fk-h,.fk-rej,.cm-cab,.cm-p,.cm-red,.cm-h,.sub-b,.fk-vacio,.vacio,.menu,.dc{border-radius:var(--r2)}
.pest{border-radius:10px}
.pest a{border-radius:6px}

/* Colores semánticos: una sola paleta para toda la aplicación */
.f-doc,.v-si,.d-fir{background:var(--sem-verde-f);color:var(--sem-verde)}
.f-hip,.v-cambio,.d-apr{background:var(--sem-azul-f);color:var(--sem-azul)}
.f-com,.v-no{background:var(--sem-ambar-f);color:var(--sem-ambar)}
.f-cli{background:var(--sup2);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line)}
.d-bor{background:var(--sup2);color:var(--mut);box-shadow:inset 0 0 0 1px var(--line)}
.d-pre{background:var(--sem-azul-f);color:var(--sem-azul);box-shadow:inset 0 0 0 1px #cfe0ec}
.d-vig{background:var(--acento);color:#fff}
.cm-h .ca.mal{background:var(--sem-rojo-f);color:var(--sem-rojo)}

/* ---- Vista general ---- */
.w.general,.vg-cab{max-width:1040px}
.vg-cab{margin:0 0 32px}
.vg-cab .sub{color:var(--mut);font-size:15px;margin:6px 0 0}
.vg-desps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 40px}
.vg-d{display:block}
.vg-d button{display:flex;flex-direction:column;align-items:flex-start;gap:0;width:100%;text-align:left;cursor:pointer;
  background:var(--sup);border:1px solid var(--line);border-radius:var(--r2);padding:24px 24px 20px;color:inherit;
  transition:border-color .15s}
.vg-d button:hover{border-color:#C6D2E0}
.vg-d .lug{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:600}
.vg-d .nom{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:6px 0 20px}
.vg-d .nums{display:flex;gap:40px;margin:0 0 20px}
.vg-d .nums>span{display:flex;flex-direction:column;gap:2px}
.vg-d .nums b{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1}
.vg-d .nums small{font-size:12px;color:var(--mut);max-width:190px;line-height:1.35}
.vg-d .ir{display:inline-flex;align-items:center;gap:6px;color:var(--acento);font-size:14px;font-weight:550}
.vg-at{margin:0 0 32px}
.vg-at .lb{display:flex;align-items:center;margin:0 0 10px}
.vg-at .lb a{text-transform:none;letter-spacing:0;font-weight:500;color:var(--acento);font-size:13px}
.vg-as{display:flex;align-items:center;gap:16px;background:var(--sup);border:1px solid var(--line);
  border-radius:var(--r2);padding:18px 22px;color:inherit}
.vg-as:hover{border-color:#C6D2E0}
.vg-as .t{display:flex;flex-direction:column;gap:3px;min-width:0}
.vg-as .t b{font-size:15px;font-weight:600}
.vg-as .t small{color:var(--mut);font-size:13.5px}
@media(max-width:860px){
  .vg-desps{grid-template-columns:1fr}
  .vg-d .nums{gap:24px}
  .vg-as{flex-direction:column;align-items:flex-start;gap:12px}
}
.desps-r a{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;color:rgba(255,255,255,.72);font-size:13.5px}
.desps-r a:hover{background:rgba(255,255,255,.07);color:#fff}

/* ---- Documentos · espacios, carpetas y archivos ---- */
.doc-lay{display:grid;grid-template-columns:232px minmax(0,1fr);gap:28px;align-items:start}
.doc-esp{position:sticky;top:24px}
.doc-esp .lb{margin:0 0 8px}
.doc-esp a{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:8px;
  color:var(--ink2);font-size:14px;font-weight:500}
.doc-esp a:hover{background:var(--sup2)}
.doc-esp a.on{background:var(--sup);border:1px solid var(--line);color:var(--ink);font-weight:600}
.doc-esp a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-busca{width:100%;margin:0 0 16px;display:flex;align-items:center;gap:8px}
.doc-nota{display:flex;align-items:center;gap:8px;margin:14px 0 0;color:var(--mut);font-size:13.5px}
.doc-nota a{color:var(--accion);text-decoration:underline}
.doc-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.doc-q{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--sup);border:1px solid var(--line);
  border-radius:var(--r2);color:inherit;min-height:112px}
.doc-q:hover{border-color:#C6D2E0}
.doc-q .nm{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;width:100%}
.doc-q .tx{display:flex;flex-direction:column;gap:2px;min-width:0;width:100%}
.doc-q .tx b{font-size:14.5px;font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-q .tx small{color:var(--mut);font-size:12.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-q .fc,.doc-q .acc{display:none}
.doc-q .et{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:860px){
  .doc-lay{grid-template-columns:1fr;gap:18px}
  .doc-esp{position:static;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
  .doc-esp .lb{display:none}
  .doc-esp a{flex:none;height:36px;border:1px solid var(--line);background:var(--sup)}
  .doc-busca{flex-wrap:wrap}
  .doc-rej{grid-template-columns:1fr}
}

/* =====================================================================
   3.2 · Documentos como en la maqueta: espacios, carpetas y explorador
   ===================================================================== */
/* La marca del rail */
.top .marca .lg{font-family:Inter,sans-serif !important;font-size:12px !important;letter-spacing:.06em;font-weight:700}
.top .marca.dos .nb{display:flex;flex-direction:column;gap:3px}
.top .marca.dos .nb i{font-style:normal;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.62);font-weight:600;line-height:1.25}
.top .yo summary .nb{display:flex;flex-direction:column;gap:1px;min-width:0}
.top .yo summary .nb b{font-weight:600;font-size:13.5px;color:#fff;line-height:1.2}
.top .yo summary .nb i{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.2}

/* Tarjetas de espacio */
.esp-rej{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:0 0 40px}
.esp-c{display:flex;flex-direction:column;gap:0;padding:24px;background:var(--sup);border:1px solid var(--line);
  border-radius:var(--r2);color:inherit;transition:border-color .15s}
.esp-c:hover{border-color:#C6D2E0}
.esp-c>svg{color:var(--accion);margin:0 0 18px}
.esp-c b{font-size:19px;font-weight:600;letter-spacing:-.01em}
.esp-c small{color:var(--mut);font-size:13.5px;margin:4px 0 20px}
.esp-c .ir,.vg-as .ir,.cl-n{display:inline-flex;align-items:center;gap:6px;color:var(--accion);font-size:14px;font-weight:550}
.esp-t{margin:34px 0 14px;font-size:20px;font-weight:600}
.esp-ia{margin-top:28px}
.esp-ia>svg{flex:none}

/* Carpetas de un espacio, en cuadrícula */
.esp-car{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.esp-cc{display:flex;padding:20px;background:var(--sup);border:1px solid var(--line);border-radius:var(--r2);color:inherit}
.esp-cc:hover{border-color:#C6D2E0}
.esp-cc .nm{display:flex;align-items:center;gap:16px;min-width:0}
.esp-cc .nm>svg{color:var(--accion);flex:none}
.esp-cc .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.esp-cc .tx b{font-size:16px;font-weight:600;display:flex;align-items:center;gap:7px}
.esp-cc .tx b svg{color:var(--mut)}
.esp-cc .tx small{color:var(--mut);font-size:13px}
.esp-cc .et,.esp-cc .fc,.esp-cc .acc{display:none}

/* El explorador: carpetas y contenido */
.xp{display:grid;grid-template-columns:288px minmax(0,1fr);gap:0;background:var(--sup);border:1px solid var(--line);
  border-radius:var(--r2);overflow:hidden}
.xp-car{border-right:1px solid var(--line);padding:16px 12px}
.xp-h{font-size:15px;font-weight:600;padding:4px 10px 12px}
.xp-car a{display:flex;align-items:center;gap:10px;height:42px;padding:0 10px 0 calc(10px + var(--n,0) * 16px);
  border-radius:8px;color:var(--ink2);font-size:14px}
.xp-car a:hover{background:var(--sup2)}
.xp-car a.on{background:#EAF1F7;color:var(--ink);font-weight:560}
.xp-car a>svg:first-child{color:#8FA6BA;flex:none}
.xp-car a>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.xp-car a.soltando{background:#DCE9F4;box-shadow:inset 0 0 0 1.5px var(--accion)}
.xp-add{display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0 10px;margin-top:6px;border:0;
  background:none;color:var(--accion);font:inherit;font-size:13.5px;font-weight:550;cursor:pointer;border-radius:8px}
.xp-add:hover{background:var(--sup2)}
.xp-con{padding:20px 22px 18px;min-width:0}
.xp-con-h{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.xp-con-h h2{margin:0;font-size:19px}

/* La tabla de archivos */
.xp-t{width:100%;border-collapse:collapse;font-size:14px}
.xp-t th{text-align:left;font-weight:500;color:var(--mut);font-size:12.5px;padding:0 10px 10px;border-bottom:1px solid var(--line)}
.xp-t td{padding:0 10px;border-bottom:1px solid var(--line2);height:var(--fila-alto);vertical-align:middle}
.xp-t tr:last-child td{border-bottom:0}
.xp-t .c0{width:36px}
.xp-t .c1{width:150px}
.xp-t .c2{width:96px}
.xp-t .c3{width:46px;text-align:right}
.xp-t .doc{display:flex;align-items:center;gap:11px;min-width:0;color:inherit}
.xp-t .doc .tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.xp-t .doc .tx b{font-weight:520;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp-t .doc .tx small{color:var(--mut);font-size:12.3px}
.xp-t tr:hover{background:var(--sup2)}
.xp-t tr.on{background:#EAF1F7}
.xp-t.rec td{height:52px}
.xp-vacio{display:flex;flex-direction:column;align-items:center;gap:6px;padding:44px 20px;border:1px dashed #D6DDE7;
  border-radius:var(--r2);color:var(--mut);font-size:13.5px;cursor:pointer}
.xp-vacio b{color:var(--ink);font-size:15px;font-weight:600}
.xp-etiq{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 0}
.xp-etiq span{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;
  background:var(--sup2);border:1px solid var(--line);font-size:12.5px;color:var(--ink2)}

/* Revisar clasificación */
.cl-lay{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0;background:var(--sup);
  border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.cl-t{padding:8px 14px 0;min-width:0}
.cl-lado{border-left:1px solid var(--line);padding:22px 20px;min-width:0}
.cl-dest{display:flex;gap:14px;align-items:flex-start}
.cl-dest>svg{color:var(--accion);flex:none}
.cl-dest b{display:block;font-size:15px;font-weight:600}
.cl-dest small{color:var(--mut);font-size:12.5px}
.cl-acc{color:var(--ink2);font-size:13.5px;margin:0}
.cl-ojo{display:flex;gap:9px;align-items:flex-start;margin:18px 0 0;color:var(--mut);font-size:13px;line-height:1.5}
.cl-ojo>svg{flex:none;margin-top:2px}
.cl-pie{display:flex;align-items:center;gap:12px;padding:18px 0 4px;border-top:1px solid var(--line);margin-top:8px}
.cl-pie b{font-weight:600}
.cl-pie small{display:block;color:var(--mut);font-size:12.5px;margin-top:2px}
.cl-n{padding:0 12px;height:30px;border-radius:999px;background:#EAF1F7;font-size:13px}

@media(max-width:900px){
  .xp,.cl-lay{grid-template-columns:1fr}
  .xp-car{border-right:0;border-bottom:1px solid var(--line)}
  .cl-lado{border-left:0;border-top:1px solid var(--line)}
  .xp-t .c1,.xp-t .c2{display:none}
  .esp-car,.esp-rej{grid-template-columns:1fr}
}

/* La barra de ruta de la pestaña Documentos del expediente */
.xp-ruta{display:flex;align-items:center;gap:8px;padding:0 16px;height:46px;margin:0 0 16px;
  background:var(--sup2);border:1px solid var(--line);border-radius:var(--r2);font-size:13.5px;color:var(--mut)}
.xp-ruta>svg{color:#8FA6BA;flex:none}
.xp-ruta a{color:var(--ink2)}
.xp-ruta a:hover{color:var(--accion)}
.xp-ruta b{color:var(--ink);font-weight:600}
.xp-ruta .ext{display:inline-flex;align-items:center;gap:6px;color:var(--accion);font-weight:550}
@media(max-width:760px){.xp-ruta{height:auto;padding:10px 12px;flex-wrap:wrap;row-gap:4px}}

/* El buscador de Documentos es una fila: el icono va dentro del campo */
.doc-busca{position:static}
.doc-busca .cmp{position:relative;flex:1;min-width:220px}
.doc-busca .cmp .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--mut)}
.doc-busca .cmp .in{padding-left:38px;width:100%}
.doc-busca .vista a{height:44px;width:42px}
.doc-busca .vista a svg{width:17px;height:17px}
.cl-t .xp-t .c1{width:220px}
.cl-t .xp-t .c2{width:150px}
.cl-t .xp-t td{white-space:normal}
.cl-t .xp-t .c1 b{display:block;font-weight:560}
.cl-t .xp-t .c1 small{color:var(--mut);font-size:12.3px}

/* ---- Honorarios y pagos ---- */
.hn-nums{display:flex;align-items:center;gap:0;background:var(--sup);border:1px solid var(--line);
  border-radius:var(--r2);padding:20px 24px;margin:0 0 20px;flex-wrap:wrap}
.hn-nums>div{display:flex;flex-direction:column;gap:3px;padding-right:44px;margin-right:44px;border-right:1px solid var(--line)}
.hn-nums>div:nth-child(3){border-right:0}
.hn-nums b{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1}
.hn-nums small{color:var(--mut);font-size:13px}
.hn-pie{color:var(--mut);font-size:12.5px;display:inline-flex;align-items:center;gap:6px}
.hn-lay{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.hn-main{background:var(--sup);border:1px solid var(--line);border-radius:var(--r2);padding:20px 22px}
.hn-lado{background:var(--sup);border:1px solid var(--line);border-radius:var(--r2);padding:20px}
.hn-h{font-size:17px;font-weight:600;margin:0 0 12px}
.hn-rev{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin:12px 0 0}
.hn-rev>svg{padding:14px;background:var(--sup2);border-radius:10px;margin:0 0 6px}
.hn-rev b{font-size:14.5px;font-weight:560}
.hn-rev .im{font-size:26px;font-weight:600;letter-spacing:-.02em}
.hn-a{display:inline-flex;align-items:center;gap:7px;color:var(--accion);font-size:13.5px;font-weight:520}
.hn-rev form.o{width:100%;margin-top:10px}
.btn.ancho{width:100%;justify-content:center}
.pg{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:650;white-space:nowrap}
.p-pen{background:var(--sup2);color:var(--mut);box-shadow:inset 0 0 0 1px var(--line)}
.p-jus{background:var(--sem-ambar-f);color:var(--sem-ambar)}
.p-rec{background:var(--sem-verde-f);color:var(--sem-verde)}
.p-con{background:var(--sem-verde-f);color:var(--sem-verde);box-shadow:inset 0 0 0 1px #bfe0d2}
.xp-t .tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.xp-t .tx b{font-weight:520}
.xp-t .tx small{color:var(--mut);font-size:12.3px}

/* ---- Equipo ---- */
.eq-rej{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.eq-c{display:flex;flex-direction:column;background:var(--sup);border:1px solid var(--line);border-radius:var(--r2);
  padding:20px 22px;color:inherit}
.eq-c:hover{border-color:#C6D2E0}
.eq-c.on{border-color:var(--accion);box-shadow:0 0 0 1px var(--accion) inset}
.eq-c .hd{display:flex;align-items:center;gap:14px;padding:0 0 16px;border-bottom:1px solid var(--line2)}
.eq-c .hd>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.eq-c .hd b{font-size:17px;font-weight:600}
.eq-c .hd small{color:var(--mut);font-size:13px}
.eq-c .pie{display:flex;align-items:center;gap:6px;padding:14px 0 0;color:var(--ink2);font-size:13.5px}
.eq-t .c1{width:220px}
.eq-t .c2{width:170px}
.eq-t .c3e{width:140px}
.eq-q,.eq-e{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:13.5px}
.eq-q::-webkit-details-marker,.eq-e::-webkit-details-marker{display:none}
.eq-pie{display:flex;align-items:center;gap:8px;margin:14px 2px 0;color:var(--mut);font-size:13px}
.eq-pie a{color:var(--accion);display:inline-flex;align-items:center;gap:5px}
.tk{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:650;white-space:nowrap}
.t-pen{background:var(--sup2);color:var(--mut);box-shadow:inset 0 0 0 1px var(--line)}
.t-cur{background:var(--sem-azul-f);color:var(--sem-azul)}
.t-rev{background:var(--sem-ambar-f);color:var(--sem-ambar)}
.t-hec{background:var(--sem-verde-f);color:var(--sem-verde)}

/* ---- Agenda de la semana ---- */
.ag-nav{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.ag-rot{font-size:14px;font-weight:550;padding:0 14px;height:36px;display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:8px;background:var(--sup)}
.ag-lay{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.ag-sem{display:grid;grid-template-columns:repeat(var(--d,5),minmax(0,1fr));background:var(--sup);
  border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;min-height:440px}
.ag-col{border-right:1px solid var(--line2);min-width:0;display:flex;flex-direction:column}
.ag-col:last-child{border-right:0}
.ag-col.hoy{background:#F7FAFC}
.ag-h{display:flex;align-items:baseline;gap:7px;justify-content:center;padding:14px 8px;border-bottom:1px solid var(--line)}
.ag-h b{font-size:14px;font-weight:600}
.ag-h span{color:var(--mut);font-size:12.5px}
.ag-cel{flex:1;padding:10px 8px;display:flex;flex-direction:column;gap:8px}
.ag-t{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;background:var(--sup);
  border:1px solid var(--line);border-left:3px solid var(--accion);color:inherit;box-shadow:var(--sh1)}
.ag-t:hover{border-color:#C6D2E0;border-left-color:var(--accion)}
.ag-t b{font-size:13.5px;font-weight:560;line-height:1.3}
.ag-t small{color:var(--mut);font-size:12px}
.ag-t.revision{border-left-color:var(--sem-ambar)}
.ag-t.hecha{opacity:.55;border-left-color:var(--sem-verde)}
.ag-lado{background:var(--sup);border:1px solid var(--line);border-radius:var(--r2);padding:20px;min-height:440px;
  display:flex;flex-direction:column}
.ag-lh{font-size:18px;font-weight:600;margin:0 0 14px}
.ag-v{padding:12px 0;border-bottom:1px solid var(--line2);position:relative;padding-left:20px}
.ag-v:last-of-type{border-bottom:0}
.ag-v .pt{position:absolute;left:0;top:17px;width:9px;height:9px;border-radius:50%;background:var(--sem-ambar)}
.ag-v b{display:block;font-size:14px;font-weight:560}
.ag-v small{display:block;color:var(--mut);font-size:12.5px;margin:2px 0 6px}
.ag-v a{color:var(--accion);font-size:13px;display:inline-flex;align-items:center;gap:5px}
.ag-nota{margin-top:auto;padding-top:18px;color:var(--mut);font-size:12.5px;line-height:1.5}
.ag-ley{display:flex;gap:22px;margin:16px 2px 0;color:var(--mut);font-size:12.5px}
.ag-ley span{display:inline-flex;align-items:center;gap:8px}
.ag-ley i{width:9px;height:9px;border-radius:50%}
.ag-ley .l-t{background:var(--accion)}
.ag-ley .l-r{background:var(--sem-ambar)}
.ag-ley .l-p{background:var(--sem-ambar)}

@media(max-width:900px){
  .hn-lay,.ag-lay{grid-template-columns:1fr}
  .hn-nums>div{padding-right:24px;margin-right:24px}
  .ag-sem{grid-template-columns:1fr;min-height:0}
  .ag-col{border-right:0;border-bottom:1px solid var(--line2)}
  .ag-h{justify-content:flex-start}
  .eq-t .c1,.eq-t .c2{display:none}
}
@media(max-width:760px){
  .doc-busca{flex-wrap:wrap;row-gap:8px}
  .doc-busca .cmp{flex:1 1 100%}
  .doc-busca .in.s{flex:1 1 auto;min-width:0}
  .doc-busca .vista{margin-left:auto}
  .esp-rej,.esp-car,.eq-rej{grid-template-columns:1fr}
  .esp-c,.esp-cc{padding:18px}
}
/* La tabla de recientes no empuja la página en un móvil */
.xp-t{table-layout:fixed}
.xp-t td,.xp-t th{overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){
  .xp-t.rec .c1{display:none}
  .xp-t .c1,.xp-t .c2{width:auto}
}

/* El «···» de una fila tiene que quedar por encima de las filas siguientes */
.xp-t td.c3{position:relative}
.xp-t td.c3 .menu{z-index:200}
.xp-t tbody tr:has(details[open]){position:relative;z-index:200}
.xp-t tbody tr:has(details[open]) td{background:var(--sup2)}
.xp-t td.c3{overflow:visible}

/* =====================================================================
   El explorador, a cualquier ancho: el nombre del archivo NO se corta.
   Cuando no hay sitio, el estado y la versión bajan debajo del nombre.
   ===================================================================== */
.xp{grid-template-columns:264px minmax(0,1fr)}
.xp-car a{font-size:13.5px;gap:9px;padding-right:8px}
.xp-car a>span{min-width:0}
.xp-t .c1{width:132px}
.xp-t .c2{width:82px}
.xp-t .doc{min-width:0}
.xp-t .est-min{display:none}
.xp-t .est-min .fd{height:20px;line-height:20px;font-size:11px;padding:0 8px;margin-left:6px}

@media (max-width:1320px){
  .xp-t .c2,.xp-t thead .c2{display:none}          /* la versión, debajo del nombre */
}
@media (max-width:1140px){
  .xp{grid-template-columns:230px minmax(0,1fr)}
  .xp-t .c1,.xp-t thead .c1{display:none}          /* el estado, debajo del nombre */
  .xp-t .est-min{display:inline}
  .xp-con{padding:18px 16px 16px}
  .xp-con-h h2{font-size:17px}
}
@media (max-width:960px){
  .xp{grid-template-columns:1fr}
  .xp-car{border-right:0;border-bottom:1px solid var(--line);
    display:flex;flex-wrap:wrap;gap:6px;padding:12px}
  .xp-h{width:100%;padding:0 4px 6px}
  .xp-car a{width:auto;flex:none;border:1px solid var(--line);background:var(--sup);padding:0 12px;height:36px}
  .xp-car a.on{border-color:var(--accion)}
  .xp-add{width:auto}
}
/* El nombre de una carpeta nunca se corta: si no cabe, se parte en dos líneas. */
.xp-car a{height:auto;min-height:42px;padding-top:7px;padding-bottom:7px;align-items:flex-start}
.xp-car a>svg:first-child{margin-top:2px}
.xp-car a>span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;word-break:break-word}
@media (max-width:960px){
  .xp-car a{min-height:36px;align-items:center;padding-top:0;padding-bottom:0}
  .xp-car a>span{white-space:nowrap}
}

/* Dentro del explorador, las subcarpetas son una lista simple: sin rejilla fija */
.xp-con .fk-h{border:1px solid var(--line)}
.xp-con .fk-hh{display:flex;align-items:center;gap:12px;height:var(--fila-alto);padding:0 14px}
.xp-con .fk-hh .nm{flex:1;min-width:0}
.xp-con .fk-hh .et,.xp-con .fk-hh .fc{display:none}
.xp-con .fk-hh .acc{width:auto;min-width:0;flex:none}

/* El nombre del cliente manda: si no cabe en una línea, se parte en dos */
.tj b{white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.exl .ex .qc .tt b{white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* =====================================================================
   La lista de expedientes, puesta en orden

   La cabecera y las filas llevan **la misma rejilla** en todos los tamaños:
   si una columna se va, se va de las dos a la vez. Antes la primera columna
   de la fila medía 16 px —sólo el punto— y el número se salía por debajo del
   nombre del cliente. Y la fila estaba clavada a 46 px, así que el encargo
   («Herencias», «otro») quedaba cortado por abajo.
   ===================================================================== */
.ex-h,.exl .ex{grid-template-columns:112px minmax(0,1fr) 128px 150px 104px 112px}
.exl .ex{height:auto !important;min-height:68px !important}
.exl .ex .nu{white-space:nowrap}
.exl .ex .qc .tt{gap:2px}

@media (max-width:1360px){                    /* se va «Documentos» */
  .ex-h,.exl .ex{grid-template-columns:112px minmax(0,1fr) 128px 150px 112px}
  .exl .ex .dc,.ex-h span:nth-child(5){display:none}
}
@media (max-width:1120px){                    /* se va «Lo lleva» */
  .ex-h,.exl .ex{grid-template-columns:104px minmax(0,1fr) 128px 112px}
  .exl .ex .qn,.ex-h span:nth-child(4){display:none}
}
@media (max-width:900px){                     /* se va «Paso» */
  .ex-h,.exl .ex{grid-template-columns:104px minmax(0,1fr) 112px}
  .exl .ex .fa,.ex-h span:nth-child(3){display:none}
}

/* Los últimos recortes: el nombre del expediente, la cabecera de la lista y
   las filas de «Vence pronto» en pantallas estrechas. */
.cabexp h1{white-space:normal;line-height:1.15;word-break:break-word}
@media (max-width:1000px){
  .fk-hh{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .fk-hh .et{grid-column:1/-1;grid-row:2;justify-content:flex-start}
  .fk-hh .fc{justify-self:end}
  .fk-hh .acc{display:none}
  .fk-hh{height:auto;min-height:var(--fila-alto);padding-top:10px;padding-bottom:10px}
}
@media (max-width:900px){
  .cabexp h1{font-size:22px}
  .vg-d .nums{flex-wrap:wrap;gap:18px}
}

/* =====================================================================
   4.1 · Agenda: las acciones de los dos despachos, una columna por día
   ===================================================================== */
.ag-cab{display:flex;align-items:flex-start;gap:16px;margin:0 0 18px}
.ag-cab h1{margin:0}
.ag-cab .sub{color:var(--mut);margin:6px 0 0;font-size:14px}
.ag-cab .btn{margin-left:auto;flex:none}

.agd-sem{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.agd-sem .rot{font-size:15px;font-weight:620;letter-spacing:-.01em;min-width:170px}
.agd-sem .ib{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:#fff}

.ag-fil{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--line)}
.ag-fil .fch{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:1px solid var(--line);
  border-radius:20px;background:#fff;font-size:13px;font-weight:540;color:var(--ink2);white-space:nowrap}
.ag-fil .fch:hover{border-color:#cfd5de}
.ag-fil .fch .pu{width:8px;height:8px;border-radius:50%;flex:none}
.ag-fil .fch .n{color:var(--mut);font-size:12px;font-variant-numeric:tabular-nums}
.ag-fil .fch.on{background:var(--az);border-color:var(--az);color:#fff}
.ag-fil .fch.on .n{color:rgba(255,255,255,.72)}
.ag-fil .sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.ag-vacio{color:var(--mut);margin:22px 2px 0;font-size:14px}

.kb6{display:grid;gap:10px;align-items:start}
.kb6 .col{background:var(--soft2);border:1px solid var(--line);border-radius:var(--r2,12px);padding:8px;min-height:96px}
.kb6 .col>h3{display:flex;align-items:baseline;gap:6px;margin:2px 3px 9px;font-size:13px;font-weight:650;
  letter-spacing:-.005em;flex-wrap:wrap;row-gap:1px}
.kb6 .col>h3 small{min-width:0}
.kb6 .col>h3 .n{margin-left:auto}
.kb6 .col>h3 small{color:var(--mut);font-weight:520;font-size:12px}
.kb6 .col>h3 .n{margin-left:auto;color:var(--mut);font-size:12.5px;font-weight:560;font-variant-numeric:tabular-nums}
.kb6 .col.hoy{border-color:#cfdaea;box-shadow:inset 0 2px 0 var(--az)}
.kb6 .col.hoy>h3,.kb6 .col.hoy>h3 small{color:var(--az)}
.kb6 .col.soltando{background:#f2f6fc;border-color:#b9c6da}
.col .mas{display:flex;align-items:center;gap:6px;height:30px;width:100%;padding:0 8px;border:0;background:none;
  border-radius:9px;color:var(--mut);font-size:12.5px;cursor:pointer}
.col .mas:hover{background:var(--soft);color:var(--ink2)}

.ta{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 9px 8px;margin:0 0 8px;
  box-shadow:0 1px 0 rgba(20,30,50,.03);cursor:pointer;touch-action:pan-y}
[data-puedo="1"] .ta{cursor:grab}
[data-puedo="1"] .ta:active{cursor:grabbing}
.ta:hover{border-color:#dcdfe5}
.ta .tex{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mut);margin:0 0 4px;min-width:0}
.ta .tex .pu{width:7px;height:7px;border-radius:50%;flex:none}
.ta .tex{align-items:flex-start}
.ta .tex .pu{margin-top:5px}
.ta .tex b{font-weight:620;color:var(--ink2);font-variant-numeric:tabular-nums;min-width:0;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.ta .tcl{font-size:11.5px;color:var(--mut);margin:-2px 0 5px;padding-left:13px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ta .tno{font-size:12.8px;line-height:1.35;font-weight:520;margin:0 0 7px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ta .pat{display:flex;align-items:center;flex-wrap:wrap;gap:5px;row-gap:5px;min-height:20px}
.ta .tpl{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:6px;font-size:11.5px;
  font-weight:600;background:var(--soft);color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.ta .tpl.rj{background:var(--rojo-l);color:var(--rojo)}
.ta .tpl.vd{background:var(--verde-l);color:var(--verde)}
.ta .tet{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font-size:11.5px;
  font-weight:560;background:var(--az-l);color:var(--az);white-space:nowrap;flex:none}
.ta .pat .av{margin-left:auto;width:20px;height:20px;font-size:9px}
.ta.hecha{opacity:.62}
.ta.hecha .tno{text-decoration:line-through;text-decoration-color:var(--mut)}
.hue{border:1.5px dashed #b9c6da;background:#f2f6fc;border-radius:9px;height:76px;margin:0 0 8px}
.ta.vuela{position:fixed;z-index:400;pointer-events:none;transform:rotate(-1.6deg);
  box-shadow:0 20px 34px -14px rgba(20,30,50,.34);border-color:#c7d2e2;cursor:grabbing;margin:0}

#dlgAccion .dosc{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#dlgAccion textarea{resize:vertical;min-height:58px}

@media (max-width:760px){
  .kb6 .col{min-height:0}
  .ag-cab{flex-direction:column;gap:10px}
  .ag-cab .btn{margin-left:0;width:100%}
  #dlgAccion .dosc{grid-template-columns:1fr}
}

/* --- Dos arreglos de la 4.0.01, que no son de la Agenda ---
   1) El rail vuelve a ser barra en el móvil: la regla del final lo dejaba en 232px.
   2) En la vista de los dos despachos, «.marca i» pintaba una caja azul encima del nombre. */
.top .marca.dos .nb i{width:auto;height:auto;background:none;display:block;border-radius:0;justify-content:flex-start}
@media (max-width:760px){
  .top{width:auto}
  .top .marca.dos .nb{display:none}
  .top .yo summary .nb{display:none}
}

/* =====================================================================
   4.1 · Tablet y móvil: que todo entre en una pantalla, grande y en su sitio

   Tres tamaños, y en cada uno la misma proporción: el mismo alto de fila, el
   mismo hueco entre columnas y las fechas siempre en su columna.
     · Ordenador   (1280 px o más) — el lateral con sus nombres.
     · Tablet      (761–1279 px)   — el lateral se queda en iconos y la página
                                     se lleva los 156 px que sobran.
     · Móvil       (760 px o menos) — el lateral pasa arriba y todo se apila.
   ===================================================================== */

/* ---- El tablero se acomoda solo: columnas anchas, y las que no caben bajan ---- */
/* Los seis días de una semana, en una sola línea en cuanto hay sitio. Cuando
   no lo hay bajan de tres en tres, nunca a una tarjeta diminuta. */
.kb6{grid-auto-flow:row;grid-auto-columns:auto;row-gap:12px;overflow:visible;padding-bottom:0;
  grid-template-columns:1fr}
@media (min-width:520px)  { .kb6{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (min-width:760px)  { .kb6{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (min-width:1180px) { .kb6{grid-template-columns:repeat(6, minmax(0,1fr))} }

/* ---- Tablet: el lateral, en iconos ---- */
/* ---- El menú de la izquierda, plegado en iconos ----
   Lo decide la clase del body, no el ancho: así el mismo botón sirve en una
   tablet y en un ordenador, y lo que elijas se recuerda. */
.rail-tog{display:none;align-items:center;gap:8px;width:100%;height:34px;padding:0 10px;margin:0 0 6px;
  border:0;background:none;border-radius:9px;color:var(--rail-t,rgba(255,255,255,.62));
  font:inherit;font-size:12.5px;cursor:pointer}
.rail-tog:hover{background:rgba(255,255,255,.07);color:#fff}
.rail-tog:focus{outline:none}
.rail-tog:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
.rail-tog .ic{transition:transform .15s}
body.rail-min .rail-tog{justify-content:center;padding:0}
body.rail-min .rail-tog span{display:none}
body.rail-min .rail-tog .ic{transform:rotate(180deg)}
@media (min-width:761px){ .rail-tog{display:flex} }

body.rail-min .top{width:84px;padding:16px 8px 12px;align-items:center}
body.rail-min .top .marca{justify-content:center;padding:4px 0;width:100%}
body.rail-min .top .marca .nb,body.rail-min .top .marca.dos .nb{display:none}
body.rail-min .top .marca .lg,body.rail-min .top .marca i{width:36px;height:36px;border-radius:10px;font-size:12px}
body.rail-min .top>.btn.p{width:52px;height:46px;margin:16px auto 8px;padding:0;justify-content:center}
body.rail-min .top>.btn.p .t{display:none}
body.rail-min .top .nav{width:100%;gap:4px;margin:8px 0 0}
body.rail-min .top .nav a{flex-direction:column;justify-content:center;gap:4px;height:auto;padding:10px 2px;
  font-size:10.5px;line-height:1.2;text-align:center;letter-spacing:0}
body.rail-min .top .nav a .ic{width:22px;height:22px}
body.rail-min .top .lbr,body.rail-min .top .desps-r,body.rail-min .top .cambia .nb{display:none}
body.rail-min .top .yo{width:100%;padding-top:10px}
body.rail-min .top .yo summary{justify-content:center;padding:8px 0}
body.rail-min .top .yo summary .nb,body.rail-min .top .yo summary>.ic{display:none}
body.rail-min .top .yo .menu{left:8px;width:250px}
@media (max-width:760px){
  .rail-tog{display:none}
  body.rail-min .top{width:auto;padding:0 14px;flex-direction:row;align-items:center}
  body.rail-min .top .marca{width:auto;justify-content:flex-start;padding:0}
  body.rail-min .top .marca .lg,body.rail-min .top .marca i{width:26px;height:26px;border-radius:8px}
  body.rail-min .top>.btn.p{margin:0 0 0 auto;width:34px;height:34px}
  body.rail-min .top .yo{width:auto;padding-top:0}
  body.rail-min .top .yo summary{padding:6px}
}

@media (min-width:761px) and (max-width:1279px){
  /* La página se queda con lo que el lateral ha soltado. */
  .w,.w.estrecho,.w.ancho{padding:28px 28px 90px;max-width:none}
  .aviso,.enlace{margin-left:28px;margin-right:28px}

  /* Cosas grandes: en una tablet se lee de más lejos que en un portátil. */
  h1,.cabp h1,.cabl h1,.cabe h1{font-size:27px}
  body{font-size:15px}
  .btn{height:40px;font-size:14.5px}
  .btn.s{height:36px}

  /* Dos columnas donde antes sólo cabía una: ahora sobra ancho. */
  .vg-desps{grid-template-columns:1fr 1fr;gap:16px}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
  .xp{grid-template-columns:232px minmax(0,1fr)}
  .xp-car{border-right:1px solid var(--line);border-bottom:0;display:block;padding:14px 10px}
  .xp-car a{width:auto;border:0;background:none;height:auto;min-height:42px;padding:7px 10px;align-items:flex-start}
  .xp-car a>span{white-space:normal}
  .xp-add{width:100%}
  .xp-h{width:auto;padding:4px 10px 10px}
  .xp-con{padding:18px 18px 16px}

  .fk-hh,.fk-c,.tj-f{height:auto !important;min-height:var(--fila-alto) !important}

  /* El tablero, con la tarjeta más grande. */
  .kb6{gap:12px}
  .kb6 .col{padding:10px}
  .kb6 .col>h3{font-size:14px;margin-bottom:10px}
  .kb6 .col>h3 small{font-size:13px}
  .ta{padding:11px 11px 10px;border-radius:10px}
  .ta .tex{font-size:12.5px}
  .ta .tcl{font-size:12.5px;padding-left:14px;-webkit-line-clamp:3}
  .ta .tno{font-size:14px;-webkit-line-clamp:5}
  .ta .tpl,.ta .tet{height:22px;font-size:12.5px;padding:0 8px}
  .ta .pat .av{width:22px;height:22px;font-size:10px}
  .col .mas{height:34px;font-size:13.5px}
  .ag-fil{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:14px}
  .ag-fil .fch{flex:none;height:34px;font-size:14px;padding:0 13px}
  .ag-fil .sep{flex:none}
  .agd-sem .rot{font-size:16px}
  .agd-sem .ib{width:36px;height:36px}
}

/* ---- Móvil: una columna, y los filtros en una sola línea que corre ---- */
@media (max-width:760px){
  .w,.w.estrecho,.w.ancho{padding:18px 16px 110px;max-width:none}
  .ag-fil{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    padding-bottom:14px;margin-bottom:16px}
  .ag-fil .fch{flex:none;height:36px;font-size:14px;padding:0 14px}
  .ag-fil .sep{flex:none}
  .agd-sem{flex-wrap:wrap;row-gap:8px}
  .agd-sem .rot{font-size:16px;min-width:0;flex:1}
  .agd-sem .ib{width:38px;height:38px}
  .kb6{gap:12px}
  .kb6 .col{padding:12px}
  .kb6 .col>h3{font-size:15px;margin-bottom:10px}
  .kb6 .col>h3 small{font-size:13.5px}
  .ta{padding:12px 12px 11px;border-radius:11px}
  .ta .tex{font-size:13px}
  .ta .tcl{font-size:13px;padding-left:14px}
  .ta .tno{font-size:15px;-webkit-line-clamp:6}
  .ta .tpl,.ta .tet{height:24px;font-size:13px;padding:0 9px;border-radius:7px}
  .ta .pat .av{width:24px;height:24px;font-size:10px}
  .col .mas{height:40px;font-size:14.5px}
  .ag-cab h1{font-size:24px}
  .ag-cab .btn{height:44px;font-size:15px}
}

/* En una pantalla que no es de ordenador, la fila de «Vence pronto» se queda
   con lo que importa: el nombre y la fecha. La pastilla de estado se guardaba
   en una segunda línea y acababa pintada encima del nombre. */
@media (max-width:1279px){
  .fk-hh .et{display:none}
  .fk-hh,.fk-c,.tj-f{height:auto !important;min-height:var(--fila-alto) !important}
}

/* La línea de filtros que corre: barra fina, que no robe alto. */
.ag-fil::-webkit-scrollbar{height:6px}
.ag-fil::-webkit-scrollbar-thumb{background:#d3d8e0;border-radius:6px}
.ag-fil::-webkit-scrollbar-track{background:transparent}
.ag-fil{scrollbar-width:thin;scrollbar-color:#d3d8e0 transparent}

/* En una pantalla de verdad grande el tablero respira, pero sin pasarse. */
@media (min-width:1700px){ .kb6{gap:14px} .ta .tno{font-size:13.5px} }

/* =====================================================================
   4.2 · Pendientes arriba, y una línea por semana hasta fin de año
   ===================================================================== */

/* El bloque de Pendientes: no es de ninguna semana, así que va aparte. */
.agd-pend{background:var(--soft2);border:1px solid var(--line);border-radius:var(--r2,12px);
  padding:14px 14px 6px;margin:0 0 18px}
.agd-pend h2{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:15px;font-weight:650}
.agd-pend h2 .ic{color:var(--rojo)}
.agd-pend h2 .n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  padding:0 7px;border-radius:20px;background:var(--rojo-l);color:var(--rojo);font-size:12.5px;font-weight:650}
.agd-pend h2 small{color:var(--mut);font-weight:500;font-size:12.5px;margin-left:2px}
.agd-pend.vacio h2 .n{background:var(--soft);color:var(--mut)}
.col.pend{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;align-items:start;
  background:none;border:0;padding:0;min-height:74px;border-radius:10px}
.col.pend .ta{margin:0}
.col.pend .mas{grid-column:1/-1;justify-self:start;width:auto;padding:0 10px}
.col.pend.soltando{background:#f2f6fc;box-shadow:inset 0 0 0 1.5px #b9c6da}

/* Una semana: la cabecera pliega, y debajo los seis días en línea. */
.agd-semanas{display:flex;flex-direction:column;gap:10px}
.sem{border:1px solid var(--line);border-radius:var(--r2,12px);background:#fff;overflow:hidden}
.sem>summary{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;cursor:pointer;
  list-style:none;font-size:14px;color:var(--ink2);user-select:none}
.sem>summary::-webkit-details-marker{display:none}
.sem>summary:hover{background:var(--soft2)}
.sem>summary b{font-weight:620;color:var(--ink);letter-spacing:-.01em}
.sem>summary .fl{display:flex;color:var(--mut);transition:transform .15s}
.sem[open]>summary .fl{transform:rotate(90deg)}
.sem[open]>summary{border-bottom:1px solid var(--line)}
.sem>summary .aho{height:22px;display:inline-flex;align-items:center;padding:0 9px;border-radius:20px;
  background:var(--az-l);color:var(--az);font-size:12px;font-weight:600}
.sem>summary .n{color:var(--mut);font-size:13px;font-variant-numeric:tabular-nums;flex:none}
.sem>summary .n small{font-size:13px}
.sem.sinnada>summary{color:var(--mut)}
.sem>.kb6{padding:12px}
.sem[open]{background:var(--soft2)}
.sem[open]>.kb6 .col{background:#fff}

/* Elegir etiquetas en la acción: pastillas que se marcan. */
.et-elige{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 0}
.et-op{display:inline-flex;align-items:center;cursor:pointer}
.et-op input{position:absolute;opacity:0;width:0;height:0}
.et-op span{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:20px;
  border:1px solid var(--line);background:#fff;color:var(--ink2);font-size:13px;font-weight:540}
.et-op input:checked+span{background:var(--ct);border-color:var(--c);color:var(--c);font-weight:600}
.et-op input:focus-visible+span{outline:2px solid var(--az);outline-offset:2px}

/* Las etiquetas en Ajustes. */
.et-fila{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.et-ver{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:8px;
  font-size:13px;font-weight:600;white-space:nowrap;flex:none;min-width:58px;justify-content:center}
.et-col{font-family:ui-monospace,monospace;font-size:12.5px}
.ag-fil .fch-mas{color:var(--mut);border-style:dashed}
.ag-fil .fch-mas:hover{color:var(--ink2)}

@media (max-width:760px){
  .agd-pend{padding:12px 12px 4px}
  .col.pend{grid-template-columns:1fr}
  .sem>summary{height:auto;min-height:52px;padding:10px 12px;flex-wrap:wrap;row-gap:4px}
  .sem>.kb6{padding:10px}
  .et-fila{flex-wrap:wrap}
  .et-fila .add{flex-wrap:wrap;row-gap:8px}
}

/* ---- Arrastrar una etiqueta encima de una acción ---- */
.ag-fil [data-etiq]{cursor:grab;touch-action:pan-x;-webkit-user-select:none;user-select:none}
.ag-fil [data-etiq]:active{cursor:grabbing}
/* La copia que vuela sale del filtro, así que lleva su forma escrita aquí. */
.fch.vuela-et{position:fixed;z-index:400;pointer-events:none;margin:0;
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:20px;
  border:1px solid var(--line);background:#fff;color:var(--ink2);font-size:13px;font-weight:540;
  white-space:nowrap;text-decoration:none;
  box-shadow:0 14px 26px -10px rgba(20,30,50,.38);transform:rotate(-2deg)}
.fch.vuela-et .pu{width:8px;height:8px;border-radius:50%;flex:none}
.fch.vuela-et .n{display:none}
.fch.vuela-et{height:36px;padding:0 15px;font-size:14.5px;font-weight:650}
.fch.vuela-et .pu{width:9px;height:9px}
/* Mientras una etiqueta está en el aire, las acciones se marcan como huecos
   donde se puede soltar, y la de debajo del dedo se ve de lejos. */
body.pegando .ta{transition:box-shadow .12s, transform .12s;border-style:dashed;border-color:#c3ccda}
body.pegando .ta.recibe{border-style:solid;border-color:var(--az);transform:scale(1.03);
  box-shadow:0 0 0 3px var(--az),0 16px 30px -14px rgba(20,30,50,.4)}
body.pegando .ta.recibe.quita{border-color:var(--rojo);box-shadow:0 0 0 3px var(--rojo),0 16px 30px -14px rgba(20,30,50,.4)}
body.pegando .col{background:#f4f7fb}
.guia .q{color:#fff;opacity:.85;max-width:38vw}

/* ---- El menú «···» de una acción (mismo patrón que el entorno de EV) ---- */
.ta{position:relative}
.ta>.ta-mas{position:absolute;top:4px;right:4px;z-index:3;width:28px;height:28px;border-radius:8px;
  opacity:0;transition:opacity .12s}
.ta:hover>.ta-mas,.ta>.ta-mas:focus-visible{opacity:1}
.ta>.ta-mas:hover{background:var(--soft)}
.ta .tex{padding-right:26px}
body.pegando .ta>.ta-mas{display:none}
@media (hover:none){ .ta>.ta-mas{opacity:1} }

/* El menú, uno para toda la pantalla: se coloca junto a la tarjeta que lo abre. */
.ta-menu{position:fixed;width:238px;top:0;left:0;right:auto}
.ta-menu .menu-tit{padding:8px 12px 4px;font-size:11px;font-weight:650;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mut)}
.ta-menu button{justify-content:flex-start}
.ta-menu button svg{margin-left:0 !important;flex:none}

/* ---- Varias personas en una acción, y mirar lo hecho ---- */
.caras{display:inline-flex;align-items:center;margin-left:auto;flex:none}
.caras .av{margin-left:-6px;box-shadow:0 0 0 2px #fff}
.caras .av:first-child{margin-left:0}
.caras .mas-n{display:inline-flex;align-items:center;justify-content:center;margin-left:-6px;border-radius:50%;
  background:var(--soft);color:var(--ink2);font-size:10px;font-weight:650;box-shadow:0 0 0 2px #fff;flex:none}
.ta .pat .caras{margin-left:auto}

.qn-elige{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.qn-op{display:inline-flex;cursor:pointer}
.qn-op input{position:absolute;opacity:0;width:0;height:0}
.qn-op span{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px 0 5px;border-radius:20px;
  border:1px solid var(--line);background:#fff;color:var(--ink2);font-size:13.5px;font-weight:540}
.qn-op input:checked+span{background:var(--az-l);border-color:var(--az);color:var(--az);font-weight:620}
.qn-op input:focus-visible+span{outline:2px solid var(--az);outline-offset:2px}

.ag-fil .fch-hec{border-color:#d7dde6}
.ag-fil .fch-hec.on{background:var(--verde);border-color:var(--verde);color:#fff}
.ag-fil .fch-hec.on .n{color:rgba(255,255,255,.75)}
.ag-fil>.sp{flex:1 1 auto;min-width:8px}
.agd-modo{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--verde-l);color:#0f6b46;
  border:1px solid #cdeadd;border-radius:var(--r2,12px);padding:12px 14px;margin:0 0 18px;font-size:14px}
.agd-modo .ic{color:var(--verde);flex:none}
.agd-modo a{color:#0f6b46;font-weight:650;text-decoration:underline;margin-left:auto}
.agd-semanas.hechas .col .mas{display:none}
.agd-semanas.hechas .ta{opacity:.72}
.agd-semanas.hechas .ta .tno{text-decoration:line-through;text-decoration-color:var(--mut)}

/* ---- Lo que pasa sin recargar: se ve y se entiende ---- */
.chivato{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  background:var(--ink);color:#fff;border-radius:12px;padding:11px 18px;font-size:14px;font-weight:540;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5);max-width:calc(100vw - 32px);text-align:center;
  animation:chivato-entra .16s ease-out}
.chivato.mal{background:var(--rojo)}
@keyframes chivato-entra{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
body.trabajando{cursor:progress}
.ta.yendose{transition:opacity .2s, transform .2s}
.ta.yendose.fuera{opacity:0;transform:scale(.95)}
@media (prefers-reduced-motion:reduce){
  .chivato{animation:none}
  .ta.yendose{transition:none}
}

/* ================= Traer de Drive (5.1) =================
   El árbol de Drive tal como está, plegable, y con una sola cosa que decidir
   en cada carpeta: si es un expediente o no. */
.dv-paso{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;
  border-radius:50%;background:var(--ink);color:#fff;font-size:14px;font-weight:700;margin-right:4px}
.dv-res{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:14px}
.dv-res b{font-size:20px;font-weight:700;margin-right:4px}
.dv-sigue{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0;padding:12px 14px;
  background:#f1f5fb;border:1px solid #dbe4f0;border-radius:12px;font-size:14px}
.dv-sigue .t{flex:1 1 auto;min-width:160px}
.dv-sigue form.o{margin:0}

.dv-arbol{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.dv-c{border-bottom:1px solid #eef1f6}
.dv-arbol>.dv-c:last-child{border-bottom:0}
.dv-c>summary{display:flex;align-items:center;gap:10px;min-height:46px;padding:7px 14px 7px calc(14px + var(--h,0px));
  cursor:pointer;list-style:none;font-size:14.5px}
.dv-c>summary::-webkit-details-marker{display:none}
.dv-c>summary:hover{background:#f7f9fc}
.dv-c>summary>svg{flex:none}
.dv-fl{display:inline-flex;flex:none;color:var(--mut);transition:transform .12s}
.dv-c[open]>summary .dv-fl{transform:rotate(90deg)}
.dv-nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:560}
.dv-ct{flex:none;font-size:12.5px;white-space:nowrap}
.dv-ya{flex:none;display:inline-flex;align-items:center;gap:5px;background:var(--verde-l);color:#0f6b46;
  border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600}
.dv-mk{flex:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 9px;font-size:13px;font-weight:560}
.dv-mk:hover{border-color:var(--accion);color:var(--accion)}
.dv-mk input{width:16px;height:16px;margin:0;accent-color:var(--accion)}
.dv-mk:has(input:checked){background:var(--accion);border-color:var(--accion);color:#fff}
.dv-in{border-top:1px solid #f2f5f9;background:#fbfcfe}
.dv-d{display:flex;align-items:center;gap:10px;min-height:38px;padding:4px 14px 4px calc(36px + var(--h,0px));font-size:13.5px}
.dv-d>svg{flex:none}
@media (max-width:760px){
  .dv-c>summary{flex-wrap:wrap;padding-left:calc(12px + var(--h,0px))}
  .dv-nm{flex:1 1 100%;order:1}
  .dv-fl,.dv-c>summary>svg{order:0}
  .dv-ct{order:2;flex:1 1 auto}
  .dv-ya,.dv-mk{order:3}
  .dv-d{padding-left:calc(26px + var(--h,0px))}
}

/* ---- El menú «⋯» de cada carpeta (5.1.01) ----
   La carpeta era sólo un enlace; ahora es el enlace y su menú al lado, sin que
   la fila cambie de alto ni el nombre pierda sitio. */
.xp-cf{display:flex;align-items:center;gap:2px;border-radius:9px}
.xp-cf>a{flex:1 1 auto;min-width:0}
.xp-cf.on{background:#EAF1F7}
.xp-cf.on>a{background:none;color:var(--ink);font-weight:560}
.xp-cf .car-menu{flex:none;opacity:0;transition:opacity .12s}
.xp-cf:hover .car-menu,.xp-cf.on .car-menu,.xp-cf .car-menu[open]{opacity:1}
.xp-cf .car-menu>summary{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:8px;cursor:pointer;list-style:none;color:var(--mut)}
.xp-cf .car-menu>summary::-webkit-details-marker{display:none}
.xp-cf .car-menu>summary:hover{background:#fff;color:var(--ink)}
.xp-cf .car-menu{position:relative}
.xp-cf .car-menu .menu{right:0;left:auto;min-width:230px}
.xp-cf .car-menu button svg{margin-left:0 !important}
/* En tablet y móvil el menú se ve siempre: no hay ratón que pase por encima. */
@media (hover:none){ .xp-cf .car-menu{opacity:1} }
@media (max-width:760px){ .xp-cf{border:1px solid var(--line);background:var(--sup);padding-right:2px} .xp-cf>a{border:0;background:none} }

/* ==================================================================
   5.2 · «A con la chicha de C»
   Las tarjetas enseñan la primera página del documento —la miniatura que
   Drive ya sabe dar— y debajo todo lo que la lista densa enseña en columnas:
   estado, versión y quién se ocupa. El botón de arriba cambia de una a otra
   y se recuerda.
   ================================================================== */

.xp-con-h .xp-num{color:var(--mut);font-size:13px;font-variant-numeric:tabular-nums;margin-left:12px;white-space:nowrap}

/* ---- Tarjetas ---- */
.dj{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:16px}
.dj-c{display:flex;flex-direction:column;background:#fff;border:1px solid #E8EDF3;border-radius:14px;
  overflow:hidden;transition:border-color .13s, box-shadow .13s, transform .13s}
.dj-c:hover{border-color:#CBD8E6;box-shadow:0 14px 30px -18px rgba(15,23,32,.4)}
.dj-c.soltando,.dj-c[draggable=true]:active{transform:scale(.985)}
.dj-v{display:block;color:inherit;text-decoration:none;min-width:0}

.dj-min{position:relative;display:block;height:132px;background:#F3F6FA;border-bottom:1px solid #EEF2F7;overflow:hidden}
/* La hoja dibujada: lo que se ve mientras la miniatura no está, o si no la hay. */
.dj-hoja{position:absolute;left:20px;right:20px;top:14px;bottom:-26px;background:#fff;border-radius:4px 4px 0 0;
  box-shadow:0 2px 10px rgba(15,23,32,.12);padding:13px 14px}
.dj-hoja i{display:block;height:3px;border-radius:2px;background:#E4EAF1;margin:0 0 7px}
.dj-hoja i:first-child{height:4px;width:56%;background:#CFDAE6;margin-bottom:10px}
.dj-hoja i:nth-child(3){width:82%}
.dj-hoja i:nth-child(4){width:70%}
.dj-hoja i:last-child{width:88%}
.dj-min img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  background:#fff;opacity:0;transition:opacity .2s}
/* Sólo se enseña la imagen cuando de verdad ha traído algo (el punto
   transparente de «sin miniatura» mide 1×1 y se queda escondido). */
.dj-min img.llena{opacity:1}
.dj-min img.vacia{opacity:0}
.dj-ext{position:absolute;left:10px;top:10px;z-index:2;background:#9AA3AE;color:#fff;border-radius:5px;
  padding:3px 7px;font-size:9.5px;font-weight:750;letter-spacing:.06em;line-height:1}
.dj-pdf{background:#D4384E}
.dj-doc,.dj-docx,.dj-odt,.dj-rtf{background:#2B579A}
.dj-xls,.dj-xlsx,.dj-csv,.dj-ods{background:#1D6F42}
.dj-jpg,.dj-jpeg,.dj-png,.dj-gif,.dj-webp,.dj-heic{background:#8A5CF6}
.dj-zip,.dj-rar,.dj-7z{background:#6B7684}

.dj-tx{display:block;padding:11px 13px 9px;min-width:0}
.dj-tx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13.5px;font-weight:570;line-height:1.36;min-height:2.72em;word-break:break-word}
.dj-tx small{display:block;color:var(--mut);font-size:11.5px;margin-top:5px;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dj-pie{display:flex;align-items:center;gap:6px;padding:0 9px 9px 13px;min-height:34px}
.dj-pie>.sp{flex:1 1 auto}
.dj-pie .tj-sin{color:#AEB7C2;font-style:normal;font-size:11.5px}
.dj-pie .resp{flex:none;display:inline-flex}
.dj-pie details.desp{flex:none;position:relative}
.dj-pie details.desp>summary{display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:8px;cursor:pointer;list-style:none;color:var(--mut)}
.dj-pie details.desp>summary::-webkit-details-marker{display:none}
.dj-pie details.desp>summary:hover{background:var(--sup2);color:var(--ink)}
.dj-pie .menu{right:0;left:auto;min-width:250px}
.dj-pie .menu button svg,.dj-pie .menu a svg{margin-left:0 !important}
.dj .fd{font-size:10.5px;padding:2.5px 7px}
.fd.d-ver{background:#EEF2F7;color:#5A6673}

/* ---- Lista densa: la de la C ---- */
.xp-densa td,.xp-densa th{padding-top:7px;padding-bottom:7px}
.xp-densa .num{font-variant-numeric:tabular-nums;color:var(--mut);font-size:12.5px;white-space:nowrap}
.xp-densa th.c0,.xp-densa td.c0{width:112px}
.xp-densa th.c4,.xp-densa td.c4{width:92px;text-align:right}
.xp-densa th.c2,.xp-densa td.c2{width:78px}
.xp-densa td.c2 .tj-sin{color:#C2C9D2;font-style:normal}
.xp-densa .est-min{display:none}
@media (max-width:1180px){ .xp-densa th.c4,.xp-densa td.c4{display:none} }
@media (max-width:1000px){ .xp-densa th.c0,.xp-densa td.c0{display:none} }
@media (max-width:820px){ .xp-densa th.c2,.xp-densa td.c2{display:none} }

@media (max-width:760px){
  .dj{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .dj-min{height:104px}
  .xp-con-h .xp-num{display:none}
}

/* ==================================================================
   5.2 · El menú de la izquierda, claro
   Era azul marino con el contenido en blanco: el patrón de hace ocho años.
   Ahora la página es una sola superficie clara y el peso lo lleva la
   tipografía, no el color. Lo elegido es una pastilla blanca que se levanta
   un poco; el color se guarda para lo que de verdad importa: los plazos,
   los estados y lo que falta.
   ================================================================== */
:root{
  --rail:#F6F8FB;          /* el fondo del menú */
  --rail-t:#59636F;        /* el texto en reposo */
  --rail-li:#E9EEF4;       /* su línea */
  --rail-on:#0F1720;       /* lo elegido */
}
.top{background:var(--rail);color:var(--rail-on);border-right:1px solid var(--rail-li)}
.top .marca{color:var(--rail-on)}
.top .marca .ic{opacity:.55;color:var(--mut)}
.top .lbr{color:#94A0AE}

.top .nav a{color:var(--rail-t)}
.top .nav a:hover{background:rgba(15,23,32,.045);color:var(--rail-on)}
.top .nav a.on{background:#fff;color:var(--rail-on);font-weight:620;
  box-shadow:0 1px 2px rgba(15,23,32,.08), 0 0 0 1px #E4EBF2}
.top .nav a .ic{color:#7C8797}
.top .nav a.on .ic{color:var(--acento,#1A3A6B)}

.top .desps-r button{color:var(--rail-t)}
.top .desps-r button:hover{background:rgba(15,23,32,.045);color:var(--rail-on)}
.top .desps-r button.on{color:var(--rail-on)}

.top .yo{border-top:1px solid var(--rail-li)}
.top .yo summary:hover,.top .cambia summary:hover{background:rgba(15,23,32,.045)}
.top .yo summary .nb{color:var(--rail-on)}
.top .yo summary small,.top .yo summary .rl{color:var(--mut)}

.rail-tog{color:var(--mut)}
.rail-tog:hover{background:rgba(15,23,32,.055);color:var(--rail-on)}
.rail-tog:focus-visible{outline:2px solid var(--acento,#1A3A6B);outline-offset:2px}

/* La barra de abajo del móvil, del mismo material. */
@media (max-width:760px){
  .top .nav{background:#fff;border-top:1px solid var(--rail-li);box-shadow:0 -6px 20px -12px rgba(15,23,32,.25)}
  .top .nav a{color:var(--rail-t)}
  .top .nav a.on{background:none;color:var(--acento,#1A3A6B);box-shadow:none}
}
/* La puerta de entrada y la de elegir despacho siguen en oscuro: es una
   pantalla de paso, y ahí el contraste va bien. */
body.puerta-oscura,.puerta-oscura .elegir{background:#11131A}

/* Los últimos restos de blanco del menú antiguo. Se escriben aparte porque
   estaban repartidos por varias capas y con !important en alguna. */
.top .marca,.top .marca .nb,.top .marca .nb i,.top .marca b{color:var(--rail-on) !important}
.top .marca .nb i{opacity:.9}
.top .desps-r a,.top .desps-r button{color:var(--rail-t) !important}
.top .desps-r a:hover,.top .desps-r button:hover{background:rgba(15,23,32,.045);color:var(--rail-on) !important}
.top .desps-r a.on,.top .desps-r button.on{color:var(--rail-on) !important;font-weight:600}
.top .yo summary .nb b{color:var(--rail-on) !important}
.top .yo summary .nb i,.top .yo summary .nb small{color:var(--mut) !important}
.top .yo summary>.ic,.top .cambia summary>.ic{color:var(--mut)}
.top .lbr{color:#94A0AE !important}

/* El nombre de la carpeta, con su menú al lado, sin partirse por la mitad. */
.xp-cf>a>span{display:block;flex:1 1 auto;min-width:0;max-height:2.6em;overflow:hidden;
  white-space:normal;line-height:1.3;word-break:normal;overflow-wrap:normal;text-overflow:clip;hyphens:none}
.xp-car .xp-cf>a{height:auto;min-height:42px;padding-top:7px;padding-bottom:7px;align-items:center}

/* En la lista densa la fecha ya tiene su columna: debajo del nombre sobra. */
.xp-densa .doc small{display:none}
.xp-densa .doc .tx b{font-size:14px}
.xp-densa td:first-child{padding-top:9px;padding-bottom:9px}

/* En tablet la columna de carpetas se queda con su sitio, así que las
   tarjetas se hacen más pequeñas para que entren dos y no una sola. */
@media (max-width:1180px){
  .dj{grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:12px}
  .dj-min{height:112px}
  .dj-tx{padding:10px 11px 8px}
  .dj-tx b{font-size:13px}
  .dj-pie{padding:0 7px 8px 11px}
}

/* ==================================================================
   5.3 · La proporción
   La columna de carpetas estaba clavada en 264–288 px, así que en una tablet
   se comía más de la mitad y los documentos quedaban en una tira. Ahora pide
   lo que necesita y no más: nunca menos de 196 px ni más de 268, y el resto
   es para lo que has venido a ver.
   ================================================================== */
@media (min-width:761px){
  .xp{grid-template-columns:clamp(196px, 23%, 268px) minmax(0,1fr)}
  .xp-car{padding:14px 10px}
  .xp-h{padding:4px 8px 10px}
}
/* La cabecera del contenido: el título manda, el recuento acompaña y los
   botones se van a la derecha sin empujar a nadie fuera. */
.xp-con-h{flex-wrap:wrap;row-gap:8px}
.xp-con-h h2{min-width:0;flex:0 1 auto}
.xp-con-h .vista{flex:none;margin-left:auto}
.xp-con-h .btn.p{flex:none}
@media (max-width:980px){
  .xp-con-h h2{font-size:18px;flex:1 1 100%}
  .xp-con-h .xp-num{margin-left:0}
  .xp-con-h .vista{margin-left:auto}
}
/* La raya que separa lo de todos de lo que sólo haces tú. */
.menu .menu-tit{font-size:10.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
  color:#98A4B2;padding:8px 14px 5px}

/* El nombre de la carpeta, entero. En una columna estrecha el menú «⋯» le
   robaba sitio y la palabra se partía por la mitad; ahora el menú se encoge,
   la letra baja un punto y, si aun así no cabe, se corta con puntos
   suspensivos al final de la segunda línea, no a mitad de palabra. */
@media (max-width:1180px){
  .xp-car .xp-cf>a{font-size:13px;gap:8px}
  .xp-cf .car-menu>summary{width:26px;height:26px}
  .xp-cf>a>svg:not(:first-child){display:none}   /* el ojillo: ya lo dice el menú */
}
.xp-cf>a>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:none;
  text-overflow:ellipsis}

/* ==================================================================
   5.4 · La lista, limpia
   Carpetas y archivos en la misma tabla, las carpetas primero. Cada fila con
   su casilla; al marcar algo, la barra de arriba cambia y dice qué se puede
   hacer con ello. Ni una línea vertical: lo que separa las columnas es el
   aire y la alineación, no una raya.
   ================================================================== */

/* ---- La casilla ---- */
.ck{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;cursor:pointer;flex:none;position:relative}
.ck input{position:absolute;opacity:0;width:0;height:0}
.ck span{width:17px;height:17px;border:1.6px solid #C3CDD9;border-radius:5px;background:#fff;
  display:block;transition:background .1s, border-color .1s}
.ck:hover span{border-color:#9BAABC}
.ck input:checked+span{background:var(--acento,#1A3A6B);border-color:var(--acento,#1A3A6B);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat}
.ck input:focus-visible+span{outline:2px solid var(--acento,#1A3A6B);outline-offset:2px}

/* ---- La barra de lo marcado ---- */
.xp-barra{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 4px 0 8px;
  border-bottom:1px solid var(--line);margin:0 0 2px;flex-wrap:wrap;row-gap:6px}
.xp-barra>.sp{flex:1 1 auto;min-width:4px}
.xb-nada{display:inline-flex;align-items:center;gap:9px;color:#9BA7B5;font-size:13.5px}
.xb-nada svg{color:#C3CDD9}
.xb-hay{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.xb-hay>b{font-size:13.5px;font-weight:620;margin-right:10px;white-space:nowrap}
.xb-b{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:0;border-radius:9px;
  background:none;color:#3D4956;font:inherit;font-size:13.5px;font-weight:530;cursor:pointer;white-space:nowrap}
.xb-b svg{color:#6B7684}
.xb-b:hover{background:var(--sup2)}
.xb-b:disabled{opacity:.38;cursor:default;background:none}
.xb-b.rojo{color:var(--rojo,#D4384E)} .xb-b.rojo svg{color:var(--rojo,#D4384E)}
.xb-b.rojo:hover{background:#FDECEF}
.xb-x{width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--mut);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.xb-x:hover{background:var(--sup2);color:var(--ink)}

/* ---- La tabla ---- */
.xl{width:100%;border-collapse:collapse;table-layout:fixed}
.xl th{font-size:12.5px;font-weight:600;color:#8A96A5;text-align:left;padding:10px 10px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.xl td{padding:0 10px;height:52px;border-bottom:1px solid #F1F4F8;vertical-align:middle}
.xl tbody tr:last-child td{border-bottom:0}
.xl tbody tr:hover td{background:#F8FAFC}
.xl tbody tr.marcada td{background:#EEF4FB}
.xl tbody tr.soltando td{background:#E2EDF8;box-shadow:inset 0 0 0 1.5px var(--acento,#1A3A6B)}
.xl .xl-ck{width:44px;padding-right:0}
.xl .xl-es{width:124px}
.xl .xl-fe{width:160px;color:var(--mut);font-size:13px;white-space:nowrap}
.xl .xl-ta{width:98px;color:var(--mut);font-size:13px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.xl .xl-ac{width:48px;text-align:right;padding-right:4px;position:relative;overflow:visible}
.xl .xl-no{color:#BDC6D1;font-style:normal}
.xl .xl-nm a{display:flex;align-items:center;gap:11px;min-width:0;color:inherit;text-decoration:none;font-weight:520}
.xl .xl-nm a>svg,.xl .xl-nm a>.ic{flex:none}
.xl .xl-nm a>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xl .xl-nm a:hover>span{color:var(--acento,#1A3A6B)}
.xl tr.xl-car .xl-nm a{font-weight:580}
.xl .fd{font-size:11.5px}
/* El menú de la fila: discreto hasta que haces falta. */
.xl .xl-ac details.desp{position:relative;display:inline-block}
.xl .xl-ac details.desp>summary{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:8px;cursor:pointer;list-style:none;color:#AAB4C0;opacity:0;transition:opacity .12s}
.xl .xl-ac details.desp>summary::-webkit-details-marker{display:none}
.xl tr:hover .xl-ac details.desp>summary,.xl .xl-ac details.desp[open]>summary{opacity:1}
.xl .xl-ac details.desp>summary:hover{background:var(--sup2);color:var(--ink)}
.xl .xl-ac .menu{right:0;left:auto;min-width:250px}
.xl .xl-ac .menu button svg,.xl .xl-ac .menu a svg{margin-left:0 !important}
@media (hover:none){ .xl .xl-ac details.desp>summary{opacity:1} }

/* Las cabeceras que ordenan. */
.xo{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;border-radius:6px;padding:2px 5px;margin-left:-5px}
.xo:hover{background:var(--sup2);color:var(--ink)}
.xo svg{color:#BDC6D1}
.xo.on{color:var(--ink)} .xo.on svg{color:var(--acento,#1A3A6B)}

/* ---- La zona de soltar, al final ---- */
.xp-soltar{display:flex;align-items:center;justify-content:center;gap:11px;margin:16px 0 0;padding:22px;
  border:1.5px dashed #D7DFE9;border-radius:13px;color:#8A96A5;font-size:14px;cursor:pointer;background:#FCFDFE}
.xp-soltar:hover{border-color:var(--acento,#1A3A6B);color:var(--ink);background:#F7FAFD}
.xp-soltar.soltando{border-color:var(--acento,#1A3A6B);background:#EAF2FA;color:var(--ink)}

/* ---- El pie ---- */
.xp-pie{display:flex;align-items:center;gap:10px;margin:18px 0 0;padding:12px 2px 0;border-top:1px solid var(--line);
  color:var(--mut);font-size:12.5px}
.xp-pie>.sp{flex:1 1 auto}
.xp-ok{display:inline-flex;align-items:center;gap:7px}
.xp-ok .pt{width:7px;height:7px;border-radius:50%;background:var(--verde,#17935F)}

/* ---- Las carpetas en tarjetas ---- */
.dj-car .dj-min{background:#F7F9FC}
.dj-minc{display:flex !important;align-items:center;justify-content:center}
.dj-ck{position:absolute;left:9px;top:9px;z-index:3;background:rgba(255,255,255,.94);border-radius:6px}
.dj-c{position:relative}
.dj-c:has(input[data-sel]:checked){border-color:var(--acento,#1A3A6B);box-shadow:0 0 0 1px var(--acento,#1A3A6B)}

@media (max-width:1100px){
  .xl .xl-ta{display:none} .xl th.xl-ta{display:none}
}
@media (max-width:900px){
  .xl .xl-es{display:none} .xl th.xl-es{display:none}
  .xl .xl-fe{width:112px}
}
@media (max-width:760px){
  .xl .xl-fe{display:none} .xl th.xl-fe{display:none}
  .xp-barra{padding-left:4px}
  .xb-nada span{display:none}
  .xb-b span{display:none}
}
/* Cuántos archivos tiene una carpeta, junto a su nombre: en la columna
   «Tamaño» ese número engañaba. */
.xl-n{flex:none;color:#AAB4C0;font-size:12.5px;font-weight:500;margin-left:2px}
.xl-n:not(:empty)::before{content:'· '}

/* ==================================================================
   5.5 · Barra arriba, un solo lateral, y la pantalla entera para lo que hay
   El árbol de carpetas se va al lateral, con la navegación, así que los
   documentos dejan de vivir en media pantalla. Arriba, una barra con dónde
   estás, qué buscas y quién eres: lo que antes estaba repartido por el menú.
   ================================================================== */
body{flex-direction:column}
.marco{display:flex;flex:1;min-height:0;width:100%}

.barra{display:flex;align-items:center;gap:12px;height:58px;flex:none;padding:0 16px;
  background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.barra>.sp{flex:1 1 auto;min-width:8px}
.ba-lg{display:flex;align-items:center;text-decoration:none;flex:none}
.ba-lg .lg{width:32px;height:32px;border-radius:9px;color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:11.5px;letter-spacing:.02em}
.ba-nom{font-size:14.5px;font-weight:600;white-space:nowrap}

.ba-desp{position:relative;flex:none}
.ba-desp>summary{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 13px;cursor:pointer;
  list-style:none;border:1px solid var(--line);border-radius:9px;font-size:14px;font-weight:540;background:#fff;
  max-width:230px}
.ba-desp>summary::-webkit-details-marker{display:none}
.ba-desp>summary>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ba-desp>summary:hover{border-color:#C8D3E0;background:var(--sup)}
.ba-desp[open]>summary{border-color:var(--acento,#1A3A6B)}
.ba-desp .menu{left:0;right:auto;top:44px;min-width:250px}
.ba-desp .menu .pu{width:9px;height:9px;border-radius:50%;flex:none}

.ba-busca{flex:1 1 560px;max-width:620px;margin:0 auto}
.ba-busca .lz{width:100%}
.ba-busca .lz .in{height:38px;background:var(--sup);border-color:transparent}
.ba-busca .lz .in:focus{background:#fff;border-color:var(--acento,#1A3A6B)}

.ba-yo{position:relative;flex:none}
.ba-yo>summary{display:flex;align-items:center;gap:9px;height:40px;padding:0 8px;border-radius:10px;cursor:pointer;list-style:none}
.ba-yo>summary::-webkit-details-marker{display:none}
.ba-yo>summary:hover{background:var(--sup2)}
.ba-yo .nb{font-size:13.5px;color:var(--ink);font-weight:520;white-space:nowrap}
.ba-yo .menu{right:0;left:auto;top:48px;width:272px}

/* El lateral ya no lleva marca ni usuario: sólo a dónde ir y qué carpetas hay. */
.top{height:auto;min-height:0;align-self:stretch;position:sticky;top:58px;
  max-height:calc(100vh - 58px);overflow-y:auto;overscroll-behavior:contain}
.top>.btn.p{margin:14px 2px 10px}
.lat-arb{display:flex;flex-direction:column;gap:1px;margin:0 0 4px}
.lat-add{display:flex;align-items:center;gap:9px;width:100%;height:36px;padding:0 10px;margin-top:4px;
  border:0;background:none;color:var(--mut);font:inherit;font-size:13.5px;border-radius:9px;cursor:pointer}
.lat-add:hover{background:rgba(15,23,32,.045);color:var(--ink)}
.lat-pie{display:flex;flex-direction:column;gap:2px;padding-top:10px;border-top:1px solid var(--rail-li);margin-top:8px}
.lat-pie a{display:flex;align-items:center;gap:11px;height:38px;padding:0 10px;border-radius:9px;
  color:var(--rail-t);text-decoration:none;font-weight:500;font-size:14px}
.lat-pie a:hover{background:rgba(15,23,32,.045);color:var(--rail-on)}
.lat-pie a.on{background:#fff;color:var(--rail-on);font-weight:620;box-shadow:0 1px 2px rgba(15,23,32,.08),0 0 0 1px #E4EBF2}
.lat-pie a svg{color:#7C8797}

/* El explorador, sin su columna: todo el ancho para los documentos. */
.xp-solo{display:block;background:none;border:0;border-radius:0;overflow:visible}
.xp-solo .xp-con{padding:0}

@media (max-width:760px){
  .barra{height:52px;padding:0 10px;gap:8px}
  .ba-busca{flex:1 1 auto;max-width:none;margin:0}
  .ba-desp,.ba-nom{display:none}
  .ba-yo .nb{display:none}
  .top{position:static;max-height:none}
}
@media (max-width:1000px){ .ba-busca{flex:1 1 auto;max-width:none} }

/* ---- El buscador, dentro de la barra ----
   El de la portada es una caja grande con sombra; aquí tiene que ser una
   línea más de la barra, así que se le quita el relieve y se le baja el alto. */
.ba-busca{display:flex;align-items:center}
.ba-busca .lz{position:relative;margin:0;width:100%}
.ba-busca .lz .in{width:100%;height:38px;font-size:14px;padding:0 54px 0 40px;border-radius:10px;
  background:var(--sup);border:1px solid transparent;box-shadow:none}
.ba-busca .lz .in:focus{background:#fff;border-color:var(--acento,#1A3A6B);box-shadow:0 0 0 3px rgba(26,58,107,.09)}
.ba-busca .lz-lupa{left:13px;top:50%;transform:translateY(-50%)}
.ba-busca .lz kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
.ba-busca .lz-dd{top:46px}

/* ---- El árbol de carpetas, ya en el lateral ----
   Antes vivía dentro de «.xp-car» y heredaba de allí su forma; aquí hay que
   dársela otra vez, o el icono se pone encima del nombre. */
.lat-arb .xp-cf{display:flex;align-items:center;gap:2px;border-radius:9px}
.lat-arb .xp-cf>a{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;
  min-height:36px;padding:6px 6px 6px calc(10px + var(--n,0) * 14px);
  border-radius:9px;color:var(--rail-t);text-decoration:none;font-size:13.5px;line-height:1.3}
.lat-arb .xp-cf>a>svg{flex:none;color:#8FA6BA}
.lat-arb .xp-cf>a>span{flex:1 1 auto;min-width:0;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;word-break:normal;overflow-wrap:normal}
.lat-arb .xp-cf>a:hover{background:rgba(15,23,32,.045);color:var(--rail-on)}
.lat-arb .xp-cf.on{background:#fff;box-shadow:0 1px 2px rgba(15,23,32,.08), 0 0 0 1px #E4EBF2}
.lat-arb .xp-cf.on>a{color:var(--rail-on);font-weight:600}
.lat-arb .xp-cf.on>a>svg{color:var(--acento,#1A3A6B)}
.lat-arb .xp-cf>a.soltando{background:#DCE9F4;box-shadow:inset 0 0 0 1.5px var(--acento,#1A3A6B)}
.lat-arb .car-menu{flex:none;opacity:0}
.lat-arb .xp-cf:hover .car-menu,.lat-arb .xp-cf.on .car-menu,.lat-arb .car-menu[open]{opacity:1}
@media (hover:none){ .lat-arb .car-menu{opacity:1} }
/* La barra ocupa el ancho entero, pase lo que pase con las capas de antes. */
.barra{width:100%;align-self:stretch;flex:0 0 auto;box-sizing:border-box}
.marco{align-self:stretch;width:100%}
/* El contenido tiene que poder encogerse, o la tabla empuja la página. */
.cuerpo{min-width:0;flex:1 1 auto}
/* Con el menú en iconos no cabe el nombre de una carpeta: el árbol se guarda
   y vuelve en cuanto se abre el menú. */
body.rail-min .lat-arb,body.rail-min .top .lbr{display:none}
@media (max-width:980px){ .xl .xl-fe .xl-no{display:none} }   /* «· guardando» no cabe y no es urgente */