/* Estilos del layout admin compartido (AdminSharedLayout).

   Viven en la RCL, con el componente que los usa, para que cualquier vertical que consuma
   SharedAdmin los reciba servidos. Antes estaban solo en el app.css del portal Comercial, así
   que el mismo layout se veía roto en los demás portales: el drawer se dibujaba apilado bajo el
   contenido en vez de fijo a la izquierda.

   Se referencia con:
   <link rel="stylesheet" href="_content/JGF.Suite.Client.SharedAdmin/css/admin-layout.css" /> */

/* Tokens que consume este layout. Se declaran acá para que el CSS funcione en cualquier portal
   que lo cargue; un portal que ya defina los suyos (el Comercial lo hace en su app.css) los
   sobrescribe cargando su hoja despues de esta. */
:root {
    --jgf-primary:            #10b981;
    --jgf-primary-rgb:        16, 185, 129;
    --jgf-primary-light:      #34d399;

    --jgf-drawer-bg:          #0f172a;
    --jgf-drawer-text:        #cbd5e1;
    --jgf-drawer-text-rgb:    203, 213, 225;
    --jgf-drawer-icon:        #94a3b8;
    --jgf-drawer-width-admin: 240px;

    --jgf-font-size:          14px;   /* base del back-office (los rem de MudBlazor cuelgan de acá) */
    --jgf-font-size-xs:       10px;
    --jgf-font-size-sm:       11px;
    --jgf-font-size-md:       13px;
    --jgf-font-size-lg:       15px;
    --jgf-font-size-xl:       17px;

    --jgf-appbar-height:      48px;
    --jgf-touch-min:          44px;
}

/* ─── Drawer Admin ──────────────────────────────────────────────────────── */
.admin-nav-drawer {
    position:   fixed;
    top:        var(--mud-appbar-height, var(--jgf-appbar-height));
    left:       0;
    width:      var(--jgf-drawer-width-admin);
    height:     calc(100vh - var(--mud-appbar-height, var(--jgf-appbar-height)));
    background: var(--jgf-drawer-bg);
    z-index:    1200;
    transform:  translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid rgba(255,255,255,.08);
    --mud-palette-text-primary:   var(--jgf-drawer-text);
    --mud-palette-action-default: var(--jgf-drawer-icon);
}
.admin-nav-drawer--open { transform: translateX(0); }

.admin-nav-overlay--open { display: block; }
@media (min-width: 960px) {
    .admin-nav-overlay--open { display: none !important; }
}

/* Desktop: el contenido se desplaza al abrir el drawer */
@media (min-width: 960px) {
    .admin-drawer-open .mud-main-content {
        margin-left: var(--jgf-drawer-width-admin);
        transition:  margin .225s cubic-bezier(0, 0, 0.2, 1) 0ms;
    }
}

/* Header del drawer admin */
.admin-drawer-header {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding:        12px 14px;
}
.admin-drawer-section-label {
    color:          rgba(var(--jgf-drawer-text-rgb), .6);
    font-size:      .68rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight:    600;
}

/* MudNavMenu dentro del drawer Admin */
.admin-nav-drawer .mud-nav-link         { color: var(--jgf-drawer-text) !important; }
.admin-nav-drawer .mud-icon-root        { color: var(--jgf-drawer-icon) !important; }
.admin-nav-drawer .mud-nav-link.active {
    background:    rgba(var(--jgf-primary-rgb), .15) !important;
    color:         var(--jgf-primary-light) !important;
    border-right:  2px solid var(--jgf-primary);
}
.admin-nav-drawer .mud-nav-link.active .mud-icon-root { color: var(--jgf-primary-light) !important; }
.admin-nav-drawer .mud-nav-group-title,
.admin-nav-drawer .mud-nav-group-header { color: var(--jgf-drawer-text) !important; }
.admin-nav-drawer .mud-divider          { border-color: rgba(255,255,255,.12) !important; }

