/* ================================================================
   COMMON.CSS — Overrides globales de Radzen Blazor
   Sistema: shell #1c1e22 · acento ámbar #c9963a · crema #f4f3f1
   ================================================================ */

/* ----------------------------------------------------------------
   VARIABLES INTERNAS DE RADZEN
   Se definen aquí para que cascaden antes que los selectores de clase.
   ---------------------------------------------------------------- */

:root {
    /* Primario → ámbar */
    --rz-primary: #c9963a;
    --rz-primary-lighter: #fdf8ec;
    --rz-primary-light: #f5d98a;
    --rz-primary-dark: #b07d28;
    /* Switch → ámbar (thumb y track ambos ámbar = aspecto sólido, igual que el morado original) */
    --rz-switch-checked-background-color: #c9963a;
    --rz-switch-checked-circle-background-color: #c9963a;
    /* Panel menu — ya no se usa RadzenPanelMenu; variables mantenidas por compatibilidad */
    --rz-panel-menu-background-color: transparent;
    /* Base Radzen → crema */
    --rz-base-background-color: #f4f3f1;
    --rz-text-color: #3d3a36;
    /* Sidebar Radzen (no se usa con nuestro shell custom, pero por si acaso) */
    --rz-sidebar-background-color: var(--shell-bg);
    --rz-sidebar-color: var(--shell-nav-text);
 
  }

/* ----------------------------------------------------------------
   SIDEBAR NAV — estilos globales del nav puro (NavLink de Blazor).
   Deben estar aquí (no en el CSS scoped) porque NavLink es un
   componente hijo y el scope de Blazor no atraviesa componentes.
   ---------------------------------------------------------------- */

/* Etiqueta de sección */
.nav-section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--shell-section-label);
    padding: 14px 16px 5px;
    margin: 0;
    user-select: none;
    font-family: var(--font-sans);
}

/* Ítem — el <a> que renderiza NavLink */
.nav-item {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: calc(100% - 16px);
    padding: 8px 14px 8px 16px;
    margin: 1px 8px;
    border-radius: 6px;
    color: var(--shell-nav-text);
    text-decoration: none !important;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
    box-sizing: border-box;
}

/* Línea lateral ámbar (invisible por defecto) */
.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 52%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background var(--transition-fast);
}

/* Hover */
.nav-item:hover {
    background: var(--shell-nav-hover-bg) !important;
    color: var(--shell-nav-text-hi) !important;
    text-decoration: none !important;
}

.nav-item:hover .nav-icon {
    opacity: 1;
}

/* Icono Material */
.nav-icon {
    font-size: 18px !important;
    flex-shrink: 0;
    color: inherit;
    opacity: .75;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

/* Estado activo */
.nav-item--active {
    background: var(--shell-active-bg) !important;
    color: var(--shell-active-nav-text) !important;
}

.nav-item--active::before {
    background: #c9963a !important;
}

.nav-item--active .nav-icon {
    color: #c9963a !important;
    opacity: 1;
}

.nav-item--active:hover {
    background: rgba(201, 150, 58, .22) !important;
}

/* Divisor entre secciones */
.nav-divider {
    height: 1px;
    background: var(--shell-border);
    margin: 8px 14px;
    flex-shrink: 0;
}

/* Etiqueta de texto del ítem de navegación */
.nav-label {
    white-space: nowrap;
    overflow: hidden;
}

@media (max-width: 768px) {
    .nav-item {
        justify-content: flex-start !important;
        padding: 8px 14px 8px 16px !important;
        width: calc(100% - 16px) !important;
        margin: 1px 8px !important;
        gap: 10px !important;
    }
}

/* ----------------------------------------------------------------
   CRUD PAGE — encabezado, toolbar, buscador, skeleton
   Patrón compartido por Personas, Mantenimientos, Categorías,
   Productos y Proveedores. No va en .razor.css porque se usa
   en múltiples componentes y Blazor scope lo limitaría.
   ---------------------------------------------------------------- */

.crud-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.crud-page-header-text {
    min-width: 0;
}

.crud-page-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--neutral-900);
    margin: 0 0 var(--space-1);
}

