/* =========================================================
   CSS GLOBAL — todo gobernado por las custom properties que
   inyecta el ThemeManager en :root. Cambiar de tema NO toca
   este archivo: solo cambian las variables.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-base);
    background: var(--c-bg);
    color: var(--c-text);
    line-height: 1.5;
    font-size: 15px;
}

a { color: var(--c-primary); text-decoration: none; }
.muted { color: var(--c-text-muted); }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem; padding: .6rem 1rem; border: 1px solid transparent;
    border-radius: var(--radio); font: inherit; font-weight: 600;
    cursor: pointer; transition: filter .15s ease, background .15s ease;
}
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: var(--c-border); color: var(--c-text); }
.btn-ghost:hover { background: var(--c-bg); }
.btn-block { width: 100%; }

/* ---------- Formularios ---------- */
label { display: block; margin-bottom: 1rem; font-weight: 600; font-size: .9rem; }
input, select {
    width: 100%; margin-top: .35rem; padding: .65rem .8rem;
    border: 1px solid var(--c-border); border-radius: var(--radio);
    background: var(--c-surface); color: var(--c-text); font: inherit; font-weight: 400;
}
input:focus, select:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; }

/* ---------- Alertas ---------- */
.alerta { padding: .7rem 1rem; border-radius: var(--radio); margin-bottom: 1rem; font-size: .9rem; }
.alerta-danger { background: color-mix(in srgb, var(--c-danger) 12%, transparent); color: var(--c-danger); }

/* ---------- Pantalla de login ---------- */
.pantalla-auth {
    min-height: 100vh; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--c-primary-dark), var(--c-primary));
    padding: 1rem;
}
.auth-card {
    width: 100%; max-width: 380px; background: var(--c-surface);
    padding: 2.2rem; border-radius: calc(var(--radio) * 2);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.auth-brand { text-align: center; margin-bottom: 1.6rem; }
.auth-logo {
    display: inline-grid; place-items: center; width: 56px; height: 56px;
    background: var(--c-primary); color: #fff; border-radius: 14px;
    font-weight: 800; letter-spacing: .5px; margin-bottom: .8rem;
}
.auth-logo.sm { width: 34px; height: 34px; font-size: .7rem; border-radius: 9px; }
.auth-brand h1 { font-size: 1.3rem; }

/* ============================================================
   LAYOUT + SIDEBAR SEGMENTADO (moderno)
   ============================================================ */
.layout { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }

.sidebar {
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.14)), var(--c-primary-dark);
    color: #fff;
    padding: 1rem .75rem 1.1rem; display: flex; flex-direction: column; gap: 1.15rem;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.05);
}
/* Marca */
.sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: .35rem .35rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-logo { width: 42px; height: 42px; flex-shrink: 0; object-fit: contain;
    background: #fff; padding: 4px; border-radius: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.22); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.brand-text small { font-size: .72rem; color: rgba(255,255,255,.58); margin-top: .1rem; }

/* Menú por segmentos */
.menu { display: flex; flex-direction: column; gap: 1.35rem; flex: 1; }
.menu-grupo { display: flex; flex-direction: column; gap: .18rem; }
.menu-grupo-tit { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
    color: rgba(255,255,255,.4); font-weight: 700; padding: 0 .55rem .45rem; }
.menu-item { display: flex; align-items: center; gap: .72rem; color: rgba(255,255,255,.82);
    padding: .6rem .65rem; border-radius: 11px; font-size: .9rem; font-weight: 500;
    text-decoration: none; position: relative; transition: background .16s ease, color .16s ease, transform .1s ease; }
.menu-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.menu-item:active { transform: scale(.985); }
.menu-item.activo { background: rgba(255,255,255,.13); color: #fff; font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.menu-item.activo::before { content: ""; position: absolute; left: -.75rem; top: 50%; transform: translateY(-50%);
    width: 4px; height: 60%; background: var(--c-accent); border-radius: 0 4px 4px 0;
    box-shadow: 0 0 10px var(--c-accent); }
.menu-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; }
.menu-ico svg { width: 19px; height: 19px; }

/* Tarjeta de usuario abajo */
.sidebar-user { display: flex; align-items: center; gap: .6rem; padding: .7rem .55rem;
    margin-top: .2rem; border-top: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.03); border-radius: 12px; }
.user-avatar { display: inline-grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--c-accent), rgba(255,255,255,.2)); color: var(--c-primary-dark);
    border-radius: 50%; font-weight: 800; font-size: .92rem; }
.user-meta { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.user-meta strong { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta small { font-size: .72rem; color: rgba(255,255,255,.55); }
.btn-salir { background: transparent; border: 0; color: rgba(255,255,255,.7); cursor: pointer; padding: .35rem; border-radius: 8px; display: grid; place-items: center; }
.btn-salir svg { width: 19px; height: 19px; }
.btn-salir:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Contenido / topbar */
.contenido { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.4rem;
    background: var(--c-surface); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 20; }
.topbar-titulo { font-weight: 700; font-size: 1.05rem; flex: 1; }
.topbar-acciones { display: flex; align-items: center; gap: .8rem; }
.selector-tema-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600;
    color: var(--c-text-muted); text-decoration: none; padding: .4rem .75rem; border: 1px solid var(--c-border); border-radius: 999px; }
.selector-tema-link svg { width: 16px; height: 16px; }
.selector-tema-link:hover { color: var(--c-primary); border-color: var(--c-primary); }
.usuario-chip { font-size: .85rem; font-weight: 600; padding: .35rem .7rem; background: var(--c-bg); border-radius: 999px; }

.main { padding: 1.7rem 2rem; width: 100%; }

/* Botón hamburguesa (oculto en escritorio) */
.navtoggle-btn, .nav-overlay { display: none; }
.navtoggle-btn { background: transparent; border: 0; cursor: pointer; color: var(--c-text); padding: .3rem; }
.navtoggle-btn svg { width: 24px; height: 24px; display: block; }

/* ---------- Tarjetas / paneles ---------- */
.grid-cards {
    display: grid; gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 1.4rem;
}
.card {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radio); padding: 1.2rem;
}
.card-num { font-size: 2rem; font-weight: 800; color: var(--c-primary); }
.card-label { color: var(--c-text-muted); font-size: .85rem; margin-top: .2rem; }
.panel {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radio); padding: 1.4rem;
}
.panel h2 { margin-bottom: .5rem; font-size: 1.15rem; }

/* ---------- Pantallas de error ---------- */
.pantalla-error { min-height: 100vh; display: grid; place-items: center; background: var(--c-bg); }
.error-box { text-align: center; }
.error-box h1 { font-size: 4rem; color: var(--c-primary); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar { position: fixed; top: 0; left: 0; width: 270px; z-index: 50;
        transform: translateX(-100%); transition: transform .25s ease; }
    .navtoggle-cb:checked ~ .layout .sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.4); }
    .navtoggle-cb:checked ~ .nav-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40; }
    .navtoggle-btn { display: inline-grid; place-items: center; }
    .selector-tema-link span { display: none; }
    .main { padding: 1.1rem; }
}

/* ============================================================
   Cuadro de clasificación — explorador (árbol) y formularios
   ============================================================ */