.admin-nav .mud-nav-link         { min-height: var(--jgf-touch-min); font-size: var(--jgf-font-size-md); font-weight: 500; }
.admin-nav .mud-nav-group-header { font-size: var(--jgf-font-size-md); font-weight: 600; }

/* Breadcrumbs */
.admin-breadcrumb { font-size: .8125rem; }
.admin-breadcrumb .mud-breadcrumb-item a       { color: var(--jgf-primary); text-decoration: none; }
.admin-breadcrumb .mud-breadcrumb-item a:hover { text-decoration: underline; }
.admin-breadcrumb .mud-breadcrumb-separator    { color: rgba(0,0,0,.38); margin: 0 4px; }


/* ─── Tabla de compras / OC — inputs compactos ──────────────────────────── */
.tabla-compras .mud-input,
.tabla-compras .mud-input.mud-input-outlined,
.tabla-compras .mud-input-root { font-size: var(--jgf-font-size-md) !important; }

.tabla-compras .mud-input input,
.tabla-compras .mud-input.mud-input-outlined input,
.tabla-compras .mud-input textarea {
    font-size:      var(--jgf-font-size-md) !important;
    padding-top:    6px !important;
    padding-bottom: 6px !important;
    height:         auto !important;
    min-height:     unset !important;
}
.tabla-compras .mud-select-input,
.tabla-compras .mud-input.mud-input-outlined .mud-select-input {
    font-size:      var(--jgf-font-size-md) !important;
    padding-top:    6px !important;
    padding-bottom: 6px !important;
    min-height:     unset !important;
    height:         auto !important;
    line-height:    1.2 !important;
}
.tabla-compras .mud-input.mud-select .mud-input-adornment .mud-icon-root {
    font-size: 16px !important; width: 16px !important; height: 16px !important;
}
.tabla-compras .mud-input-adornment span,
.tabla-compras .mud-input-adornment .mud-icon-root { font-size: var(--jgf-font-size-sm) !important; }
.tabla-compras .mud-input-root,
.tabla-compras .mud-input-root-outlined {
    min-height: unset !important; padding-top: 8px !important; padding-bottom: 8px !important;
}




/* ─── Base del back-office (densidad admin) ─────────────────────────────────

   El back-office se ve IGUAL en todos los verticales. El portal Comercial ya lo lograba
   con reglas globales en su app.css (base 14px + densidad MudBlazor); el de Restaurante
   no las tenía y además su MudTheme usa una escala mayor a propósito (el salón se opera
   de pie, a un brazo de distancia), así que el mismo /admin salía ~20% más grande.

   Se resuelve acá, en la RCL, para que cualquier vertical que monte AdminSharedLayout lo
   reciba servido — y SOLO ahí: el gancho es la clase .jfg-admin que pone el layout admin.
   Usamos html:has(.jfg-admin) en vez de una clase descendiente por dos razones:
     1. Ataca el font-size RAÍZ, que es de lo que dependen los rem de MudBlazor.
     2. Alcanza también lo que MudBlazor renderiza FUERA del layout (popovers de los
        selects, diálogos, snackbars), que con un selector descendiente quedaría grande.
   Gana en cascada porque html:has(.jfg-admin) es más específico que el :root que emite
   MudThemeProvider. El salón (sin .jfg-admin) conserva intacta su escala táctil. */

html:has(.jfg-admin) {
    font-size: var(--jgf-font-size, 14px);

    /* Escala tipográfica del admin — misma que CommercialTheme.Default. */
    --mud-typography-default-size:        .875rem;
    --mud-typography-default-lineheight:  1.5;
    --mud-typography-body1-size:          .875rem;
    --mud-typography-body1-lineheight:    1.5;
    --mud-typography-body2-size:          .8125rem;
    --mud-typography-body2-lineheight:    1.43;
    --mud-typography-caption-size:        .75rem;
    --mud-typography-caption-lineheight:  1.66;
    --mud-typography-subtitle1-size:      .9375rem;
    --mud-typography-subtitle1-lineheight:1.75;
    --mud-typography-subtitle2-size:      .875rem;
    --mud-typography-subtitle2-lineheight:1.57;
    --mud-typography-subtitle2-weight:    600;
    --mud-typography-button-size:         .875rem;
    --mud-typography-button-weight:       500;
    --mud-typography-button-text-transform: none;
    --mud-typography-h5-size:             1.25rem;
    --mud-typography-h5-lineheight:       1.4;
    --mud-typography-h5-weight:           600;
    --mud-typography-h6-size:             1.0625rem;
    --mud-typography-h6-lineheight:       1.5;
    --mud-typography-h6-weight:           600;
}

