/* ==========================================================================
   Archivo Digital — capa visual corporativa (CapitalStore). Sin frameworks.
   Tokens y componentes cs-* compartidos con la Plataforma de Solicitudes,
   más los componentes propios del archivo (ad-*).
   ========================================================================== */

:root {
    /* Identidad: azul financiero sobrio */
    --cs-primary: #1d4ed8;
    --cs-primary-strong: #1e3a8a;
    --cs-primary-deep: #172554;
    --cs-primary-soft: #eaf1ff;
    --cs-primary-soft-border: #c7d7fb;

    /* Neutros: contenido y una segunda capa más fría para barras/paneles */
    --cs-bg: #f4f6fa;
    --cs-surface: #ffffff;
    --cs-surface-2: #f8fafc;
    --cs-border: #e2e8f0;
    --cs-border-strong: #cbd5e1;

    --cs-ink: #0f172a;
    --cs-text: #1e293b;
    --cs-text-2: #475569;
    --cs-muted: #64748b;

    /* Estados */
    --cs-success: #15803d;
    --cs-success-soft: #ecfdf5;
    --cs-success-border: #a7f3d0;
    --cs-warning: #b45309;
    --cs-warning-soft: #fffbeb;
    --cs-warning-border: #fde68a;
    --cs-danger: #b91c1c;
    --cs-danger-soft: #fef2f2;
    --cs-danger-border: #fecaca;
    --cs-info: #0369a1;
    --cs-info-soft: #f0f9ff;
    --cs-info-border: #bae6fd;

    --cs-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --cs-radius: .625rem;
    --cs-radius-lg: .875rem;
    --cs-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --cs-shadow: 0 6px 18px rgba(15, 23, 42, .06);
    --cs-ease: cubic-bezier(.22, 1, .36, 1);

    /* Escala z semántica */
    --z-dropdown: 30;
    --z-sticky: 40;
    --z-drawer-backdrop: 50;
    --z-drawer: 60;
    --z-modal: 70;
    --z-toast: 80;

    --cs-header-h: 3.5rem;
    --cs-sidebar-w: 16.5rem;
    --cs-sidebar-w-collapsed: 4rem;
}

html { background: var(--cs-bg); }
body {
    background: var(--cs-bg);
    color: var(--cs-text);
    font-family: var(--cs-font);
    font-size: .875rem;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3 { text-wrap: balance; color: var(--cs-ink); }
p { text-wrap: pretty; }
.cs-num, .cs-money { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Shell: cabecera + menú lateral + contenido
   ========================================================================== */
.cs-app-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    height: var(--cs-header-h);
    background: var(--cs-primary-deep);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cs-app-header .cs-header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;
}
.cs-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: #fff;
    text-decoration: none;
    min-width: 0;
}
.cs-brand-mark {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    flex: none;
}
.cs-brand-name { font-weight: 600; font-size: .9rem; letter-spacing: -.01em; white-space: nowrap; }
.cs-brand-sub  { font-size: .7rem; color: rgba(255, 255, 255, .65); display: block; line-height: 1.1; }
.cs-header-tools { display: flex; align-items: center; gap: .25rem; }
.cs-header-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 2.25rem;
    padding: 0 .7rem;
    border-radius: .5rem;
    color: rgba(255, 255, 255, .88);
    font-size: .8125rem;
    font-weight: 500;
    background: transparent;
    border: 1px solid transparent;
    transition: background-color .15s var(--cs-ease), border-color .15s var(--cs-ease);
}
.cs-header-btn:hover { background: rgba(255, 255, 255, .1); }
.cs-header-btn.is-danger:hover { background: rgba(248, 113, 113, .18); border-color: rgba(248, 113, 113, .35); }
.cs-header-user { display: inline-flex; align-items: center; gap: .55rem; padding: 0 .5rem; font-size: .8125rem; }
.cs-avatar {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.cs-header-user small { display: block; color: rgba(255, 255, 255, .6); font-size: .68rem; line-height: 1.1; }
.cs-notif-badge {
    position: absolute;
    top: .1rem;
    right: .1rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--cs-primary-deep);
}
.cs-notif-panel {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    width: min(24rem, calc(100vw - 2rem));
    max-height: 24rem;
    overflow-y: auto;
    background: var(--cs-surface);
    color: var(--cs-text);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
    z-index: var(--z-dropdown);
}
.cs-notif-panel .cs-notif-title {
    padding: .6rem .85rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--cs-text-2);
    background: var(--cs-surface-2);
    border-bottom: 1px solid var(--cs-border);
}
.cs-notif-panel a { display: block; padding: .6rem .85rem; font-size: .8rem; color: var(--cs-text); border-bottom: 1px solid var(--cs-border); }
.cs-notif-panel a:hover { background: var(--cs-primary-soft); }
.cs-notif-empty { padding: 1.5rem .85rem; text-align: center; color: var(--cs-muted); font-size: .8rem; }

.cs-shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--cs-header-h)); }

/* Menú lateral */
.cs-sidebar {
    position: sticky;
    top: var(--cs-header-h);
    height: calc(100vh - var(--cs-header-h));
    width: var(--cs-sidebar-w);
    flex: none;
    background: var(--cs-surface);
    border-right: 1px solid var(--cs-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cs-sidebar.is-collapsed { width: var(--cs-sidebar-w-collapsed); }
.cs-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem .85rem .5rem;
}
.cs-sidebar-title { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-muted); }
.cs-sidebar-nav { flex: 1; overflow-y: auto; padding: 0 .6rem 1rem; scrollbar-width: thin; }
.cs-sidebar-toggle {
    width: 1.9rem; height: 1.9rem;
    border-radius: .45rem;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--cs-muted);
    transition: background-color .15s var(--cs-ease), color .15s var(--cs-ease);
}
.cs-sidebar-toggle:hover { background: var(--cs-surface-2); color: var(--cs-text); }
.cs-sidebar.is-collapsed .cs-sidebar-toggle i { transform: rotate(180deg); }

