/* ============================================================================
VILLANUEVA · CSS DE GESTIÓN (herramientas internas / CRUD)
----------------------------------------------------------------------------
Complemento de villanueva-base.css para PANELES DE GESTIÓN con mucha
información e interacción (tablas, formularios, CRUD). No se incluye en las
landings (para no cargarlas). Enlázalo DESPUÉS del base:
Los comportamientos (drawer, modal, toasts, command palette, selección de
tabla) están en villanueva-ui.js.
============================================================================ */
/* Escala compacta para data-dense */
:root{ --uv-fs-compact:13px; }
/* App shell (menú lateral + barra superior + contenido) */
.uv-app{display:grid;grid-template-columns:230px 1fr;min-height:100vh;transition:grid-template-columns .2s ease}
.uv-side{background:var(--uv-negro);color:#c9cad1;padding:14px 0;overflow:auto;display:flex;flex-direction:column}
.uv-side .brand{display:flex;align-items:center;gap:10px;padding:6px 18px 16px}
.uv-side .brand img{height:26px;filter:brightness(0) invert(1)}
.uv-side .grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#7c7d86;padding:14px 18px 6px}
.uv-side a{display:flex;align-items:center;gap:10px;color:#c9cad1;text-decoration:none;font-size:13.5px;font-weight:600;padding:9px 18px;border-left:3px solid transparent}
.uv-side a svg{flex:0 0 auto}
.uv-side a:hover{background:rgba(255,255,255,.05);color:#fff}
.uv-side a.is-active{color:#fff;border-left-color:var(--uv-amarillo);background:rgba(255,188,0,.10)}
/* Grupo con submenú desplegable */
.uv-side__group>a .caret{margin-left:auto;font-size:10px;transition:transform .15s}
.uv-side__group.is-open>a .caret{transform:rotate(90deg)}
.uv-side__sub{display:none;background:rgba(0,0,0,.22)}
.uv-side__group.is-open .uv-side__sub{display:block}
.uv-side__sub a{padding-left:44px;font-size:13px;font-weight:500}
/* Pie de la barra lateral (usuario) */
.uv-side__foot{margin-top:auto;padding:14px 18px;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:10px;font-size:13px}
.uv-side__foot .n{font-weight:700;color:#fff}
.uv-side__foot .r{font-size:11.5px;color:#9a9aa4}
/* Barra lateral colapsada (solo iconos) */
.uv-app.is-collapsed{grid-template-columns:62px 1fr}
.uv-app.is-collapsed .uv-side .txt,
.uv-app.is-collapsed .uv-side .grp,
.uv-app.is-collapsed .uv-side .caret,
.uv-app.is-collapsed .uv-side__sub,
.uv-app.is-collapsed .uv-side__foot .info{display:none}
.uv-app.is-collapsed .uv-side a{justify-content:center;padding:11px 0;gap:0}
.uv-app.is-collapsed .uv-side .brand{justify-content:center;padding:6px 0 16px}
.uv-app.is-collapsed .uv-side__foot{justify-content:center;padding:14px 0}
.uv-main{background:#fff;overflow:auto;display:flex;flex-direction:column}
.uv-main__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--uv-borde);position:sticky;top:0;background:#fff;z-index:5}
.uv-main__top-l{display:flex;align-items:center;gap:12px}
.uv-main__body{padding:20px}
/* Barra superior: buscador, acciones e usuario */
.uv-top-actions{display:flex;align-items:center;gap:10px}
.uv-topsearch{position:relative}
.uv-topsearch input{border:1.5px solid var(--uv-borde);padding:8px 10px 8px 30px;font-family:inherit;font-size:13px;width:220px}
.uv-topsearch input:focus{outline:none;border-color:var(--uv-azul);box-shadow:0 0 0 3px rgba(80,88,255,.2)}
.uv-topsearch svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--uv-gris-suave)}
.uv-bell{position:relative}
.uv-bell::after{content:"";position:absolute;top:5px;right:6px;width:7px;height:7px;background:var(--uv-rojo);border-radius:50%;border:1.5px solid #fff}
.uv-hamburger{border:1px solid var(--uv-borde);background:#fff;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;color:var(--uv-negro)}
.uv-hamburger:hover{border-color:var(--uv-negro)}
/* Árbol de navegación (jerárquico, con niveles) */
.uv-tree,.uv-tree ul{list-style:none;margin:0;padding:0}
.uv-tree ul{padding-left:16px}
.uv-tree__row{display:flex;align-items:center;gap:7px;padding:6px 8px;font-size:13.5px;color:var(--uv-tinta);cursor:pointer}
.uv-tree__row:hover{background:var(--uv-fondo)}
.uv-tree__row.is-active{background:var(--uv-azul-claro);color:var(--uv-azul-osc);font-weight:700}
.uv-tree__chev{width:12px;text-align:center;font-size:10px;color:var(--uv-gris-suave);transition:transform .15s;flex:0 0 auto}
.uv-tree__node.is-open>.uv-tree__row .uv-tree__chev{transform:rotate(90deg)}
.uv-tree__node>ul{display:none}
.uv-tree__node.is-open>ul{display:block}
.uv-tree__node--leaf>.uv-tree__row .uv-tree__chev{visibility:hidden}
.uv-tree__ico{width:15px;height:15px;color:var(--uv-gris-medio);flex:0 0 auto}
.uv-tree__count{margin-left:auto;font-size:11px;color:var(--uv-gris-suave);font-weight:600}
/* Breadcrumb */
.uv-breadcrumb{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--uv-gris-medio)}
.uv-breadcrumb a{color:var(--uv-gris-medio);text-decoration:none}
.uv-breadcrumb a:hover{color:var(--uv-azul)}
.uv-breadcrumb .sep{color:var(--uv-gris-suave)}
/* Toolbar de tabla + buscador */
.uv-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.uv-search{position:relative;flex:1;min-width:200px;max-width:320px}
.uv-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--uv-gris-suave)}
.uv-search input{width:100%;padding:9px 10px 9px 32px;border:1.5px solid var(--uv-borde);font-family:inherit;font-size:13.5px}
.uv-search input:focus{outline:none;border-color:var(--uv-azul);box-shadow:0 0 0 3px rgba(80,88,255,.2)}
/* Chips de filtro activos (eliminables) */
.uv-chipfilter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.uv-fchip{display:inline-flex;align-items:center;gap:7px;background:var(--uv-azul-claro);color:var(--uv-azul-osc);font-size:12.5px;font-weight:600;padding:4px 6px 4px 10px}
.uv-fchip button{border:0;background:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
/* Tabla de datos */
.uv-table{width:100%;border-collapse:collapse;font-size:var(--uv-fs-compact)}
.uv-table th,.uv-table td{border-bottom:1px solid var(--uv-borde);padding:10px 12px;text-align:left;vertical-align:middle}
.uv-table thead th{position:sticky;top:0;background:var(--uv-fondo);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--uv-gris-medio);cursor:pointer;white-space:nowrap}
.uv-table thead th .arrow{opacity:.4;font-size:10px}
.uv-table thead th.is-sorted .arrow{opacity:1;color:var(--uv-azul)}
.uv-table tbody tr:hover{background:var(--uv-fondo)}
.uv-table tbody tr.is-sel{background:var(--uv-azul-claro)}
.uv-row-actions{display:flex;gap:6px}
.uv-iconbtn{border:1px solid var(--uv-borde);background:#fff;width:30px;height:30px;display:grid;place-items:center;cursor:pointer;color:var(--uv-gris-medio)}
.uv-iconbtn:hover{border-color:var(--uv-negro);color:var(--uv-negro)}
.uv-iconbtn.danger:hover{border-color:var(--uv-rojo);color:var(--uv-rojo)}
/* Badges de estado */
.uv-badge{font-size:11px;font-weight:700;padding:3px 9px;display:inline-block}
.uv-badge--ok{background:var(--uv-verde-bg);color:var(--uv-verde)}
.uv-badge--off{background:var(--uv-borde);color:var(--uv-gris-medio)}
.uv-badge--pend{background:var(--uv-ambar-bg);color:var(--uv-ambar)}
/* Barra de acciones en lote */
.uv-bulkbar{display:none;align-items:center;gap:14px;background:var(--uv-negro);color:#fff;padding:10px 16px;margin-bottom:12px;font-size:13px}
.uv-bulkbar.is-on{display:flex}
.uv-bulkbar .btn-b{background:none;border:1px solid rgba(255,255,255,.4);color:#fff;font-family:inherit;font-weight:700;font-size:12.5px;padding:6px 12px;cursor:pointer}
/* Paginación */
.uv-pagination{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:13px}
.uv-pagination .info{color:var(--uv-gris-medio);margin-right:auto}
.uv-pagination button{border:1px solid var(--uv-borde);background:#fff;font-family:inherit;padding:6px 11px;cursor:pointer}
.uv-pagination button.is-active{background:var(--uv-negro);color:#fff;border-color:var(--uv-negro)}
/* Maestro-detalle */
.uv-md{display:grid;grid-template-columns:260px 1fr;border:1px solid var(--uv-borde)}
.uv-md__list{border-right:1px solid var(--uv-borde);overflow:auto;max-height:320px}
.uv-md__list a{display:block;padding:12px 16px;border-bottom:1px solid var(--uv-borde);text-decoration:none;color:var(--uv-tinta);font-size:13.5px}
.uv-md__list a.is-active{background:var(--uv-azul-claro);border-left:3px solid var(--uv-azul);font-weight:700}
.uv-md__detail{padding:24px}
/* Ficha clave-valor */
.uv-kv{display:grid;grid-template-columns:180px 1fr;font-size:13.5px}
.uv-kv dt{font-weight:700;color:var(--uv-gris-medio);padding:9px 0;border-bottom:1px solid var(--uv-borde)}
.uv-kv dd{padding:9px 0;border-bottom:1px solid var(--uv-borde)}
/* Formulario CRUD */
.uv-form fieldset{border:1px solid var(--uv-borde);padding:18px 20px;margin-bottom:18px}
.uv-form legend{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--uv-gris-medio);padding:0 8px}
.uv-field{margin-bottom:14px}
.uv-field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:5px}
.uv-field .req{color:var(--uv-rojo)}
.uv-field input,.uv-field select,.uv-field textarea{width:100%;border:1.5px solid var(--uv-borde);padding:10px 12px;font-family:inherit;font-size:14px}
.uv-field input:focus,.uv-field select:focus,.uv-field textarea:focus{outline:none;border-color:var(--uv-azul);box-shadow:0 0 0 3px rgba(80,88,255,.2)}
.uv-field .hint{font-size:12px;color:var(--uv-gris-suave);margin-top:5px}
.uv-field.is-error input{border-color:var(--uv-rojo)}
.uv-field.is-error .msg{color:var(--uv-rojo);font-size:12px;margin-top:5px}
.uv-field.is-ok input{border-color:var(--uv-verde)}
.uv-savebar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--uv-borde);padding:14px 0;display:flex;justify-content:flex-end;gap:10px}
/* Wizard / stepper */
.uv-wizard{display:flex;margin-bottom:20px}
.uv-wstep{flex:1;text-align:center;font-size:12.5px;font-weight:700;color:var(--uv-gris-suave);padding-bottom:10px;border-bottom:3px solid var(--uv-borde)}
.uv-wstep.is-active{color:var(--uv-negro);border-bottom-color:var(--uv-amarillo)}
.uv-wstep.is-done{color:var(--uv-verde);border-bottom-color:var(--uv-verde)}
/* Estado vacío */
.uv-empty{text-align:center;padding:48px 20px;border:1px dashed var(--uv-borde)}
.uv-empty svg{width:44px;height:44px;color:var(--uv-gris-suave);margin-bottom:12px}
.uv-empty h4{font-size:16px;margin-bottom:6px}
.uv-empty p{color:var(--uv-gris-medio);font-size:13.5px;margin-bottom:16px}
/* Skeleton (carga) */
.uv-sk{background:linear-gradient(90deg,#eee 25%,#f5f5f7 37%,#eee 63%);background-size:400% 100%;animation:uv-sk 1.3s infinite;height:14px;margin-bottom:10px}
@keyframes uv-sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
/* Registro de actividad (log) */
.uv-log{border-left:2px solid var(--uv-borde);margin-left:6px;padding-left:20px}
.uv-log__it{position:relative;padding-bottom:16px}
.uv-log__it::before{content:"";position:absolute;left:-27px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--uv-azul)}
.uv-log__it .t{font-size:12px;color:var(--uv-gris-suave)}
/* Drawer lateral (crear/editar sin salir de la lista) */
.uv-drawer-ov{position:fixed;inset:0;z-index:5000;background:rgba(17,17,17,.5);display:none}
.uv-drawer-ov.is-on{display:block}
.uv-drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,92vw);background:#fff;z-index:5001;transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;border-left:4px solid var(--uv-amarillo)}
.uv-drawer.is-on{transform:translateX(0)}
.uv-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--uv-borde)}
.uv-drawer__body{padding:22px;overflow:auto;flex:1}
/* Command palette (búsqueda/acciones rápida, ⌘K) */
.uv-cmdk-ov{position:fixed;inset:0;z-index:6000;background:rgba(17,17,17,.45);display:none;align-items:flex-start;justify-content:center;padding-top:12vh}
.uv-cmdk-ov.is-on{display:flex}
.uv-cmdk{width:min(560px,92vw);background:#fff;border-top:4px solid var(--uv-amarillo)}
.uv-cmdk input{width:100%;border:0;border-bottom:1px solid var(--uv-borde);padding:16px 18px;font-family:inherit;font-size:16px}
.uv-cmdk input:focus{outline:none}
.uv-cmdk a{display:flex;align-items:center;gap:10px;padding:12px 18px;text-decoration:none;color:var(--uv-tinta);font-size:14px;border-bottom:1px solid var(--uv-borde)}
.uv-cmdk a:hover{background:var(--uv-fondo)}
/* Toasts (notificaciones no bloqueantes) */
.uv-toasts{position:fixed;right:20px;bottom:20px;z-index:7000;display:flex;flex-direction:column;gap:10px}
.uv-toast{background:var(--uv-negro);color:#fff;padding:13px 16px;font-size:13.5px;min-width:240px;border-left:4px solid var(--uv-verde);animation:uv-toast-in .2s ease}
.uv-toast.err{border-left-color:var(--uv-rojo)}
@keyframes uv-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Responsive gestión */
@media (max-width:1000px){
.uv-app{grid-template-columns:1fr}
.uv-app .uv-side{display:none}
.uv-md{grid-template-columns:1fr}
}