/* ================================================================
   PYMEGEST — DESIGN TOKENS v2
   Paleta: shell slate #1c1e22 · acento ámbar #c9963a · crema #f4f3f1
   Tipografía: IBM Plex Sans (UI) + IBM Plex Mono (marca/código)
   ================================================================ */

:root {
    /* --- Ámbar (acento principal) --- */
    --amber-50:  #fdf8ec;
    --amber-100: #fbefd0;
    --amber-200: #f5d98a;
    --amber-400: #d9a84c;
    --amber-500: #c9963a;   /* acento principal */
    --amber-600: #b07d28;   /* hover */
    --amber-700: #8f6318;

    /* --- Shell (sidebar + topbar) — tema oscuro por defecto --- */
    --shell-bg:              #1c1e22;
    --shell-border:          rgba(255, 255, 255, .06);
    --shell-active-bg:       rgba(201, 150, 58, .13);
    --shell-nav-text:        rgba(255, 255, 255, .52);
    --shell-nav-text-hi:     rgba(255, 255, 255, .90);
    --shell-nav-hover-bg:    rgba(255, 255, 255, .07);
    --shell-active-nav-text: #ffffff;
    --shell-section-label:   rgba(255, 255, 255, .22);
    --shell-scrollbar:       rgba(255, 255, 255, .10);
    --shell-bc-text:         rgba(255, 255, 255, .35);
    --shell-bc-current:      rgba(255, 255, 255, .88);
    --shell-bc-sep:          rgba(255, 255, 255, .20);
    --shell-user-name:       rgba(255, 255, 255, .85);
    --shell-logout-color:    rgba(255, 255, 255, .35);
    --shell-brand-name:      rgba(255, 255, 255, .90);

    /* --- Neutrales (para el área de contenido) --- */
    --neutral-0:   #ffffff;
    --neutral-50:  #faf9f7;
    --neutral-100: #f0ede9;
    --neutral-200: #e4dfda;
    --neutral-300: #cbc4bc;
    --neutral-400: #a89e94;
    --neutral-500: #80756a;
    --neutral-600: #5c5248;
    --neutral-700: #3d3a36;
    --neutral-900: #1a1814;

    /* --- Semánticos --- */
    --color-success: #2d9e6b;
    --color-warning: #c9963a;
    --color-danger:  #d94f4f;
    --color-info:    #3b7ed9;

    /* --- Superficies --- */
    --surface-page:       #f4f3f1;   /* crema cálido */
    --surface-card:       var(--neutral-0);
    --card-radius:        10px;
    --card-shadow:        0 1px 2px rgba(0,0,0,.05), 0 3px 10px rgba(0,0,0,.06);
    --card-shadow-hover:  0 4px 8px rgba(0,0,0,.08), 0 12px 28px rgba(0,0,0,.10);

    /* --- Header / topbar --- */
    --header-height: 64px;

    /* --- Sidebar --- */
    --sidebar-width: 220px;

    /* --- Tipografía --- */
    --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    --text-xs:   .6875rem;   /* 11px */
    --text-sm:   .8125rem;   /* 13px */
    --text-base: .9375rem;   /* 15px */
    --text-lg:   1.0625rem;  /* 17px */
    --text-xl:   1.1875rem;  /* 19px */
    --text-2xl:  1.375rem;   /* 22px */
    --text-3xl:  1.75rem;    /* 28px */

    --font-normal:   400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;

    --leading-tight:  1.2;
    --leading-normal: 1.55;

    /* --- Espaciado (escala 4px) --- */
    --space-1:  .25rem;
    --space-2:  .5rem;
    --space-3:  .75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* --- Bordes --- */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-xl:   14px;
    --radius-full: 9999px;

    /* --- Transiciones --- */
    --transition-fast:   120ms ease;
    --transition-normal: 220ms ease;

    /* --- Aliases compatibles con código existente --- */
    --brand-50:  var(--amber-50);
    --brand-100: var(--amber-100);
    --brand-200: var(--amber-200);
    --brand-500: var(--amber-500);
    --brand-600: var(--amber-500);
    --brand-700: var(--amber-600);
}

/* ================================================================
   TEMA CLARO — sobreescribe las variables de shell
   ================================================================ */

[data-theme="light"] {
    --shell-bg:              #e8eaed;
    --shell-border:          rgba(0, 0, 0, .09);
    --shell-active-bg:       rgba(201, 150, 58, .15);
    --shell-nav-text:        rgba(0, 0, 0, .52);
    --shell-nav-text-hi:     rgba(0, 0, 0, .87);
    --shell-nav-hover-bg:    rgba(0, 0, 0, .06);
    --shell-active-nav-text: var(--neutral-900);
    --shell-section-label:   rgba(0, 0, 0, .38);
    --shell-scrollbar:       rgba(0, 0, 0, .15);
    --shell-bc-text:         rgba(0, 0, 0, .45);
    --shell-bc-current:      rgba(0, 0, 0, .82);
    --shell-bc-sep:          rgba(0, 0, 0, .25);
    --shell-user-name:       rgba(0, 0, 0, .80);
    --shell-logout-color:    rgba(0, 0, 0, .42);
    --shell-brand-name:      rgba(0, 0, 0, .80);
}

/* ================================================================
   RESET / BASE
   ================================================================ */

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

html { font-size: 16px; }

html, body {
    font-family: var(--font-sans);
    color: var(--neutral-700);
    background-color: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--leading-normal);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--neutral-900);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-2);
}

a { color: var(--amber-500); }

/* ================================================================
   CLASES UTILITARIAS GLOBALES
   ================================================================ */

.page-container {
    padding: var(--space-6);
    width: 100%;
    box-sizing: border-box;
}

.section-card {
    background: var(--surface-card);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--neutral-200);
    padding: var(--space-6);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: .02em;
}

/* Skeleton loader */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--neutral-100) 25%,
        var(--neutral-200) 50%,
        var(--neutral-100) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ================================================================
   BLAZOR LOADING / ERROR
   ================================================================ */

#blazor-error-ui {
    background: lightyellow;
    bottom: 0; left: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem; top: .5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "Ha ocurrido un error." }

.loading-progress {
    position: relative; display: block;
    width: 8rem; height: 8rem;
    margin: 20vh auto 1rem auto;
}
.loading-progress circle {
    fill: none;
    stroke: var(--neutral-200);
    stroke-width: .6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--amber-500);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray .05s ease-in-out;
}
.loading-progress-text {
    position: absolute; text-align: center;
    font-weight: var(--font-bold);
    inset: calc(20vh + 3.25rem) 0 auto .2rem;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Cargando"); }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-success); }
.invalid { outline: 1px solid var(--color-danger); }
.validation-message { color: var(--color-danger); font-size: var(--text-sm); }

/* ── Radzen dialog sin padding interior (para PagosRealizadosDialog) ── */
.dialog-no-padding .rz-dialog-content {
    padding: 0 !important;
    background: #fff !important;
}