/* Densidad de componentes — espejo de las reglas globales del portal Comercial, acotadas
   al admin para no alterar el POS ni el salón. */
html:has(.jfg-admin) .mud-tab                     { min-height: 40px !important; padding: 6px 14px !important; }
html:has(.jfg-admin) .mud-tabs-header             { min-height: 40px !important; }
html:has(.jfg-admin) .mud-chip                    { height: 22px !important; }
html:has(.jfg-admin) .mud-chip .mud-chip-content  { padding: 0 8px !important; font-size: var(--jgf-font-size-sm) !important; }
html:has(.jfg-admin) .mud-table-cell              { padding: 4px 12px !important; }
html:has(.jfg-admin) .mud-table-head-cell-content { padding: 6px 0    !important; }
html:has(.jfg-admin) .mud-alert                   { padding: 4px 12px !important; }
html:has(.jfg-admin) .mud-expand-panel-header     { min-height: 44px !important; padding: 0 16px !important; }
html:has(.jfg-admin) .mud-breadcrumb-item         { font-size: var(--jgf-font-size-md) !important; }
html:has(.jfg-admin) .mud-snackbar                { font-size: var(--jgf-font-size-md) !important; }


/* ─── Celda de dos líneas para tablas admin ─────────────────────────────────

   El dato principal arriba y el que lo califica abajo, en gris y más chico. Entra el doble de
   información por fila sin agregar columnas ni provocar scroll horizontal, que es lo que arruina
   una tabla de catálogo en una laptop.

   <div class="jfg-celda">
       <span class="jfg-celda__ppal">ANYELA XIOMARA VENEGAS</span>
       <span class="jfg-celda__sec">anyela@correo.com</span>
   </div> */

.jfg-celda {
    display:        flex;
    flex-direction: column;
    line-height:    1.25;
    gap:            1px;
}

/* Números alineados a la derecha: la coma decimal cae en la misma vertical y se comparan de un
   vistazo. Sin esto, dos montos de distinto largo obligan a leerlos cifra por cifra. */
.jfg-celda--der { align-items: flex-end; text-align: right; }

.jfg-celda__ppal { font-weight: 600; }

.jfg-celda__sec {
    font-size: var(--jgf-font-size-sm, 11px);
    color:     var(--mud-palette-text-secondary);
}

/* Tabular: cada dígito ocupa lo mismo, así las columnas de cédulas y montos quedan a plomo. */
.jfg-celda__mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Debe plata: se marca el monto, no la fila entera — una fila roja se lee como error. */
.jfg-celda__debe { color: var(--mud-palette-error); }

/* Guion de "sin dato": presente pero que no compita con lo que sí hay. */
.jfg-celda__vacio { color: var(--mud-palette-text-disabled); }

/* Correo y teléfono clickeables: subrayado solo al pasar, para no ensuciar la tabla. */
.jfg-celda__link { color: inherit; text-decoration: none; }
.jfg-celda__link:hover { color: var(--jgf-primary); text-decoration: underline; }

/* ══ Devolución de una venta (DevolucionDialog, POS comercial y restaurante) ═══════════════════
   Arriba el comprobante y el cliente (qué se devuelve y a quién le llega la NC); abajo los
   artículos como filas con − / + y el total a devolver bien grande. */