.cuadro-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap; padding-bottom:1rem; border-bottom:1px solid var(--c-border); }
.cuadro-head h2 { font-size:1.35rem; margin-bottom:.25rem; }
.cuadro-head .muted { font-size:.88rem; }
.cuadro-acciones { display:flex; gap:.6rem; flex-wrap:wrap; }

.alerta-ok { background: color-mix(in srgb, var(--c-success) 14%, transparent); color: var(--c-success); }

.arbol { display:flex; flex-direction:column; gap:.5rem; }

/* Clasificador en columnas: cada sección raíz es una "tarjeta" que no se parte. */
.arbol-columnas { display:block; columns: 3 340px; column-gap: 1rem; }
.arbol-columnas > .nodo { break-inside: avoid; margin-bottom: 1rem; width: 100%; }
@media (max-width: 1100px) { .arbol-columnas { columns: 2 300px; } }
@media (max-width: 720px)  { .arbol-columnas { columns: 1; } }

.nodo { background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--radio); overflow:hidden; }
.arbol-columnas > .nodo { box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.arbol-columnas > .nodo > summary { background: color-mix(in srgb, var(--c-primary) 6%, var(--c-surface)); }
.nodo > summary {
    display:flex; align-items:center; gap:.7rem; padding:.7rem 1rem; cursor:pointer;
    list-style:none; user-select:none; font-weight:600;
}
.nodo > summary::-webkit-details-marker { display:none; }
.nodo > summary::before {
    content:"▸"; color:var(--c-text-muted); transition:transform .15s ease; display:inline-block; width:.8em;
}
.nodo[open] > summary::before { transform:rotate(90deg); }
.nodo > summary:hover { background: var(--c-bg); }

.nodo-cod {
    font-family:var(--font-mono, monospace); font-size:.78rem; font-weight:700;
    background: var(--c-primary); color:#fff; padding:.15rem .5rem; border-radius:5px;
}
.nodo-nom { flex:1; }
.nodo-acc { font-size:.82rem; font-weight:400; }
.nodo-acc a { color: var(--c-text-muted); }
.nodo-acc a:hover { color: var(--c-primary); }

.nodo-cuerpo { padding:.3rem 1rem 1rem 2rem; border-top:1px solid var(--c-border); }

.series { list-style:none; display:flex; flex-direction:column; gap:.1rem; margin:.5rem 0; }
.serie { display:flex; align-items:center; gap:.6rem; padding:.4rem .6rem; border-radius:6px; font-size:.92rem; }
.serie:hover { background: var(--c-bg); }
.serie-cod { font-family:var(--font-mono, monospace); font-size:.72rem; font-weight:600; color:var(--c-primary); min-width:72px; }
.serie-nom { flex:1; }

.badge { font-size:.68rem; font-weight:700; padding:.1rem .45rem; border-radius:999px; text-transform:uppercase; }
.badge-warn { background: color-mix(in srgb, var(--c-warning) 18%, transparent); color: var(--c-warning); }
.badge-mut { background: var(--c-bg); color: var(--c-text-muted); }
.vacio { font-size:.85rem; margin:.4rem 0; font-style:italic; }

/* Anidación visual de subsecciones */
.nodo-cuerpo .nodo { margin-top:.4rem; }

/* Formularios del módulo */
.form-wrap { max-width:560px; }
.form-wrap h2 { font-size:1.2rem; margin-bottom:1rem; }
.form-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radio); padding:1.4rem; }
.form-card small { display:block; margin-top:.25rem; font-weight:400; font-size:.78rem; }
.form-row { display:flex; gap:1rem; }
.form-row label { flex:1; }
.form-acciones { display:flex; justify-content:flex-end; gap:.7rem; margin-top:.5rem; }

/* Cuadro — parte 2: series, retención, tablas */
.cuadro-acciones { display:flex; gap:.6rem; align-items:center; }
.serie-ret { font-size:.72rem; color:var(--c-text-muted); background:var(--c-bg); padding:.1rem .45rem; border-radius:999px; }
.serie-acc { font-size:.8rem; }
.serie-acc a { color:var(--c-text-muted); } .serie-acc a:hover { color:var(--c-primary); }
.add-serie { display:inline-block; margin-top:.4rem; font-size:.82rem; color:var(--c-primary); }
.add-serie:hover { text-decoration:underline; }
.alerta-info { background: color-mix(in srgb, var(--c-primary) 10%, transparent); color: var(--c-primary-dark); }

.tabla-wrap { overflow-x:auto; }
.tabla { width:100%; border-collapse:collapse; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radio); overflow:hidden; }
.tabla th, .tabla td { padding:.65rem .8rem; text-align:left; border-bottom:1px solid var(--c-border); font-size:.9rem; }
.tabla th { background:var(--c-bg); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--c-text-muted); }
.tabla tr:last-child td { border-bottom:0; }
.tabla tr:hover td { background:var(--c-bg); }

/* Buscador */
.buscador-form { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radio); padding:1.2rem; margin-bottom:1.2rem; }
.buscador-q { display:flex; gap:.6rem; margin-bottom:1rem; }
.buscador-q input { margin:0; }
.buscador-filtros { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:.8rem; }
.buscador-filtros label { margin:0; font-size:.82rem; }
.resultados-cuenta { margin:.3rem 0 .8rem; }
.etiqueta-chip { display:inline-block; font-size:.72rem; background:var(--c-bg); color:var(--c-text-muted); padding:.1rem .5rem; border-radius:999px; margin:.1rem; }

/* Matriz de permisos por serie */
.tabla-permisos { margin:.5rem 0; }
.tabla-permisos .col-acc { text-align:center; width:90px; }
.tabla-permisos th.col-acc { text-transform:capitalize; }
.tabla-permisos input[type=checkbox] { width:auto; margin:0; cursor:pointer; transform:scale(1.15); }

/* Estado de usuarios */
.pill { display:inline-block; font-size:.72rem; padding:.12rem .55rem; border-radius:999px; }
.pill-ok  { background:var(--c-ok-bg, #e1f5ee); color:var(--c-ok-fg, #0f6e56); }
.pill-off { background:var(--c-bg); color:var(--c-text-muted); }
.check-inline { display:flex; align-items:center; gap:.5rem; flex-direction:row !important; }
.check-inline input { width:auto; margin:0; transform:scale(1.15); }
.btn-secondary { background:var(--c-bg); color:var(--c-text); border:1px solid var(--c-border); }

/* Paginación */
.paginacion { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.2rem; }

/* ============================================================
   VISOR DE DOCUMENTO
   ============================================================ */
.visor-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.visor-cuerpo { display:grid; grid-template-columns:1fr 300px; gap:1.3rem; align-items:start; }
.visor-pdf { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radio); overflow:hidden; min-height:480px; }
.visor-pdf object { width:100%; height:80vh; min-height:480px; border:0; display:block; }
.visor-pdf-fallback { display:grid; place-items:center; gap:1rem; padding:3rem 1.5rem; text-align:center; }
.visor-ficha { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radio); padding:1.2rem 1.3rem; }
.visor-ficha h3 { font-size:.95rem; margin:0 0 .6rem; }
.visor-ficha h3:not(:first-child) { margin-top:1.3rem; }
.visor-ficha dl { margin:0; }
.visor-ficha dt { font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--c-text-muted); margin-top:.8rem; }
.visor-ficha dd { margin:.15rem 0 0; font-size:.92rem; }
.visor-etiquetas { display:flex; flex-wrap:wrap; gap:.35rem; }
a.etiqueta-chip { text-decoration:none; }
a.etiqueta-chip:hover { background:var(--c-primary); color:#fff; }
@media (max-width:820px) { .visor-cuerpo { grid-template-columns:1fr; } .visor-pdf object { height:65vh; } }

/* ============================================================
   GALERÍA DE DOCUMENTOS — tarjetas grandes
   ============================================================ */
.doc-galeria { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:1.4rem; margin-top:.6rem; }
.doc-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .18s, transform .18s; }
.doc-card:hover { box-shadow:0 10px 30px rgba(0,0,0,.13); transform:translateY(-3px); }
.doc-card-thumb { position:relative; display:block; height:210px; background:var(--cardcolor, #1d9e75); text-decoration:none; overflow:hidden; }
.doc-card-thumb::before { content:""; position:absolute; inset:0; background:
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.22), transparent 42%),
    linear-gradient(155deg, rgba(255,255,255,.16), rgba(0,0,0,.30)); }
