/* panel.css — el panel administrativo adopta el lenguaje de tokens.css.
   ---------------------------------------------------------------------------
   MudBlazor se queda: son 23 pantallas y 1032 etiquetas Mud, y reescribirlas seria otro proyecto
   con el riesgo de romper lo que ya funciona. Lo que se hace aqui es amarrar las variables de
   MudBlazor a los tokens, mas los pocos arreglos a mano que el tema no alcanza.

   Esta hoja NO cambia el marcado de ninguna pantalla. Si algo necesita marcado nuevo, va en su
   .razor (Pedidos y Productos son las dos que si se rearman).

   El panel lleva paleta FIJA, igual en todas las tiendas: ver el comentario de TemaTienda.cs.
   El color de cada tienda manda en la vitrina publica, no aqui. */

.mud-layout, .mud-main-content {
    font-family: var(--fuente);
    font-size: var(--t-md);
}

/* ---- paleta: las variables de MudBlazor apuntan a los tokens ----
   Solo en modo CLARO: sin el :not(), estos valores le ganaban al tema oscuro de MudBlazor por
   ser descendientes de :root y el boton de modo oscuro dejaba el panel a medias — fondo claro
   con el texto del menu todavia en version oscura.

   2026-11-11: el :not() decia `.mud-theme-dark`, una clase que MudBlazor 9 NO pone en ningun
   lado — cambia de tema redefiniendo sus propias variables y nada mas. Asi que la regla aplicaba
   SIEMPRE y el panel en oscuro salia con el cajon blanco y el texto claro encima. La marca la
   pone ahora MainLayout.razor con la clase `tema-oscuro`. */
.mud-layout:not(.tema-oscuro) {
    --mud-palette-primary: var(--marca);
    --mud-palette-primary-rgb: 29, 78, 216;
    --mud-palette-secondary: var(--cta);
    --mud-palette-background: var(--fondo);
    --mud-palette-background-gray: var(--fondo);
    --mud-palette-surface: var(--superficie);
    --mud-palette-appbar-background: var(--marca-oscuro);
    --mud-palette-drawer-background: var(--superficie);
    --mud-palette-text-primary: var(--tinta);
    --mud-palette-text-secondary: var(--tinta-2);
    --mud-palette-lines-default: var(--linea);
    --mud-palette-lines-inputs: var(--linea-fuerte);
    --mud-palette-table-lines: var(--linea);
    --mud-palette-divider: var(--linea);
    --mud-palette-success: var(--exito);
    --mud-palette-warning: var(--alerta);
    --mud-palette-error: var(--error);
}

/* ---- tipografia: la escala de los tokens, no la de Material ---- */
.mud-main-content .mud-typography-h4 { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -.02em; }
.mud-main-content .mud-typography-h5 { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.01em; }
.mud-main-content .mud-typography-h6 { font-size: var(--t-xl); font-weight: 700; }
.mud-main-content .mud-typography-subtitle1 { font-size: var(--t-lg); font-weight: 600; }
.mud-main-content .mud-typography-subtitle2 { font-size: var(--t-md); font-weight: 600; }
.mud-main-content .mud-typography-body1 { font-size: var(--t-md); }
.mud-main-content .mud-typography-body2 { font-size: var(--t-sm); }
.mud-main-content .mud-typography-caption { font-size: var(--t-xs); }

/* ---- botones: en frase, no en MAYUSCULAS ----
   Material grita por defecto. "GUARDAR CAMBIOS" se lee peor y ocupa mas que "Guardar cambios",
   y al lado de la vitrina parecian dos sistemas distintos. */
.mud-button-root { text-transform: none; font-weight: 700; letter-spacing: 0; border-radius: var(--r1); }
.mud-button-root.mud-button-filled { box-shadow: none; }
.mud-button-root.mud-button-filled:hover { box-shadow: var(--s1); }
.mud-button-root.mud-size-small { font-size: var(--t-sm); }