.crud-page-subtitle {
    font-size: var(--text-sm);
    color: var(--neutral-500);
    margin: 0;
}

.crud-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--neutral-100);
    margin-bottom: var(--space-4);
}

.crud-search-wrap {
    position: relative;
    flex: 1;
    max-width: 440px;
}

.crud-search-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--neutral-400);
    pointer-events: none;
    z-index: 1;
}

.crud-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.75rem;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    color: var(--neutral-900);
    background: var(--neutral-0);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.crud-search-input:focus {
    border-color: var(--amber-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber-500) 15%, transparent);
}

.crud-btn-new {
    flex-shrink: 0;
    margin-left: auto;
}

.crud-skeleton-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-2) 0 var(--space-4);
}

.crud-skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--neutral-100);
}

@media (max-width: 640px) {
    .crud-page-header  { flex-direction: column; }
    .crud-btn-new      { width: 100%; margin-left: 0; }
    .crud-toolbar      { flex-wrap: wrap; }
    .crud-search-wrap  { max-width: 100%; width: 100%; }
}

/* ----------------------------------------------------------------
   BOTONES DE ACCIÓN EN GRID (edit / delete)
   ---------------------------------------------------------------- */

.row-actions {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    color: var(--neutral-500);
    cursor: pointer;
    transition: background var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
    padding: 0;
}

.action-btn .material-icons {
    font-size: 16px;
}

.action-btn--edit:hover {
    background: var(--neutral-100);
    border-color: var(--neutral-300);
    color: var(--neutral-700);
}

.action-btn--delete:hover {
    background: #fef2f2;
    border-color: #f87171;
    color: #dc2626;
}

/* ----------------------------------------------------------------
   PANEL MENU Radzen — reset mínimo por si se usa en otro sitio
   ---------------------------------------------------------------- */

.rz-panel-menu {
    background-color: transparent !important;
}

/* ----------------------------------------------------------------
   RADZEN LAYOUT (por si se usa en alguna página interna)
   ---------------------------------------------------------------- */

.rz-body {
    background-color: var(--surface-page) !important;
    padding: 0 !important;
    overflow-y: auto !important;
}

/* ----------------------------------------------------------------
   BOTONES
   ---------------------------------------------------------------- */

.rz-button {
    border-radius: var(--radius-md) !important;
    font-family: var(--font-sans) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-medium) !important;
    transition: background-color var(--transition-fast),
                box-shadow var(--transition-fast) !important;
}

.rz-button.rz-button-primary,
.rz-button.rz-variant-filled.rz-button-primary {
    background-color: #c9963a !important;
    border-color: #c9963a !important;
    color: #1c1e22 !important;
    font-weight: var(--font-semibold) !important;
}

.rz-button.rz-button-primary:hover,
.rz-button.rz-variant-filled.rz-button-primary:hover {
    background-color: #b07d28 !important;
    border-color: #b07d28 !important;
}

.rz-button.rz-button-danger {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
}

/* ----------------------------------------------------------------
    DATA GRID
    ---------------------------------------------------------------- */

.rz-data-grid {
    border: 1px solid var(--border-light) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    font-family: var(--font-sans) !important;
    background: var(--surface-card) !important;
}

.rz-data-grid-header,
.rz-grid-table thead tr {
    background-color: #f8fafc !important;
    border-bottom: 2px solid var(--border-light) !important;
}

.rz-column-header .rz-column-header-content {
    font-size: var(--text-xs) !important;
    font-weight: var(--font-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--text-tertiary) !important;
}

.rz-grid-table tbody tr {
    background-color: #ffffff !important;
}

.rz-data-row td {
    font-size: var(--text-sm) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid #f8e0bc !important;
    background-color: #ffffff !important;
}

.rz-data-row:hover td {
    background-color: #f8fafc !important;
}

