/* panel.css — el panel administrativo adopta el lenguaje de tokens.css.
   ---------------------------------------------------------------------------
   Copia hermana de TiendaWeb/wwwroot/css/panel.css: la parte de arriba (paleta, tipografia,
   botones, tablas, campos) es IDENTICA alla, y de ahi para abajo cada sistema tiene lo suyo
   — alla pedidos y productos, aqui la agenda y el Inicio del negocio.

   MudBlazor se queda: son 26 pantallas 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.

   El panel lleva paleta FIJA, igual en todos los negocios: ver el comentario de TemaCitas.cs.
   El color de cada negocio manda en las paginas publicas, 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); }


/* ====================== 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 eran cuatro numeros grises y una franja de aviso; ahora es lo primero y lo mas
   grande de la pantalla, desglosado y tocable. Mismas clases que en TiendaWeb. */
/* 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); }

/* Un tono por tipo de pendiente, para reconocerlo sin leer. */
.hoy-tarjeta.confirmar { border-left-color: var(--alerta); }
.hoy-tarjeta.confirmar .n { color: var(--alerta); }
.hoy-tarjeta.atender   { border-left-color: var(--marca); }
.hoy-tarjeta.atender   .n { color: var(--marca); }
.hoy-tarjeta.cobrar    { border-left-color: var(--exito); }
.hoy-tarjeta.cobrar    .n { color: var(--exito); }
.hoy-tarjeta.tarde     { border-left-color: var(--error); }
.hoy-tarjeta.tarde     .n { color: var(--error); }
.hoy-tarjeta.manana    { border-left-color: #7C3AED; }
.hoy-tarjeta.manana    .n { color: #7C3AED; }

.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 pagina de citas ---- */
.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-citas  .ic { color: var(--marca); }
.tarjeta-num.n-mes    .ic { color: #7C3AED; }
.tarjeta-num.n-nuevos .ic { color: var(--alerta); }

/* Rotulo de seccion suelto en la pantalla (no dentro de un panel). */
.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): cada opcion con el color de su asunto. Agenda en azul, caja en
   verde, lo que avisa en ambar. No es adorno: 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 y no salen del negocio — ver TemaCitas.cs. */
/* 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="/agenda"] .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="/recordatorios"] .mud-nav-link-icon.mud-nav-link-icon-default      { color: #D97706; }
.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/servicio"] .mud-nav-link-icon.mud-nav-link-icon-default { color: #7C3AED; }
.mud-drawer a[href="/catalogos/empleado"] .mud-nav-link-icon.mud-nav-link-icon-default { color: #2563EB; }
.mud-drawer a[href="/catalogos/usuario"] .mud-nav-link-icon.mud-nav-link-icon-default  { color: #0EA5E9; }
.mud-drawer a[href="/catalogos/producto"] .mud-nav-link-icon.mud-nav-link-icon-default { color: #B45309; }
.mud-drawer a[href="/horarios"] .mud-nav-link-icon.mud-nav-link-icon-default           { color: #D97706; }
.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/negocios"] .mud-nav-link-icon.mud-nav-link-icon-default     { color: #DB2777; }
/* La opcion donde uno esta parado se marca con fondo, no con un borde de lado. */
.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. */

/* El titulo de panel era una banda de color con borde de 2 px: dos rayas por panel, y con ocho
   paneles en pantalla eso era todo lo que se veia. Ahora es solo el texto. */
.mud-main-content .pnl-tit {
    margin: 0 0 var(--e3); padding: 0;
    background: none; border: 0; border-radius: 0;
}
/* Las filas se separan por espacio; la linea queda apenas insinuada y la ultima no lleva. */
.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); }

/* ---- la fila de una cita: su estado y sus acciones con nombre ---- */
.cita-acc { text-align: right; white-space: nowrap; }
.cita-acc .mud-button-root { min-width: 0; padding: 2px 8px; font-size: var(--t-sm); }
/* nowrap: la columna del nombre es angosta y "Por confirmar" se partia en dos renglones,
   dejando la fila el doble de alta. */
.cita-est {
    display: inline-block; margin-left: var(--e2); white-space: nowrap;
    padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.cita-est.pend  { background: #F1F3F7; color: var(--tinta-2); }
.cita-est.ok    { background: var(--exito-suave); color: var(--exito); }
.cita-est.tarde { background: var(--alerta-suave); color: var(--alerta); }
.cita-est.hecha { background: var(--marca-suave); color: var(--marca); }

/* ====================== Modo oscuro ======================
   2026-11-11. Las clases propias de arriba (.sec-tit, .hoy-*, .te-*, .tarjeta-num, .cita-est)
   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 TemaCitas.cs, asi que TODAS esas clases se adaptan solas y no hay que tocar
   ninguna. Si alla cambian los colores, cambian aqui. */
.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);
}
/* Los pocos valores escritos a mano que quedaban en las hojas, y que en oscuro se veian como
   un parche blanco. */
.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 .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 .cita-est.pend { background: #1E2A44; color: var(--tinta-2); }
.mud-layout.tema-oscuro .rv-aviso.neutro { background: #1E2A44; }
/* El fondo del bloque "Empacar el pedido" y similares, que iban en gris claro escrito a mano. */
.mud-layout.tema-oscuro .mud-paper[style*="f4f6fb"] { background: #1A2540 !important; }

/* Dos cosas que el tema oscuro de MudBlazor deja mal y que se midieron pantalla por pantalla
   (2026-11-11, recorrido completo del panel en modo oscuro):

   1. El boton principal relleno queda con texto BLANCO sobre el azul claro del tema oscuro:
      2.5:1, por debajo del minimo legible. Sobre un azul claro el texto va oscuro.
   2. El texto de los avisos (MudAlert) usa el color pleno del estado sobre un fondo casi
      transparente: el de informacion daba 1.2:1, practicamente invisible. Aqui toma el tono
      claro de cada estado. */
.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; }

/* ---- la agenda en oscuro ----
   Las citas se distinguen por color de estado (site.css, .estado-*), con pasteles pensados
   para fondo blanco: en oscuro eran tres parches claros en medio de la pantalla. Aqui va el
   mismo codigo de color, pero en version oscura y con el texto claro. El matiz no cambia:
   azul sigue siendo confirmada, ambar pendiente y verde atendida. */
.mud-layout.tema-oscuro .estado-confirmada { background: #1B2E52; color: #BFD7FF; }
.mud-layout.tema-oscuro .estado-pendiente  { background: #3A2D12; color: #FCD34D; }
.mud-layout.tema-oscuro .estado-atendida   { background: #12301F; color: #86EFAC; }
.mud-layout.tema-oscuro .estado-no_llego   { background: #3A1A1A; color: #FCA5A5; }
.mud-layout.tema-oscuro .estado-cancelada  { background: #232B3B; color: #9AA8C7; }