/* Directorio (R-02): CSS movido desde el <style> inline del componente a un modulo global
   (patron de tareas.css/pqrs.css). Enlazado en App.razor. Reglas identicas; @@->@ desescapado. */
    /* Filtro por etiqueta (fila de chips bajo la barra de busqueda) */
    /* Boton Filtro + popover con las etiquetas */
    .dir-filtrowrap { position: relative; }
    .dir-filtroback { position: fixed; inset: 0; z-index: 55; }
    .dir-filtrobtn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); color: var(--propia-text-secondary); border-radius: 9px; padding: 8px 13px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
    .dir-filtrobtn:hover { border-color: #C9BCF6; color: var(--propia-brand, var(--propia-brand)); }
    .dir-filtrobtn.on { border-color: var(--propia-brand, var(--propia-brand)); color: var(--propia-brand, var(--propia-brand)); background: var(--propia-brand-soft-2); }
    .dir-filtrobadge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 20px; background: var(--propia-brand, var(--propia-brand)); color: var(--propia-text-inverse); font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
    .dir-filtropop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 340px; max-height: 360px; display: flex; flex-direction: column; background: var(--propia-bg-card); border: 1px solid #E6E9F0; border-radius: 12px; box-shadow: 0 14px 40px rgba(20,20,45,.14); }
    .dir-filtropop-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--propia-border-divider); font-size: 11px; font-weight: 800; color: var(--propia-text-muted); text-transform: uppercase; letter-spacing: .3px; }
    .dir-filtropop-body { padding: 12px 14px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 6px; }
    .dir-etqchip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); color: var(--propia-text-secondary); border-radius: 20px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
    .dir-etqchip:hover { border-color: #C9BCF6; }
    .dir-etqchip.on { font-weight: 800; }
    .dir-etqcount { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 20px; background: #EEF1F6; color: #64748B; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
    .dir-etqchip.on .dir-etqcount { background: rgba(255,255,255,.55); color: inherit; }
    .dir-filtro-empty { font-size: 12.5px; color: #94A3B8; padding: 4px 2px; }
    .dir-etqclear { border: 0; background: transparent; color: #DC2626; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; }

    /* Modal Configurar etiquetas */
    .dir-cfg { background: var(--propia-bg-card); border-radius: 16px; width: 620px; max-width: 94vw; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(20,20,45,.22); }
    .dir-cfg-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--propia-border-divider); }
    .dir-cfg-title { font-size: 16px; font-weight: 800; color: var(--propia-text-h1); }
    .dir-cfg-sub { font-size: 12px; color: var(--propia-text-muted); margin-top: 2px; }
    .dir-cfg-body { padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
    .dir-cfg-form { background: var(--propia-bg-hover); border: 1px solid var(--propia-border-divider); border-radius: 12px; padding: 14px; }
    .dir-cfg-formtitle { font-size: 12px; font-weight: 800; color: var(--propia-text-secondary); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 10px; }
    .dir-cfg-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
    .dir-cfg-emoji { width: 42px; height: 42px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 10px; }
    .dir-cfg-iconos { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 8px; }
    .dir-cfg-iconbtn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); border-radius: 8px; color: var(--propia-text-secondary); cursor: pointer; }
    .dir-cfg-iconbtn:hover { border-color: #C9BCF6; color: var(--propia-brand, var(--propia-brand)); }
    .dir-cfg-iconbtn.on { border-color: var(--propia-brand, var(--propia-brand)); color: var(--propia-brand, var(--propia-brand)); box-shadow: 0 0 0 2px rgba(109,79,227,.15); }
    .dir-cfg-inp { flex: 1; border: 1px solid var(--propia-border-card); border-radius: 9px; padding: 9px 11px; font-size: 13px; font-family: inherit; outline: none; background: var(--propia-bg-card); color: var(--propia-text-body); }
    .dir-cfg-inp:focus { border-color: var(--propia-brand, var(--propia-brand)); }
    .dir-cfg-color { width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid var(--propia-border-card); border-radius: 10px; padding: 3px; cursor: pointer; background: var(--propia-bg-card); }
    .dir-cfg-formfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
    .dir-cfg-msg { margin-top: 8px; font-size: 12px; border-radius: 8px; padding: 7px 10px; }
    .dir-cfg-msg.ok { background: var(--propia-ok-soft); color: #15703F; }
    .dir-cfg-msg.err { background: #FEE2E2; color: #B91C1C; }
    .dir-cfg-list { display: flex; flex-direction: column; gap: 6px; }
    .dir-cfg-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--propia-border-divider); border-radius: 10px; }
    .dir-cfg-itemchip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #E1D9FA; background: var(--propia-brand-soft-2); color: var(--propia-brand); font-weight: 700; font-size: 12.5px; border-radius: 20px; padding: 4px 12px; }
    .dir-cfg-itemmeta { font-size: 11px; color: var(--propia-text-muted); }
    .dir-cfg-basebadge { margin-left: auto; font-size: 10px; font-weight: 700; color: #B45309; background: #FEF3C7; padding: 2px 9px; border-radius: 20px; }
    .dir-cfg-mini { border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); color: var(--propia-text-secondary); border-radius: 7px; padding: 4px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
    .dir-cfg-mini:first-of-type { margin-left: auto; }
    .dir-cfg-mini--del { color: #DC2626; border-color: #FECACA; }

    /* Chips de etiqueta en tarjetas + ficha 360 */
    .dir-tag--et { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #E1D9FA; background: var(--propia-brand-soft-2); color: var(--propia-brand); font-weight: 700; }
    .dir-tag-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; opacity: .6; padding: 0 0 0 2px; }
    .dir-tag-x:hover { opacity: 1; }
    .dir-tag-add { border: 1px dashed #C9BCF6; background: var(--propia-bg-card); color: var(--propia-brand); border-radius: 20px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; outline: none; }

    /* === Directorio: layout fiel al prototipo PROPIA v2 === */
    /* Sin max-width ni centrado: llena todo el ancho (fiel al ancho de pantalla, como Mascotas). */
    .dir-page { width: 100%; padding: 30px 0 70px; font-family: var(--propia-font-base, 'Lexend', sans-serif); box-sizing: border-box; }
    .dir-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
    .dir-title { font-size: 27px; font-weight: 800; letter-spacing: -0.6px; color: var(--propia-text-h1); margin: 0; }
    .dir-sub { font-size: 14px; color: var(--propia-text-muted); margin: 4px 0 0; }
    .dir-actions { display: flex; align-items: center; gap: 8px; }
/* Tabs simples Personas/Empresas (reemplazan las tarjetas KPI que hacian de tabs). */
.dir-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--propia-border-card); }
.dir-tab { padding: 9px 16px; border: 0; background: transparent; color: #64748B; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dir-tab:hover { color: var(--propia-brand, var(--propia-brand)); }
.dir-tab.active { color: var(--propia-brand, var(--propia-brand)); border-bottom-color: var(--propia-brand, var(--propia-brand)); }
    .dir-btn-ghost { display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border-radius: 10px; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); font-size: 13px; font-weight: 600; color: var(--propia-text-secondary); cursor: pointer; font-family: inherit; }
    .dir-btn-ghost:hover { border-color: var(--propia-text-faint); color: var(--propia-text-body); }
    .dir-btn-ghost.is-on { border-color: var(--propia-brand, var(--propia-brand)); background: var(--propia-brand-soft-2); color: var(--propia-brand, var(--propia-brand)); }
    /* Barra de filtros: spacer + menu Agrupar (mismo patron/altura que los demas modulos) */
    .mod-filtros-spacer { flex: 1 1 auto; min-width: 8px; }
    .dir-menu-wrap { position: relative; }
    .dir-menu-bd { position: fixed; inset: 0; z-index: 40; }
    .dir-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 41; min-width: 180px; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 12px; box-shadow: 0 12px 30px rgba(30,40,60,.18); padding: 6px; }
    .dir-menu-it { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--propia-text-body); cursor: pointer; font-family: inherit; }
    .dir-menu-it:hover { background: var(--propia-brand-soft-2); }
    .dir-menu-it.on { background: var(--propia-brand-soft-2); color: var(--propia-brand, var(--propia-brand)); }
    /* Boton de plantilla en morado suave (mismo look que zc-btn-ghost de Zonas/Equipos). */
    .dir-btn-soft { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border: 1px solid var(--propia-brand-border); border-radius: 9px; background: var(--propia-brand-soft); color: var(--propia-brand, var(--propia-brand)); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
    .dir-btn-soft:hover { background: var(--propia-brand-soft); }
    .dir-btn-soft:disabled { opacity: .5; cursor: default; }
    .dir-btn-brand { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 10px; border: 0; background: var(--propia-brand, var(--propia-brand)); color: var(--propia-text-inverse); font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px rgba(109,79,227,.30); font-family: inherit; }
    .dir-btn-brand:hover { background: var(--propia-brand-hover, var(--propia-brand-hover)); }

    .dir-tabs { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--propia-border-card); margin-bottom: 18px; }
    .dir-tab { background: transparent; border: 0; padding: 11px 13px; font-size: 13.5px; font-weight: 700; color: var(--propia-text-muted); cursor: pointer; border-bottom: 2.5px solid transparent; font-family: inherit; margin-bottom: -1px; }
    .dir-tab--on { color: var(--propia-brand, var(--propia-brand)); border-bottom-color: var(--propia-brand, var(--propia-brand)); }
    .dir-tab-count { display: inline-block; margin-left: 5px; padding: 1px 8px; border-radius: 999px; background: var(--propia-border-divider); color: var(--propia-text-secondary); font-size: 11px; font-weight: 700; }
    .dir-tab--on .dir-tab-count { background: var(--propia-brand-soft); color: var(--propia-brand, var(--propia-brand)); }

    .dir-search { display: flex; align-items: center; gap: 10px; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
    .dir-search:focus-within { border-color: var(--propia-brand, var(--propia-brand)); }
    .dir-search input { flex: 1; border: none; outline: none; background: none; font-size: 13.5px; color: var(--propia-text-body); font-family: inherit; }
    .dir-search-count { font-size: 12px; color: var(--propia-text-faint); font-weight: 600; white-space: nowrap; }

    .dir-list { background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 14px; box-shadow: 0 1px 2px rgba(45,62,80,.05); overflow: hidden; }
    .dir-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 18px; text-align: left; border: 0; border-bottom: 1px solid var(--propia-border-divider); background: var(--propia-bg-card); cursor: pointer; font-family: inherit; }
    .dir-row:last-child { border-bottom: 0; }
    .dir-row:hover { background: var(--propia-brand-soft-2); }
    .dir-avatar { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
    .dir-avatar--persona { background: linear-gradient(135deg, #8366F0, var(--propia-brand-hover)); color: var(--propia-text-inverse); }
    .dir-avatar--empresa { background: var(--propia-border-divider); color: var(--propia-text-secondary); font-size: 13px; }
    .dir-col-main { width: 230px; flex-shrink: 0; min-width: 0; }
    .dir-name { font-size: 14px; font-weight: 700; color: var(--propia-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dir-meta { font-size: 12px; color: var(--propia-text-faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dir-tags { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
    .dir-tag { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
    .dir-tag--mute { color: var(--propia-text-secondary); background: var(--propia-border-divider); }
    .dir-tag--warn { color: #B7791F; background: var(--propia-bg-card)7E6; }
    .dir-tag--brand { color: var(--propia-brand, var(--propia-brand)); background: var(--propia-brand-soft); }
    .dir-tag--ok { color: #1A8754; background: #E7F6EE; }
    .dir-unidad { width: 110px; flex-shrink: 0; font-size: 12.5px; color: var(--propia-text-secondary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dir-estado { width: 96px; flex-shrink: 0; display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
    .dir-dot { width: 7px; height: 7px; border-radius: 50%; }
    .dir-dot--ok { background: #1A8754; }
    .dir-dot--off { background: var(--propia-text-faint); }
    .dir-estado-txt { font-size: 11.5px; font-weight: 700; }
    .dir-estado-txt--ok { color: #1A8754; }
    .dir-estado-txt--off { color: var(--propia-text-faint); }
    .dir-chev { flex-shrink: 0; }

    .dir-loading { text-align: center; padding: 40px; }
    .dir-empty { background: var(--propia-bg-card); border: 1px dashed var(--propia-border-input); border-radius: 12px; padding: 28px; text-align: center; color: var(--propia-text-muted); font-size: 13.5px; display: flex; flex-direction: column; gap: 5px; align-items: center; }
    .dir-empty strong { color: var(--propia-text-h1); font-weight: 700; font-size: 14px; }
    .dir-empty--tab { background: var(--propia-brand-soft-2); }
    .dir-empty-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--propia-brand-soft); color: var(--propia-brand, var(--propia-brand)); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }

    /* === Modales (overlay) === */
    .dir-modal-backdrop { position: fixed; inset: 0; z-index: 1080; background: rgba(27,42,58,.55); display: flex; align-items: flex-start; justify-content: center; padding: 34px 20px; overflow-y: auto; }
    .dir-modal { width: 600px; max-width: 100%; background: var(--propia-bg-card); border-radius: 18px; box-shadow: 0 30px 70px rgba(27,42,58,.4); margin: auto; overflow: hidden; display: flex; flex-direction: column; max-height: 90vh; font-family: var(--propia-font-base, 'Lexend', sans-serif); }
    .dir-modal--lg { width: 880px; }
    /* Panel Configurar columnas */
    .dir-cfgcols { width: 420px; max-width: 100%; background: var(--propia-bg-card); border-radius: 14px; box-shadow: 0 18px 50px rgba(27,42,58,.28); padding: 18px 20px 16px; align-self: flex-start; margin-top: 40px; }
    .dir-cfgcols-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
    .dir-cfgcols-head strong { font-size: 15px; color: var(--propia-text-body); }
    .dir-cfgcols-x { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--propia-text-muted); border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); cursor: pointer; }
    .dir-cfgcols-x:hover { background: var(--propia-bg-app); color: var(--propia-text-body); }
    .dir-cfgcols-sub { font-size: 12.5px; color: var(--propia-text-muted); margin: 2px 0 12px; }
    .dir-cfgcols-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
    .dir-cfgcols-vis { display: flex; align-items: center; }
    .dir-cfgcols-vis input { width: 16px; height: 16px; accent-color: var(--propia-brand, var(--propia-brand)); cursor: pointer; }
    .dir-cfgcols-vis input:disabled { cursor: not-allowed; }
    .dir-cfgcols-inp { flex: 1; border: 1px solid var(--propia-border-card); border-radius: 8px; padding: 7px 10px; font-size: 13px; color: var(--propia-text-body); font-family: inherit; outline: none; }
    .dir-cfgcols-inp:focus { border-color: var(--propia-brand, var(--propia-brand)); }
    /* Menu "Campos" (antes modal): popover anclado al boton, con reorden (patron Zonas/Unidades). */
    .dir-menu-bd { position: fixed; inset: 0; z-index: 40; }
    .dir-colsmenu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 41; min-width: 320px; background: var(--propia-bg-card); border: 1px solid var(--propia-border-card); border-radius: 12px; box-shadow: 0 12px 30px rgba(30,40,60,.18); padding: 8px; }
    .dir-colsmenu-h { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; color: var(--propia-text-faint); text-transform: uppercase; padding: 4px 6px 8px; }
    .dir-colsmenu-i { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; }
    .dir-colsmenu-i:hover { background: var(--propia-bg-hover); }
    .dir-colsmenu-ord { display: flex; gap: 2px; flex: 0 0 auto; }
    .dir-colsmenu-mv { border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); color: var(--propia-text-muted); border-radius: 6px; width: 22px; height: 22px; font-size: 9px; line-height: 1; cursor: pointer; }
    .dir-colsmenu-mv:disabled { opacity: .35; cursor: default; }
    .dir-colsmenu-acts { display: flex; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--propia-border-divider); }
    .dir-colsmenu-act { flex: 1; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); border-radius: 7px; padding: 6px 8px; font-size: 11.5px; font-weight: 700; color: var(--propia-text-secondary); cursor: pointer; font-family: inherit; }
    .dir-colsmenu-act:hover { border-color: var(--propia-brand, var(--propia-brand)); color: var(--propia-brand, var(--propia-brand)); }
    .dir-cfgcols-req { font-size: 10.5px; font-weight: 700; color: var(--propia-text-muted); text-transform: uppercase; letter-spacing: .3px; }
    .dir-cfgcols-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
    /* Campos propios (dinamicos) dentro del menu Columnas: nombre + badge "din" + engranaje + trash.
       Espejo de .usr-col-dyn / .usr-col-del de usuarios.css, con prefijo del Directorio. */
    .dir-col-name { flex: 1; min-width: 0; font-size: 13px; color: var(--propia-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dir-col-dyn { font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--propia-brand); background: var(--propia-brand-soft); border-radius: 5px; padding: 1px 5px; margin-left: 4px; }
    .dir-col-gear { width: 26px; height: 24px; flex: 0 0 auto; border: 1px solid var(--propia-brand-border); background: var(--propia-bg-card); border-radius: 6px; cursor: pointer; color: var(--propia-brand); display: inline-flex; align-items: center; justify-content: center; }
    .dir-col-gear:hover { background: var(--propia-brand-soft); }
    .dir-col-del { width: 26px; height: 24px; flex: 0 0 auto; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); border-radius: 6px; cursor: pointer; color: var(--propia-text-faint); display: inline-flex; align-items: center; justify-content: center; }
    .dir-col-del:hover { color: var(--propia-danger); border-color: var(--propia-danger); }
    /* Toast breve a nivel de pagina (p.ej. error al eliminar un campo). Espejo de .dtab-toast. */
    .dir-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 4300; background: var(--propia-brand); color: var(--propia-text-inverse); font-size: 12.5px; font-weight: 600; padding: 9px 16px; border-radius: 9px; box-shadow: 0 8px 24px rgba(20,30,50,.28); }
    .dir-x { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--propia-text-muted); border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); cursor: pointer; flex-shrink: 0; }
    .dir-x:hover { background: var(--propia-bg-app); color: var(--propia-text-body); }

    /* Detalle 360 header */
    .dir-dt-head { padding: 22px 24px; border-bottom: 1px solid var(--propia-border-divider); background: linear-gradient(120deg, var(--propia-brand-soft-2), var(--propia-brand-soft-2)); }
    .dir-dt-headrow { display: flex; align-items: flex-start; gap: 16px; }
    .dir-dt-avatar { width: 64px; height: 64px; border-radius: 15px; background: linear-gradient(135deg, #8366F0, var(--propia-brand-hover)); color: var(--propia-text-inverse); display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 800; flex-shrink: 0; }
    .dir-dt-avatar--empresa { background: var(--propia-border-divider); color: var(--propia-text-secondary); font-size: 18px; }
    .dir-dt-id { flex: 1; min-width: 0; }
    .dir-dt-nombre { font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--propia-text-h1); }
    .dir-dt-nombre-edit { display: flex; gap: 8px; }
    .dir-dt-nombre-input { font-size: 16px; font-weight: 800; color: var(--propia-text-h1); border: 1px solid var(--propia-brand-border); border-radius: 9px; padding: 7px 11px; outline: none; background: var(--propia-bg-card); width: 100%; font-family: inherit; }
    .dir-dt-nombre-input:focus { border-color: var(--propia-brand, var(--propia-brand)); }
    .dir-dt-sub { font-size: 12.5px; color: var(--propia-text-muted); margin-top: 4px; }
    .dir-dt-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
    .dir-dt-acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .dir-btn-edit { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 9px; border: 1px solid var(--propia-brand-border); background: var(--propia-bg-card); font-size: 13px; font-weight: 700; color: var(--propia-brand, var(--propia-brand)); cursor: pointer; font-family: inherit; }
    .dir-btn-edit:hover { background: var(--propia-brand-soft); }
    .dir-btn-cancel { padding: 9px 13px; border-radius: 9px; border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); font-size: 13px; font-weight: 600; color: var(--propia-text-secondary); cursor: pointer; font-family: inherit; }
    .dir-btn-cancel:hover { border-color: var(--propia-text-faint); }
    .dir-btn-save { display: flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 9px; background: var(--propia-brand, var(--propia-brand)); color: var(--propia-text-inverse); font-size: 13px; font-weight: 700; border: 0; cursor: pointer; box-shadow: 0 4px 12px rgba(109,79,227,.3); font-family: inherit; }
    .dir-btn-save:hover:not(:disabled) { background: var(--propia-brand-hover, var(--propia-brand-hover)); }
    .dir-btn-save:disabled, .dir-btn-cancel:disabled { opacity: .6; cursor: default; }

    .dir-dt-tabs { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--propia-border-divider); flex-shrink: 0; }
    .dir-dt-tab { padding: 12px 12px; font-size: 13px; font-weight: 700; color: var(--propia-text-muted); border: 0; border-bottom: 2.5px solid transparent; background: transparent; cursor: pointer; font-family: inherit; margin-bottom: -1px; }
    .dir-dt-tab.on { color: var(--propia-brand, var(--propia-brand)); border-bottom-color: var(--propia-brand, var(--propia-brand)); }
    .dir-dt-body { overflow-y: auto; padding: 22px 24px; }

    .dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--propia-border-divider); border: 1px solid var(--propia-border-divider); border-radius: 11px; overflow: hidden; }
    .dir-cell { background: var(--propia-bg-card); padding: 13px 15px; }
    .dir-cell--wide { grid-column: 1 / -1; }
    .dir-cell-k { font-size: 11px; color: var(--propia-text-faint); font-weight: 600; }
    .dir-cell-v { font-size: 13.5px; font-weight: 600; color: var(--propia-text-body); margin-top: 2px; }

    .dir-section-title { font-size: 11px; letter-spacing: .5px; color: var(--propia-text-faint); font-weight: 700; margin: 16px 0 8px; }
    .dir-section-title--inline { margin: 0; }
    .dir-section-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .dir-muted { color: var(--propia-text-faint); font-weight: 600; }
    .dir-contactos { display: flex; flex-direction: column; gap: 6px; }
    .dir-contacto { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--propia-text-body); padding: 8px 0; border-bottom: 1px solid var(--propia-border-divider); }
    .dir-contacto-vis { color: var(--propia-text-faint); font-size: 11px; margin-left: auto; }

    .dir-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
    .dir-field { display: flex; flex-direction: column; }
    .dir-field--wide { grid-column: 1 / -1; }
    .dir-field label { font-size: 11px; color: var(--propia-text-muted); font-weight: 700; margin-bottom: 5px; }
    .dir-field input, .dir-field select { border: 1px solid var(--propia-border-card); border-radius: 9px; padding: 10px 12px; font-size: 13.5px; color: var(--propia-text-body); outline: none; background: var(--propia-bg-card); font-family: inherit; }
    .dir-field input:focus, .dir-field select:focus { border-color: var(--propia-brand, var(--propia-brand)); }

    .dir-vinc-list { display: flex; flex-direction: column; gap: 9px; }
    .dir-vinc { display: flex; align-items: center; gap: 12px; border: 1px solid var(--propia-border-card); border-radius: 11px; padding: 12px 15px; }
    .dir-vinc-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--propia-brand-soft); color: var(--propia-brand, var(--propia-brand)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .dir-vinc-main { flex: 1; }
    .dir-vinc-fecha { font-size: 13px; font-weight: 700; color: var(--propia-text-body); }
    .dir-vinc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
    .dir-vinc-del { width: 28px; height: 28px; border-radius: 7px; border: 0; background: transparent; color: var(--propia-text-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .dir-vinc-del:hover { background: var(--propia-danger-soft); color: #D7263D; }

    .dir-acceso { display: flex; align-items: center; gap: 12px; border: 1px solid var(--propia-border-card); border-radius: 12px; padding: 15px 17px; }
    .dir-acceso-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--propia-border-divider); color: var(--propia-text-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .dir-acceso-main { flex: 1; }
    .dir-acceso-t { font-size: 13.5px; font-weight: 700; color: var(--propia-text-body); }
    .dir-acceso-s { font-size: 11.5px; color: var(--propia-text-faint); margin-top: 2px; }
    .dir-acceso-btn { font-size: 12px; font-weight: 700; color: var(--propia-text-inverse); background: var(--propia-brand, var(--propia-brand)); border: 0; padding: 7px 12px; border-radius: 8px; cursor: pointer; flex-shrink: 0; }
    .dir-note { font-size: 11.5px; color: var(--propia-text-faint); line-height: 1.55; margin-top: 12px; padding: 11px 13px; background: var(--propia-bg-app); border-radius: 10px; border: 1px dashed var(--propia-border-input); }

    /* Crear */
    .dir-cr-head { display: flex; align-items: flex-start; gap: 13px; padding: 20px 24px; border-bottom: 1px solid var(--propia-border-divider); flex-shrink: 0; }
    .dir-cr-head-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--propia-brand-soft); color: var(--propia-brand, var(--propia-brand)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .dir-cr-head-id { flex: 1; }
    .dir-cr-head-t { font-size: 16px; font-weight: 800; letter-spacing: -.3px; color: var(--propia-text-h1); }
    .dir-cr-head-s { font-size: 12.5px; color: var(--propia-text-muted); }
    .dir-cr-body { overflow-y: auto; padding: 22px 24px; }
    .dir-cr-docrow { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
    .dir-field--doc { width: 120px; }
    .dir-field--grow { flex: 1; }
    .dir-field--dv { width: 80px; }
    .dir-cr-search { display: flex; align-items: center; gap: 6px; padding: 11px 15px; border-radius: 9px; background: var(--propia-text-body); color: var(--propia-text-inverse); font-size: 13px; font-weight: 700; border: 0; cursor: pointer; font-family: inherit; }
    .dir-cr-search:hover { background: var(--propia-text-h1); }
    .dir-cr-found { border: 1px solid #FBD9C4; background: var(--propia-bg-card)8F3; border-radius: 12px; padding: 15px 17px; }
    .dir-cr-found-row { display: flex; align-items: center; gap: 12px; }
    .dir-cr-found-av { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #F2670A, #B9450A); color: var(--propia-text-inverse); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
    .dir-cr-found-n { font-size: 13.5px; font-weight: 700; color: var(--propia-text-body); }
    .dir-cr-found-s { font-size: 11.5px; color: #B45309; }
    .dir-cr-found-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 13px; }
    .dir-cr-notfound { border-top: 1px dashed var(--propia-border-card); padding-top: 16px; }
    .dir-cr-ok { font-size: 12px; font-weight: 700; color: #1A8754; display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
    .dir-cr-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--propia-text-secondary); font-weight: 600; cursor: pointer; }
    .dir-cr-check input { width: 16px; height: 16px; accent-color: var(--propia-brand, var(--propia-brand)); cursor: pointer; }
    .dir-cr-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--propia-border-divider); flex-shrink: 0; }

    /* Tabla del Directorio (dtab-*): compartida por las vistas de Personas y Empresas.
       Vive aqui, en la pagina, y no dentro de una de las vistas: los estilos declarados
       en un componente solo estan en el DOM mientras ese componente se renderiza, asi
       que la vista que no estuviera activa se quedaba sin ellos. Cada vista aporta solo
       su grid (.dvp-grid personas / .dve-grid empresas), que es lo unico que difiere. */
    .dtab-bar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
    .dtab-toggle { display: inline-flex; gap: 2px; background: var(--propia-border-divider); border-radius: 9px; padding: 3px; }
    .dtab-vt { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--propia-text-muted); font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 7px; cursor: pointer; font-family: inherit; }
    .dtab-vt.on { background: var(--propia-bg-card); color: var(--propia-brand, var(--propia-brand)); box-shadow: 0 1px 3px rgba(27,42,58,.12); }

    .dtab-table { border: 1px solid var(--propia-border-card); border-radius: 12px; overflow: hidden; background: var(--propia-bg-card); position: relative; }
    /* Scroll dentro de la tabla + header FIJO (sticky top, opaco) como en Unidades (.dst-scroll/.dst-head). */
    .dtab-scroll { overflow: auto; max-height: calc(100vh - 300px); overflow-anchor: none; }
    /* FAB flotante + fila nueva verde (patron piloto Unidades) */
    .dtab-table .tbl-fab { bottom: 54px; }
    .dtab-row.dtab-row-new { background: var(--propia-brand-soft-2); box-shadow: inset 3px 0 0 var(--propia-brand); }
    .dtab-row.dtab-row-new:hover { background: var(--propia-brand-soft-2); }
    /* Header 1:1 con Unidades (F2 Ola B): 11.5/text-secondary/border-card. Cubre Personas y Empresas
       (ambas usan .dtab-head). El padding vertical se anula abajo (va a las celdas, para separador
       full-height); el horizontal lo mantiene el grid (.dvp-grid/.dve-grid). */
    .dtab-head { background: var(--propia-bg-table-head); font-size: 11.5px; font-weight: 700; color: var(--propia-text-secondary); letter-spacing: .4px; text-transform: uppercase; border-bottom: 1px solid var(--propia-border-card); position: sticky; top: 0; z-index: 6; }
    /* Anula el padding vertical del grid SOLO en el header (mas especifico que .dvp-grid/.dve-grid inline). */
    .dtab-table .dtab-head { padding-top: 0; padding-bottom: 0; }
    /* Separadores full-height entre columnas de datos. Layout: [sel][exp][data..][dyn..][addcol][empty]
       -> se exceptuan sel (1a), exp (2a), addcol (penultima) y empty (ultima). */
    .dtab-head > div { align-self: stretch; display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px; border-right: 1px solid var(--propia-border-card); }
    /* El expander (2do hijo) SI lleva divisor: aisla el bloque de controles de la 1a columna de datos
       (homogeneo en todos los modulos, decision Alex 2026-10-08). La seleccion (1er hijo) queda limpia. */
    .dtab-head > div:first-child, .dtab-head > div:nth-last-child(2), .dtab-head > div:last-child { border-right: 0; }
    .dtab-row { border-bottom: 1px solid var(--propia-border-divider); font-size: 13px; color: var(--propia-text-body); }
    .dtab-row:hover { background: var(--propia-bg-card-soft); }
    /* Cabecera de grupo con totales por columna: usa el mismo grid que las filas (.dvp-grid/.dve-grid +
       grid-template inline); la franja va al contenedor (cubre toda la fila) y el total se alinea bajo su
       columna. Comparte el chip de titulo (.dtab-group-chip/.dtab-group-n) con la cabecera clasica. */
    .dtab-grouprow { background: var(--propia-bg-card-soft); border-bottom: 1px solid var(--propia-border-divider); }
    .dtab-grouplead { display: flex; align-items: center; gap: 8px; }
    .dtab-groupagg { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--propia-text-h1); }
    .dtab-groupagg .dtab-aggtag { margin-left: 5px; font-size: 9px; font-weight: 800; letter-spacing: .4px; color: var(--propia-text-faint); }
    .dtab-c { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dtab-link { border: 0; background: transparent; text-align: left; padding: 0; font-size: 13px; font-weight: 600; color: var(--propia-brand, var(--propia-brand)); cursor: pointer; font-family: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dtab-link:hover { text-decoration: underline; }
    .dtab-badge { font-size: 11px; font-weight: 600; color: var(--propia-text-secondary); background: var(--propia-border-divider); padding: 2px 8px; border-radius: 6px; }
    .dtab-badge--ok { color: #0F8A4F; background: var(--propia-ok-soft); }
    .dtab-act { display: flex; justify-content: flex-end; }

    /* Fila de alta inline: se lee como una fila mas de la tabla, igual que la fila
       "nueva tarea" de Tareas. Sin separador propio que la corte del cuerpo: el fondo
       es casi blanco y solo se tine al enfocarla, y los inputs van punteados para
       insinuar que son editables sin romper la lectura de la tabla. */
    /* Fila de alta al canon Unidades (.newrow--edit): fila tenida de violeta-soft-2 mientras se captura. */
    .dtab-newrow { background: var(--propia-brand-soft-2); }
    /* Ola C: fila CTA colapsada (como la .newrow con row-add--sm de Unidades). */
    /* Fila CTA como fila-grid: el boton cae bajo la 1a columna de datos (celdas sel+exp vacias), igual que Unidades. */
    .dtab-cta-row { padding: 8px 18px; border-top: 1px solid var(--propia-border-divider); }
    .dtab-cta-btncell { grid-column: 3 / -1; display: flex; align-items: center; }
    /* Input de alta al canon .nf-in: sin borde en reposo; el foco dibuja marco brand 1.5px + glow radio 8. */
    .dtab-inp { width: 100%; box-sizing: border-box; border: 1px solid transparent; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--propia-text-body); outline: none; background: transparent; font-family: inherit; box-shadow: none; transition: border-color .12s, box-shadow .12s; }
    .dtab-inp:focus, .dtab-inp:focus-visible { border: 1.5px solid var(--propia-brand); box-shadow: 0 0 0 3px rgba(109,79,227,.14); }
    .dtab-inp::placeholder { color: var(--propia-text-faint); }
    .dtab-nf-mut { color: var(--propia-text-faint); font-size: 12px; }
    /* El "+" de la primera celda es lo que anuncia que la fila es de alta (como en
       Tareas). Es un indicador, no un boton: sin el, con placeholders que solo nombran
       la columna, la fila se lee como un filtro y pasa desapercibida. */
    .dtab-nf-first { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .dtab-nf-plus { flex-shrink: 0; color: #B7A6F0; font-size: 15px; font-weight: 700; }
    /* Confirmar: en la celda de acciones (44px), donde las otras filas llevan su
       chevron. Se pinta solo cuando la fila ya es valida; antes seria ruido. */
    /* Boton "+ Agregar" canonico (zc-row-add): al final de la fila de alta, violeta suave. */
    .dtab-add { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 7px; border: 1px solid var(--propia-brand-border); background: var(--propia-brand-soft); color: var(--propia-brand, var(--propia-brand)); font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
    .dtab-add:hover:not(:disabled) { background: var(--propia-brand-soft); }
    .dtab-add:disabled { opacity: .5; cursor: default; }
    /* Fila de alta: "+" y el expander "crear y abrir ficha" (estilo Airtable) lado a lado. */
    .dtab-act-nf { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
    /* Acciones de la fila de alta al canon Unidades: check-icono violeta lleno (guardar) + cancelar. */
    .dtab-nf-ok, .dtab-nf-cancel { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; cursor: pointer; }
    .dtab-nf-ok { border: 0; background: var(--propia-brand); color: var(--propia-text-inverse); }
    .dtab-nf-ok:hover:not(:disabled) { filter: brightness(.96); }
    .dtab-nf-cancel { border: 1px solid var(--propia-border-card); background: var(--propia-bg-card); color: var(--propia-text-muted); }
    .dtab-nf-cancel:hover:not(:disabled) { color: var(--propia-danger); border-color: var(--propia-danger-soft); background: var(--propia-danger-soft); }
    .dtab-nf-ok:disabled, .dtab-nf-cancel:disabled { opacity: .6; cursor: default; }
    .dtab-abrir { background: var(--propia-brand-soft); color: var(--propia-brand); }
    .dtab-abrir:hover:not(:disabled) { background: var(--propia-brand-soft); filter: none; }
    .dtab-abrir:disabled { background: transparent; color: #D9E0E8; }

    /* ---- Tab Documentos: dropzone (drag & drop nativo sobre el InputFile invisible) + lista ---- */
    .dir-dropzone { position: relative; border: 1.5px dashed #C9B8F5; border-radius: 12px; background: #FBFAFF; transition: border-color .15s, background .15s; }
    .dir-dropzone:hover { border-color: var(--propia-brand); background: var(--propia-brand-soft-2); }
    .dir-dropzone--busy { opacity: .65; pointer-events: none; }
    .dir-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
    .dir-dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; color: var(--propia-brand); pointer-events: none; text-align: center; }
    .dir-dropzone-inner strong { font-size: 13px; color: var(--propia-text-body); }
    .dir-dropzone-inner span { font-size: 11.5px; color: var(--propia-text-muted); }
    .dir-doc-list { margin-top: 14px; border: 1px solid #E9EEF3; border-radius: 12px; overflow: hidden; }
    .dir-doc-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #F1F4F8; }
    .dir-doc-row:last-child { border-bottom: 0; }
    .dir-doc-ic { color: var(--propia-brand); flex: 0 0 auto; display: flex; }
    .dir-doc-nom { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--propia-text-body); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dir-doc-nom:hover { color: var(--propia-brand); text-decoration: underline; }
    .dir-doc-meta { flex: 0 0 auto; font-size: 11.5px; color: var(--propia-text-muted); }
    .dir-doc-del { flex: 0 0 auto; border: 0; background: transparent; color: var(--propia-text-faint); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; }
    .dir-doc-del:hover { color: #DC2626; background: #FEF2F2; }

    /* === Archivos estilo Tareas: carga compacta + miniaturas a la izquierda, visor a la derecha === */
    .dir-files { display: grid; grid-template-columns: 250px 1fr; gap: 14px; min-height: 340px; align-items: stretch; }
    .dir-files-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    .dir-dropzone--mini .dir-dropzone-inner { padding: 16px 10px; gap: 3px; }
    .dir-dropzone--mini .dir-dropzone-inner strong { font-size: 12.5px; }
    .dir-dropzone--mini .dir-dropzone-inner span { font-size: 10.5px; }
    .dir-viewer-hint { font-size: 11.5px; color: var(--propia-text-faint); max-width: 260px; text-align: center; }
    .dir-thumbs { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 340px; padding-right: 2px; }
    .dir-thumb { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1.5px solid #E9EEF3; border-radius: 11px; background: var(--propia-bg-card); cursor: pointer; transition: border-color .12s, background .12s; }
    .dir-thumb:hover { border-color: #C9B8F5; }
    .dir-thumb.on { border-color: var(--propia-brand); background: var(--propia-brand-soft-2); }
    .dir-thumb-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; background: var(--propia-brand-soft); color: var(--propia-brand); display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .dir-thumb-ic img { width: 100%; height: 100%; object-fit: cover; }
    .dir-thumb-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .dir-thumb-nm { font-size: 12px; font-weight: 700; color: var(--propia-text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dir-thumb-by { font-size: 10.5px; color: var(--propia-text-muted); }
    .dir-thumb-x { flex: 0 0 auto; border: 0; background: transparent; color: var(--propia-text-faint); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; }
    .dir-thumb-x:hover { color: #DC2626; background: #FEF2F2; }
    .dir-viewer { border: 1px solid #E9EEF3; border-radius: 12px; background: var(--propia-bg-card-soft); display: flex; flex-direction: column; overflow: hidden; }
    .dir-viewer-imgwrap { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px; cursor: zoom-in; min-height: 240px; }
    .dir-viewer-img { max-width: 100%; max-height: 340px; border-radius: 8px; object-fit: contain; box-shadow: 0 4px 14px rgba(20,40,70,.12); }
    .dir-viewer-zoom { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--propia-text-inverse); background: rgba(20,30,50,.55); border-radius: 7px; padding: 4px 9px; }
    .dir-viewer-pdf { flex: 1; width: 100%; min-height: 340px; border: 0; }
    .dir-viewer-file { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--propia-text-faint); padding: 24px; text-align: center; }
    .dir-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--propia-border-divider); background: var(--propia-bg-card); }
    .dir-viewer-nm { font-size: 12.5px; font-weight: 700; color: var(--propia-text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dir-viewer-open { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--propia-brand); text-decoration: none; background: var(--propia-brand-soft); border-radius: 7px; padding: 6px 12px; }
    .dir-viewer-open:hover { background: var(--propia-brand-soft); }
    .dir-lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(10,16,28,.82); display: flex; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out; }
    .dir-lightbox-img { max-width: 92vw; max-height: 88vh; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); cursor: default; }
    .dir-lightbox-x { position: absolute; top: 18px; right: 20px; border: 0; background: rgba(255,255,255,.12); color: var(--propia-text-inverse); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .dir-lightbox-x:hover { background: rgba(255,255,255,.25); }
    .dir-impres { margin: 0 0 14px; font-size: 12.5px; color: var(--propia-text-body); background: #F1F8F4; border: 1px solid #CDE9D8; border-radius: 10px; padding: 10px 14px; }
    .dir-impres-err { color: #C0383C; font-weight: 700; }
    .dir-impres-list { margin: 6px 0 0; padding-left: 18px; color: #C0383C; font-size: 12px; }
    /* === Movil (hasta 640px): la vista Lista scrollea horizontal en vez de recortarse; menos padding === */
    @media (max-width: 640px) {
        .dir-page { padding-left: 14px; padding-right: 14px; }
        .dir-list { overflow-x: auto; }
        .dir-row { min-width: 560px; }
        .dir-files { grid-template-columns: 1fr; }
        .dir-thumbs { flex-direction: row; overflow-x: auto; max-height: none; }
        .dir-thumb { min-width: 190px; }

        /* === Modales (crear + ficha 360) a PANTALLA COMPLETA en movil === */
        .dir-modal-backdrop { padding: 0; align-items: stretch; }
        .dir-modal, .dir-modal--lg { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
        .dir-dt-head { padding: 12px 14px; }
        /* El header envuelve: avatar + identidad arriba, acciones (Cancelar/Guardar/X) en su propia linea. */
        .dir-dt-headrow { flex-wrap: wrap; gap: 10px; }
        .dir-dt-avatar { width: 46px; height: 46px; font-size: 16px; border-radius: 12px; }
        .dir-dt-id { flex: 1 1 160px; min-width: 0; }
        .dir-dt-nombre-edit { flex-direction: column; gap: 6px; }
        .dir-dt-acts { width: 100%; justify-content: flex-end; }
        .dir-dt-tabs { padding: 0 8px; overflow-x: auto; }
        .dir-dt-body { padding: 14px; }
        /* Formularios a una sola columna */
        .dir-form-grid { grid-template-columns: 1fr; }
        /* Alta por documento: tipo + numero en fila, boton Buscar a lo ancho debajo */
        .dir-cr-docrow { flex-wrap: wrap; }
        .dir-cr-search { flex: 1 1 100%; justify-content: center; }
    }