.rz-paginator {
    border-top: 1px solid var(--border-light) !important;
    background-color: var(--surface-card) !important;
    font-size: var(--text-sm) !important;
}

/* ----------------------------------------------------------------
   CARDS
   ---------------------------------------------------------------- */

.rz-card {
    background-color: var(--surface-card) !important;
    border: 1px solid var(--neutral-200) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
}

/* ----------------------------------------------------------------
   INPUTS / TEXTBOX
   ---------------------------------------------------------------- */

.rz-textbox,
.rz-input,
.rz-inputnumber-input,
.rz-inputtext,
.rz-textarea {
    font-family: var(--font-sans) !important;
    font-size: var(--text-base) !important;
    color: var(--neutral-700) !important;
    background-color: #ffffff !important;
}

.rz-textbox:disabled,
.rz-input:disabled,
.rz-inputnumber-input:disabled,
.rz-inputtext:disabled,
.rz-textarea:disabled,
.rz-state-disabled .rz-textbox,
.rz-state-disabled .rz-input,
.rz-state-disabled .rz-inputnumber-input,
.rz-state-disabled .rz-inputtext,
.rz-state-disabled .rz-textarea {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Label blanco por defecto (efecto outlined: notch en el borde) */
.rz-variant-outlined label {
    background-color: #ffffff !important;
}

/* Label gris cuando el campo está deshabilitado (evita que tape el fondo gris del input) */
.rz-variant-outlined:has(.rz-textbox:disabled) label,
.rz-variant-outlined:has(.rz-inputnumber-input:disabled) label,
.rz-variant-outlined:has(.rz-inputtext:disabled) label,
.rz-variant-outlined.rz-state-disabled label {
    background-color: #f5f5f5 !important;
}

/* ----------------------------------------------------------------
   DROPDOWN
   ---------------------------------------------------------------- */

.rz-dropdown {
    font-size: var(--text-sm) !important;
    background-color: #ffffff !important;
}

.rz-dropdown.rz-state-disabled {
    background-color: #f5f5f5 !important;
}

/* ----------------------------------------------------------------
   TABS
   ---------------------------------------------------------------- */

/* Toda la cadena de Radzen ocupa el 100 % del ancho disponible */
.rz-tabview,
.rz-tabview-panels,
.rz-tabview-panel {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Caja: cadena de altura completa para que los paneles llenen el viewport */
.caja-tabs {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.caja-tabs .rz-tabview-nav-container {
    flex-shrink: 0 !important;
}

.caja-tabs .rz-tabview-panels {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 15px 0px 0px 0px !important;
    display: flex !important;
    flex-direction: column !important;
}

.caja-tabs .rz-tabview-panel {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Tab no seleccionada */
.rz-tabview-nav li {
    font-size: var(--text-sm) !important;
    font-weight: var(--font-medium) !important;
    color: var(--neutral-500) !important;
}

/* Tab seleccionada: texto negro, subrayado ámbar */
.rz-tabview-nav .rz-tabview-selected {
    color: var(--neutral-900) !important;
}
.rz-tabview-nav .rz-tabview-selected a,
.rz-tabview-nav .rz-tabview-selected a:not([href]):not([class]) {
    color: var(--neutral-900) !important;
}
/* Icono del tab seleccionado en ámbar */
.rz-tabview-nav .rz-tabview-selected a i,
.rz-tabview-nav .rz-tabview-selected a .rzi {
    color: #c9963a !important;
}
.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    border-bottom: 2px solid #c9963a !important;
}

.rz-tabview-panel {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
}

/* ----------------------------------------------------------------
   DIALOGS
   ---------------------------------------------------------------- */
.rz-dialog {
    border-radius: var(--radius-xl) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18) !important;
    overflow: hidden !important;
}

.rz-dialog-titlebar {
    border-bottom: 1px solid var(--neutral-200) !important;
    padding: var(--space-4) var(--space-6) !important;
    font-weight: var(--font-semibold) !important;
    font-size: var(--text-base) !important;
    font-family: var(--font-sans) !important;
}

.rz-dialog-content {
    padding: var(--space-6) !important;
}

/* ----------------------------------------------------------------
   SCHEDULER
   ---------------------------------------------------------------- */

.rz-scheduler {
    border: 1px solid var(--neutral-200) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
}

ul[role=tablist] {
    flex-wrap: wrap;
}

/* ================================================================
   PYMEGRID — Custom data grid (replaces RadzenDataGrid)
   ================================================================ */

.pymegrid-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-light);
    background: var(--surface-card);
}