.dev-titulo { display: flex; align-items: center; gap: 10px; }
.dev-titulo .mud-icon-root { color: var(--mud-palette-primary); font-size: 1.6rem; }
.dev-titulo span { display: block; font-weight: 800; font-size: 1.15rem; line-height: 1.1; }
.dev-titulo small { display: block; font-size: .8rem; color: var(--mud-palette-text-secondary); font-family: ui-monospace, Menlo, monospace; }

.dev-cabecera { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 760px) { .dev-cabecera { grid-template-columns: minmax(0, 1fr); } }
.dev-tarjeta {
    padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background-gray, #f8fafc);
}
.dev-tarjeta__h {
    display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
    font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.dev-tarjeta__principal { font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; overflow-wrap: anywhere; }

.dev-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; }
.dev-datos > div { min-width: 0; }
.dev-datos dt { font-size: .7rem; color: var(--mud-palette-text-secondary); }
.dev-datos dd { margin: 0; font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.dev-datos--ancho { grid-column: 1 / -1; }
.dev-datos--resultado { margin-top: 12px; }
.dev-mono, .dev-clave { font-family: ui-monospace, Menlo, monospace; font-size: .8rem !important; }
.dev-monto { font-variant-numeric: tabular-nums; }
.dev-pago {
    display: inline-block; margin: 0 6px 2px 0; padding: 1px 8px; border-radius: 999px;
    background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); font-size: .78rem;
}

.dev-seccion { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 8px; }
.dev-h { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }

.dev-lineas { display: flex; flex-direction: column; gap: 6px; }
.dev-linea {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 110px; align-items: center; gap: 12px;
    padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--mud-palette-lines-default);
    transition: border-color .15s, background .15s;
}
.dev-linea--on { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }
.dev-linea--agotada { opacity: .6; }
.dev-linea__prod { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dev-linea__prod strong { font-size: .95rem; overflow-wrap: anywhere; }
.dev-linea__prod span { font-size: .76rem; color: var(--mud-palette-text-secondary); }
.dev-linea__cant { display: flex; align-items: center; gap: 2px; }
.dev-linea__input { width: 72px; }
.dev-linea__input input { text-align: center; font-weight: 700; }
.dev-linea__de { font-size: .75rem; color: var(--mud-palette-text-secondary); margin-left: 4px; white-space: nowrap; }
.dev-linea__monto { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.dev-linea__agotada { grid-column: 2 / -1; text-align: right; font-size: .8rem; color: var(--mud-palette-text-secondary); }
@media (max-width: 600px) {
    .dev-linea { grid-template-columns: minmax(0, 1fr) auto; }
    .dev-linea__monto { grid-column: 1 / -1; }
}

.dev-motivos { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-chip {
    padding: 6px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600;
    background: var(--mud-palette-surface); border: 1.5px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-primary);
}
.dev-chip:hover { border-color: var(--mud-palette-primary); }
.dev-chip--on { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: #fff; }

.dev-medios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dev-medio {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
    text-align: left; padding: 10px 14px; border-radius: 12px; cursor: pointer; font: inherit;
    background: var(--mud-palette-surface); border: 1.5px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-primary);
}
.dev-medio .mud-icon-root { grid-row: 1 / 3; color: var(--mud-palette-text-secondary); }
.dev-medio span { font-weight: 700; font-size: .9rem; }
.dev-medio small { font-size: .74rem; color: var(--mud-palette-text-secondary); }
.dev-medio--on { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); }
.dev-medio--on .mud-icon-root { color: var(--mud-palette-primary); }

.dev-total {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px;
    padding: 12px 16px; border-radius: 12px; color: #fff;
    background: linear-gradient(120deg, #0b3b4a 0%, #065f46 55%, #10b981 100%);
}
.dev-total > div:first-child { display: flex; flex-direction: column; }
.dev-total > div:first-child span { font-weight: 700; }
.dev-total small { opacity: .8; font-size: .78rem; }
.dev-total__monto { display: flex; flex-direction: column; align-items: flex-end; }
.dev-total__monto span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.dev-total__monto strong { font-size: 1.8rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }

.dev-hecha { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 8px 0; }