/* ---- superficies ---- */
.mud-main-content .mud-paper {
    box-shadow: var(--s1);
    border: 1px solid var(--linea);
    border-radius: var(--r2);
}
.mud-main-content .mud-paper.mud-elevation-0 { box-shadow: none; }

/* ---- tablas densas ----
   Material deja las filas altisimas. En una pantalla de pedidos eso significa ver cuatro
   renglones donde caben diez. */
.mud-table-root td, .mud-table-root th { padding: 0 var(--e3); }
.mud-table-root td { height: var(--alto-fila); font-size: var(--t-sm); color: var(--tinta-2); }
.mud-table-root th {
    height: 36px; background: #F7F9FC; color: var(--tinta-3);
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    border-bottom: 1px solid var(--linea);
}
.mud-table-container { border-radius: var(--r2); }
.mud-table-row:hover { background: var(--marca-suave) !important; }
/* Las cifras se comparan de un vistazo solo si los digitos miden lo mismo. */
.mud-table-root td.num, .mud-table-root .num { font-variant-numeric: tabular-nums; text-align: right; }

/* ---- fichas de estado ---- */
.mud-chip {
    border-radius: 999px; font-weight: 700; font-size: 11px; height: 24px;
    letter-spacing: 0; text-transform: none;
}
.mud-chip.mud-chip-size-small { height: 22px; font-size: 11px; }

/* ---- campos ---- */
.mud-input-control .mud-input-outlined-border { border-radius: var(--r1); }
.mud-input.mud-input-outlined input, .mud-input.mud-input-outlined textarea { font-size: var(--t-md); }
.mud-input-label { font-size: var(--t-sm); }

/* ---- avisos ---- */
.mud-alert { border-radius: var(--r2); font-size: var(--t-sm); }

/* ---- barra lateral ---- */
.mud-drawer .mud-nav-link { font-size: var(--t-md); border-radius: 0; }
.mud-drawer .mud-nav-group .mud-nav-link-text { font-size: var(--t-md); }

/* ---- barra superior ---- */
.mud-appbar { box-shadow: none; border-bottom: 1px solid rgba(255,255,255,.08); }

/* ====================== Pedidos ======================
   Dos columnas: la lista manda, y el pedido abierto queda pegado a la derecha. Antes el detalle
   se desplegaba ARRIBA de la lista y empujaba todo hacia abajo: abrir un pedido hacia perder de
   vista los demas, que es justo lo que uno quiere comparar cuando hay varios por revisar. */
.ped-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); align-items: start; }
@media (min-width: 1100px) {
    .ped-grid.con-detalle { grid-template-columns: minmax(0, 1fr) 420px; }
}
/* Abajo de 1100 px es una sola columna y el detalle, siendo el segundo hijo, quedaba DESPUES de
   toda la tabla: con 40 pedidos el dueno hacia clic en una fila y no pasaba nada visible. Arriba,
   como estaba antes. */
@media (max-width: 1099px) { .ped-detalle { order: -1; } }
/* Adentro del panel hay un MudGrid pensado para ancho completo (md=7 / md=5). En una columna de
   420 px esas dos mitades parten las palabras y el boton de accion se sale. Aqui se apilan. */
.ped-detalle .mud-grid-item { max-width: 100% !important; flex-basis: 100% !important; }
/* El boton envuelve por PALABRAS, nunca por letras: sin el flex-shrink, un vecino ancho (el
   nombre del archivo que escogio el dueno) lo aplastaba hasta dejarlo de una letra de ancho. */
.ped-detalle .mud-button-root { white-space: normal; flex-shrink: 0; }
/* El selector de archivo se lleva su propio renglon y cede el ancho, no el boton. */
.ped-archivo { flex: 1 1 100%; min-width: 0; }
.ped-archivo input[type="file"] { max-width: 100%; font-size: var(--t-sm); }
.ped-detalle { border: 1px solid var(--linea) !important; }
@media (min-width: 1100px) { .ped-detalle { position: sticky; top: var(--e3); } }

