/* ─────────────────────────────────────────────────────────────────
   Cfdi Total · Admin — admin.css  (EP-016 S-258, tema "Libro claro")
   Hoja propia del portal admin: ya no linkea app.css de Shared, así que
   los cambios aquí no tocan la app MAUI. Los colores reflejan
   Themes/AdminTheme.cs.
───────────────────────────────────────────────────────────────── */

:root {
    /* Superficies */
    --ca-bg: #F4F5F7;
    --ca-surface: #FFFFFF;
    --ca-surface-alt: #F7F8FA;
    --ca-border: #E3E6EB;
    --ca-border-faint: #EEF0F3;
    --ca-border-input: #D5DAE1;

    /* Texto */
    --ca-ink: #121826;
    --ca-text-2: #343C4A;
    --ca-text-3: #4A5363;
    --ca-muted: #5B6472;

    /* Marca y estados */
    --ca-primary: #2F4BE0;
    --ca-primary-hover: #1F35B0;
    --ca-primary-soft: #EEF1FD;
    --ca-primary-ink: #2338B8;
    --ca-success: #0B7A52;
    --ca-success-soft: #E7F5EE;
    --ca-success-ink: #0A6644;
    --ca-warning: #A35A00;
    --ca-warning-soft: #FDF3E3;
    --ca-warning-ink: #8A4B00;
    --ca-danger: #B42318;
    --ca-danger-soft: #FDECEA;
    --ca-danger-ink: #9A1E14;

    --ca-radius: 8px;
    --ca-radius-lg: 12px;
    --ca-nav-width: 264px;

    --ca-font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ca-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

    /* Compatibilidad: las páginas existentes usan los tokens --cp-* de Shared.
       Se redefinen con la paleta nueva para que se vean consistentes sin reescribirlas. */
    --cp-bg-app: var(--ca-bg);
    --cp-bg-surface: var(--ca-surface);
    --cp-bg-surface-alt: var(--ca-surface-alt);
    --cp-bg-elevated: var(--ca-surface-alt);
    --cp-bg-hover: var(--ca-surface-alt);
    --cp-border: var(--ca-border);
    --cp-border-light: var(--ca-border-faint);
    --cp-border-faint: var(--ca-border-faint);
    --cp-text-primary: var(--ca-ink);
    --cp-text-secondary: var(--ca-text-3);
    --cp-text-muted: var(--ca-muted);
    --cp-accent: var(--ca-primary);
    --cp-accent-soft: var(--ca-primary-soft);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--ca-font);
    font-size: 14px;
    color: var(--ca-ink);
    background: var(--ca-bg);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C9CED6; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #AEB6C4; }

/* ── Layout ─────────────────────────────────────────────────────── */
.ca-layout.mud-layout { height: 100vh; display: flex; }

.ca-main.mud-main-content {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 0 !important;
    background: var(--ca-bg);
}

.ca-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 40px 48px;
}

/* Barra superior solo en pantallas angostas (el menú pasa a drawer temporal). */
.ca-mobile-bar {
    display: none;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 12px;
    background: var(--ca-surface);
    border-bottom: 1px solid var(--ca-border);
    position: sticky;
    top: 0;
    z-index: 5;
}

@media (max-width: 959.98px) {
    .ca-mobile-bar { display: flex; }
    .ca-page { padding: 20px 16px 40px; }
}

/* ── Menú lateral ───────────────────────────────────────────────── */
.ca-drawer.mud-drawer {
    background: var(--ca-surface) !important;
    border-right: 1px solid var(--ca-border) !important;
    box-shadow: none !important;
}

.ca-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    padding: 20px 16px 16px;
    overflow-y: auto;
}

.ca-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; text-decoration: none; color: inherit; }
.ca-brand img { width: 32px; height: 32px; flex: none; }
.ca-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.ca-brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.ca-brand-sub { font-size: 12px; color: var(--ca-muted); }

.ca-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-radius);
    background: var(--ca-surface-alt);
    color: var(--ca-muted);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.ca-search:hover { border-color: var(--ca-border-input); color: var(--ca-text-3); }
.ca-search:disabled { cursor: default; opacity: 0.7; }
.ca-search span { flex: 1; }
.ca-kbd {
    font-family: var(--ca-mono);
    font-size: 11px;
    border: 1px solid var(--ca-border);
    border-radius: 4px;
    padding: 1px 5px;
    background: var(--ca-surface);
    color: var(--ca-text-3);
}

.ca-nav-group { display: flex; flex-direction: column; gap: 2px; }
.ca-nav-group-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ca-muted);
    padding: 4px 12px;
}

.ca-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--ca-radius);
    color: var(--ca-text-2);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
}
.ca-nav-item:hover { background: var(--ca-surface-alt); color: var(--ca-ink); }
.ca-nav-item.active { background: var(--ca-primary-soft); color: var(--ca-primary); font-weight: 600; }
.ca-nav-item .mud-icon-root { font-size: 20px; }
.ca-nav-item .ca-nav-label { flex: 1; }
.ca-nav-badge {
    font-size: 12px;
    font-weight: 600;
    background: var(--ca-primary);
    color: #FFFFFF;
    border-radius: 10px;
    padding: 1px 8px;
}