.pymegrid {
    width: 100%;
    min-width: 400px;
    border-collapse: collapse;
    font-family: var(--font-sans);
    background: var(--surface-card);
}

/* Header */
.pymegrid thead tr {
    background-color: #e8e0d4;
    border-bottom: 2px solid #c9b89a;
}

.pymegrid thead th {
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #3d3530;
    white-space: nowrap;
    user-select: none;
}

.pymegrid-th--sortable { cursor: pointer; }
.pymegrid-th--sortable:hover { background-color: #f1f5f9; }

.pymegrid-sort-icon {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.3;
    vertical-align: middle;
}
.pymegrid-sort-icon--asc,
.pymegrid-sort-icon--desc { opacity: 1; color: var(--rz-primary); }

/* Body */
.pymegrid tbody tr {
    background-color: #ffffff;
    border-bottom: 1px solid #f8e0bc;
    transition: background-color 0.1s;
}
.pymegrid tbody tr:last-child { border-bottom: none; }
.pymegrid tbody tr:hover    { background-color: #f8fafc; }

.pymegrid tbody td {
    padding: 0.5rem 0.75rem;
    font-size: var(--text-sm);
    color: var(--text-primary);
    vertical-align: middle;
}

.pymegrid-empty {
    text-align: center;
    color: var(--text-tertiary);
    padding: 2rem 0.75rem !important;
    font-size: var(--text-sm);
}

/* Pager */
.pymegrid-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-light);
    background-color: var(--surface-card);
}

.pymegrid-pager-info {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

.pymegrid-pager-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.pymegrid-pager-btn {
    min-width: 30px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--border-light);
    background: #ffffff;
    border-radius: 4px;
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.1s, border-color 0.1s;
    font-family: var(--font-sans);
}
.pymegrid-pager-btn:hover:not(:disabled) {
    background-color: #f8fafc;
    border-color: var(--rz-primary);
}
.pymegrid-pager-btn--active {
    background-color: var(--rz-primary) !important;
    color: #ffffff !important;
    border-color: var(--rz-primary) !important;
    font-weight: 600;
}
.pymegrid-pager-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.pymegrid-pager-ellipsis {
    padding: 0 4px;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

/* ── Card view on mobile (≤ 640 px) ─────────────────────────── */
@media (max-width: 640px) {
    .pymegrid-scroll-wrap {
        overflow-x: visible;
        border: none;
        background: transparent;
    }

    .pymegrid,
    .pymegrid tbody { display: block; width: 100%; min-width: unset; }

    .pymegrid thead { display: none; }

    .pymegrid tbody tr {
        display: block;
        border: 1px solid var(--border-light);
        border-radius: 8px;
        margin-bottom: 0.625rem;
        padding: 0.125rem 0;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }
    .pymegrid tbody tr:hover { background-color: #ffffff; }
    .pymegrid tbody tr:nth-child(even) { background-color: #f5f7fa; }
    .pymegrid tbody tr:nth-child(even):hover { background-color: #f5f7fa; }

    .pymegrid tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 0.75rem;
        border-bottom: 1px solid #f3f4f6;
    }
    .pymegrid tbody td:last-child { border-bottom: none; }

    .pymegrid tbody td:not([data-label=""])::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--text-tertiary);
        flex-shrink: 0;
        margin-right: 0.5rem;
        white-space: nowrap;
    }

    .pymegrid-empty { display: block !important; }

    .pymegrid-pager {
        flex-direction: column;
        align-items: center;
    }
}