.doc-card-thumb::after { content:""; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:62px; height:78px; border-radius:6px;
    background:rgba(255,255,255,.92); box-shadow:0 6px 18px rgba(0,0,0,.22);
    -webkit-mask:linear-gradient(#000,#000); }
.doc-card-cod { position:absolute; top:.8rem; left:.85rem; z-index:2; color:#fff; font-weight:700; font-size:.92rem; letter-spacing:.02em; text-shadow:0 1px 3px rgba(0,0,0,.35); }
.doc-card-pdf { position:absolute; bottom:.7rem; right:.8rem; z-index:2; color:#fff; font-size:.72rem; font-weight:700; border:1.5px solid rgba(255,255,255,.7); border-radius:5px; padding:.12rem .5rem; letter-spacing:.05em; }
.doc-card-tags { position:absolute; top:.7rem; right:.7rem; z-index:3; display:flex; flex-direction:column; align-items:flex-end; gap:.28rem; max-width:78%; }
.doc-tag { background:rgba(255,255,255,.95); color:#2b2b2b; font-size:.7rem; font-weight:600; padding:.14rem .55rem; border-radius:999px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.doc-tag-mas { background:rgba(0,0,0,.5); color:#fff; }
.doc-card-body { padding:.85rem 1rem .5rem; flex:1; }
.doc-card-titulo { display:block; font-weight:600; font-size:.98rem; line-height:1.35; color:var(--c-text); text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.doc-card-titulo:hover { color:var(--c-primary); }
.doc-card-meta { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; margin-top:.5rem; font-size:.78rem; color:var(--c-text-muted); }
.doc-card-exp { background:var(--c-bg); border-radius:5px; padding:.08rem .45rem; font-weight:600; }
.doc-card-pags, .doc-card-ocr { display:inline-flex; align-items:center; gap:.2rem; }
.doc-card-pags svg, .doc-card-ocr svg { opacity:.7; }
.doc-card-ocr { color:var(--c-primary); font-weight:600; }
.doc-card-acciones { display:flex; border-top:1px solid var(--c-border); }
.doc-card-acciones a { flex:1; text-align:center; padding:.7rem; font-size:.82rem; font-weight:600; text-decoration:none; color:var(--c-text-muted); transition:background .12s; }
.doc-card-acciones a:first-child { border-right:1px solid var(--c-border); color:var(--c-primary); }
.doc-card-acciones a:hover { background:var(--c-bg); }
.vacio { text-align:center; padding:3rem 1rem; }
.vacio .btn { margin-top:.9rem; }

/* ============================================================
   DASHBOARD — entrada visual (galería)
   ============================================================ */
.dash-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.dash-saludo { font-size:1.5rem; margin-bottom:.2rem; }
.dash-hero-acciones { display:flex; gap:.6rem; flex-wrap:wrap; }

/* Barra compacta de cifras */
.dash-cifras { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.5rem; }
.cifra { display:flex; flex-direction:column; gap:.1rem; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radio); padding:.7rem 1.1rem; min-width:120px; text-decoration:none; transition:border-color .15s; }
a.cifra:hover { border-color:var(--c-primary); }
.cifra-num { font-size:1.45rem; font-weight:700; line-height:1; color:var(--c-text); }
.cifra-lbl { font-size:.76rem; color:var(--c-text-muted); }

/* Layout principal: galería protagonista + aside */
.dash-main { display:grid; grid-template-columns:1fr 290px; gap:1.4rem; align-items:start; }
/* Por área: strip horizontal arriba */
.dash-areas { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radio);
    padding:.85rem 1.1rem; margin-bottom:1.5rem; display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.dash-areas-tit { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
    color:var(--c-text-muted); flex-shrink:0; }
.dash-areas-list { display:flex; gap:.9rem; flex-wrap:wrap; flex:1; }
.area-chip { min-width:150px; flex:1; max-width:260px; }
.area-chip-top { display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; margin-bottom:.3rem; }
.area-chip-nom { font-size:.84rem; font-weight:600; color:var(--c-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.area-chip-num { font-size:.9rem; font-weight:700; color:var(--c-primary); }
.dash-recientes .panel-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.9rem; }
.dash-recientes .panel-head h3 { font-size:1.1rem; }

.dash-vacio { padding:1.2rem 0; text-align:center; }
.dash-barras { list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.barra-info { display:flex; justify-content:space-between; font-size:.82rem; margin-bottom:.25rem; }
.barra-track { height:7px; background:var(--c-bg); border-radius:999px; overflow:hidden; }
.barra-fill { height:100%; background:var(--c-primary); border-radius:999px; }

@media (max-width:900px) { .dash-main { grid-template-columns:1fr; } }


/* ============================================================
   LOGIN PROFESIONAL (dos columnas)
   ============================================================ */
.body-auth { min-height:100vh; }
.login-split { min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; }

.login-marca {
    background:
        linear-gradient(155deg, rgba(12,90,71,.93), rgba(15,110,86,.9) 55%, rgba(21,122,95,.93)),
        var(--textura, none);
    background-size: cover, 380px;
    background-repeat: no-repeat, repeat;
    background-blend-mode: normal, soft-light;
    color:#fff; padding:2.5rem; display:flex; flex-direction:column; justify-content:space-between;
    position:relative; overflow:hidden;
}
.login-marca::after {
    content:""; position:absolute; right:-90px; bottom:-90px; width:340px; height:340px;
    border-radius:50%; background:rgba(122,193,67,.10);
}
.login-marca::before {
    content:""; position:absolute; left:-60px; top:-60px; width:200px; height:200px;
    border-radius:50%; background:rgba(255,255,255,.04);
}
.login-marca-top { display:flex; align-items:center; gap:.7rem; position:relative; z-index:1; }
.login-marca-nombre { font-weight:600; font-size:1.05rem; }
.login-marca-mid { position:relative; z-index:1; }
.login-marca-mid h1 { font-size:2.1rem; line-height:1.2; font-weight:700; margin-bottom:.9rem; }
.login-marca-mid p { opacity:.88; max-width:380px; line-height:1.6; }
.login-marca-pie { position:relative; z-index:1; opacity:.8; font-size:.9rem; }

/* Isotipo / logo (imagen papel.webp) */
.login-iso-chip-img {
    width:48px; height:48px; flex-shrink:0; object-fit:contain;
    background:rgba(255,255,255,.95); border-radius:13px; padding:5px;
}
.login-iso-grande-img {
    display:block; width:130px; height:130px; margin:0 auto 1.1rem;
    object-fit:contain;
}

/* Badge ecológico */
.login-badge {
    display:inline-flex; align-items:center; gap:.45rem;
    background:rgba(122,193,67,.22); color:#d9f0c2;
    padding:.35rem .8rem; border-radius:20px; font-size:.8rem; margin-bottom:1.1rem;
}

/* Pilares con iconos */
.login-pilares { display:flex; gap:1.6rem; margin-top:1.7rem; }
.login-pilar { display:flex; flex-direction:column; gap:.15rem; }
.login-pilar svg { color:#a9e08a; margin-bottom:.2rem; }
.login-pilar strong { font-size:.82rem; font-weight:600; }
.login-pilar span { font-size:.78rem; opacity:.62; }

/* Bloque de confianza: archivo seguro en la nube */
.login-nube { position:relative; z-index:1; display:flex; align-items:center; gap:.75rem; margin-top:1.9rem;
    background:rgba(122,193,67,.16); border:1px solid rgba(169,224,138,.28); border-radius:14px; padding:.75rem .9rem;
    max-width:380px; }
.login-nube-ico { display:grid; place-items:center; width:38px; height:38px; flex-shrink:0;
    background:rgba(169,224,138,.22); color:#c8ecab; border-radius:10px; }
.login-nube-txt { display:flex; flex-direction:column; line-height:1.3; }
.login-nube-txt strong { font-size:.86rem; font-weight:600; }
.login-nube-txt span { font-size:.75rem; opacity:.75; }

.login-logo {
    display:grid; place-items:center; width:48px; height:48px; flex-shrink:0;
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);
    border-radius:12px; font-weight:700; letter-spacing:.03em; font-size:.85rem;
}

.login-form-side { display:grid; place-items:center; padding:2rem; background:var(--c-bg); }
.login-card { width:100%; max-width:390px; }
.login-card-head { text-align:center; margin-bottom:1.6rem; }
.login-card-head h2 { font-size:1.4rem; margin-bottom:.25rem; }

/* Inputs con icono */
.login-input { display:flex; align-items:center; gap:.55rem; border:1px solid var(--c-border); border-radius:9px; padding:0 .8rem; height:46px; background:var(--c-surface); transition:border-color .15s, box-shadow .15s; }
.login-input:focus-within { border-color:#0F6E56; box-shadow:0 0 0 3px rgba(15,110,86,.12); }
.login-input svg { color:var(--c-text-muted); flex-shrink:0; }
.login-input input { border:0; background:none; flex:1; height:100%; font:inherit; outline:none; color:var(--c-text); padding:0; }
.login-input input::placeholder { color:var(--c-text-muted); }

.input-pass { position:relative; }
.pass-toggle {
    background:none; border:0; color:#0F6E56; font:inherit; font-size:.76rem;
    font-weight:600; cursor:pointer; padding:.2rem .3rem; flex-shrink:0;
}
.login-pie { text-align:center; font-size:.78rem; margin-top:1.4rem; }

@media (max-width:760px) {
    .login-split { grid-template-columns:1fr; }
    .login-marca { display:none; }
    .login-form-side { min-height:100vh; }
}

/* ============================================================
   CONFIGURACIÓN DE APARIENCIA
   ============================================================ */
.cfg-bloque { margin-bottom:1rem; }
.cfg-bloque h3 { font-size:1rem; margin-bottom:.8rem; }
.cfg-fila-doble { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cfg-fila-doble .cfg-bloque { margin-bottom:0; }

.cfg-paletas { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:.7rem; }
.cfg-paleta { display:flex; align-items:center; gap:.6rem; border:2px solid var(--c-border); border-radius:var(--radio); padding:.6rem .7rem; cursor:pointer; margin:0; font-weight:400; transition:border-color .15s; }
.cfg-paleta.sel { border-color:var(--c-primary); }
.cfg-paleta input { display:none; }
.cfg-swatches { display:flex; gap:3px; flex-shrink:0; }
.cfg-swatches span { width:16px; height:16px; border-radius:4px; display:block; }
.cfg-paleta-nom { font-size:.85rem; font-weight:600; }

.cfg-opciones { display:flex; flex-wrap:wrap; gap:.5rem; }
.cfg-chip { border:2px solid var(--c-border); border-radius:999px; padding:.4rem .9rem; cursor:pointer; margin:0; font-weight:600; font-size:.85rem; transition:border-color .15s, background .15s; }
.cfg-chip.sel { border-color:var(--c-primary); background:color-mix(in srgb, var(--c-primary) 8%, transparent); color:var(--c-primary); }
.cfg-chip input { display:none; }

.cfg-acciones { display:flex; gap:.6rem; flex-wrap:wrap; margin:1rem 0 1.4rem; }

/* Vista previa */
.cfg-preview { background:var(--ps, var(--c-surface)) !important; }
.prev-demo { display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; background:var(--pbg, var(--c-bg)); padding:1.2rem; border-radius:var(--pr, 8px); margin-top:.3rem; }
.prev-card { display:flex; flex-direction:column; width:160px; background:var(--ps,#fff); border:1px solid var(--pb,#e2e8f0); border-radius:var(--pr,8px); overflow:hidden; }
.prev-cardthumb { height:70px; background:var(--pp,#1e5631); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.78rem; }
.prev-cardbody { padding:.6rem .7rem; color:var(--pt,#1a1a1a); font-size:.82rem; }
.prev-muted { color:var(--c-text-muted); font-size:.74rem; }
.prev-controls { display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; }
.prev-btn-primary { background:var(--pp,#1e5631); color:#fff; border:0; border-radius:var(--pr,8px); padding:.55rem 1rem; font:inherit; font-weight:600; cursor:pointer; }
.prev-btn-ghost { background:transparent; border:1px solid var(--pb,#e2e8f0); color:var(--pt,#1a1a1a); border-radius:var(--pr,8px); padding:.55rem 1rem; font:inherit; font-weight:600; cursor:pointer; }
.prev-tag { background:var(--pa,#c9a227); color:#fff; font-size:.72rem; font-weight:600; padding:.15rem .6rem; border-radius:999px; }

.cfg-institucional { margin-top:1.4rem; border:1px solid var(--c-border); }
.cfg-institucional h3 { margin-bottom:.3rem; }

/* ============================================================
   PERMISOS DE ROL — atajos
   ============================================================ */
.acceso-total-box { margin-bottom:1rem; border:1px solid var(--c-border); }
.switch-row { display:flex; align-items:flex-start; gap:.8rem; margin:0; cursor:pointer; font-weight:400; }
.switch-row input { width:auto; margin:.2rem 0 0; transform:scale(1.4); flex-shrink:0; cursor:pointer; }
.atajos-globales { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:1rem; }
.btn-sm { padding:.35rem .7rem; font-size:.8rem; }
.area-todo { font-size:.75rem; font-weight:600; color:var(--c-text-muted); margin-left:auto; margin-bottom:0; display:inline-flex; align-items:center; gap:.3rem; cursor:pointer; }
.area-todo input { width:auto; margin:0; transform:scale(1.05); }
.tabla-permisos thead .col-acc { text-align:center; font-size:.78rem; line-height:1.3; }
.tabla-permisos .chk-col { width:auto; margin:.2rem 0 0; transform:scale(1.05); cursor:pointer; }
.perm-guardar { position:sticky; bottom:1rem; margin-top:1.4rem; }
.perm-guardar .btn { box-shadow:0 6px 20px rgba(0,0,0,.18); }

/* Miniatura real del PDF (canvas sobre la portada) */
.doc-card-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; opacity:0; transition:opacity .25s;
    opacity:0; transition:opacity .3s ease; z-index:1; background:#fff; }
.doc-card-img.cargada { opacity:1; }
/* Cuando hay miniatura, el degradado y el ícono de hoja se ocultan para que se vea el PDF */
/* la imagen tapa la portada de color al cargar */
/* El código y etiquetas quedan ENCIMA de la miniatura con un velo para legibilidad */
.doc-card-cod { background:rgba(0,0,0,.45); padding:.1rem .4rem; border-radius:4px; }
.doc-card-img { display:block; }

/* Enlace de apariencia en el header */
.selector-tema-link { font-size:.85rem; color:var(--c-text-muted); text-decoration:none; padding:.3rem .6rem; border:1px solid var(--c-border); border-radius:var(--radio); }
.selector-tema-link:hover { color:var(--c-primary); border-color:var(--c-primary); }

/* Fila del interruptor de miniaturas en configuración */
.cfg-mini-row { margin:1rem 0; padding-top:1rem; border-top:1px solid var(--c-border); }

/* Formulario mover documento (en la ficha del visor) */
.mover-form { display:flex; flex-direction:column; gap:.5rem; }
.mover-form select { width:100%; }
.btn-block { width:100%; }
.mover-nota { font-size:.74rem; margin:0; }

/* ============================================================
   EXPEDIENTES + BANDEJA
   ============================================================ */
.exp-nuevo { margin-bottom:1.2rem; }
.exp-nuevo h3 { font-size:1rem; margin-bottom:.8rem; }
.exp-form-row { display:grid; grid-template-columns:1fr 2fr 1fr; gap:.8rem; margin-bottom:.8rem; }
.exp-form label { display:flex; flex-direction:column; gap:.3rem; font-size:.85rem; font-weight:600; }
.exp-cerrado { opacity:.62; }
.exp-acc form { display:inline; }

.badge { display:inline-block; font-size:.72rem; font-weight:600; padding:.12rem .55rem; border-radius:999px; }
.badge-ok { background:color-mix(in srgb, var(--c-primary) 14%, transparent); color:var(--c-primary); }
.badge-mut { background:var(--c-bg); color:var(--c-text-muted); }

.bandeja-lista { display:flex; flex-direction:column; gap:.7rem; }
.bandeja-item { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.9rem 1.1rem; }
.bandeja-info { min-width:0; flex:1; }
.bandeja-titulo { font-weight:600; color:var(--c-text); text-decoration:none; font-size:.98rem; }
.bandeja-titulo:hover { color:var(--c-primary); }
.bandeja-meta { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:.35rem; font-size:.78rem; }
.bandeja-acc { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.bandeja-mover { display:flex; gap:.4rem; align-items:center; }
.bandeja-mover select { max-width:230px; }
@media (max-width:680px){ .exp-form-row{ grid-template-columns:1fr; } .bandeja-item{ flex-direction:column; align-items:stretch; } }

/* ============================================================
   COMPARTIR DOCUMENTO (panel en el visor)
   ============================================================ */
.comp-form { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; }
.comp-lbl { display:flex; flex-direction:column; gap:.25rem; font-size:.82rem; font-weight:600; }
.comp-row { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.comp-check { display:flex; align-items:flex-start; gap:.45rem; font-size:.82rem; font-weight:500; cursor:pointer; }
.comp-check input { width:auto; margin-top:.15rem; }
.comp-lista { display:flex; flex-direction:column; gap:.6rem; }
.comp-item { border:1px solid var(--c-border); border-radius:var(--radio); padding:.6rem .7rem; }
.comp-muerto { opacity:.55; }
.comp-item-top { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.4rem; }
.comp-nota { font-size:.78rem; }
.comp-url { width:100%; font-size:.74rem; padding:.35rem .5rem; border:1px solid var(--c-border); border-radius:6px; background:var(--c-bg); margin-bottom:.35rem; }
.comp-item-meta { font-size:.74rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.comp-revocar { display:inline; }
.comp-revocar-btn { background:none; border:0; color:var(--c-danger,#b91c1c); cursor:pointer; font-size:.74rem; text-decoration:underline; padding:0; }

/* ============================================================
   PÁGINAS PÚBLICAS (documento compartido)
   ============================================================ */
.pub-body { background:var(--c-bg); margin:0; min-height:100vh; }
.pub-wrap { max-width:900px; margin:0 auto; padding:1.5rem 1.2rem 3rem; }
.pub-head { display:flex; justify-content:space-between; align-items:center; padding:.8rem 0 1.2rem; border-bottom:1px solid var(--c-border); margin-bottom:1.4rem; }
.pub-brand { display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--c-text); }
.pub-logo { display:inline-grid; place-items:center; width:34px; height:34px; background:var(--c-primary); color:#fff; border-radius:9px; font-weight:800; font-size:.62rem; }
.pub-tag { font-size:.76rem; font-weight:600; color:var(--c-text-muted); background:var(--c-surface); border:1px solid var(--c-border); padding:.25rem .7rem; border-radius:999px; }
.pub-titulo { font-size:1.4rem; margin-bottom:.2rem; }
.pub-meta { color:var(--c-text-muted); font-size:.88rem; margin-bottom:1.2rem; }
.pub-visor { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radio); overflow:hidden; min-height:70vh; }
.pub-visor object { width:100%; height:78vh; border:0; display:block; }
.pub-fallback { display:grid; place-items:center; gap:1rem; padding:3rem 1.5rem; text-align:center; }
.pub-acciones { margin-top:1rem; }
.pub-nota { margin-top:1rem; font-size:.85rem; }
.pub-foot { margin-top:2rem; text-align:center; font-size:.78rem; }
.pub-aviso { max-width:520px; }
.pub-aviso-box { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radio); padding:2.5rem 2rem; text-align:center; margin-top:2rem; }
.pub-aviso-box h1 { font-size:1.3rem; margin-bottom:.6rem; }

/* Panel OCR en el visor */
.ocr-panel { display:flex; flex-direction:column; gap:.5rem; }
.ocr-form { margin-top:.3rem; }
.ocr-nota { font-size:.74rem; margin:0; }
.badge-err { background:color-mix(in srgb, var(--c-danger,#b91c1c) 14%, transparent); color:var(--c-danger,#b91c1c); }

/* Barra de búsqueda global en el encabezado */
.topbar-buscar { flex:1; max-width:560px; position:relative; display:flex; align-items:center; }
.topbar-buscar-ico { position:absolute; left:.7rem; display:flex; color:var(--c-text-muted); pointer-events:none; }
.topbar-buscar-ico svg { width:17px; height:17px; }
.topbar-buscar input { width:100%; padding:.55rem .8rem .55rem 2.2rem; border:1px solid var(--c-border); border-radius:999px; background:var(--c-bg); color:var(--c-text); font-size:.9rem; transition:border-color .15s, box-shadow .15s; }
.topbar-buscar input:focus { outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent); background:var(--c-surface); }
@media (max-width:640px){ .topbar-buscar{ max-width:none; } .topbar-acciones .selector-tema-link span{ display:none; } }

/* Ubicación física del expediente */
.exp-ubic-celda { min-width:200px; }
.exp-ubic-resumen { font-size:.85rem; font-weight:500; }
.exp-ubic-edit { margin-top:.3rem; }
.exp-ubic-edit summary { cursor:pointer; font-size:.78rem; color:var(--c-primary); width:fit-content; }
.exp-ubic-form { margin-top:.6rem; padding:.7rem; background:var(--c-bg); border:1px solid var(--c-border); border-radius:var(--radio); }
.exp-ubic-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.6rem; }
.exp-ubic-grid label { display:flex; flex-direction:column; gap:.2rem; font-size:.74rem; font-weight:600; color:var(--c-text-muted); }
.exp-ubic-grid input { padding:.35rem .5rem; border:1px solid var(--c-border); border-radius:6px; background:var(--c-surface); color:var(--c-text); font-size:.85rem; }
.exp-ubic-nota { grid-column:1 / -1; }
@media (max-width:640px){ .exp-ubic-grid{ grid-template-columns:1fr 1fr; } }

/* Ubicación física destacada en el visor */
.ubic-fisica { font-weight:600; color:var(--c-primary); font-size:.9rem; }

/* Editor completo de expediente */
.exp-edit-titulo { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--c-text-muted); margin:.2rem 0 .4rem; }
.exp-edit-ancho2 { grid-column:span 2; }
@media (max-width:640px){ .exp-edit-ancho2{ grid-column:1 / -1; } }

/* Acciones rápidas en la tarjeta (estilo Paperless) */
.doc-card-acciones { display:flex; flex-wrap:wrap; gap:.3rem; padding:.5rem .7rem .7rem; border-top:1px solid var(--c-border); }
.dca-btn { display:inline-flex; align-items:center; gap:.25rem; padding:.3rem .6rem; font-size:.78rem; font-weight:500; border:1px solid var(--c-border); border-radius:6px; background:var(--c-bg); color:var(--c-text); cursor:pointer; text-decoration:none; transition:all .12s; }
.dca-btn:hover { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.dca-edit { border-color:color-mix(in srgb, var(--c-primary) 40%, var(--c-border)); color:var(--c-primary); }
.dca-ocr-form { margin:0; display:inline; }

/* === Tarjeta: iconos de acción === */
.doc-card-acciones { display:flex; gap:.4rem; padding:.5rem .7rem .7rem; border-top:1px solid var(--c-border); }
.dca-ico { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--c-border); border-radius:8px; background:var(--c-bg); color:var(--c-text-muted); cursor:pointer; text-decoration:none; transition:all .12s; }
.dca-ico:hover { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }

/* Ubicación física en la tarjeta */
.doc-card-ubic { display:inline-flex; align-items:center; gap:.3rem; margin-top:.4rem; padding:.2rem .5rem; font-size:.74rem; font-weight:600; color:var(--c-primary); background:color-mix(in srgb, var(--c-primary) 9%, transparent); border:none; border-radius:5px; cursor:pointer; max-width:100%; }
.doc-card-ubic span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-card-ubic:hover { background:color-mix(in srgb, var(--c-primary) 16%, transparent); }

/* === Modales === */
.acsq-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; }
.acsq-modal[hidden] { display:none; }
.acsq-modal-fondo { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.acsq-modal-caja { position:relative; background:var(--c-surface); border-radius:12px; padding:1.4rem; width:min(420px,92vw); box-shadow:0 20px 60px rgba(0,0,0,.3); }
.acsq-modal-caja h3 { margin:0 0 .6rem; }
.acsq-modal-x { position:absolute; top:.6rem; right:.8rem; background:none; border:none; font-size:1.5rem; line-height:1; cursor:pointer; color:var(--c-text-muted); }
.acsq-ubic-texto { font-size:1.05rem; font-weight:600; color:var(--c-primary); }
.acsq-comp-lbl { display:block; font-size:.78rem; font-weight:600; color:var(--c-text-muted); margin-bottom:.3rem; }
.acsq-comp-url-row { display:flex; gap:.4rem; margin-bottom:.5rem; }
.acsq-comp-url-row input { flex:1; padding:.5rem; border:1px solid var(--c-border); border-radius:6px; background:var(--c-bg); color:var(--c-text); font-size:.82rem; }
.acsq-comp-opts { margin-top:1rem; border-top:1px solid var(--c-border); padding-top:.7rem; }
.acsq-comp-opts summary { cursor:pointer; font-size:.85rem; color:var(--c-primary); }
.acsq-comp-grid { display:flex; gap:1rem; align-items:center; margin:.7rem 0; flex-wrap:wrap; }
.acsq-comp-grid label { font-size:.8rem; display:flex; flex-direction:column; gap:.25rem; }
.acsq-comp-check { flex-direction:row !important; align-items:center; gap:.4rem !important; }
.btn-block { display:block; width:100%; text-align:center; margin-top:.4rem; }

/* Panel de retención / disposición documental */
.ret-cifras { margin-bottom:1rem; }
.ret-cifra-venc .cifra-num { color:var(--c-danger,#b91c1c); }
.ret-cifra-pv .cifra-num { color:#b45309; }
.ret-alerta { background:color-mix(in srgb, var(--c-danger,#b91c1c) 10%, transparent); border:1px solid color-mix(in srgb, var(--c-danger,#b91c1c) 30%, transparent); color:var(--c-text); padding:.8rem 1rem; border-radius:8px; margin-bottom:1rem; font-size:.9rem; }
.ret-filtros { display:flex; gap:.4rem; margin-bottom:.8rem; flex-wrap:wrap; }
.ret-tab { padding:.4rem .9rem; border:1px solid var(--c-border); border-radius:999px; font-size:.85rem; color:var(--c-text-muted); text-decoration:none; }
.ret-tab:hover { background:var(--c-bg); }
.ret-tab-activo { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.badge-warn { background:color-mix(in srgb, #b45309 16%, transparent); color:#b45309; }

/* === Cuadro de clasificación: Maestro–detalle === */
.cd-maestro-detalle { display:grid; grid-template-columns:285px 1fr; gap:1rem; align-items:start; }

/* Izquierda: lista de secciones */
.cd-lista { position:sticky; top:1rem; }
.cd-buscador { display:flex; align-items:center; gap:.5rem; border:1px solid var(--c-border); border-radius:8px; padding:.5rem .7rem; margin-bottom:.6rem; color:var(--c-text-muted); }
.cd-buscador input { border:none; background:none; outline:none; font-size:.88rem; color:var(--c-text); width:100%; }
.cd-secciones { display:flex; flex-direction:column; gap:2px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:10px; padding:6px; }
.cd-sec-item { display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem; border:none; border-left:3px solid transparent; background:none; border-radius:0 8px 8px 0; cursor:pointer; text-align:left; width:100%; color:var(--c-text); transition:background .12s; }
.cd-sec-item:hover { background:var(--c-bg); }
.cd-sec-item.cd-activo { background:color-mix(in srgb, var(--seccolor, var(--c-primary)) 10%, transparent); border-left-color:var(--seccolor, var(--c-primary)); }
.cd-sec-chip { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:28px; padding:0 7px; border-radius:6px; color:#fff; font-size:.72rem; font-weight:600; letter-spacing:.02em; flex-shrink:0; font-variant-numeric:tabular-nums; }
.cd-sec-texto { display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.25; }
.cd-sec-texto .cd-sec-nom { font-size:.82rem; color:var(--c-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cd-sec-texto .cd-sec-cod { font-size:.68rem; color:var(--c-text-muted); background:none; padding:0; }
.cd-sec-item.cd-activo .cd-sec-nom { color:var(--seccolor, var(--c-primary)); font-weight:600; }
.cd-sec-num { font-size:.72rem; color:var(--c-text-muted); flex-shrink:0; }
.cd-panel-folder { flex-shrink:0; }
.cd-sec-cod { font-size:.7rem; font-weight:700; background:var(--c-bg); color:var(--c-text-muted); padding:2px 6px; border-radius:4px; letter-spacing:.02em; }
.cd-sec-item.cd-activo .cd-sec-cod { background:var(--c-surface); }
.cd-sec-nom { font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cd-sec-num { font-size:.75rem; color:var(--c-text-muted); margin-left:auto; }
.cd-sec-estado { color:#b45309; font-size:.7rem; }

/* Derecha: detalle */
.cd-panel { background:var(--c-surface); border:1px solid var(--c-border); border-radius:12px; padding:1rem 1.2rem; }
.cd-oculto { display:none; }
.cd-panel-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.3rem; flex-wrap:wrap; }
.cd-panel-titulo { display:flex; align-items:center; gap:.5rem; }
.cd-panel-nom { font-size:1rem; font-weight:600; }
.cd-panel-edit { color:var(--c-text-muted); display:inline-flex; }
.cd-panel-edit:hover { color:var(--c-primary); }
.cd-nueva-serie { font-size:.8rem; color:var(--c-primary); border:1px solid color-mix(in srgb, var(--c-primary) 35%, var(--c-border)); padding:.35rem .7rem; border-radius:7px; white-space:nowrap; }
.cd-nueva-serie:hover { background:color-mix(in srgb, var(--c-primary) 8%, transparent); }
.cd-panel-sub { font-size:.78rem; color:var(--c-text-muted); margin:0 0 .8rem; }

/* Series dentro del panel */
.cd-serie { display:flex; align-items:center; gap:.6rem; padding:.65rem 0; border-top:1px solid var(--c-border); }
.cd-serie-cod { font-size:.72rem; color:var(--c-text-muted); min-width:50px; font-weight:600; }
.cd-serie-nom { font-size:.9rem; color:var(--c-text); text-decoration:none; }
.cd-serie-nom:hover { color:var(--c-primary); text-decoration:underline; }
.cd-ret { font-size:.72rem; color:var(--c-text-muted); background:var(--c-bg); padding:2px 8px; border-radius:4px; margin-left:auto; white-space:nowrap; }
.cd-ret-falta { color:#b45309; background:color-mix(in srgb, #b45309 10%, transparent); }
.cd-serie-acc { display:flex; gap:.5rem; align-items:center; }
.cd-serie-acc a { color:var(--c-text-muted); display:inline-flex; }
.cd-serie-acc a:hover { color:var(--c-primary); }
.cd-serie-docs:hover { color:var(--c-primary); }
.cd-add-serie { display:inline-block; margin-top:.7rem; font-size:.82rem; color:var(--c-primary); }
.cd-vacio { padding:.8rem 0; }

/* Subsecciones */
.cd-subseccion { margin-top:1rem; padding-left:.8rem; border-left:2px solid var(--c-border); }
.cd-subseccion-head { display:flex; align-items:center; gap:.5rem; margin:.5rem 0; }
.cd-sub-cod { font-size:.7rem; font-weight:700; background:var(--c-bg); color:var(--c-text-muted); padding:2px 6px; border-radius:4px; }
.cd-sub-nom { font-size:.88rem; font-weight:600; }
.cd-sub-edit { font-size:.75rem; color:var(--c-text-muted); margin-left:auto; }

/* Responsive: móvil/tablet → apilar */
@media (max-width:760px){
    .cd-maestro-detalle { grid-template-columns:1fr; }
    .cd-lista { position:static; }
    .cd-secciones { flex-direction:row; flex-wrap:wrap; }
    .cd-sec-item { width:auto; }
    .cd-sec-num { margin-left:.3rem; }
}

/* === Asistente (wizard) de nuevo expediente === */
.wz-pasos { display:flex; align-items:flex-start; margin:1.2rem 0 1.5rem; }
.wz-paso { display:flex; flex-direction:column; align-items:center; gap:.4rem; flex-shrink:0; }
.wz-circulo { width:32px; height:32px; border-radius:50%; background:var(--c-bg); border:1px solid var(--c-border); color:var(--c-text-muted); display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:600; }
.wz-paso-lbl { font-size:.72rem; color:var(--c-text-muted); }
.wz-paso-activo .wz-circulo { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.wz-paso-activo .wz-paso-lbl { color:var(--c-primary); font-weight:600; }
.wz-paso-hecho .wz-circulo { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.wz-linea { flex:1; height:2px; background:var(--c-border); margin-top:16px; }
.wz-linea-hecha { background:var(--c-primary); }

.wz-tarjeta { background:var(--c-surface); border:1px solid var(--c-border); border-radius:12px; padding:1.4rem; }
.wz-oculto { display:none !important; }
.wz-panel-head { display:flex; align-items:center; gap:.5rem; font-size:1rem; font-weight:600; color:var(--c-primary); margin-bottom:.3rem; }
.wz-ayuda { font-size:.85rem; color:var(--c-text-muted); margin:0 0 1rem; }
.wz-migas { font-size:.8rem; color:var(--c-text-muted); background:var(--c-bg); padding:.5rem .8rem; border-radius:7px; margin-bottom:1rem; }

.wz-opciones { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:.6rem; }
.wz-op { display:flex; align-items:center; gap:.6rem; padding:.8rem; border:1px solid var(--c-border); border-radius:9px; background:var(--c-bg); cursor:pointer; text-align:left; transition:all .12s; }
.wz-op:hover { border-color:var(--c-primary); }
.wz-op-activo { border-color:var(--c-primary); background:color-mix(in srgb, var(--c-primary) 10%, transparent); }
.wz-op-cod { font-size:.72rem; font-weight:700; background:var(--c-surface); color:var(--c-text-muted); padding:3px 7px; border-radius:5px; }
.wz-op-nom { font-size:.88rem; }

.wz-lbl { display:block; font-size:.85rem; font-weight:600; margin:1rem 0 .4rem; }
.wz-nota { font-size:.76rem; color:var(--c-text-muted); margin:.3rem 0 0; }
.wz-codigo-row { display:flex; gap:.5rem; align-items:center; }
.wz-codigo-row input { width:200px; }
.wz-sugerir { font-size:.8rem; color:var(--c-primary); background:none; border:1px solid var(--c-border); border-radius:6px; padding:.45rem .7rem; cursor:pointer; }
.wz-form input[type=text] { padding:.55rem .7rem; border:1px solid var(--c-border); border-radius:7px; background:var(--c-bg); color:var(--c-text); font-size:.9rem; width:100%; }

.wz-dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; padding:2rem; border:2px dashed var(--c-border); border-radius:10px; color:var(--c-text-muted); cursor:pointer; transition:all .12s; }
.wz-dropzone:hover, .wz-dz-activo { border-color:var(--c-primary); color:var(--c-primary); background:color-mix(in srgb, var(--c-primary) 5%, transparent); }
.wz-dz-txt { font-size:.88rem; }
.wz-archivos-lista { list-style:none; padding:0; margin:.8rem 0 0; }
.wz-archivos-lista li { font-size:.82rem; padding:.4rem .6rem; background:var(--c-bg); border-radius:6px; margin-bottom:.3rem; }

.wz-ubic-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:.7rem; }
.wz-ubic-grid label { font-size:.78rem; color:var(--c-text-muted); display:flex; flex-direction:column; gap:.3rem; }
.wz-resumen { margin-top:1.2rem; padding:.8rem 1rem; background:color-mix(in srgb, var(--c-primary) 8%, transparent); border-radius:8px; font-size:.88rem; }

.wz-nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--c-border); }
.wz-contador { font-size:.8rem; color:var(--c-text-muted); margin-left:auto; margin-right:1rem; }

@media (max-width:640px){
    .wz-paso-lbl { display:none; }
    .wz-opciones { grid-template-columns:1fr; }
}

/* Bloque "Nuevo expediente" en la vista de expedientes (vía asistente) */
.exp-nuevo-guiado { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.exp-rapido { margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--c-border); }
.exp-rapido summary { cursor:pointer; font-size:.85rem; color:var(--c-text-muted); }
.exp-rapido .exp-form { margin-top:.8rem; }

/* Enlaces a documentos del expediente */
.exp-link { color:var(--c-primary); text-decoration:none; }
.exp-link:hover { text-decoration:underline; }
.exp-docs-link { color:var(--c-primary); text-decoration:none; font-weight:600; }
.exp-docs-link:hover { text-decoration:underline; }

/* === Sidebar colapsable === */
.sidebar-collapse-btn { background:none; border:none; color:rgba(255,255,255,.7); cursor:pointer; padding:4px; border-radius:6px; display:inline-flex; flex-shrink:0; transition:background .12s; }
.sidebar-collapse-btn:hover { background:rgba(255,255,255,.12); color:#fff; }

/* Iconos del menú en color (paleta viva, cada uno su tono) */
.menu-ico svg { stroke:currentColor; }
.menu-grupo:nth-child(1) .menu-ico { color:#5DCAA5; }
.menu-grupo:nth-child(2) .menu-ico { color:#85B7EB; }
.menu-grupo:nth-child(3) .menu-ico { color:#F0997B; }
.menu-item.activo .menu-ico { color:#fff; }

/* Estado COLAPSADO: solo iconos */
.sidebar-colapsado { grid-template-columns:64px 1fr; }
.sidebar-colapsado .brand-text,
.sidebar-colapsado .menu-txt,
.sidebar-colapsado .menu-grupo-tit,
.sidebar-colapsado .user-meta { display:none; }
.sidebar-colapsado .sidebar-brand { justify-content:center; flex-wrap:wrap; gap:.4rem; }
.sidebar-colapsado .menu-item { justify-content:center; gap:0; }
.sidebar-colapsado .menu-item.activo::before { display:none; }
.sidebar-colapsado .sidebar-user { justify-content:center; }
.sidebar-colapsado .brand-logo { width:38px; height:38px; padding:3px; }
.sidebar-colapsado .menu-grupo { margin-bottom:.4rem; }
@media (max-width:760px){
    .sidebar-colapsado { grid-template-columns:1fr; }
}

/* === Panel de copias de seguridad === */
.bk-generar { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.bk-generar-info { flex:1; min-width:240px; }
.bk-generar-info h3 { margin:0 0 .3rem; }
.btn-lg { padding:.7rem 1.4rem; font-size:1rem; }
.bk-tabla { width:100%; margin-top:.6rem; }
.bk-archivo { font-family:monospace; font-size:.85rem; }
.bk-acc { text-align:right; }
.bk-nota { margin-top:.8rem; font-size:.82rem; }
.bk-consejo { background:color-mix(in srgb, var(--c-primary) 6%, transparent); }
.bk-consejo h3 { margin:0 0 .4rem; }

/* Backup: lista head y borrar */
.bk-lista-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.4rem; }
.bk-espacio { font-size:.85rem; color:var(--c-text-muted); }
.bk-borrar { color:var(--c-danger, #b91c1c); }
.bk-borrar:hover { background:color-mix(in srgb, var(--c-danger, #b91c1c) 10%, transparent); }
.bk-acc { display:flex; gap:.4rem; justify-content:flex-end; align-items:center; }

/* Panel OCR en mantenimiento */
.bk-ocr-cifras { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.bk-ocr-chip { font-size:.82rem; padding:.3rem .7rem; border-radius:20px; font-weight:500; }
.bk-ocr-ok { background:color-mix(in srgb, #15803d 14%, transparent); color:#15803d; }
.bk-ocr-pend { background:color-mix(in srgb, #b45309 14%, transparent); color:#b45309; }
.bk-ocr-err { background:color-mix(in srgb, #b91c1c 14%, transparent); color:#b91c1c; }

/* Acciones destructivas (eliminar expediente / documento) */
.exp-eliminar, .doc-eliminar { color:#b91c1c; }
.exp-eliminar:hover, .doc-eliminar:hover { background:color-mix(in srgb, #b91c1c 10%, transparent); }

/* PWA: banner de invitación a instalar / anclar */
.pwa-banner {
    display: flex; align-items: center; gap: .8rem;
    background: linear-gradient(135deg, #0c5a47, #0F6E56 60%, #157a5f);
    color: #fff; padding: .7rem 1rem; margin: .9rem 1.4rem 0; border-radius: 14px;
    box-shadow: 0 6px 20px rgba(15,110,86,.28);
}
.pwa-banner[hidden] { display: none; }
.pwa-banner-ico { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
    background: rgba(255,255,255,.95); border-radius: 11px; padding: 4px; }
.pwa-banner-ico img { width: 100%; height: 100%; object-fit: contain; }
.pwa-banner-txt { display: flex; flex-direction: column; line-height: 1.35; flex: 1; min-width: 0; }
.pwa-banner-txt strong { font-size: .92rem; font-weight: 700; }
.pwa-banner-txt span { font-size: .8rem; opacity: .9; }
.pwa-banner-acc { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.pwa-banner-btn { font: inherit; font-size: .85rem; font-weight: 700; color: #0F6E56;
    background: #fff; border: none; border-radius: 9px; padding: .5rem 1.1rem; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: transform .12s; }
.pwa-banner-btn:hover { transform: translateY(-1px); }
.pwa-banner-btn:active { transform: scale(.97); }
.pwa-banner-btn[hidden] { display: none; }
.pwa-banner-x { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
    background: rgba(255,255,255,.14); color: #fff; border: none; border-radius: 8px; cursor: pointer;
    transition: background .12s; }
.pwa-banner-x:hover { background: rgba(255,255,255,.24); }
@media (max-width: 760px) {
    .pwa-banner { margin: .7rem .8rem 0; padding: .6rem .7rem; gap: .6rem; }
    .pwa-banner-txt strong { font-size: .86rem; }
    .pwa-banner-txt span { font-size: .74rem; }
    .pwa-banner-btn { padding: .45rem .85rem; }
}