/* fichas de estado como pestanas segmentadas con su conteo */
.ped-chips {
    display: flex; gap: 2px; background: #E8ECF3; border-radius: var(--r2); padding: 4px;
    margin-bottom: var(--e4); overflow-x: auto; scrollbar-width: none; width: fit-content; max-width: 100%;
}
.ped-chips::-webkit-scrollbar { display: none; }
.ped-pes {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer;
    border: 0; background: none; font-family: inherit; color: var(--tinta-2);
    padding: 7px 13px; border-radius: var(--r1); font-size: var(--t-sm); font-weight: 600;
}
.ped-pes .n {
    background: #D4DBE6; color: var(--tinta-2); border-radius: 999px;
    font-size: 11px; font-weight: 700; padding: 1px 7px;
}
.ped-pes.on { background: #fff; color: var(--tinta); box-shadow: var(--s1); }
.ped-pes.on .n { background: var(--marca); color: #fff; }

.ped-tel { font-size: 11px; color: var(--tinta-3); }
/* En el panel angosto los precios se partian en "L" y la cifra en renglones distintos, y el
   enlace del cliente se salia por la derecha. */
.ped-detalle td { white-space: nowrap; }
.ped-detalle td:first-child { white-space: normal; }
.ped-detalle { overflow-wrap: anywhere; }

/* ---- Productos: fichas de filtro rapido ---- */
.prod-fichas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prod-ficha {
    border: 1px solid var(--linea-fuerte); background: #fff; color: var(--tinta-2);
    border-radius: 999px; padding: 7px 14px; font-size: var(--t-sm); font-weight: 600;
    cursor: pointer; font-family: inherit; height: var(--alto-control);
}
.prod-ficha:hover { border-color: var(--marca); }
.prod-ficha.on { background: var(--marca); border-color: var(--marca); color: #fff; }

/* ====================== Inicio: Para hoy ======================
   La pregunta con la que el dueno abre el sistema en la manana es una sola: que tengo que hacer
   hoy. Antes eso era una franja delgada con la suma de dos estados; ahora es lo primero y lo
   mas grande de la pantalla, desglosado y tocable. */
/* auto-FILL y no auto-fit: con una sola tarea pendiente, auto-fit la estiraba de lado a lado
   y un "2" gigante en media pantalla se lee como alarma. Asi la tarjeta mide lo que mide. */
.hoy-rejilla {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--e3); margin-bottom: var(--e4);
}
.hoy-tarjeta {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    text-align: left; cursor: pointer; font-family: inherit;
    background: var(--superficie); border: 1px solid var(--linea);
    border-left: 4px solid var(--linea-fuerte);
    border-radius: var(--r2); padding: var(--e3) var(--e4); box-shadow: var(--s1);
    transition: box-shadow .12s ease, transform .12s ease;
}
.hoy-tarjeta:hover { box-shadow: var(--s2); transform: translateY(-1px); }
.hoy-tarjeta .n { font-size: var(--t-3xl); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.hoy-tarjeta .que { font-size: var(--t-md); font-weight: 600; color: var(--tinta); }
.hoy-tarjeta .hacer { font-size: var(--t-sm); color: var(--tinta-2); }

.hoy-tarjeta.nuevo   { border-left-color: var(--marca); }
.hoy-tarjeta.nuevo   .n { color: var(--marca); }
.hoy-tarjeta.revisar { border-left-color: var(--alerta); }
.hoy-tarjeta.revisar .n { color: var(--alerta); }
.hoy-tarjeta.empacar { border-left-color: var(--exito); }
.hoy-tarjeta.empacar .n { color: var(--exito); }
.hoy-tarjeta.enviar  { border-left-color: #7C3AED; }
.hoy-tarjeta.enviar  .n { color: #7C3AED; }
.hoy-tarjeta.agotado { border-left-color: var(--error); }
.hoy-tarjeta.agotado .n { color: var(--error); }
.hoy-tarjeta.bajo    { border-left-color: var(--alerta); }
.hoy-tarjeta.bajo    .n { color: var(--alerta); }

.hoy-aldia {
    display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4);
    background: var(--exito-suave); border: 1px solid #BFE6CD; border-radius: var(--r2);
    padding: var(--e3) var(--e4); color: var(--exito);
}
.hoy-aldia .mud-icon-root { font-size: 2rem; }
.hoy-aldia b { font-size: var(--t-lg); }
.hoy-aldia div div { color: var(--tinta-2); font-size: var(--t-sm); }

/* ---- su tienda en linea ---- */
.te-caja {
    display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r2);
    padding: var(--e3) var(--e4); margin-bottom: var(--e4); box-shadow: var(--s1);
}
.te-izq { flex: 1 1 280px; min-width: 0; }
.te-tit { font-size: var(--t-sm); font-weight: 700; color: var(--tinta-2); }
.te-url {
    font-size: var(--t-lg); font-weight: 700; color: var(--marca-oscuro);
    overflow-wrap: anywhere; line-height: 1.3;
}
.te-pie { font-size: var(--t-xs); color: var(--tinta-3); margin-top: 2px; }
.te-acc { display: flex; gap: var(--e2); flex-wrap: wrap; }
.te-acc .te-wa { color: var(--exito); border-color: var(--exito); }

/* ---- los cuatro numeros ---- */
.num-rejilla {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--e3); margin-bottom: var(--e4);
}
.tarjeta-num {
    position: relative; display: flex; flex-direction: column; gap: 1px;
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r2);
    padding: var(--e3) var(--e4); box-shadow: var(--s1);
}
.tarjeta-num .ic {
    position: absolute; top: var(--e3); right: var(--e3);
    font-size: 1.25rem; opacity: .35;
}
.tarjeta-num .num {
    font-size: var(--t-3xl); font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
}
.tarjeta-num .num.alerta { color: var(--alerta); }
.tarjeta-num .eti { font-size: var(--t-sm); color: var(--tinta-2); }
.tarjeta-num .cmp { font-size: var(--t-xs); font-weight: 600; margin-top: 3px; }
.tarjeta-num .cmp.sube { color: var(--exito); }
.tarjeta-num .cmp.baja { color: var(--tinta-3); }
.tarjeta-num.n-cobro  .ic { color: var(--exito); }
.tarjeta-num.n-ventas .ic { color: var(--marca); }
.tarjeta-num.n-mes    .ic { color: #7C3AED; }
.tarjeta-num.n-stock  .ic { color: var(--alerta); }
.tarjeta-num.n-credito .ic { color: #0891B2; }
/* Rotulo de seccion suelto en la pantalla (no dentro de un panel): .pnl-tit pinta una banda
   azul de lado a lado, que aqui sobra. */
.sec-tit {
    font-size: var(--t-lg); font-weight: 700; color: var(--tinta);
    margin: 0 0 var(--e3); letter-spacing: -.01em;
}
.ct-barra .ct-wa { color: var(--exito); border-color: var(--exito); }

/* Vacio que sirve: dice que hacer, no solo que no hay nada. */
.vacio-util p { color: var(--tinta-2); font-size: var(--t-sm); margin: 0 0 var(--e3); }
.vacio-util .acc { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* ====================== Menu lateral con color ======================
   2026-11-11 (maqueta de Jorge, misma idea que en CitasWeb): cada opcion con el color de su
   asunto. Uno aprende a tirar la mano al color antes de leer la palabra, y el menu deja de ser
   una columna gris de quince renglones iguales. Los colores son fijos, no salen de la tienda.

   Dos cosas que costaron: MudBlazor le pone `fill` al SVG y `fill` no hereda de `color`, y su
   regla .mud-nav-link:not(...) .mud-nav-link-icon.mud-nav-link-icon-default pesa mas que un
   selector por href. Por eso abajo va tambien .mud-nav-link-icon-default: para empatarle. */
.mud-drawer .mud-nav-link-icon { fill: currentColor; opacity: 1; }
.mud-drawer a[href="/"] .mud-nav-link-icon.mud-nav-link-icon-default                        { color: #2563EB; }
.mud-drawer a[href="/pedidos"] .mud-nav-link-icon.mud-nav-link-icon-default                 { color: #7C3AED; }
.mud-drawer a[href="/clientes"] .mud-nav-link-icon.mud-nav-link-icon-default                { color: #0EA5E9; }
.mud-drawer a[href="/cuenta"] .mud-nav-link-icon.mud-nav-link-icon-default                  { color: #64748B; }
.mud-drawer a[href="/ayuda"] .mud-nav-link-icon.mud-nav-link-icon-default                   { color: #64748B; }
.mud-drawer a[href="/gastos"] .mud-nav-link-icon.mud-nav-link-icon-default                  { color: #B45309; }
.mud-drawer a[href="/reportes"] .mud-nav-link-icon.mud-nav-link-icon-default                { color: #DB2777; }
.mud-drawer a[href="/caja"] .mud-nav-link-icon.mud-nav-link-icon-default                    { color: #15803D; }
.mud-drawer a[href="/configuracion"] .mud-nav-link-icon.mud-nav-link-icon-default           { color: #0F766E; }
.mud-drawer a[href="/catalogos/productos"] .mud-nav-link-icon.mud-nav-link-icon-default     { color: #B45309; }
.mud-drawer a[href="/catalogos/departamentos"] .mud-nav-link-icon.mud-nav-link-icon-default { color: #7C3AED; }
.mud-drawer a[href="/catalogos/cuentas"] .mud-nav-link-icon.mud-nav-link-icon-default       { color: #15803D; }
.mud-drawer a[href="/catalogos/envios"] .mud-nav-link-icon.mud-nav-link-icon-default        { color: #0EA5E9; }
.mud-drawer a[href="/catalogos/cupones"] .mud-nav-link-icon.mud-nav-link-icon-default       { color: #DB2777; }
.mud-drawer a[href="/catalogos/usuario"] .mud-nav-link-icon.mud-nav-link-icon-default       { color: #0EA5E9; }
.mud-drawer a[href="/campos"] .mud-nav-link-icon.mud-nav-link-icon-default                  { color: #64748B; }
.mud-drawer a[href="/cartel"] .mud-nav-link-icon.mud-nav-link-icon-default                  { color: #0F766E; }
.mud-drawer a[href="/admin/tiendas"] .mud-nav-link-icon.mud-nav-link-icon-default           { color: #DB2777; }
.mud-drawer .mud-nav-link.active { background: var(--marca-suave); color: var(--marca); font-weight: 700; }

/* ====================== Menos rayas ======================
   Pedido de Jorge, con estas palabras: "un diseño más limpio, sin tantas rayas". Lo que separa
   pasa a ser el aire, no una linea por cada cosa. */
.mud-main-content .pnl-tit {
    margin: 0 0 var(--e3); padding: 0;
    background: none; border: 0; border-radius: 0;
}
.mud-main-content .mud-table-root td { border-bottom: 1px solid #F1F3F7; }
.mud-main-content .mud-table-root tbody tr:last-child td { border-bottom: 0; }
.mud-main-content .mud-table-root th { background: transparent; border-bottom: 1px solid var(--linea); }

/* ====================== Modo oscuro ======================
   2026-11-11. Las clases propias de arriba (.sec-tit, .hoy-*, .te-*, .tarjeta-num, .ped-*) leen
   los tokens, y los tokens son claros. En oscuro eso daba paneles blancos con el texto claro
   encima: ilegibles. Aqui los tokens se vuelven a declarar con los valores del PaletteDark de
   TemaTienda.cs, asi que TODAS esas clases se adaptan solas. Copia hermana de CitasWeb. */
.mud-layout.tema-oscuro {
    --superficie:   #16213A;
    --fondo:        #0B1220;
    --tinta:        #E6EBF5;
    --tinta-2:      #9AA8C7;
    --tinta-3:      #7D8BA8;
    --linea:        #26334F;
    --linea-fuerte: #35456A;

    --marca:        #60A5FA;
    /* Sobre fondo oscuro, "marca-oscuro" tiene que ser CLARA: se usa para texto (.te-url). */
    --marca-oscuro: #BFD7FF;
    --marca-suave:  rgba(96, 165, 250, .16);

    --exito:        #4ADE80;
    --exito-suave:  rgba(74, 222, 128, .15);
    --alerta:       #FBBF24;
    --alerta-suave: rgba(251, 191, 36, .15);
    --error:        #F87171;
    --error-suave:  rgba(248, 113, 113, .15);

    --s1: 0 1px 2px rgba(0, 0, 0, .35);
    --s2: 0 2px 6px rgba(0, 0, 0, .4), 0 10px 26px rgba(0, 0, 0, .35);
}
.mud-layout.tema-oscuro .ped-chips,
.mud-layout.tema-oscuro .ped-pes .n { background: #1E2A44; }
.mud-layout.tema-oscuro .ped-pes.on { background: #26334F; }
.mud-layout.tema-oscuro .prod-ficha { background: #16213A; color: var(--tinta-2); }
.mud-layout.tema-oscuro .mud-table-root th { background: transparent; color: var(--tinta-3); }
.mud-layout.tema-oscuro .mud-main-content .mud-table-root td { border-bottom-color: #1C2740; }
.mud-layout.tema-oscuro .mud-paper[style*="f4f6fb"] { background: #1A2540 !important; }

/* Dos cosas que el tema oscuro de MudBlazor deja mal, medidas pantalla por pantalla:
   el boton principal relleno queda con texto BLANCO sobre azul claro (2.5:1), y el texto de los
   avisos usa el color pleno del estado sobre fondo casi transparente (1.2:1). */
.mud-layout.tema-oscuro .mud-button-filled-primary,
.mud-layout.tema-oscuro .mud-button-filled-primary .mud-icon-root { color: #0B1220; }
.mud-layout.tema-oscuro .mud-button-filled-secondary,
.mud-layout.tema-oscuro .mud-button-filled-secondary .mud-icon-root { color: #0B1220; }

.mud-layout.tema-oscuro .mud-alert-text-info    { color: #93C5FD; }
.mud-layout.tema-oscuro .mud-alert-text-success { color: #86EFAC; }
.mud-layout.tema-oscuro .mud-alert-text-warning { color: #FCD34D; }
.mud-layout.tema-oscuro .mud-alert-text-error   { color: #FCA5A5; }
.mud-layout.tema-oscuro .mud-alert-message,
.mud-layout.tema-oscuro .mud-alert .mud-icon-root { color: inherit; }

/* Las fichas de estado rellenas (MudChip) en oscuro: el verde y el turquesa del tema son claros
   y MudBlazor les deja el texto BLANCO encima — "Entregado" daba 2.3:1. Sobre un fondo claro el
   texto va oscuro, sea cual sea el modo. */
.mud-layout.tema-oscuro .mud-chip-filled.mud-chip-color-success,
.mud-layout.tema-oscuro .mud-chip-filled.mud-chip-color-tertiary,
.mud-layout.tema-oscuro .mud-chip-filled.mud-chip-color-info,
.mud-layout.tema-oscuro .mud-chip-filled.mud-chip-color-warning { color: #0B1220; }

/* ---- los depósitos que el mayorista avisa (2026-11-12, parte 2) ---- */
.rep-fila {
    display: flex; align-items: center; gap: var(--e2);
    padding: var(--e2) 0; border-bottom: 1px solid var(--mud-palette-divider);
}
.rep-fila:last-child { border-bottom: 0; }
.rep-fila .crece { flex: 1 1 auto; min-width: 0; }

/* ---- la fila de botones del contrato y el portal (2026-11-12) ---- */
.cr-botones {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
}
/* El texto que explica queda pegado a sus botones: antes el margen de cada botón
   los dejaba a distinta altura y despegados de lo que explican. */
.cr-nota { margin-bottom: 10px; }

/* 2026-11-12: el QR del portal del mayorista, en su ficha. Para el cliente que esta parado
   enfrente: apunta con la camara y entra, sin dictarle una direccion larga por telefono. */
.cr-qr { margin-top: 12px; text-align: center; }
.cr-qr img { width: 168px; height: 168px; image-rendering: pixelated; }