/* ================================================================
   DOCUMENTOS Y FIRMAS — Mis documentos (Explorador) (#1700)
   Trabajo: W07 / W16 (Varios firmantes)
   Prefijo obligatorio: .doc-
   Tokens: design-tokens.css (radios: 2/4/6/8px, sin gradientes ni translateY)
   Modo oscuro: compatible con [data-theme="dark"]
   Responsivo: 360 / 768 / 1024 / 1440 px sin scroll horizontal
   ================================================================ */

/* --- Barra de pestañas superiores --- */
.doc-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    border-bottom: 1px solid var(--surface-border, #e2e8f0);
    margin-bottom: var(--space-5, 20px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.doc-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast, 150ms), border-color var(--transition-fast, 150ms);
}

.doc-tab:hover {
    color: var(--text-primary, #0f172a);
}

.doc-tab--active {
    color: var(--primary-500, #1e3a5f);
    border-bottom-color: var(--primary-500, #1e3a5f);
    font-weight: 600;
}

[data-theme="dark"] .doc-tab--active {
    color: var(--primary-500, #7ea3cc);
    border-bottom-color: var(--primary-500, #7ea3cc);
}

/* --- Layout del explorador --- */
.doc-explorer-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--space-5, 20px);
    align-items: start;
}

/* --- Panel lateral / Árbol de carpetas --- */
.doc-sidebar {
    background: var(--surface-card, #ffffff);
    border: 1px solid var(--surface-border, #e2e8f0);
    border-radius: var(--radius-lg, 6px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.doc-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--surface-bg, #f8f9fb);
    border-bottom: 1px solid var(--surface-border, #e2e8f0);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #64748b);
}

.doc-sidebar-body {
    padding: var(--space-2, 8px) 0;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}

/* En escritorio el árbol vive en el menú lateral de la app (sin tarjeta ni encabezado propio)
   y la página usa todo el ancho. Ver App._docUbicarArbol. */
.doc-explorer-layout--sin-arbol {
    grid-template-columns: minmax(0, 1fr);
}

.doc-nav-item--oculto {
    display: none;
}

.doc-sidebar.doc-sidebar--en-menu {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.doc-sidebar--en-menu .doc-sidebar-header {
    display: none;
}

.doc-sidebar--en-menu .doc-sidebar-body {
    max-height: none;
    overflow: visible;
    padding: 0;
}

/* Sección de raíz (Pendientes / Privado / Compartido) */
.doc-tree-section {
    margin-bottom: var(--space-3, 12px);
}

.doc-tree-root-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast, 150ms);
}

.doc-tree-root-header:hover {
    background: var(--surface-hover, #f8f9fb);
}

.doc-tree-root-header:focus-visible {
    outline: 2px solid var(--primary-500, #1e3a5f);
    outline-offset: -2px;
}

/* Papelera: separada del resto del árbol */
.doc-tree-section--papelera {
    margin-top: var(--space-3, 12px);
    padding-top: var(--space-2, 8px);
    border-top: 1px solid var(--border-color, #e2e6ea);
}

@media (max-width: 767px) {
    .doc-tree-root-header {
        min-height: 44px;
    }
}

.doc-tree-root-header--static {
    cursor: default;
}

.doc-tree-root-header--static:hover {
    background: transparent;
}

.doc-tree-root-header--active {
    background: var(--primary-50, #eaf0f7);
    color: var(--primary-600, #1c3a5a);
}

[data-theme="dark"] .doc-tree-root-header--active {
    background: var(--primary-50, #16233a);
    color: var(--primary-500, #7ea3cc);
}

.doc-tree-root-info {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-width: 0;
}

.doc-tree-root-icon {
    display: flex;
    align-items: center;
    color: var(--primary-500, #1e3a5f);
    flex-shrink: 0;
}

[data-theme="dark"] .doc-tree-root-icon {
    color: var(--primary-500, #7ea3cc);
}

.doc-tree-root-titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.doc-tree-root-titles strong {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    line-height: 1.2;
}

.doc-tree-root-titles small {
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-muted, #94a3b8);
    line-height: 1.2;
}

.doc-tree-btn-add {
    padding: 3px 6px;
    font-size: 11px;
    border-radius: var(--radius-md, 4px);
    line-height: 1;
}

/* Nodos del árbol */
.doc-tree-root-children {
    display: flex;
    flex-direction: column;
}

.doc-tree-empty-hint {
    padding: 4px 16px 4px 38px;
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-muted, #94a3b8);
    font-style: italic;
}

.doc-tree-node {
    display: flex;
    flex-direction: column;
}

.doc-tree-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 12px;
    cursor: pointer;
    user-select: none;
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-primary, #0f172a);
    transition: background var(--transition-fast, 150ms);
    position: relative;
}

.doc-tree-item:hover {
    background: var(--surface-hover, #f8f9fb);
}

.doc-tree-item--active {
    background: var(--primary-50, #eaf0f7);
    color: var(--primary-600, #1c3a5a);
    font-weight: 600;
}

[data-theme="dark"] .doc-tree-item--active {
    background: var(--primary-50, #16233a);
    color: var(--primary-500, #7ea3cc);
}

.doc-tree-toggle {
    background: transparent;
    border: none;
    padding: 0;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    flex-shrink: 0;
}

.doc-tree-toggle--empty {
    visibility: hidden;
}

.doc-tree-icon {
    display: flex;
    align-items: center;
    color: var(--copper-500, #a56f31);
    flex-shrink: 0;
}

.doc-tree-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-tree-count {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: var(--radius-sm, 2px);
    background: var(--gray-200, #e2e8f0);
    color: var(--gray-700, #334155);
}

[data-theme="dark"] .doc-tree-count {
    background: var(--gray-200, #1e2a3a);
    color: var(--gray-700, #b0b9c4);
}

.doc-tree-actions {
    display: none;
    align-items: center;
    gap: 2px;
}

.doc-tree-item:hover .doc-tree-actions,
.doc-tree-item:focus-within .doc-tree-actions {
    display: flex;
}

.doc-tree-btn {
    background: var(--surface-card, #ffffff);
    border: 1px solid var(--surface-border, #e2e8f0);
    border-radius: var(--radius-sm, 2px);
    padding: 2px 4px;
    font-size: 10px;
    cursor: pointer;
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.doc-tree-btn:hover {
    color: var(--primary-500, #1e3a5f);
    border-color: var(--primary-500, #1e3a5f);
}

.doc-tree-btn--danger:hover {
    color: var(--error, #dc2626);
    border-color: var(--error, #dc2626);
}

/* --- Panel principal de contenido --- */
.doc-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    min-width: 0;
}

/* --- Migas de pan --- */
.doc-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-secondary, #64748b);
    padding: 2px 0;
}

.doc-crumb-btn {
    background: transparent;
    border: none;
    padding: 2px 4px;
    font-size: var(--text-sm, 0.875rem);
    color: var(--primary-500, #1e3a5f);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--radius-sm, 2px);
}

[data-theme="dark"] .doc-crumb-btn {
    color: var(--primary-500, #7ea3cc);
}

.doc-crumb-btn:hover {
    text-decoration: underline;
}

.doc-crumb-btn--active {
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}

.doc-crumb-sep {
    color: var(--text-muted, #94a3b8);
    display: inline-flex;
    align-items: center;
}

.doc-crumb-current {
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    padding: 2px 4px;
}

/* El atributo hidden debe ganar a `display` de .btn / dropzone (ocultar acciones sin permiso de escritura) */
.lp-actions button[hidden],
.doc-dropzone[hidden],
#docOcProvElegido[hidden],
#docOcProvBuscar[hidden] { display: none !important; }

/* Orden de compra: selector de proveedor del diálogo "Nuevo documento".
   Se despliega/pliega con transición de altura (grid 0fr → 1fr) en lugar de aparecer de golpe. */
.doc-oc-prov-box {
    display: grid;
    grid-template-rows: 0fr;
    margin: 0;
    opacity: 0;
    transition: grid-template-rows 220ms ease, opacity 180ms ease, margin-top 220ms ease;
}

.doc-oc-prov-box.is-open {
    grid-template-rows: 1fr;
    margin-top: var(--space-4, 16px);
    opacity: 1;
}

.doc-oc-prov-box-inner {
    min-height: 0;
    overflow: hidden;
    padding: 2px; /* deja ver el anillo de foco del buscador */
}

.doc-oc-prov-lista {
    display: flex;
    flex-direction: column;
    max-height: 168px;
    overflow-y: auto;
    margin-top: 6px;
    border-radius: var(--radius-md, 4px);
}

.doc-oc-prov-lista:empty { display: none; }

.doc-oc-prov-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    background: var(--surface-card, #ffffff);
    border: 1px solid var(--surface-border, #e2e6ea);
    border-top-width: 0;
    color: var(--text-primary, #111827);
    cursor: pointer;
}

.doc-oc-prov-item:first-child { border-top-width: 1px; border-radius: var(--radius-md, 4px) var(--radius-md, 4px) 0 0; }
.doc-oc-prov-item:last-child { border-radius: 0 0 var(--radius-md, 4px) var(--radius-md, 4px); }
.doc-oc-prov-item:hover,
.doc-oc-prov-item:focus-visible { background: var(--surface-bg, #f8f9fb); }
.doc-oc-prov-item strong { font-size: .86rem; }
.doc-oc-prov-item span { font-size: .75rem; color: var(--text-secondary, #64748b); }

.doc-oc-prov-vacio {
    margin: 0;
    padding: 10px 12px;
    font-size: .8rem;
    color: var(--text-secondary, #64748b);
}

.doc-oc-prov-elegido {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: .86rem;
    color: var(--text-primary, #111827);
    background: var(--surface-bg, #f8f9fb);
    border: 1px solid var(--surface-border, #e2e6ea);
    border-radius: var(--radius-md, 4px);
}

.doc-oc-prov-quitar {
    margin-left: auto;
    display: inline-flex;
    padding: 4px;
    color: var(--text-secondary, #64748b);
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* --- Zona de arrastre (Dropzone) --- */
.doc-dropzone {
    border: 2px dashed var(--surface-border-strong, #cbd5e1);
    background: var(--surface-bg, #f8f9fb);
    border-radius: var(--radius-lg, 6px);
    padding: var(--space-4, 16px) var(--space-5, 20px);
    text-align: center;
    transition: border-color var(--transition-fast, 150ms), background-color var(--transition-fast, 150ms);
    cursor: pointer;
}

.doc-dropzone:hover {
    border-color: var(--primary-500, #1e3a5f);
    background: var(--surface-card, #ffffff);
}

.doc-dropzone--dragover {
    border-color: var(--primary-500, #1e3a5f);
    background: var(--primary-50, #eaf0f7);
}

[data-theme="dark"] .doc-dropzone--dragover {
    border-color: var(--primary-500, #7ea3cc);
    background: var(--primary-50, #16233a);
}

.doc-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.doc-dropzone-icon {
    color: var(--primary-500, #1e3a5f);
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .doc-dropzone-icon {
    color: var(--primary-500, #7ea3cc);
}

.doc-dropzone-text {
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-primary, #0f172a);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.doc-dropzone-hint {
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-muted, #94a3b8);
}

/* --- Callout informativo en vista de pendientes de firma --- */
.doc-pendientes-callout {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    background: var(--badge-pendiente-bg, #fef3c7);
    border: 1px solid var(--badge-pendiente-border, #fde68a);
    border-radius: var(--radius-lg, 6px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    color: var(--badge-pendiente-text, #92400e);
}

.doc-pendientes-callout-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--badge-pendiente-text, #92400e);
    flex-shrink: 0;
}

.doc-pendientes-callout-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-sm, 0.875rem);
}

.doc-pendientes-callout-text strong {
    font-weight: 600;
}

.doc-pendientes-callout-text span {
    font-size: var(--text-xs, 0.75rem);
    opacity: 0.95;
}

[data-theme="dark"] .doc-pendientes-callout {
    background: #2d2415;
    border-color: #78350f;
    color: #fbbf24;
}

[data-theme="dark"] .doc-pendientes-callout-icon {
    color: #fbbf24;
}

/* --- Tabla de documentos --- */
.doc-cell-title {
    min-width: 220px;
}

.doc-file-info {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
}

.doc-file-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md, 4px);
    background: var(--primary-50, #eaf0f7);
    color: var(--primary-500, #1e3a5f);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[data-theme="dark"] .doc-file-icon {
    background: var(--primary-50, #16233a);
    color: var(--primary-500, #7ea3cc);
}

.doc-file-names {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.doc-name-link {
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    cursor: pointer;
    line-height: 1.3;
}

.doc-name-link:hover {
    color: var(--primary-500, #1e3a5f);
    text-decoration: underline;
}

[data-theme="dark"] .doc-name-link:hover {
    color: var(--primary-500, #7ea3cc);
}

.doc-file-meta {
    font-size: var(--text-xs, 0.75rem);
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Badges de estado, turnos y firmantes según frontend-uidesign --- */
.doc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 8px;
    border-radius: var(--radius-md, 4px);
    line-height: 1;
    white-space: nowrap;
}

.doc-badge--borrador {
    background: var(--gray-100, #f1f5f9);
    color: var(--gray-600, #475569);
    border: 1px solid var(--gray-300, #cbd5e1);
}

.doc-badge--pendiente {
    background: var(--badge-pendiente-bg, #fef3c7);
    color: var(--badge-pendiente-text, #92400e);
    border: 1px solid var(--badge-pendiente-border, #fde68a);
}

.doc-badge--firmado {
    background: var(--badge-pagada-bg, #f0fdf4);
    color: var(--badge-pagada-text, #15803d);
    border: 1px solid var(--badge-pagada-border, #bbf7d0);
}

.doc-badge--rechazado {
    background: var(--badge-vencida-bg, #fef2f2);
    color: var(--badge-vencida-text, #dc2626);
    border: 1px solid var(--badge-vencida-border, #fecaca);
}

.doc-badge--para-firmar {
    background: var(--primary-50, #eaf0f7);
    color: var(--primary-600, #1c3a5a);
    border: 1px solid var(--primary-200, #cbd5e1);
}

.doc-badge--mi-turno {
    background: var(--badge-pagada-bg, #f0fdf4);
    color: var(--badge-pagada-text, #15803d);
    border: 1px solid var(--badge-pagada-border, #bbf7d0);
}

.doc-badge--en-espera {
    background: var(--gray-100, #f1f5f9);
    color: var(--gray-600, #475569);
    border: 1px solid var(--gray-300, #cbd5e1);
}

[data-theme="dark"] .doc-badge--borrador {
    background: #1e293b;
    color: #94a3b8;
    border-color: #334155;
}

[data-theme="dark"] .doc-badge--pendiente {
    background: #2d2415;
    color: #fbbf24;
    border-color: #78350f;
}

[data-theme="dark"] .doc-badge--firmado {
    background: #132e1e;
    color: #4ade80;
    border-color: #14532d;
}

[data-theme="dark"] .doc-badge--rechazado {
    background: #2e1515;
    color: #f87171;
    border-color: #7f1d1d;
}

[data-theme="dark"] .doc-badge--para-firmar {
    background: #16233a;
    color: #7ea3cc;
    border-color: #2b4162;
}

[data-theme="dark"] .doc-badge--mi-turno {
    background: #132e1e;
    color: #4ade80;
    border-color: #14532d;
}

[data-theme="dark"] .doc-badge--en-espera {
    background: #1e293b;
    color: #94a3b8;
    border-color: #334155;
}

/* --- Botones de acciones por fila --- */
.doc-btn-danger-hover:hover {
    color: var(--error, #dc2626) !important;
    border-color: var(--error, #dc2626) !important;
}

.doc-btn-disabled,
.doc-btn-disabled:hover,
.doc-btn-disabled:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: auto !important;
}

/* --- Empty state dentro de tabla --- */
.doc-empty-cell {
    padding: var(--space-8, 32px) var(--space-4, 16px) !important;
    text-align: center;
}

.doc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 8px);
    max-width: 420px;
    margin: 0 auto;
}

.doc-empty-icon {
    color: var(--text-muted, #94a3b8);
    margin-bottom: var(--space-2, 8px);
}

.doc-empty-state h4 {
    margin: 0;
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}

.doc-empty-state p {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-secondary, #64748b);
    line-height: 1.4;
}

.doc-empty-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-top: var(--space-3, 12px);
}

/* --- Plantillas en modal Nuevo Documento --- */
/* Encabezado de sección dentro del formulario (divider-header de la guía de UI) */
.doc-form-seccion {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--surface-border, #f1f5f9);
    color: var(--text-muted, #94a3b8);
}

.doc-form-seccion span {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary, #64748b);
}

.doc-form-seccion--sep {
    margin-top: 20px;
}

/* Lista de plantillas: una fila por opción (ícono · nombre y descripción · selector) */
.doc-plantillas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2, 8px);
}

/* Fila de una línea: nombre · descripción corta (a la derecha) · selector */
.doc-plantillas-grid .doc-plantilla-card {
    position: relative;
    border: 1px solid var(--surface-border, #e2e8f0);
    border-radius: var(--radius-lg, 8px);
    padding: 9px 12px;
    background: var(--surface-card, #ffffff);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin: 0;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.doc-plantillas-grid .doc-plantilla-card .doc-plantilla-desc {
    margin-left: auto;
    text-align: right;
}

.doc-plantilla-card:hover {
    border-color: var(--primary-500, #1e3a5f);
}

/* Radio real (accesible por teclado con flechas) pero visualmente oculto */
.doc-plantilla-radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.doc-plantilla-card:has(.doc-plantilla-radio:focus-visible) {
    outline: 2px solid var(--primary-500, #1e3a5f);
    outline-offset: 2px;
}

.doc-plantilla-card--selected {
    border-color: var(--primary-500, #1e3a5f);
    background: var(--primary-50, #eaf0f7);
    box-shadow: inset 0 0 0 1px var(--primary-500, #1e3a5f);
}

[data-theme="dark"] .doc-plantilla-card--selected {
    border-color: var(--primary-500, #7ea3cc);
    background: var(--primary-50, #16233a);
    box-shadow: inset 0 0 0 1px var(--primary-500, #7ea3cc);
}

/* Selector circular a la derecha: vacío, y con visto cuando la fila está elegida */
.doc-plantilla-check {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--surface-border, #cbd5e1);
    color: transparent;
    background: transparent;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.doc-plantilla-card--selected .doc-plantilla-check {
    color: #ffffff;
    background: var(--primary-500, #1e3a5f);
    border-color: var(--primary-500, #1e3a5f);
}

.doc-plantilla-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--primary-50, #eaf0f7);
    color: var(--primary-500, #1e3a5f);
}

.doc-plantilla-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

[data-theme="dark"] .doc-plantilla-icon {
    color: var(--primary-500, #7ea3cc);
}

[data-theme="dark"] .doc-plantilla-card--selected .doc-plantilla-check {
    color: #0f172a;
    background: var(--primary-500, #7ea3cc);
}

.doc-plantilla-title {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    text-transform: none;
    letter-spacing: normal;
}

.doc-plantilla-ultima {
    margin-left: 6px;
    font-size: .68rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    color: var(--primary-500, #1e3a5f);
    background: var(--primary-50, #eaf0f7);
    border: 1px solid var(--primary-100, #c9d7e8);
}

[data-theme="dark"] .doc-plantilla-ultima {
    color: var(--primary-500, #7ea3cc);
    background: transparent;
    border-color: var(--primary-500, #7ea3cc);
}

.doc-plantilla-desc {
    font-size: var(--text-xs, 0.78rem);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-secondary, #64748b);
    line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
    .doc-plantilla-card,
    .doc-plantilla-check,
    .doc-oc-prov-box {
        transition: none;
    }
    .doc-plantilla-card:hover { transform: none; }
}

/* --- Modales de Documentos --- */
.doc-modal-overlay {
    animation: fadeIn 0.15s ease-out;
}

.doc-modal {
    border-radius: var(--radius-lg, 6px);
}

/* --- Tarjeta de resumen interactiva (Pendientes de mi firma) --- */
.lp-card.doc-card-clickable {
    cursor: pointer;
    user-select: none;
    transition: box-shadow var(--transition-fast, 150ms), border-color var(--transition-fast, 150ms);
}

.lp-card.doc-card-clickable:hover {
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.08));
    border-color: var(--primary-500, #1e3a5f);
}

.lp-card.doc-card-clickable:focus-visible {
    outline: 2px solid var(--primary-500, #1e3a5f);
    outline-offset: 2px;
}

[data-theme="dark"] .lp-card.doc-card-clickable:hover {
    border-color: var(--primary-500, #7ea3cc);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] .lp-card.doc-card-clickable:focus-visible {
    outline-color: var(--primary-500, #7ea3cc);
}

/* --- Responsividad (360px, 768px, 1024px, 1440px) --- */
/* El menú lateral de la app ocupa ~190 px: con menos de 1200 px de pantalla, árbol y tabla no caben
   lado a lado (la tabla quedaba en ~400 px y el selector Tabla/Lista/Gráfico se salía). */
@media (max-width: 1199px) {
    .doc-explorer-layout {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 900px) {

    .doc-sidebar-body {
        max-height: 260px;
    }
}

@media (max-width: 640px) {
    /* En celular la descripción baja a una segunda línea corta para no apretar el nombre */
    .doc-plantillas-grid .doc-plantilla-card {
        flex-wrap: wrap;
        padding: 8px 10px;
        gap: 2px 10px;
    }

    .doc-plantillas-grid .doc-plantilla-card .doc-plantilla-desc {
        order: 3;
        flex-basis: 100%;
        margin-left: 0;
        text-align: left;
    }

    .doc-plantillas-grid .doc-plantilla-card .doc-plantilla-check {
        margin-left: auto;
    }

    .doc-dropzone {
        padding: var(--space-3, 12px);
    }

    .doc-dropzone-text {
        font-size: var(--text-xs, 0.75rem);
    }
}

/* --- Resumen sin islas: 5 y 6 tarjetas --- */
/* Resumen con 5 tarjetas: llenar la fila en escritorio, sin isla en la segunda fila */
@media (min-width: 1100px) {
    .lp-overview:has(> .lp-card:nth-child(5)):not(:has(> .lp-card:nth-child(6))) {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 800px) {
    .lp-overview:not(:has(> .lp-card:nth-child(6))) > .lp-card:nth-child(5):last-child {
        grid-column: 1 / -1;
    }
}

/* Resumen con 6 tarjetas: 6 columnas en escritorio y 3 por fila en tablet (sin islas) */
@media (min-width: 1100px) {
    .lp-overview:has(> .lp-card:nth-child(6)) {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 768px) and (max-width: 1099px) {
    .lp-overview:has(> .lp-card:nth-child(6)) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 481px) and (max-width: 767px) {
    .lp-overview:has(> .lp-card:nth-child(6)) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 480px) {
    /* 2 columnas: 6 tarjetas en 3 filas; una por línea empujaba el contenido demasiado abajo */
    .lp-overview:has(> .lp-card:nth-child(6)) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Objetivos táctiles de 40 px en móvil, solo dentro de la pantalla de Documentos */
@media (max-width: 767px) {
    #mainContent:has(.doc-explorer-layout) .lp-actions .btn,
    #mainContent:has(.doc-explorer-layout) .doc-dropzone .btn,
    #mainContent:has(.doc-explorer-layout) .doc-tree-btn-add,
    #mainContent:has(.doc-explorer-layout) .doc-crumb-btn,
    #mainContent:has(.doc-explorer-layout) .tr-acc-principal {
        min-height: 40px;
        min-width: 40px;
    }
    #mainContent:has(.doc-explorer-layout) input,
    #mainContent:has(.doc-explorer-layout) select,
    #mainContent:has(.doc-explorer-layout) textarea {
        font-size: 16px;
    }
}

/* Celdas que abren el documento al hacer clic (data-href, primitivo TableResponsive) */
.doc-table td[data-href] { cursor: pointer; }
.doc-table tbody tr:hover td[data-href] { background-color: var(--surface-hover, rgba(37, 99, 235, 0.04)); }
.doc-table .doc-name-link { cursor: pointer; }
.doc-table .doc-name-link:focus-visible { outline: 2px solid var(--accent-500, #2563eb); outline-offset: 2px; border-radius: var(--radius-sm, 2px); }

/* ===== Equipos y carpetas compartidas con acceso por equipo (#1702) ===== */
.doc-tree-lock { display: inline-flex; align-items: center; color: var(--accent-500, #2563eb); flex-shrink: 0; margin-left: 2px; }
.doc-tree-lock--heredado { opacity: .55; }
.doc-tree-item--restringida .doc-tree-label { font-weight: 600; }

.doc-acc-chip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
    margin: 8px 0 0; padding: 6px 10px;
    border: 1px solid var(--surface-border, #e2e6ea); border-radius: var(--radius-md, 4px);
    background: var(--surface-card, #fff); color: var(--text-secondary, #475569); font-size: .78rem;
}
.doc-acc-chip svg, .doc-acc-chip i { color: var(--accent-500, #2563eb); flex-shrink: 0; }
.doc-acc-chip strong { color: var(--text-primary, #0f172a); font-weight: 600; }
.doc-acc-chip--aviso { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.doc-acc-chip--aviso svg, .doc-acc-chip--aviso i { color: #d97706; }
.doc-acc-chip[hidden] { display: none; }

.doc-acc { display: grid; gap: 12px; }
.doc-acc-modos { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.doc-acc-modos legend { font-size: .8rem; font-weight: 600; color: var(--text-secondary, #475569); margin-bottom: 6px; padding: 0; }
.doc-acc-modo, .doc-acc-equipo-chk { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.doc-acc-modo {
    padding: 10px 12px; border: 1px solid var(--surface-border, #e2e6ea); border-radius: var(--radius-lg, 6px);
    background: var(--surface-card, #fff);
}
.doc-acc-modo:has(input:checked) { border-color: var(--accent-500, #2563eb); background: var(--accent-bg, #eff6ff); }
.doc-acc-modo input, .doc-acc-equipo-chk input { margin-top: 3px; accent-color: var(--accent-500, #2563eb); width: 16px; height: 16px; flex-shrink: 0; }
.doc-acc-modo span, .doc-acc-equipo-chk span { display: grid; gap: 2px; min-width: 0; }
.doc-acc-modo small, .doc-acc-equipo-chk small { color: var(--text-muted, #64748b); font-size: .76rem; }
.doc-acc-lista { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--surface-border, #e2e6ea); border-radius: var(--radius-lg, 6px); }
.doc-acc-lista[hidden], .doc-acc-aviso[hidden] { display: none; }
.doc-acc-equipo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.doc-acc-nivel { width: auto; min-width: 130px; }
.doc-acc-vacio { margin: 0; color: var(--text-muted, #64748b); font-size: .85rem; }
.doc-acc-aviso { display: flex; gap: 6px; align-items: center; margin: 4px 0 0; padding: 8px 10px; border-radius: var(--radius-md, 4px); background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: .78rem; }
.doc-acc-nota { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-lg, 6px); background: var(--accent-bg, #eff6ff); border: 1px solid #bfdbfe; color: #1e40af; font-size: .82rem; line-height: 1.45; margin-bottom: 12px; }
.doc-acc-nota--peligro { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.doc-acc-lectura { margin: 0; padding-left: 18px; font-size: .85rem; color: var(--text-primary, #0f172a); }

.doc-eq-label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 6px; color: var(--text-secondary, #475569); }
.doc-eq-ayuda { margin: 0 0 12px; color: var(--text-muted, #64748b); font-size: .82rem; }
.doc-eq-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.doc-eq-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--surface-border, #e2e6ea); border-radius: var(--radius-lg, 6px); background: var(--surface-card, #fff); }
.doc-eq-info { display: grid; gap: 2px; min-width: 0; }
.doc-eq-meta, .doc-eq-desc { font-size: .78rem; color: var(--text-muted, #64748b); overflow: hidden; text-overflow: ellipsis; }
.doc-eq-acciones { display: flex; gap: 6px; flex-shrink: 0; }
.doc-eq-vacio { text-align: center; padding: 28px 12px; color: var(--text-muted, #64748b); }
.doc-eq-vacio strong { display: block; color: var(--text-primary, #0f172a); margin: 8px 0 4px; }
.doc-eq-vacio p { margin: 0; font-size: .85rem; }
.doc-eq-vacio-icono { color: var(--faint, #94a3b8); }
.doc-eq-resultados { margin-top: 6px; border: 1px solid var(--surface-border, #e2e6ea); border-radius: var(--radius-lg, 6px); max-height: 200px; overflow-y: auto; background: var(--surface-card, #fff); }
.doc-eq-resultados[hidden] { display: none; }
.doc-eq-res { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: center; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--surface-border, #e2e6ea); background: none; cursor: pointer; min-height: 44px; color: inherit; font: inherit; }
.doc-eq-res:last-child { border-bottom: 0; }
.doc-eq-res:hover, .doc-eq-res:focus-visible { background: var(--accent-bg, #eff6ff); }
.doc-eq-res small { grid-column: 1; color: var(--text-muted, #64748b); }
.doc-eq-res span { grid-column: 2; grid-row: 1 / span 2; color: var(--accent-500, #2563eb); font-size: .78rem; font-weight: 600; }
.doc-eq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.doc-eq-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: var(--radius-md, 4px); background: var(--accent-bg, #eff6ff); border: 1px solid #bfdbfe; color: #1e40af; font-size: .8rem; }
.doc-eq-chip button { border: 0; background: none; cursor: pointer; color: inherit; display: inline-flex; padding: 6px; border-radius: var(--radius-sm, 2px); min-width: 28px; min-height: 28px; align-items: center; justify-content: center; }
.doc-eq-chip button:hover, .doc-eq-chip button:focus-visible { background: rgba(37, 99, 235, .15); }
.doc-eq-sin { color: var(--text-muted, #64748b); font-size: .8rem; padding: 6px 2px; }

[data-theme="dark"] .doc-acc-chip--aviso, [data-theme="dark"] .doc-acc-aviso { background: #2b2410; border-color: #5c4a14; color: #fbbf24; }
[data-theme="dark"] .doc-acc-nota { background: #172554; border-color: #1e3a8a; color: #93c5fd; }
[data-theme="dark"] .doc-acc-nota--peligro { background: #2d1416; border-color: #6b2227; color: #fca5a5; }
[data-theme="dark"] .doc-eq-chip { background: #172554; border-color: #1e3a8a; color: #93c5fd; }

@media (max-width: 767px) {
    .doc-acc-modo, .doc-acc-equipo-chk { min-height: 44px; }
    .doc-acc-nivel { width: 100%; }
    .doc-eq-item { flex-wrap: wrap; }
    .doc-eq-acciones .btn { min-height: 40px; min-width: 40px; }
    .doc-tree-lock { min-width: 16px; }
}

/* Sin hover (móvil o tableta táctil): acciones de carpeta (Compartir, subcarpeta, renombrar, eliminar)
   siempre visibles, con objetivo de 40 px y en su propia línea para no comerse el nombre. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
    .doc-tree-node > .doc-tree-item { flex-wrap: wrap; }
    .doc-tree-actions { display: flex; gap: 4px; flex-basis: 100%; justify-content: flex-end; }
    .doc-tree-btn, .doc-tree-toggle { min-width: 40px; min-height: 40px; }
    .doc-tree-btn { font-size: 14px; }
    .doc-tree-count { font-size: 12px; }
}

/* Tema oscuro explícito de los componentes de equipos (no dependen de variables que el tema oscuro no define) */
[data-theme="dark"] .doc-eq-item,
[data-theme="dark"] .doc-eq-resultados,
[data-theme="dark"] .doc-acc-chip,
[data-theme="dark"] .doc-acc-modo { background: #121b2a; border-color: #273140; color: #e6eaf0; }
[data-theme="dark"] .doc-acc-lista { background: transparent; border-color: #273140; }
[data-theme="dark"] .doc-acc-modo:has(input:checked) { background: #172554; border-color: #3b82f6; }
[data-theme="dark"] .doc-eq-res { color: #e6eaf0; background: transparent; border-bottom-color: #273140; }
[data-theme="dark"] .doc-eq-res:hover,
[data-theme="dark"] .doc-eq-res:focus-visible { background: #172554; }
[data-theme="dark"] .doc-eq-res small,
[data-theme="dark"] .doc-eq-meta,
[data-theme="dark"] .doc-eq-desc,
[data-theme="dark"] .doc-acc-modo small,
[data-theme="dark"] .doc-acc-equipo-chk small,
[data-theme="dark"] .doc-eq-sin,
[data-theme="dark"] .doc-acc-vacio,
[data-theme="dark"] .doc-eq-ayuda { color: #9aa7b8; }
[data-theme="dark"] .doc-eq-res span { color: #60a5fa; }
[data-theme="dark"] .doc-acc-chip strong,
[data-theme="dark"] .doc-eq-vacio strong,
[data-theme="dark"] .doc-acc-lectura { color: #e6eaf0; }
[data-theme="dark"] .doc-eq-chip button:hover,
[data-theme="dark"] .doc-eq-chip button:focus-visible { background: rgba(96, 165, 250, .2); }
[data-theme="dark"] .doc-acc-chip svg, [data-theme="dark"] .doc-acc-chip i,
[data-theme="dark"] .doc-tree-lock { color: #60a5fa; }

/* Los modales fuerzan label en bloque y mayúsculas: se restablece para el selector de acceso */
.doc-modal label.doc-acc-modo,
.doc-modal label.doc-acc-equipo-chk { display: flex; align-items: flex-start; gap: 10px; text-transform: none; letter-spacing: normal; font-size: .85rem; font-weight: 400; margin: 0; }
.doc-modal label.doc-acc-modo strong,
.doc-modal label.doc-acc-equipo-chk strong { font-size: .88rem; font-weight: 600; text-transform: none; letter-spacing: normal; }
.doc-modal label.doc-acc-modo small,
.doc-modal label.doc-acc-equipo-chk small { display: block; font-size: .76rem; font-weight: 400; text-transform: none; letter-spacing: normal; }
.doc-modal .doc-acc-modos legend { text-transform: none; letter-spacing: normal; }
.doc-modal .doc-acc-equipo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.doc-modal .doc-acc-modo input[type=radio],
.doc-modal .doc-acc-equipo-chk input[type=checkbox] { width: 16px; height: 16px; min-width: 16px; padding: 0; margin: 3px 0 0; flex: 0 0 16px; }
.doc-modal .doc-eq-label { text-transform: none; letter-spacing: normal; }
.doc-modal label.doc-acc-modo,
.doc-modal label.doc-acc-equipo-chk { flex-direction: row; }
.doc-modal label.doc-acc-equipo-chk { flex: 1 1 200px; }
.doc-modal .doc-acc-nivel { flex: 0 0 150px; }

/* Diálogos de Documentos en móvil (se montan fuera de #mainContent): campos de 16 px para que iOS
   no haga zoom, selector de nivel a todo el ancho y botones con objetivo táctil de 40 px. */
@media (max-width: 767px) {
    /* Misma cadena :not() que la regla global de main.css, con el prefijo para superarla */
    .doc-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    .doc-modal select,
    .doc-modal textarea { font-size: 16px; }
    .doc-modal .doc-acc-nivel { flex: 1 1 100%; }
    .doc-modal .modal-footer .btn,
    .doc-modal .modal-close { min-height: 40px; min-width: 40px; }
}