.cs-menu-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem .5rem .35rem;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cs-muted);
    cursor: pointer;
}
.cs-menu-group-toggle:hover { color: var(--cs-text-2); }
.cs-menu-group-chevron { font-size: .55rem; transition: transform .15s var(--cs-ease); }
.cs-menu-group-items { display: flex; flex-direction: column; gap: .1rem; }
.cs-menu-group-items.hidden { display: none; }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: .5rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--cs-text-2);
    border: 1px solid transparent;
    line-height: 1.25;
    transition: background-color .12s var(--cs-ease), color .12s var(--cs-ease);
}
.sidebar-link .cs-icon { width: 1.1rem; min-width: 1.1rem; text-align: center; color: var(--cs-muted); font-size: .85rem; }
.sidebar-link:hover { background: var(--cs-surface-2); color: var(--cs-ink); }
.sidebar-link:hover .cs-icon { color: var(--cs-text-2); }
.sidebar-link.cs-active {
    background: var(--cs-primary-soft) !important;
    color: var(--cs-primary) !important;
    font-weight: 600;
}
.sidebar-link.cs-active .cs-icon { color: var(--cs-primary); }
.sidebar-link .cs-count {
    margin-left: auto;
    min-width: 1.35rem;
    height: 1.2rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--cs-warning-soft);
    color: var(--cs-warning);
    border: 1px solid var(--cs-warning-border);
    font-size: .68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}
.cs-sidebar.is-collapsed .sidebar-label,
.cs-sidebar.is-collapsed .cs-menu-group-toggle,
.cs-sidebar.is-collapsed .cs-count { display: none; }
.cs-sidebar.is-collapsed .sidebar-link { justify-content: center; padding: .6rem 0; }
.cs-sidebar.is-collapsed .cs-menu-group-items { padding-top: .35rem; }

/* Contenido */
.cs-main {
    flex: 1;
    min-width: 0;
    padding: 1.25rem 1.5rem 3rem;
}
.cs-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: 1.25rem;
}
.cs-page-head h1 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.cs-page-head .cs-page-sub { margin-top: .25rem; color: var(--cs-muted); font-size: .8125rem; max-width: 65ch; }
.cs-page-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.cs-section { margin-bottom: 1.5rem; }
.cs-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: .6rem;
}
.cs-section-head h2 { font-size: .95rem; font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }
.cs-section-head h2 .cs-count { font-size: .72rem; font-weight: 700; color: var(--cs-text-2); background: var(--cs-surface-2); border: 1px solid var(--cs-border); border-radius: 999px; padding: .05rem .5rem; }
.cs-section-head p { color: var(--cs-muted); font-size: .8rem; }

/* Tarjetas y paneles */
.cs-card {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm) !important;
}
.cs-card-body { padding: 1rem 1.15rem; }

/* Resumen compacto (no “hero metrics”: números pequeños, lectura de un vistazo) */
.cs-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .6rem;
    margin-bottom: 1.25rem;
}
.cs-stat {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    padding: .7rem .9rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s var(--cs-ease), box-shadow .15s var(--cs-ease);
}
a.cs-stat:hover { border-color: var(--cs-primary-soft-border); box-shadow: var(--cs-shadow-sm); }
.cs-stat-icon {
    width: 2rem; height: 2rem; border-radius: .5rem; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cs-surface-2); color: var(--cs-text-2); font-size: .85rem;
}
.cs-stat.is-warning .cs-stat-icon { background: var(--cs-warning-soft); color: var(--cs-warning); }
.cs-stat.is-info .cs-stat-icon    { background: var(--cs-info-soft);    color: var(--cs-info); }
.cs-stat.is-success .cs-stat-icon { background: var(--cs-success-soft); color: var(--cs-success); }
.cs-stat.is-primary .cs-stat-icon { background: var(--cs-primary-soft); color: var(--cs-primary); }
.cs-stat > span:not(.cs-stat-icon) { display: flex; flex-direction: column; min-width: 0; }
.cs-stat-label { display: block; font-size: .72rem; color: var(--cs-muted); font-weight: 500; line-height: 1.1; }
.cs-stat-value { font-size: 1.1rem; font-weight: 700; color: var(--cs-ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.cs-stat-value small { font-size: .72rem; font-weight: 500; color: var(--cs-muted); margin-left: .25rem; }

/* ==========================================================================
   Pestañas, filtros y barras de herramientas
   ========================================================================== */
.cs-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--cs-border);
    margin-bottom: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.cs-tabs::-webkit-scrollbar { display: none; }
.cs-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .8rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--cs-text-2);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    transition: color .12s var(--cs-ease), border-color .12s var(--cs-ease);
}
.cs-tab:hover { color: var(--cs-ink); }
.cs-tab.is-active { color: var(--cs-primary); border-bottom-color: var(--cs-primary); font-weight: 600; }
.cs-tab .cs-count { font-size: .68rem; font-weight: 700; background: var(--cs-surface-2); border: 1px solid var(--cs-border); border-radius: 999px; padding: .05rem .45rem; color: var(--cs-text-2); font-variant-numeric: tabular-nums; }
.cs-tab.is-active .cs-count { background: var(--cs-primary-soft); border-color: var(--cs-primary-soft-border); color: var(--cs-primary); }
.cs-tab-panel[hidden] { display: none !important; }