.ca-user {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 8px 0;
    border-top: 1px solid var(--ca-border);
}
.ca-avatar {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: #E4E8F1;
    color: var(--ca-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.ca-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ca-user-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-user-role { font-size: 12px; color: var(--ca-muted); }

/* ── Bloques reutilizables ──────────────────────────────────────── */
.ca-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.ca-page-title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.ca-page-subtitle { margin: 4px 0 0; font-size: 14px; color: var(--ca-muted); }

.ca-card {
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-radius-lg);
}
.ca-card-pad { padding: 18px 20px; }
.ca-card-title { margin: 0; font-size: 16px; font-weight: 700; }

.ca-mono, .cp-mono { font-family: var(--ca-mono) !important; font-variant-numeric: tabular-nums; }
.ca-muted { color: var(--ca-muted); }
.cp-text-muted { color: var(--ca-muted) !important; }
.cp-text-secondary { color: var(--ca-text-3) !important; }
.cp-nowrap, .ca-nowrap { white-space: nowrap; }

.ca-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}
.ca-chip--neutral { background: var(--ca-border-faint); color: var(--ca-text-2); }
.ca-chip--primary { background: var(--ca-primary-soft); color: var(--ca-primary-ink); }
.ca-chip--success { background: var(--ca-success-soft); color: var(--ca-success-ink); }
.ca-chip--warning { background: var(--ca-warning-soft); color: var(--ca-warning-ink); }
.ca-chip--danger { background: var(--ca-danger-soft); color: var(--ca-danger-ink); }
.ca-chip--ink { background: var(--ca-ink); color: #FFFFFF; }

.ca-tag {
    display: inline-flex;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--ca-border-input);
    color: var(--ca-text-3);
}

/* ── MudBlazor ──────────────────────────────────────────────────── */
.mud-paper { border-radius: var(--ca-radius-lg) !important; }
.mud-paper.mud-elevation-0, .mud-paper.mud-paper-outlined { border-color: var(--ca-border) !important; }
.mud-dialog { border-radius: 16px !important; }

.mud-button-root { border-radius: var(--ca-radius) !important; }
.mud-button-filled, .mud-button-outlined, .mud-button-text { min-height: 40px; }
.mud-button-outlined.mud-button-outlined-default { border-color: var(--ca-border-input) !important; }

.mud-input-outlined .mud-input-outlined-border { border-color: var(--ca-border-input) !important; border-radius: var(--ca-radius) !important; }
.mud-input-outlined:hover .mud-input-outlined-border { border-color: #AEB6C4 !important; }
.mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--ca-primary) !important; }
.mud-input-label { color: var(--ca-text-3) !important; font-weight: 500 !important; }

.mud-table-head th {
    background: var(--ca-surface-alt) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ca-text-3) !important;
    border-bottom: 1px solid var(--ca-border) !important;
    white-space: nowrap;
}
.mud-table td { font-size: 14px !important; border-bottom: 1px solid var(--ca-border-faint) !important; }
.mud-table-row:hover td { background: var(--ca-surface-alt) !important; }
.cp-data-grid .mud-table-head th { white-space: nowrap; }

.mud-tabs-tabbar { background: transparent !important; border-bottom: 1px solid var(--ca-border); }
.mud-tab { text-transform: none !important; font-weight: 500 !important; font-size: 14px !important; min-height: 44px !important; }
.mud-tab.mud-tab-active { font-weight: 600 !important; }

/* ── Tablas propias (cotizaciones) ──────────────────────────────── */
.ca-table-wrap { overflow-x: auto; }
.ca-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ca-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--ca-text-3);
    padding: 12px;
    border-bottom: 1px solid var(--ca-border);
    background: var(--ca-surface-alt);
    white-space: nowrap;
}
.ca-table td { padding: 14px 12px; border-bottom: 1px solid var(--ca-border-faint); vertical-align: middle; }
.ca-table th:first-child, .ca-table td:first-child { padding-left: 20px; }
.ca-table th:last-child, .ca-table td:last-child { padding-right: 20px; }
.ca-table tbody tr { cursor: pointer; }
.ca-table tbody tr:hover td { background: var(--ca-surface-alt); }
.ca-table .ca-num { text-align: right; font-family: var(--ca-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-cell-stack { display: flex; flex-direction: column; gap: 2px; }
.ca-cell-sub { font-size: 12px; color: var(--ca-muted); }

/* Pestañas de estatus con conteo */
.ca-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--ca-border); margin-bottom: 16px; }
.ca-tab {
    height: 44px;
    padding: 0 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ca-text-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ca-tab:hover { color: var(--ca-ink); }
.ca-tab.is-active { border-bottom-color: var(--ca-primary); color: var(--ca-primary); font-weight: 600; }
.ca-tab-count {
    font-size: 12px;
    font-family: var(--ca-mono);
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--ca-border-faint);
    color: var(--ca-text-2);
}