.cs-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem .6rem;
    padding: .75rem .85rem;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    margin-bottom: .85rem;
}
.cs-filters .cs-field { margin: 0; min-width: 9rem; flex: 1 1 10rem; }
.cs-filters .cs-field.is-narrow { flex: 0 1 9.5rem; }
.cs-filters .cs-filters-actions { display: flex; gap: .4rem; align-items: center; }
.cs-filters-summary { font-size: .78rem; color: var(--cs-muted); margin: -.35rem 0 .75rem; }

/* ==========================================================================
   Tablas
   ========================================================================== */
table { border-collapse: separate !important; border-spacing: 0; }
.cs-table-wrap {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    overflow: hidden;
}
.cs-table-scroll { overflow-x: auto; }
.cs-table { width: 100%; font-size: .8125rem; }
.cs-table thead th {
    background: var(--cs-surface-2) !important;
    color: var(--cs-text-2) !important;
    font-weight: 600 !important;
    font-size: .68rem !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--cs-border) !important;
    white-space: nowrap;
}
.cs-table tbody td { padding: .6rem .6rem; border-bottom: 1px solid var(--cs-border); vertical-align: top; }
.cs-table tbody tr:last-child td { border-bottom: 0; }
.cs-table tbody tr:hover { background: #fafcff; }
.cs-table tbody tr.is-highlight { background: var(--cs-warning-soft); }
.cs-table tbody tr.is-highlight:hover { background: #fef3c7; }
td, th { vertical-align: middle; }
.cs-table .cs-td-right, .cs-table .cs-th-right { text-align: right; }
.cs-table .cs-td-actions { white-space: nowrap; }
.cs-table .cs-td-id { font-weight: 600; color: var(--cs-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-table .cs-td-money { font-weight: 600; color: var(--cs-ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.cs-table .cs-td-date { white-space: nowrap; color: var(--cs-text-2); font-variant-numeric: tabular-nums; }
.cs-table .cs-td-motivo { min-width: 13rem; max-width: 26rem; }
.cs-table .cs-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cs-table .cs-clamp.is-open { -webkit-line-clamp: unset; }
.cs-table .cs-sub { display: block; color: var(--cs-muted); font-size: .72rem; margin-top: .1rem; font-variant-numeric: tabular-nums; }
.cs-table .cs-strong { color: var(--cs-ink); font-weight: 500; }
/* Adjuntos como chips */
.cs-files { display: flex; flex-wrap: wrap; gap: .3rem; }
.cs-file {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 10rem;
    padding: .2rem .5rem .2rem .4rem;
    border: 1px solid var(--cs-border);
    border-radius: .4rem;
    background: var(--cs-surface);
    color: var(--cs-text-2);
    font-size: .72rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .12s var(--cs-ease), color .12s var(--cs-ease), background-color .12s var(--cs-ease);
}
.cs-file i { color: var(--cs-danger); font-size: .8rem; }
.cs-file.is-img i { color: var(--cs-info); }
.cs-file.is-xls i { color: var(--cs-success); }
.cs-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-file:hover { border-color: var(--cs-primary-soft-border); background: var(--cs-primary-soft); color: var(--cs-primary); }
.cs-file-none { color: var(--cs-muted); font-size: .75rem; }

/* ==========================================================================
   Badges de estado
   ========================================================================== */
.cs-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 999px;
    padding: .2rem .6rem .2rem .5rem;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.3;
    border: 1px solid transparent;
    white-space: nowrap;
}
.cs-badge::before { content: ''; width: .42rem; height: .42rem; border-radius: 999px; background: currentColor; opacity: .85; }
.cs-badge.no-dot::before { display: none; }
.cs-badge-pendiente  { background: var(--cs-warning-soft); color: var(--cs-warning); border-color: var(--cs-warning-border); }
.cs-badge-aprobado, .cs-badge-aprobada { background: var(--cs-primary-soft); color: var(--cs-primary); border-color: var(--cs-primary-soft-border); }
.cs-badge-pagado, .cs-badge-pagada { background: var(--cs-success-soft); color: var(--cs-success); border-color: var(--cs-success-border); }
.cs-badge-confirmado, .cs-badge-confirmada { background: var(--cs-info-soft); color: var(--cs-info); border-color: var(--cs-info-border); }
.cs-badge-rechazado, .cs-badge-rechazada { background: var(--cs-danger-soft); color: var(--cs-danger); border-color: var(--cs-danger-border); }
.cs-badge-devuelto, .cs-badge-devuelta { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.cs-badge-por_completar { background: var(--cs-surface-2); color: var(--cs-text-2); border-color: var(--cs-border-strong); }
.cs-badge-neutral, .cs-badge-borrador { background: var(--cs-surface-2); color: var(--cs-text-2); border-color: var(--cs-border); }
.cs-badge-revision { background: var(--cs-info-soft); color: var(--cs-info); border-color: var(--cs-info-border); }
.cs-badge-tipo { background: var(--cs-surface-2); color: var(--cs-text-2); border-color: var(--cs-border); font-weight: 500; }
.cs-badge-tipo::before { display: none; }

/* ==========================================================================
   Botones
   ========================================================================== */
.cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    height: 2.25rem;
    padding: 0 .9rem;
    border-radius: .5rem;
    font-weight: 600;
    font-size: .8125rem;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s var(--cs-ease), border-color .15s var(--cs-ease), color .15s var(--cs-ease), box-shadow .15s var(--cs-ease);
}
.cs-btn:disabled, .cs-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.cs-btn-sm { height: 1.9rem; padding: 0 .65rem; font-size: .76rem; }
.cs-btn-lg { height: 2.6rem; padding: 0 1.2rem; font-size: .875rem; }
.cs-btn-icon { width: 2rem; height: 2rem; padding: 0; }
.cs-btn-icon.cs-btn-sm { width: 1.9rem; height: 1.9rem; }
.cs-btn-primary { background: var(--cs-primary); color: #fff; }
.cs-btn-primary:hover:not(:disabled) { background: var(--cs-primary-strong); }
.cs-btn-success { background: var(--cs-success); color: #fff; }
.cs-btn-success:hover:not(:disabled) { background: #166534; }
.cs-btn-danger { background: var(--cs-danger); color: #fff; }
.cs-btn-danger:hover:not(:disabled) { background: #991b1b; }
.cs-btn-secondary { background: var(--cs-surface); color: var(--cs-text); border-color: var(--cs-border-strong); }
.cs-btn-secondary:hover:not(:disabled) { background: var(--cs-surface-2); border-color: #94a3b8; }
.cs-btn-ghost { background: transparent; color: var(--cs-text-2); }
.cs-btn-ghost:hover:not(:disabled) { background: var(--cs-surface-2); color: var(--cs-ink); }
.cs-btn-outline-success { background: var(--cs-surface); color: var(--cs-success); border-color: var(--cs-success-border); }
.cs-btn-outline-success:hover:not(:disabled) { background: var(--cs-success-soft); }
.cs-btn-outline-danger { background: var(--cs-surface); color: var(--cs-danger); border-color: var(--cs-danger-border); }
.cs-btn-outline-danger:hover:not(:disabled) { background: var(--cs-danger-soft); }
.cs-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.cs-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 1rem; height: 1rem;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 999px;
    animation: cs-spin .7s linear infinite;
}
.cs-btn-secondary.is-loading::after, .cs-btn-ghost.is-loading::after { border-color: var(--cs-border-strong); border-top-color: var(--cs-primary); }
@keyframes cs-spin { to { transform: rotate(360deg); } }
.cs-btn-group { display: inline-flex; gap: .35rem; }

/* ==========================================================================
   Formularios
   ========================================================================== */
.cs-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; min-width: 0; }
.cs-label { font-size: .78rem; font-weight: 600; color: var(--cs-text); }
.cs-label .cs-req { color: var(--cs-danger); margin-left: .15rem; }
.cs-label .cs-opt { color: var(--cs-muted); font-weight: 400; margin-left: .3rem; font-size: .72rem; }
.cs-help { font-size: .72rem; color: var(--cs-muted); }
.cs-error { font-size: .74rem; color: var(--cs-danger); font-weight: 500; }
.cs-input, .cs-select, .cs-textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]), select, textarea {
    width: 100%;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border-strong) !important;
    border-radius: .5rem;
    padding: .5rem .7rem;
    font: inherit;
    font-size: .8125rem;
    color: var(--cs-text);
    min-height: 2.35rem;
    transition: border-color .15s var(--cs-ease), box-shadow .15s var(--cs-ease);
}
input::placeholder, textarea::placeholder { color: #64748b; }
input:focus, select:focus, textarea:focus, .cs-input:focus, .cs-select:focus, .cs-textarea:focus {
    outline: none;
    border-color: var(--cs-primary) !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .14) !important;
}
input[readonly], .cs-input[readonly] { background: var(--cs-surface-2); color: var(--cs-text-2); }
input[type="date"] { font-variant-numeric: tabular-nums; }
.cs-input-money { position: relative; }
.cs-input-money > span { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--cs-muted); font-size: .8rem; pointer-events: none; }
.cs-input-money input { padding-left: 1.6rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cs-fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.cs-fieldset legend {
    font-size: .9rem;
    font-weight: 700;
    color: var(--cs-ink);
    padding: 0;
    margin-bottom: .2rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.cs-fieldset legend .cs-step {
    width: 1.5rem; height: 1.5rem; border-radius: 999px;
    background: var(--cs-primary-soft); color: var(--cs-primary);
    font-size: .72rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.cs-fieldset > p { color: var(--cs-muted); font-size: .78rem; margin: 0 0 .9rem; max-width: 65ch; }
.cs-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.cs-form-grid .cs-span-2 { grid-column: span 2; }
.cs-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.5rem; align-items: start; }
.cs-form-aside { position: sticky; top: calc(var(--cs-header-h) + 1rem); }
.cs-form-aside .cs-card-body { display: grid; gap: .75rem; }
.cs-summary { display: grid; gap: .45rem; font-size: .8rem; }
.cs-summary dt { color: var(--cs-muted); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cs-summary dd { color: var(--cs-ink); font-weight: 500; margin: 0 0 .25rem; word-break: break-word; }
.cs-summary dd:empty::before { content: '—'; color: var(--cs-muted); font-weight: 400; }
.cs-summary .cs-summary-money { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Zona de carga de archivos (envuelve al input nativo) */
.cs-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .85rem;
    border: 1px dashed var(--cs-border-strong);
    border-radius: .6rem;
    background: var(--cs-surface-2);
    cursor: pointer;
    transition: border-color .15s var(--cs-ease), background-color .15s var(--cs-ease);
}
.cs-dropzone:hover, .cs-dropzone.is-drag { border-color: var(--cs-primary); background: var(--cs-primary-soft); }
.cs-dropzone:focus-within { border-color: var(--cs-primary); box-shadow: 0 0 0 3px rgba(29, 78, 216, .14); }
.cs-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.cs-dropzone-icon { width: 2rem; height: 2rem; border-radius: .5rem; background: var(--cs-surface); border: 1px solid var(--cs-border); color: var(--cs-primary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cs-dropzone-text { font-size: .78rem; color: var(--cs-text-2); line-height: 1.3; }
.cs-dropzone-text strong { color: var(--cs-ink); font-weight: 600; display: block; }
.cs-dropzone-list { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.cs-dropzone-list li { font-size: .72rem; padding: .15rem .5rem; border-radius: .4rem; background: var(--cs-surface); border: 1px solid var(--cs-border); color: var(--cs-text-2); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-dropzone.is-required .cs-dropzone-icon { color: var(--cs-warning); }
.cs-dropzone.has-files .cs-dropzone-icon { color: var(--cs-success); background: var(--cs-success-soft); border-color: var(--cs-success-border); }

/* ==========================================================================
   Estados vacíos, avisos, toasts
   ========================================================================== */
.cs-empty {
    text-align: center;
    padding: 2rem 1.25rem;
    color: var(--cs-muted);
    background: var(--cs-surface);
    border: 1px dashed var(--cs-border-strong);
    border-radius: var(--cs-radius-lg);
    font-style: normal;
}
.cs-empty i { font-size: 1.4rem; color: var(--cs-border-strong); margin-bottom: .5rem; display: block; }
.cs-empty strong { display: block; color: var(--cs-text); font-weight: 600; margin-bottom: .2rem; }
.cs-empty p { font-size: .8rem; max-width: 42ch; margin: 0 auto; }
.cs-empty .cs-btn { margin-top: .85rem; }
.cs-empty.is-compact { padding: 1.1rem; }
.cs-empty.is-compact i { display: none; }

.cs-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .9rem;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-surface);
    font-size: .8125rem;
    margin-bottom: 1rem;
}
.cs-alert i { margin-top: .1rem; }
.cs-alert-success { background: var(--cs-success-soft); border-color: var(--cs-success-border); color: #14532d; }
.cs-alert-error   { background: var(--cs-danger-soft);  border-color: var(--cs-danger-border);  color: #7f1d1d; }
.cs-alert-info    { background: var(--cs-info-soft);    border-color: var(--cs-info-border);    color: #0c4a6e; }
.cs-alert-warning { background: var(--cs-warning-soft); border-color: var(--cs-warning-border); color: #78350f; }

.cs-toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    gap: .6rem;
    max-width: min(26rem, calc(100vw - 2rem));
    padding: .75rem 1rem;
    border-radius: var(--cs-radius);
    background: var(--cs-ink);
    color: #fff;
    font-size: .8125rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .3);
    animation: cs-toast-in .25s var(--cs-ease);
}
.cs-toast.is-success i { color: #4ade80; }
.cs-toast.is-error i { color: #f87171; }
.cs-toast button { margin-left: auto; color: rgba(255, 255, 255, .6); }
.cs-toast button:hover { color: #fff; }
@keyframes cs-toast-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }

/* Diálogos nativos */
dialog::backdrop { background: rgba(15, 23, 42, .45); }
dialog { color: var(--cs-text); }

/* Foco visible en todo */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--cs-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Base sin framework: reset mínimo y utilidades que usan las pantallas
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
mark { background: #fef08a; color: inherit; padding: 0 .1em; border-radius: .15em; }
.inline { display: inline; }
.min-w-0 { min-width: 0; }
.cs-muted { color: var(--cs-muted); }
.cs-small { font-size: .78rem; }
.cs-strong { color: var(--cs-ink); font-weight: 600; }
.cs-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cs-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.cs-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.cs-grid-aside { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
.cs-mt { margin-top: 1rem; }
.cs-mb { margin-bottom: 1rem; }
.cs-text-right { text-align: right; }
.cs-hide-md { display: inline; }
.cs-footer { text-align: center; padding: 1rem; font-size: .72rem; color: var(--cs-muted); }
.cs-header-left { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.cs-header-user { color: #fff; border-radius: .5rem; }
.cs-header-user:hover { background: rgba(255, 255, 255, .1); }
.cs-header-user-text { display: block; line-height: 1.15; }
.cs-sidebar-foot { border-top: 1px solid var(--cs-border); padding: .5rem .6rem; }
.cs-header-search-btn { display: none; }

/* Buscador global en la cabecera */
.cs-header-search {
    flex: 1 1 auto;
    max-width: 34rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 2.35rem;
    padding: 0 .75rem;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .85);
    transition: background-color .15s var(--cs-ease), border-color .15s var(--cs-ease);
}
.cs-header-search:focus-within { background: #fff; color: var(--cs-text); border-color: #fff; }
.cs-header-search i { font-size: .8rem; opacity: .8; }
.cs-header-search input, #adBuscadorGlobal {
    flex: 1; min-width: 0;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    color: inherit !important; font-size: .8125rem; padding: 0 !important; min-height: 0 !important;
}
#adBuscadorGlobal::placeholder, .cs-header-search input::placeholder { color: rgba(255, 255, 255, .6); }
.cs-header-search:focus-within #adBuscadorGlobal::placeholder { color: var(--cs-muted); }
.cs-header-search kbd {
    font: 600 .62rem var(--cs-font); padding: .1rem .35rem; border-radius: .3rem;
    border: 1px solid rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .7);
}
.cs-header-search:focus-within kbd { display: none; }

/* Migas */
.cs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .76rem; color: var(--cs-muted); margin-bottom: .6rem; }
.cs-crumbs a:hover { color: var(--cs-primary); }
.cs-crumbs i { font-size: .55rem; }

/* Contenido a todo lo ancho (explorador) */
.cs-main.is-full { padding-left: 1rem; padding-right: 1rem; }

/* Tarjetas con cabecera */
.cs-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 1.15rem; border-bottom: 1px solid var(--cs-border); }
.cs-card-head h2 { font-size: .9rem; font-weight: 600; margin: 0; display: inline-flex; align-items: center; gap: .5rem; }
.cs-card-head h2 i { color: var(--cs-muted); font-size: .8rem; }
.cs-card-head .cs-count { font-size: .72rem; font-weight: 700; color: var(--cs-text-2); background: var(--cs-surface-2); border: 1px solid var(--cs-border); border-radius: 999px; padding: .05rem .5rem; }
.cs-card + .cs-card { margin-top: 1rem; }
.cs-list { list-style: none; margin: 0; padding: 0; }
.cs-list li { display: flex; align-items: center; gap: .75rem; padding: .6rem 1.15rem; border-bottom: 1px solid var(--cs-border); font-size: .8125rem; }
.cs-list li:last-child { border-bottom: 0; }
.cs-list li:hover { background: #fafcff; }
.cs-list .cs-list-body { flex: 1; min-width: 0; }
.cs-list .cs-list-body strong { display: block; color: var(--cs-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-list .cs-list-body span { display: block; color: var(--cs-muted); font-size: .74rem; margin-top: .1rem; }
.cs-list .cs-list-side { flex: none; text-align: right; font-size: .74rem; color: var(--cs-muted); font-variant-numeric: tabular-nums; }

/* Descripción en dos columnas */
.cs-dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0; font-size: .8125rem; }
.cs-dl dt { color: var(--cs-muted); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: .15rem; white-space: nowrap; }
.cs-dl dd { margin: 0; color: var(--cs-text); word-break: break-word; }

/* Diálogo de confirmación (app.js) */
.cs-modal { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.cs-modal[hidden] { display: none; }
.cs-modal-box { background: var(--cs-surface); border-radius: var(--cs-radius-lg); border: 1px solid var(--cs-border); box-shadow: 0 24px 60px rgba(15, 23, 42, .3); width: 100%; max-width: 24rem; padding: 1.25rem; font-size: .875rem; }
.cs-modal-box .cs-modal-icon { font-size: 1.4rem; color: var(--cs-warning); margin-bottom: .6rem; }
.cs-modal-box p { margin: 0 0 1.1rem; white-space: pre-line; color: var(--cs-text); }
.cs-modal-box .cs-modal-actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* ==========================================================================
   Archivo: lomo de Leitz, ruta física, estantería del explorador
   ========================================================================== */
.ad-lomo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; min-height: 3.4rem; flex: none;
    background: linear-gradient(90deg, color-mix(in srgb, var(--lomo) 82%, #000) 0 .35rem, var(--lomo) .35rem);
    border-radius: .25rem .35rem .35rem .25rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 1px 2px rgba(15, 23, 42, .25);
    color: #fff; font-size: .58rem; font-weight: 700; letter-spacing: .02em; text-align: center;
    writing-mode: vertical-rl; transform: rotate(180deg); padding: .35rem 0;
}
.ad-lomo span { background: rgba(255, 255, 255, .92); color: #111827; padding: .25rem .12rem; border-radius: .15rem; font-variant-numeric: tabular-nums; }
.ad-lomo.is-sm { width: 1.7rem; min-height: 2.4rem; font-size: .5rem; }
.ad-lomo.is-lg { width: 3.6rem; min-height: 6rem; font-size: .74rem; }

.ad-ruta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; color: var(--cs-text-2); font-size: .76rem; }
.ad-ruta i { font-size: .5rem; color: var(--cs-border-strong); }
.ad-ruta a:hover { color: var(--cs-primary); text-decoration: underline; }

/* Explorador: selector de armarios */
.ad-armarios { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.ad-armario {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .45rem .75rem; border-radius: .6rem;
    background: var(--cs-surface); border: 1px solid var(--cs-border); color: var(--cs-text-2);
    font-size: .78rem; font-weight: 500;
    transition: border-color .12s var(--cs-ease), background-color .12s var(--cs-ease), color .12s var(--cs-ease);
}
.ad-armario:hover { border-color: var(--cs-primary-soft-border); color: var(--cs-ink); }
.ad-armario.is-active { background: var(--cs-primary-soft); border-color: var(--cs-primary-soft-border); color: var(--cs-primary); font-weight: 600; }
.ad-armario .cs-count { font-size: .68rem; font-weight: 700; padding: 0 .4rem; border-radius: 999px; background: var(--cs-surface-2); border: 1px solid var(--cs-border); color: var(--cs-text-2); }
.ad-armario.is-active .cs-count { background: #fff; }

/* Estantería: un piso por fila, carpetas de izquierda a derecha como en el mueble */
.ad-estanteria { display: grid; gap: .85rem; }
.ad-piso { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); overflow: hidden; }
.ad-piso-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .9rem; background: var(--cs-surface-2); border-bottom: 1px solid var(--cs-border); }
.ad-piso-head strong { font-size: .8rem; color: var(--cs-ink); }
.ad-piso-head small { color: var(--cs-muted); font-size: .72rem; margin-left: .4rem; }
.ad-piso-body {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch;
    padding: .75rem .9rem 1rem; min-height: 6.5rem;
    background: linear-gradient(to top, #e2e8f0 0 .35rem, transparent .35rem);   /* tabla del piso */
}
.ad-piso-body.is-drag-over { background-color: var(--cs-primary-soft); }
.ad-piso-vacio { align-self: center; color: var(--cs-muted); font-size: .76rem; padding: .5rem; }

/* Tarjeta de Leitz en la estantería */
.ad-leitz {
    display: flex; gap: .55rem; align-items: stretch;
    width: 15.5rem; max-width: 100%;
    padding: .5rem; border-radius: .6rem;
    background: var(--cs-surface); border: 1px solid var(--cs-border);
    box-shadow: var(--cs-shadow-sm);
    transition: border-color .12s var(--cs-ease), box-shadow .12s var(--cs-ease), transform .12s var(--cs-ease);
}
.ad-leitz:hover { border-color: var(--cs-primary-soft-border); box-shadow: var(--cs-shadow); }
.ad-leitz.is-oculto { display: none; }
.ad-leitz.is-match { border-color: var(--cs-primary); box-shadow: 0 0 0 3px rgba(29, 78, 216, .14); }
.ad-leitz.is-prestado { border-style: dashed; background: var(--cs-warning-soft); }
.ad-leitz.sortable-ghost { opacity: .35; }
.ad-leitz.sortable-chosen { cursor: grabbing; }
.ad-leitz .ad-leitz-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.ad-leitz .ad-leitz-nombre { font-size: .78rem; font-weight: 600; color: var(--cs-ink); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-leitz .ad-leitz-nombre:hover { color: var(--cs-primary); }
.ad-leitz .ad-leitz-meta { display: flex; flex-wrap: wrap; gap: .25rem .4rem; align-items: center; font-size: .68rem; color: var(--cs-muted); margin-top: auto; }
.ad-leitz .ad-leitz-meta .cs-badge { font-size: .62rem; padding: .05rem .45rem .05rem .4rem; }
.ad-leitz .ad-leitz-meta .cs-badge::before { width: .3rem; height: .3rem; }
.ad-leitz .ad-grip { color: var(--cs-border-strong); cursor: grab; align-self: center; padding: 0 .1rem; }
.ad-leitz .ad-grip:hover { color: var(--cs-muted); }
.ad-leitz.is-lectura .ad-grip { display: none; }
.ad-leitz .ad-pos { font-size: .62rem; font-weight: 700; color: var(--cs-muted); font-variant-numeric: tabular-nums; }

/* Barra de herramientas del explorador */
.ad-toolbar { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; justify-content: space-between; margin-bottom: .85rem; }
.ad-toolbar .cs-field { margin: 0; flex: 1 1 16rem; max-width: 24rem; }
.ad-toolbar-hint { font-size: .74rem; color: var(--cs-muted); }
.ad-guardando { font-size: .74rem; color: var(--cs-muted); display: inline-flex; align-items: center; gap: .4rem; }
.ad-guardando.is-ok { color: var(--cs-success); }
.ad-guardando.is-error { color: var(--cs-danger); }

/* Resultados de búsqueda */
.ad-resultado { display: flex; gap: .85rem; padding: .8rem 1.15rem; border-bottom: 1px solid var(--cs-border); align-items: flex-start; }
.ad-resultado:last-child { border-bottom: 0; }
.ad-resultado:hover { background: #fafcff; }
.ad-resultado .ad-resultado-body { flex: 1; min-width: 0; }
.ad-resultado .ad-resultado-titulo { font-size: .9rem; font-weight: 600; color: var(--cs-ink); }
.ad-resultado .ad-resultado-titulo a:hover { color: var(--cs-primary); }
.ad-resultado .ad-resultado-desc { font-size: .78rem; color: var(--cs-text-2); margin-top: .15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-resultado .ad-resultado-meta { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; margin-top: .4rem; font-size: .74rem; color: var(--cs-muted); }
.ad-resultado .ad-resultado-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.ad-buscador-grande { display: flex; gap: .5rem; align-items: center; }
.ad-buscador-grande .cs-field { flex: 1; margin: 0; }
.ad-buscador-grande input { height: 2.75rem; font-size: .95rem; padding-left: 2.4rem !important; }
.ad-buscador-grande .cs-field { position: relative; }
.ad-buscador-grande .cs-field > i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--cs-muted); }
.ad-sugerencias { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; font-size: .74rem; color: var(--cs-muted); align-items: center; }
.ad-sugerencias a { padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--cs-border); background: var(--cs-surface); color: var(--cs-text-2); }
.ad-sugerencias a:hover { border-color: var(--cs-primary-soft-border); color: var(--cs-primary); }

/* Ficha de Leitz */
.ad-ficha-head { display: flex; gap: 1rem; align-items: flex-start; }
.ad-ficha-head .ad-lomo { margin-top: .15rem; }
.ad-ficha-titulo { font-size: 1.1rem; font-weight: 700; color: var(--cs-ink); line-height: 1.25; }
.ad-ficha-sub { color: var(--cs-muted); font-size: .8rem; margin-top: .2rem; }
.ad-portada { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .6rem; border: 1px solid var(--cs-border); }
.ad-color-muestra { display: inline-block; width: .9rem; height: .9rem; border-radius: .25rem; border: 1px solid rgba(15, 23, 42, .15); vertical-align: -.15rem; margin-right: .3rem; }
.ad-color-opciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.ad-color-opciones label { width: 1.9rem; height: 1.9rem; border-radius: .45rem; cursor: pointer; border: 2px solid transparent; position: relative; }
.ad-color-opciones label input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ad-color-opciones label:has(input:checked) { border-color: var(--cs-ink); box-shadow: 0 0 0 2px #fff inset; }
.ad-color-opciones label.is-custom { display: inline-flex; align-items: center; justify-content: center; background: var(--cs-surface-2); border-color: var(--cs-border-strong); color: var(--cs-muted); font-size: .75rem; }
.ad-color-opciones label.is-custom input[type="color"] { opacity: 0; }

/* Documentos: visor */
.ad-visor { width: 100%; height: calc(100vh - 14rem); min-height: 28rem; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); background: var(--cs-surface-2); }
.ad-visor-img { max-height: calc(100vh - 14rem); margin: 0 auto; border-radius: var(--cs-radius-lg); border: 1px solid var(--cs-border); }

/* Bitácora */
.ad-bit-icon { width: 1.9rem; height: 1.9rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; flex: none; background: var(--cs-surface-2); color: var(--cs-text-2); }
.ad-bit-icon.is-success { background: var(--cs-success-soft); color: var(--cs-success); }
.ad-bit-icon.is-info    { background: var(--cs-info-soft);    color: var(--cs-info); }
.ad-bit-icon.is-warning { background: var(--cs-warning-soft); color: var(--cs-warning); }
.ad-bit-icon.is-danger  { background: var(--cs-danger-soft);  color: var(--cs-danger); }

/* Login */
.cs-login-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
    background:
        radial-gradient(circle at 15% 10%, rgba(29, 78, 216, .14), transparent 40%),
        radial-gradient(circle at 85% 90%, rgba(23, 37, 84, .16), transparent 40%),
        var(--cs-bg);
}
.cs-login-card { width: 100%; max-width: 24rem; background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); box-shadow: 0 24px 70px rgba(15, 23, 42, .12); padding: 2rem; }
.cs-login-card .cs-brand-mark { background: var(--cs-primary-deep); color: #fff; width: 2.6rem; height: 2.6rem; font-size: 1.1rem; margin-bottom: 1rem; }
.cs-login-card h1 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .2rem; }
.cs-login-card p { color: var(--cs-muted); font-size: .8rem; margin: 0 0 1.25rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
.cs-nav-open-btn { display: none; }
.cs-drawer-backdrop { display: none; }

@media (max-width: 1023px) {
    .cs-nav-open-btn { display: inline-flex; }
    .cs-sidebar {
        position: fixed; top: var(--cs-header-h); left: 0; bottom: 0; height: auto;
        width: min(18rem, 86vw) !important;
        z-index: var(--z-drawer);
        transform: translateX(-102%);
        transition: transform .22s var(--cs-ease);
        box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
    }
    body.cs-nav-open .cs-sidebar { transform: none; }
    .cs-sidebar .cs-sidebar-toggle { display: none; }
    .cs-sidebar.is-collapsed .sidebar-label, .cs-sidebar.is-collapsed .cs-menu-group-toggle, .cs-sidebar.is-collapsed .cs-count { display: revert; }
    .cs-sidebar.is-collapsed .sidebar-link { justify-content: flex-start; padding: .5rem .6rem; }
    .cs-drawer-backdrop {
        position: fixed; inset: var(--cs-header-h) 0 0 0;
        background: rgba(15, 23, 42, .4); z-index: var(--z-drawer-backdrop);
        opacity: 0; pointer-events: none; transition: opacity .2s var(--cs-ease); display: block;
    }
    body.cs-nav-open .cs-drawer-backdrop { opacity: 1; pointer-events: auto; }
    .cs-main { padding: 1rem 1rem 3rem; }
    .cs-header-user-text { display: none; }
    .cs-grid-aside, .cs-grid-3 { grid-template-columns: 1fr; }
    .cs-form-layout { grid-template-columns: 1fr; }
    .cs-form-aside { position: static; }
}

@media (max-width: 767px) {
    .cs-brand-sub { display: none; }
    .cs-hide-md { display: none; }
    .cs-header-search { display: none; }
    .cs-header-search-btn { display: inline-flex; }
    .cs-form-grid, .cs-grid-2 { grid-template-columns: 1fr; }
    .cs-form-grid .cs-span-2 { grid-column: auto; }
    .cs-page-head h1 { font-size: 1.1rem; }
    .cs-stats { grid-template-columns: repeat(2, 1fr); }
    .cs-filters .cs-field { flex-basis: 100%; }
    .cs-toast { left: 1rem; right: 1rem; max-width: none; }
    .ad-leitz { width: 100%; }
    .ad-armarios { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin; }
    .ad-armario { flex: none; }
    .cs-page-actions .cs-btn { flex: 1 1 auto; }
    .ad-piso-body { padding: .6rem .6rem .85rem; }
    .cs-dl { grid-template-columns: 1fr; gap: .15rem; }
    .cs-dl dd { margin-bottom: .5rem; }

    .cs-table.is-stack thead { display: none; }
    .cs-table.is-stack, .cs-table.is-stack tbody, .cs-table.is-stack tr, .cs-table.is-stack td { display: block; width: 100%; }
    .cs-table.is-stack tr { padding: .6rem .85rem; border-bottom: 1px solid var(--cs-border); }
    .cs-table.is-stack tr:last-child { border-bottom: 0; }
    .cs-table.is-stack td { padding: .3rem 0; border: 0; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: .75rem; row-gap: .2rem; align-items: start; }
    .cs-table.is-stack td::before { content: attr(data-label); grid-column: 1; grid-row: 1; padding-top: .15rem; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cs-muted); }
    .cs-table.is-stack td > * { grid-column: 2; }
    .cs-table.is-stack td[data-label=""], .cs-table.is-stack td:not([data-label]) { display: block; }
    .cs-table.is-stack td[data-label=""]::before, .cs-table.is-stack td:not([data-label])::before { display: none; }
    .cs-table.is-stack .cs-td-actions { padding-top: .5rem; }
    .cs-table.is-stack .cs-td-actions .cs-btn-group { display: flex; flex-wrap: wrap; }
    .cs-table.is-stack .cs-td-right { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
    .cs-app-header, .cs-sidebar, .cs-filters, .cs-page-actions, .cs-td-actions, .cs-tabs, .cs-footer, .ad-toolbar { display: none !important; }
    .cs-main { padding: 0; }
    .cs-table-wrap { border: 0; }
}