/*
 * Estilos propios de PuntoLiving, encima de los de Filament.
 * CSS simple, sin compilar: se edita y se sube tal cual.
 * Colores de marca: naranja #D65108, onyx #171614, arena #F5E3D6.
 */

/* ---------- Botón flotante "+ Cargar" ---------- */
.pl-cargar {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 20; /* debajo de las ventanas emergentes de Filament */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.pl-cargar-boton {
    background: var(--primary-600);
    color: #fff;
    font-weight: 700;
    font-size: 1.125rem;
    padding: 0.9rem 1.4rem;
    border-radius: 9999px;
    box-shadow: 0 6px 18px rgba(23, 22, 20, 0.3);
    min-height: 56px;
}

.pl-cargar-boton:hover,
.pl-cargar-boton:focus-visible {
    background: var(--primary-700);
}

.pl-cargar-boton span {
    font-size: 1.4rem;
    margin-right: 0.15rem;
}

.pl-cargar-menu {
    background: #fff;
    border-radius: 0.9rem;
    box-shadow: 0 10px 30px rgba(23, 22, 20, 0.25);
    padding: 0.4rem;
    min-width: 13rem;
    /* Se ven hasta 9 opciones (cada una mide unos 3,27rem) y el resto se desplaza: así el menú
       no llega a la parte de arriba de la pantalla, que con una mano no se alcanza */
    max-height: min(30.3rem, calc(100vh - 6.5rem));
    max-height: min(30.3rem, calc(100dvh - 6.5rem));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dark .pl-cargar-menu {
    background: #27272a;
}

.pl-cargar-opcion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.pl-cargar-opcion:hover {
    background: var(--primary-50);
}

.dark .pl-cargar-opcion:hover {
    background: #3f3f46;
}

.pl-cargar-icono {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--primary-600);
}

/* Deja lugar abajo para que el botón flotante no tape la última fila ni la paginación. */
.fi-main {
    padding-bottom: 6rem;
}

/* ---------- Celular primero: botones y campos más grandes ---------- */
@media (max-width: 767px) {
    .fi-btn {
        min-height: 44px;
    }

    .fi-input,
    .fi-select-input {
        font-size: 16px; /* evita que el celular haga zoom al tocar un campo */
    }
}

/* ---------- Registros anulados: tachados y apagados ---------- */
.pl-anulado td {
    text-decoration: line-through;
    opacity: 0.55;
}

/* ---------- Movimientos esperando autorización: fondo amarillo suave ---------- */
.pl-pendiente td {
    background-color: rgba(245, 158, 11, 0.08);
}

/* ---------- Modal de historial ---------- */
.pl-historial-entrada {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(127, 127, 127, 0.2);
}

.pl-historial-entrada:last-child {
    border-bottom: 0;
}

.pl-historial-titulo {
    margin-bottom: 0.5rem;
}

.pl-historial-tabla {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}

.pl-historial-tabla th {
    text-align: left;
    font-weight: 600;
    padding: 0.25rem 0.5rem 0.25rem 0;
    opacity: 0.7;
}

.pl-historial-tabla td {
    padding: 0.25rem 0.5rem 0.25rem 0;
    vertical-align: top;
}

.pl-historial-antes {
    color: var(--primary-700);
}

/* ---------- Tarjetas de cajas (Caja diaria) ---------- */
.pl-cajas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); /* dos por fila en el celular */
    gap: 0.75rem;
}

.pl-caja {
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 0.75rem;
    padding: 0.75rem;
}

.pl-caja-nombre {
    font-size: 0.85rem;
    opacity: 0.75;
}

.pl-caja-saldo {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0.15rem 0;
}

.pl-caja-hoy {
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.4rem;
}

.pl-positivo {
    color: #15803d;
}

.pl-negativo {
    color: #b91c1c;
}

.dark .pl-positivo {
    color: #4ade80;
}

.dark .pl-negativo {
    color: #f87171;
}

/* ---------- Cuentas y bancos ---------- */
.pl-caja-link {
    display: block;
    transition: border-color 0.15s;
}

.pl-caja-link:hover {
    border-color: var(--primary-600);
}

.pl-totales {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
}

.pl-total-etiqueta {
    font-size: 0.85rem;
    opacity: 0.75;
}

.pl-total-valor {
    font-size: 1.5rem;
    font-weight: 700;
}

.pl-total-nota {
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.pl-personal {
    margin-top: 1rem;
    padding: 0.6rem 0.8rem;
    border-radius: 0.6rem;
    background: #FBDDC8;
    color: #171614;
}

.pl-etiqueta-personal {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0 0.4rem;
    border-radius: 9999px;
    background: #FFDD4A;
    color: #171614;
}

/* ---------- Ventas del mes contra objetivo ---------- */
.pl-avances {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem;
}

.pl-avance {
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 0.75rem;
    padding: 0.85rem;
}

.pl-avance-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pl-avance-cantidad {
    margin-left: auto;
    font-size: 0.8rem;
    opacity: 0.7;
}

.pl-avance-vendido {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0.25rem 0 0.4rem;
}

.pl-avance-detalle {
    font-size: 0.8rem;
    margin-top: 0.3rem;
}

.pl-semaforo {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 9999px;
    display: inline-block;
    flex-shrink: 0;
}

.pl-semaforo-verde { background: #16a34a; }
.pl-semaforo-amarillo { background: #eab308; }
.pl-semaforo-rojo { background: #dc2626; }
.pl-semaforo-gris { background: #a1a1aa; }

.pl-barra {
    position: relative;
    height: 0.7rem;
    border-radius: 9999px;
    background: rgba(127, 127, 127, 0.2);
    overflow: visible;
}

.pl-barra-relleno {
    height: 100%;
    border-radius: 9999px;
}

.pl-barra-ritmo {
    position: absolute;
    top: -0.2rem;
    bottom: -0.2rem;
    width: 2px;
    background: #171614;
}

.dark .pl-barra-ritmo {
    background: #fafafa;
}

/* ---------- Tablero de inicio ---------- */
.pl-desglose {
    margin-top: 1rem;
    border-top: 1px solid rgba(127, 127, 127, 0.2);
}

.pl-desglose-fila {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(127, 127, 127, 0.12);
    font-size: 0.95rem;
}

.pl-link {
    color: var(--primary-600);
    font-weight: 600;
}

/* ---------- Para hoy ---------- */
.pl-tarea {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(127, 127, 127, 0.15);
}

.pl-tarea:last-child {
    border-bottom: 0;
}

.pl-tarea-botones {
    display: flex;
    gap: 0.5rem;
}

/* ---------- Alertas del tablero ---------- */
.pl-alertas {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pl-alerta {
    padding: 0.55rem 0.8rem;
    border-radius: 0.6rem;
    border-left: 4px solid;
    font-size: 0.95rem;
}

.pl-alerta-danger {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
}

.pl-alerta-warning {
    border-color: #eab308;
    background: rgba(234, 179, 8, 0.1);
}

/* ---------- Tablas de resultados ---------- */
.pl-anios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pl-tabla-scroll {
    overflow-x: auto;
}

.pl-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    white-space: nowrap;
}

.pl-tabla th,
.pl-tabla td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid rgba(127, 127, 127, 0.15);
    text-align: right;
}

.pl-tabla th:first-child {
    text-align: left;
}

.pl-tabla thead th {
    font-weight: 600;
    opacity: 0.8;
}

.pl-tabla-total th,
.pl-tabla-total td {
    font-weight: 700;
}

.pl-celda {
    color: inherit;
    text-decoration: underline dotted;
}

.pl-celda:hover {
    color: var(--primary-600);
}

/* ---------- Filtros de análisis ---------- */
.pl-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem 1rem;
}

.pl-filtro {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
}

.pl-filtro input,
.pl-filtro select {
    border: 1px solid rgba(127, 127, 127, 0.35);
    border-radius: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: transparent;
}

.pl-preguntas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
}

/* Importar Excel: informe de cada paso */
.pl-importacion-titulo {
    font-weight: 600;
    margin: 1.25rem 0 0.25rem;
}

.pl-importacion-titulo:first-child {
    margin-top: 0;
}

.pl-importacion-lista {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0.5rem 0;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.pl-importacion-aviso summary {
    cursor: pointer;
    padding: 0.35rem 0;
    font-size: 0.9rem;
}

/* ---------- Reporte diario ---------- */
.pl-periodos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .pl-periodos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pl-periodos .fi-btn {
    min-height: 48px;
}

.pl-reporte-total {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0.25rem 0;
    overflow-wrap: anywhere;
}

.pl-enlace {
    color: var(--primary-600);
    font-weight: 600;
    text-decoration: underline;
}

.pl-partida {
    display: flex;
    height: 1.25rem;
    border-radius: 9999px;
    overflow: hidden;
    background: rgba(127, 127, 127, 0.2);
}

.pl-partida-efectivo { background: var(--primary-600); }
.pl-partida-tarjetas { background: #475569; }
.dark .pl-partida-tarjetas { background: #94a3b8; }

.pl-partida-leyenda {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    margin-top: 0.85rem;
}

.pl-partida-valor {
    font-size: 1.25rem;
    font-weight: 700;
}

.pl-punto {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 9999px;
    vertical-align: middle;
}

.pl-reporte-totales {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.pl-reporte-totales .pl-total-valor {
    white-space: nowrap;
}

/* ---------- Calendario ---------- */
.pl-cal { display: flex; flex-direction: column; gap: 1rem; }

.pl-cal-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }

.pl-cal-vistas { display: inline-flex; border: 1px solid rgba(127, 127, 127, 0.3); border-radius: 0.6rem; overflow: hidden; }
.pl-cal-vista { padding: 0.55rem 0.95rem; font-weight: 600; font-size: 0.95rem; min-height: 44px; }
.pl-cal-vista + .pl-cal-vista { border-left: 1px solid rgba(127, 127, 127, 0.3); }
.pl-cal-vista-activa { background: var(--primary-600); color: #fff; }

.pl-cal-nav { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.pl-cal-flecha, .pl-cal-hoy {
    min-width: 44px; min-height: 44px; padding: 0 0.8rem; border-radius: 0.6rem;
    border: 1px solid rgba(127, 127, 127, 0.3); font-weight: 700; font-size: 1.1rem;
}
.pl-cal-hoy { font-size: 0.95rem; }
.pl-cal-flecha:hover, .pl-cal-hoy:hover, .pl-cal-vista:not(.pl-cal-vista-activa):hover { background: var(--primary-50); }
.dark .pl-cal-flecha:hover, .dark .pl-cal-hoy:hover, .dark .pl-cal-vista:not(.pl-cal-vista-activa):hover { background: #3f3f46; }
.pl-cal-periodo { font-size: 1.15rem; font-weight: 700; margin-left: 0.4rem; }

.pl-cal-filtros { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pl-cal-filtro {
    padding: 0.4rem 0.8rem; min-height: 36px; border-radius: 9999px; font-size: 0.9rem;
    border: 1px solid rgba(127, 127, 127, 0.35); opacity: 0.6; text-decoration: line-through;
}
.pl-cal-filtro-activo { opacity: 1; text-decoration: none; border-color: var(--primary-600); background: var(--primary-50); color: #171614; }
.dark .pl-cal-filtro-activo { background: rgba(214, 81, 8, 0.25); color: #fff; }

.pl-cal-totales, .pl-cal-leyenda { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.95rem; }
.pl-cal-leyenda { font-size: 0.85rem; opacity: 0.8; }
.pl-cal-punto { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 9999px; margin-right: 0.35rem; vertical-align: -0.05rem; }

/* Colores de estado: fondo suave y borde fuerte a la izquierda. */
.pl-cal-pagado { --pl-cal-fondo: #dcfce7; --pl-cal-borde: #16a34a; --pl-cal-texto: #14532d; }
.pl-cal-por-autorizar { --pl-cal-fondo: #fef9c3; --pl-cal-borde: #ca8a04; --pl-cal-texto: #713f12; }
.pl-cal-vencido { --pl-cal-fondo: #fee2e2; --pl-cal-borde: #dc2626; --pl-cal-texto: #7f1d1d; }
.pl-cal-proximo { --pl-cal-fondo: #f4f4f5; --pl-cal-borde: #a1a1aa; --pl-cal-texto: #3f3f46; }
.pl-cal-omitido { --pl-cal-fondo: transparent; --pl-cal-borde: #d4d4d8; --pl-cal-texto: #71717a; }
.dark .pl-cal-pagado { --pl-cal-fondo: rgba(22, 163, 74, 0.22); --pl-cal-texto: #bbf7d0; }
.dark .pl-cal-por-autorizar { --pl-cal-fondo: rgba(202, 138, 4, 0.25); --pl-cal-texto: #fef08a; }
.dark .pl-cal-vencido { --pl-cal-fondo: rgba(220, 38, 38, 0.25); --pl-cal-texto: #fecaca; }
.dark .pl-cal-proximo { --pl-cal-fondo: rgba(161, 161, 170, 0.18); --pl-cal-texto: #e4e4e7; }
.dark .pl-cal-omitido { --pl-cal-texto: #a1a1aa; }
.pl-cal-punto.pl-cal-pagado, .pl-cal-punto.pl-cal-por-autorizar, .pl-cal-punto.pl-cal-vencido, .pl-cal-punto.pl-cal-proximo { background: var(--pl-cal-borde); }

.pl-cal-evento {
    display: block; width: 100%; text-align: left; margin-top: 0.35rem; padding: 0.5rem 0.6rem;
    border-radius: 0.45rem; border-left: 4px solid var(--pl-cal-borde);
    background: var(--pl-cal-fondo); color: var(--pl-cal-texto); line-height: 1.25;
}
.pl-cal-evento:hover { filter: brightness(0.96); }
.pl-cal-evento-titulo { display: block; font-weight: 600; font-size: 0.95rem; overflow-wrap: anywhere; }
.pl-cal-evento-datos { display: block; font-size: 0.85rem; margin-top: 0.15rem; }
.pl-cal-evento-compacto { padding: 0.2rem 0.4rem; margin-top: 0.2rem; }
.pl-cal-evento-compacto .pl-cal-evento-titulo { font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-cal-omitido .pl-cal-evento-titulo { text-decoration: line-through; }

.pl-cal-insignia {
    display: inline-block; padding: 0.25rem 0.6rem; border-radius: 9999px; font-size: 0.85rem; font-weight: 600;
    background: var(--pl-cal-fondo); color: var(--pl-cal-texto); border: 1px solid var(--pl-cal-borde);
}
.pl-cal-detalle dd { text-align: right; overflow-wrap: anywhere; }
.pl-cal-detalle dt { opacity: 0.75; flex-shrink: 0; }

/* Mes: grilla en pantallas medianas y grandes. */
.pl-cal-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid rgba(127, 127, 127, 0.2); border-radius: 0.6rem; overflow: hidden; }
.pl-cal-cabecera { padding: 0.4rem; font-size: 0.8rem; font-weight: 700; text-align: center; background: rgba(127, 127, 127, 0.08); }
.pl-cal-celda { min-height: 7rem; padding: 0.3rem; border-top: 1px solid rgba(127, 127, 127, 0.2); border-left: 1px solid rgba(127, 127, 127, 0.2); min-width: 0; }
.pl-cal-celda:nth-child(7n + 1) { border-left: 0; }
.pl-cal-fuera { opacity: 0.45; }
.pl-cal-numero { font-weight: 700; font-size: 0.85rem; min-width: 1.8rem; min-height: 1.8rem; border-radius: 9999px; }
.pl-cal-numero:hover { background: var(--primary-50); }
.dark .pl-cal-numero:hover { background: #3f3f46; }
.pl-cal-hoy-celda .pl-cal-numero, .pl-cal-hoy-celda > .pl-cal-dia-titulo { color: var(--primary-600); }
.pl-cal-celda.pl-cal-hoy-celda { background: rgba(214, 81, 8, 0.06); }
.pl-cal-mas { font-size: 0.78rem; font-weight: 600; color: var(--primary-600); margin-top: 0.2rem; }
.pl-cal-mes-lista { display: none; }

/* Semana: siete columnas en pantallas grandes, días uno abajo del otro en el celular. */
.pl-cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; }
.pl-cal-dia { padding: 0.5rem; border: 1px solid rgba(127, 127, 127, 0.2); border-radius: 0.6rem; min-width: 0; }
.pl-cal-dia-titulo { font-weight: 700; font-size: 0.95rem; display: block; text-align: left; width: 100%; }
.pl-cal-dia.pl-cal-hoy-celda { border-color: var(--primary-600); }
.pl-cal-dia-solo { max-width: 40rem; }
.pl-cal-vacio { font-size: 0.9rem; opacity: 0.6; margin-top: 0.35rem; }

@media (max-width: 1023px) {
    .pl-cal-semana { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .pl-cal-mes { display: none; }
    .pl-cal-mes-lista { display: flex; flex-direction: column; gap: 0.6rem; }
    .pl-cal-barra { flex-direction: column; align-items: stretch; }
    .pl-cal-vistas { display: grid; grid-template-columns: repeat(4, 1fr); }
    .pl-cal-periodo { width: 100%; margin: 0.25rem 0 0; }
}

/* ---------- Empleados: ficha (resumen del mes arriba, pestañas abajo) ---------- */
.pl-ficha { display: flex; flex-direction: column; gap: 1rem; max-width: 56rem; }
.pl-ficha-resumen {
    border: 1px solid rgba(127, 127, 127, 0.25); border-radius: 0.9rem; padding: 1rem;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.pl-ficha-resumen .pl-desglose { margin-top: 0.25rem; }
.pl-ficha-falta {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    font-size: 1.05rem; font-weight: 600;
}
.pl-ficha-falta strong { font-size: 1.6rem; }
.pl-ficha-aviso { color: #b45309; font-size: 0.9rem; }
.dark .pl-ficha-aviso { color: #fbbf24; }
.pl-ficha-nota { font-size: 0.85rem; opacity: 0.75; }
.pl-ficha-botones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pl-ficha-botones > * { flex: 1 1 9rem; }
.pl-ficha-botones .fi-btn { width: 100%; min-height: 48px; }
.pl-ficha-subtitulo { font-weight: 700; margin-top: 1rem; margin-bottom: 0.5rem; }
.pl-ficha-mov {
    border-bottom: 1px solid rgba(127, 127, 127, 0.15); padding: 0.6rem 0;
    display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start;
}
.pl-ficha-mov-linea { display: flex; justify-content: space-between; gap: 1rem; width: 100%; }
.pl-ficha-mov-datos { font-size: 0.85rem; opacity: 0.75; }
.pl-ficha-mov-anulado .pl-ficha-mov-linea { text-decoration: line-through; opacity: 0.55; }
section[aria-label] > .pl-cal-nav { margin-bottom: 0.5rem; }

/* =====================================================================
 * Tema del rediseño (lienzo "PuntoLiving Gestión · Rediseño"):
 * fondo gris cálido, tarjetas blancas muy redondeadas, menú en una tarjeta
 * con la opción activa en una píldora negra, botones y pestañas en píldora.
 * El color de acento es el "primary" de Filament: el naranja de la empresa
 * o el color de la sucursal que se está mirando (App\Http\Middleware\ColorDeSucursal).
 * ===================================================================== */
:root {
    --pl-fondo: #ECE8E2;
    --pl-tarjeta: #FFFFFF;
    --pl-suave: #F3F0EB;
    --pl-borde: #E2DDD5;
    --pl-texto: #171614;
    --pl-texto-2: #6B6660;
    --pl-pildora: #171614;      /* opción activa del menú y pestaña elegida */
    --pl-pildora-texto: #FFFFFF;
    --pl-radio: 24px;
}

.dark {
    --pl-fondo: #141311;
    --pl-tarjeta: #1F1D1B;
    --pl-suave: #2A2725;
    --pl-borde: #38342F;
    --pl-texto: #F3F0EB;
    --pl-texto-2: #A8A29A;
    --pl-pildora: #F3F0EB;
    --pl-pildora-texto: #171614;
}

/* Fondo y barra de arriba */
.fi-body,
.fi-body:where(.dark, .dark *) { background-color: var(--pl-fondo); }
.fi-topbar,
.fi-topbar:where(.dark, .dark *) { background-color: var(--pl-fondo); box-shadow: none; }
.fi-sidebar-header,
.fi-sidebar-header:where(.dark, .dark *) { background-color: transparent; box-shadow: none; }

/* Menú: una tarjeta blanca redondeada (en compu); en el celular es el cajón de siempre */
@media (min-width: 64rem) {
    .fi-sidebar .fi-sidebar-nav {
        background: var(--pl-tarjeta);
        border-radius: 28px;
        margin: 0.25rem 0.75rem 1rem 1rem;
        padding: 1rem 0.75rem;
    }
}
.fi-sidebar-group-label { font-size: 0.75rem; font-weight: 600; color: var(--pl-texto-2); }
.fi-sidebar-item-btn { border-radius: 999px; min-height: 44px; padding-inline: 0.85rem; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *) { background-color: var(--pl-pildora); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon { color: var(--pl-pildora-texto); font-weight: 700; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon { color: var(--primary-400); }

/* Título de cada pantalla: grande, con el punto del color de acento */
.fi-header-heading { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
@media (min-width: 48rem) { .fi-header-heading { font-size: 2.5rem; } }
.fi-header-heading::after { content: "."; color: var(--primary-600); }

/* Tarjetas: secciones, tablas, recuadros del tablero y ventanas */
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-widget > .fi-section {
    border-radius: var(--pl-radio);
    box-shadow: none;
    background-color: var(--pl-tarjeta);
}
.fi-section:not(.fi-section-not-contained):where(.dark, .dark *),
.fi-ta-ctn:where(.dark, .dark *),
.fi-wi-stats-overview-stat:where(.dark, .dark *) { background-color: var(--pl-tarjeta); box-shadow: none; }
.fi-wi-stats-overview-stat { border-radius: 20px; }
.fi-modal-window { border-radius: 28px; }
.fi-dropdown-panel { border-radius: 18px; }

/* Encabezado de las tablas: una banda suave redondeada */
.fi-ta-table thead tr { background: var(--pl-suave); }
.fi-ta-table thead th:first-child { border-start-start-radius: 14px; border-end-start-radius: 14px; }
.fi-ta-table thead th:last-child { border-start-end-radius: 14px; border-end-end-radius: 14px; }

/* Botones, insignias y campos */
.fi-btn { border-radius: 999px; font-weight: 700; }
.fi-btn-group > .fi-btn { border-radius: 0; }
.fi-badge { border-radius: 999px; }
.fi-input-wrp { border-radius: 14px; }

/* Pestañas en píldora, la elegida en negro */
.fi-tabs:not(.fi-contained) {
    background: var(--pl-tarjeta);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
}
.fi-tabs-item { border-radius: 999px; min-height: 40px; padding-inline: 1rem; }
.fi-tabs-item.fi-active,
.fi-tabs-item.fi-active:where(.dark, .dark *) { background-color: var(--pl-pildora); }
.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-tabs-item-icon { color: var(--pl-pildora-texto); font-weight: 700; }

/* Encabezado: el punto pegado al título (flex quita el espacio del final) */
.fi-header-heading { display: flex; align-items: baseline; }
.pl-punto-final { color: var(--primary-600); }
.pl-punto-sucursal { display: inline-block; width: 10px; height: 10px; border-radius: 999px; flex: none; }

/* ---------- Inicio (diseño nuevo) ---------- */
.pl-inicio { display: flex; flex-direction: column; gap: 1.25rem; }
.pl-inicio-numeros {
    background: var(--pl-tarjeta);
    border-radius: 28px;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.pl-inicio-numero {
    border-radius: 20px;
    padding: 1rem 1.15rem;
    background: var(--pl-suave);
    color: var(--pl-texto);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-decoration: none;
}
.pl-inicio-numero:hover { outline: 2px solid var(--pl-borde); }
.pl-inicio-numero-destacado { background: #171614; color: #FFFFFF; }
.dark .pl-inicio-numero-destacado { background: var(--primary-700); }
.pl-inicio-numero-titulo { font-size: 0.85rem; font-weight: 600; opacity: 0.85; }
.pl-inicio-numero-valor { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.pl-inicio-numero-detalle { font-size: 0.8rem; opacity: 0.8; }

.pl-inicio-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.pl-inicio-tarjeta { background: var(--pl-tarjeta); border-radius: var(--pl-radio); padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.pl-inicio-tarjeta-titulo { margin: 0; font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
.pl-inicio-contador { font-size: 0.8rem; font-weight: 700; padding: 1px 9px; border-radius: 999px; background: #FFDD4A; color: #171614; }
.pl-inicio-enlace { margin-left: auto; font-size: 0.8rem; font-weight: 700; color: var(--pl-texto); text-decoration: underline; }
.pl-inicio-vacio { margin: 0; font-size: 0.9rem; color: var(--pl-texto-2); }

.pl-inicio-objetivo { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.25rem 0.75rem; align-items: center; font-size: 0.9rem; }
.pl-inicio-objetivo-nombre { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.pl-inicio-objetivo-barra { height: 10px; border-radius: 999px; background: var(--pl-suave); overflow: hidden; }
.pl-inicio-objetivo-barra > span { display: block; height: 100%; border-radius: 999px; }
.pl-inicio-objetivo-texto { grid-column: 2; font-size: 0.8rem; color: var(--pl-texto-2); }

.pl-inicio-fila { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 16px; background: var(--pl-suave); }
.pl-inicio-fila-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.9rem; }
.pl-inicio-fila-texto strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-inicio-fila-texto span { font-size: 0.78rem; color: var(--pl-texto-2); }
.pl-inicio-fila-monto { font-weight: 800; white-space: nowrap; }
.pl-inicio-fecha { width: 2.6rem; flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.pl-inicio-fecha strong { font-size: 1.15rem; font-weight: 800; }
.pl-inicio-fecha span { font-size: 0.7rem; text-transform: uppercase; color: var(--pl-texto-2); }
.pl-inicio-fecha-vencida strong { color: #B42318; }
.pl-inicio-boton {
    align-self: flex-start;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    background: var(--pl-pildora);
    color: var(--pl-pildora-texto);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
}

/* ---------- Calendario (diseño nuevo) ---------- */
.pl-cal-vistas { border: none; border-radius: 999px; background: var(--pl-tarjeta); padding: 4px; gap: 4px; overflow: visible; }
.pl-cal-vista { border-radius: 999px; min-height: 40px; padding: 0 1rem; font-size: 0.9rem; }
.pl-cal-vista + .pl-cal-vista { border-left: none; }
.pl-cal-vista-activa { background: var(--pl-pildora); color: var(--pl-pildora-texto); }
.pl-cal-flecha, .pl-cal-hoy { border: none; border-radius: 999px; background: var(--pl-tarjeta); min-width: 44px; }
.pl-cal-periodo { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.pl-cal-periodo::after { content: "."; color: var(--primary-600); }

.pl-cal-filtro { border: 1px solid var(--pl-borde); background: var(--pl-tarjeta); }
.pl-cal-filtro-activo { border-color: var(--pl-pildora); background: var(--pl-pildora); color: var(--pl-pildora-texto); }
.dark .pl-cal-filtro-activo { background: var(--pl-pildora); color: var(--pl-pildora-texto); }

.pl-cal-totales { background: var(--pl-tarjeta); border-radius: 999px; padding: 0.6rem 1.1rem; align-self: flex-start; font-weight: 600; }

/* Mes: una tarjeta blanca con los días como baldosas redondeadas */
.pl-cal-mes { gap: 6px; border: none; border-radius: var(--pl-radio); background: var(--pl-tarjeta); padding: 12px; overflow: visible; }
.pl-cal-cabecera { background: none; text-align: left; padding: 0.25rem 0.5rem; color: var(--pl-texto-2); font-weight: 600; }
.pl-cal-celda { border: none; border-radius: 16px; background: var(--pl-suave); padding: 0.45rem; min-height: 6.5rem; }
.pl-cal-fuera { opacity: 0.5; background: transparent; }
.pl-cal-celda.pl-cal-hoy-celda { background: var(--primary-50); box-shadow: inset 0 0 0 2px var(--primary-600); }
.dark .pl-cal-celda.pl-cal-hoy-celda { background: color-mix(in oklab, var(--primary-600) 18%, transparent); }
.pl-cal-hoy-celda .pl-cal-numero { background: var(--primary-600); color: #fff; }
.pl-cal-evento { border-radius: 8px; border-left-width: 3px; }

.pl-cal-semana .pl-cal-dia, .pl-cal-dia-solo, .pl-cal-mes-lista .pl-cal-dia { border: none; border-radius: 18px; background: var(--pl-tarjeta); padding: 0.75rem; }
.pl-cal-dia.pl-cal-hoy-celda { box-shadow: inset 0 0 0 2px var(--primary-600); }
.pl-cal-filtro { background: transparent; }
.pl-cal-filtro-activo,
.dark .pl-cal-filtro-activo { background: var(--pl-tarjeta); color: var(--pl-texto); border-color: var(--pl-pildora); font-weight: 600; }

/* Botón principal: el color de acento lleno con letra blanca (Filament, por contraste, lo
   aclaraba con letra oscura). Se usa el tono 700 para que la letra blanca se lea bien. */
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link),
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):where(.dark, .dark *) { background-color: var(--primary-700); color: #FFFFFF; }
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):hover { background-color: var(--primary-800); }
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) .fi-icon { color: #FFFFFF; }

/* ---------- Caja diaria y Cuentas y bancos (diseño nuevo) ---------- */
.pl-cajas { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 10px; }
.pl-caja { border: none; border-radius: 20px; background: var(--pl-suave); padding: 0.9rem 1rem; }
.pl-caja-link:hover { box-shadow: inset 0 0 0 2px var(--pl-pildora); }
.pl-caja-nombre { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; opacity: 1; color: var(--pl-texto-2); }
.pl-caja-saldo { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; }
.fi-wi-stats-overview-stat-value { font-weight: 800; letter-spacing: -0.03em; }
.pl-caja-saldo { font-size: 1.3rem; white-space: nowrap; }
.pl-cajas { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }

/* Celular: los números del inicio de a dos */
@media (max-width: 640px) {
    .pl-inicio-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-inicio-numero { padding: 0.8rem 0.9rem; }
    .pl-inicio-numero-valor { font-size: 1.15rem; }
    .pl-inicio-objetivo { grid-template-columns: 6.5rem 1fr; }
}
.pl-inicio-numero-alerta { background: #FDE4E1; color: #7F1D1D; }
.dark .pl-inicio-numero-alerta { background: rgba(220, 38, 38, 0.22); color: #FECACA; }
.pl-inicio-numero-barra { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); overflow: hidden; margin: 0.15rem 0; }
.pl-inicio-numero-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--primary-500); }
.pl-sucursal-chip { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.pl-cliente { display: inline-flex; align-items: center; gap: 0.7rem; }
.pl-iniciales {
    width: 36px; height: 36px; flex: none; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pl-pildora); color: var(--pl-pildora-texto); font-size: 0.75rem; font-weight: 800;
}

/* Botones de opciones (Precios de la lista, Facturación, etc.): solo la elegida va con el
   color de acento; las demás, blancas con borde. */
.fi-fo-toggle-buttons-btn-ctn > .fi-btn.fi-color-primary[aria-pressed="false"],
.fi-fo-toggle-buttons-btn-ctn > input:not(:checked) + .fi-btn.fi-color-primary {
    background-color: var(--pl-tarjeta);
    color: var(--pl-texto);
    box-shadow: inset 0 0 0 1.5px var(--pl-borde);
    font-weight: 600;
}
.fi-fo-toggle-buttons-btn-ctn > .fi-btn.fi-color-primary[aria-pressed="false"]:hover,
.fi-fo-toggle-buttons-btn-ctn > input:not(:checked) + .fi-btn.fi-color-primary:hover {
    background-color: var(--pl-suave);
}
.fi-fo-toggle-buttons-btn-ctn > .fi-btn.fi-color-primary[aria-pressed="false"] .fi-icon,
.fi-fo-toggle-buttons-btn-ctn > input:not(:checked) + .fi-btn.fi-color-primary .fi-icon { color: var(--pl-texto-2); }

/* ---------- E-cheqs, Cuentas y bancos, Impuestos (diseño nuevo) ---------- */
.pl-inicio-numero-positivo { background: #DDF0E3; color: #14532D; }
.dark .pl-inicio-numero-positivo { background: rgba(22, 163, 74, 0.22); color: #BBF7D0; }

.pl-total-empresa {
    background: #171614; color: #FFFFFF; border-radius: 28px; padding: 1.4rem 1.5rem;
    display: flex; flex-direction: column; gap: 1rem;
}
.dark .pl-total-empresa { background: var(--pl-tarjeta); }
.pl-total-empresa-titulo { margin: 0; font-size: 0.9rem; font-weight: 600; color: #EBD3C0; }
.pl-total-empresa .pl-total-etiqueta { color: #EBD3C0; opacity: 1; }
.pl-total-empresa .pl-total-valor { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
.pl-total-empresa .pl-negativo { color: #FCA5A5; }
.pl-total-empresa .pl-personal { background: #FFDD4A; color: #171614; }

.pl-avance-mini { display: block; width: 6rem; height: 6px; margin-top: 0.35rem; border-radius: 999px; background: var(--pl-suave); overflow: hidden; }
.pl-avance-mini > span { display: block; height: 100%; border-radius: 999px; background: #1E7A46; }
.pl-inicio-fila-link { text-decoration: none; color: inherit; }
.pl-inicio-fila-link:hover { box-shadow: inset 0 0 0 2px var(--pl-borde); }

/* ---------- Cola de producción: color según cuánto falta para la entrega ---------- */
.pl-urgencia { display: inline-flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem 0.7rem; border-radius: 12px; font-size: 0.8rem; line-height: 1.2; background: var(--pl-suave); color: var(--pl-texto); }
.pl-urgencia strong { font-size: 0.9rem; }
.pl-urgencia-tres { background: #DDF0E3; color: #14532D; }
.pl-urgencia-dos { background: #FFF3B0; color: #5C4A00; }
.pl-urgencia-semana { background: #EADFFD; color: #4C1D95; }
.pl-urgencia-tarde { background: #FDE4E1; color: #9F1C12; }
.pl-urgencia-sin, .pl-urgencia-lejos { background: var(--pl-suave); color: var(--pl-texto-2); }
.dark .pl-urgencia-tres { background: rgba(22, 163, 74, 0.25); color: #BBF7D0; }
.dark .pl-urgencia-dos { background: rgba(234, 179, 8, 0.25); color: #FEF08A; }
.dark .pl-urgencia-semana { background: rgba(124, 58, 237, 0.3); color: #DDD6FE; }
.dark .pl-urgencia-tarde { background: rgba(220, 38, 38, 0.28); color: #FECACA; }
.pl-urgencia-leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0; }
.pl-urgencia-leyenda .pl-urgencia { flex-direction: row; align-items: center; gap: 0.4rem; font-weight: 600; border: 2px solid transparent; cursor: pointer; transition: opacity 0.15s, border-color 0.15s; }
.pl-urgencia-leyenda .pl-urgencia:hover { border-color: currentColor; }
.pl-urgencia-leyenda .pl-urgencia-elegida { border-color: currentColor; }
.pl-urgencia-leyenda .pl-urgencia-apagada { opacity: 0.45; }

/* Menú sin barra de desplazamiento visible (se sigue bajando con la rueda o el dedo) */
.fi-sidebar-nav { scrollbar-width: none; }
.fi-sidebar-nav::-webkit-scrollbar { display: none; }

/* =====================================================================
 * Más del rediseño: el color de la sucursal bien visible (también en modo claro),
 * tarjeta de sucursal arriba del menú y tarjeta del usuario abajo.
 * ===================================================================== */

/* Opción activa del menú con el color de la sucursal (antes negra: en modo claro no se notaba). */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *) { background-color: var(--primary-700); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon { color: #FFFFFF; }

/* Una línea del color de la sucursal arriba de todo. */
.fi-topbar { box-shadow: inset 0 3px 0 var(--primary-600); }

/* El número destacado del inicio, del color de la sucursal también en modo claro. */
.pl-inicio-numero-destacado { background: var(--primary-700); color: #FFFFFF; }
.pl-inicio-numero-destacado .pl-inicio-numero-barra { background: rgba(255, 255, 255, 0.25); }
.pl-inicio-numero-destacado .pl-inicio-numero-barra > span { background: #FFFFFF; }
.pl-inicio-numero-accion { border: 2px dashed var(--primary-500); color: var(--primary-600); justify-content: center; }
.dark .pl-inicio-numero-accion { color: var(--primary-300); }
.pl-inicio-numero-accion:hover { background: color-mix(in srgb, var(--primary-500) 12%, transparent); }

/* Arriba al lado del logo: tarjeta del usuario y sucursal que se mira, del mismo alto y centradas */
.fi-topbar-start { align-items: center; }
.fi-topbar-start .fi-logo { margin-block: 0; padding-top: 0.2rem; }
/* El logo, del mismo alto que las tarjetas de al lado, con aire arriba y abajo */
.fi-topbar { min-height: 4.25rem; }
.fi-user-menu-trigger { display: flex; align-items: center; border-radius: 999px; }
.pl-menu-usuario, .pl-menu-sucursal { box-sizing: border-box; height: 2.75rem; flex: none; align-self: center; }
/* Texto solo para lectores de pantalla (Filament no trae la clase sr-only en nuestro CSS) */
.pl-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Tarjeta del usuario, con el color de la sucursal que se mira */
.pl-menu-usuario {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0 0.8rem 0 0.3rem; border-radius: 999px;
    background: var(--primary-700); color: #FFFFFF; text-align: start; cursor: pointer;
}
.pl-menu-usuario:hover { background: var(--primary-800); }
.pl-menu-usuario-flecha { flex: none; opacity: 0.85; }
.pl-menu-usuario-iniciales {
    width: 32px; height: 32px; flex: none; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: #FFFFFF; color: var(--primary-800); font-size: 0.72rem; font-weight: 800;
}
.pl-menu-usuario-texto { display: flex; flex-direction: column; min-width: 0; font-size: 0.82rem; line-height: 1.15; }
.pl-menu-usuario-texto strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; }
.pl-menu-usuario-texto span { font-size: 0.72rem; opacity: 0.9; white-space: nowrap; }

/* Sucursal que se mira, con su color */
.pl-menu-sucursal {
    display: flex; align-items: center; gap: 0.5rem;
    margin-inline-start: 1rem; padding: 0 0.6rem 0 0.3rem; border-radius: 999px;
    border: 2px solid var(--pl-color-sucursal);
    background: color-mix(in oklab, var(--pl-color-sucursal) 14%, var(--pl-tarjeta));
}
.pl-menu-sucursal form { display: flex; align-items: center; margin: 0; }
.pl-menu-sucursal-icono {
    width: 32px; height: 32px; flex: none; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--pl-color-sucursal); color: #FFFFFF;
}
.pl-menu-sucursal-nombre { font-weight: 700; font-size: 0.85rem; padding-inline-end: 0.3rem; white-space: nowrap; }
.pl-menu-sucursal-select {
    max-width: 10rem; field-sizing: content; height: 2rem; min-height: 0; margin: 0;
    padding: 0 1.6rem 0 0.15rem; line-height: 2rem; border: none; background-color: transparent;
    background-position: right 0.1rem center;
    font-weight: 700; font-size: 0.85rem; color: var(--pl-texto); cursor: pointer;
}
.pl-menu-sucursal-select:focus { box-shadow: none; }
.pl-menu-sucursal-select option { color: #171614; }

/* En el celular: solo los círculos (iniciales y sucursal con su nombre corto) */
@media (max-width: 40rem) {
    .pl-menu-usuario { padding: 0 0.3rem; }
    .pl-menu-usuario-texto, .pl-menu-usuario-flecha { display: none; }
}
.pl-inicio-numero-comparacion { font-size: 0.8rem; font-weight: 700; }
.pl-inicio-entregas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0.5rem; }

/* Caja diaria: cuadradito con el signo del movimiento */
.pl-mov { display: inline-flex; align-items: center; gap: 0.7rem; }
.pl-mov-signo {
    width: 34px; height: 34px; flex: none; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem;
}
.pl-mov-ingreso { background: #DDF0E3; color: #14532D; }
.pl-mov-gasto { background: #FDE4E1; color: #9F1C12; }
.pl-mov-transferencia { background: var(--pl-suave); color: var(--pl-texto); }
.dark .pl-mov-ingreso { background: rgba(22, 163, 74, 0.25); color: #BBF7D0; }
.dark .pl-mov-gasto { background: rgba(220, 38, 38, 0.25); color: #FECACA; }

/* Ficha del empleado: cuánto lleva de anticipos sobre el tope del 50 % de la nómina */
.pl-anticipo-tope { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.85rem 1rem; border-radius: 1rem; background: var(--pl-suave); }
.pl-anticipo-tope-texto { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; font-size: 0.9rem; }
.pl-anticipo-barra { display: block; height: 10px; border-radius: 999px; background: rgb(0 0 0 / 0.08); overflow: hidden; }
.dark .pl-anticipo-barra { background: rgb(255 255 255 / 0.1); }
.pl-anticipo-barra > span { display: block; height: 100%; border-radius: 999px; background: #1E7A46; }
.pl-anticipo-barra-alto > span { background: #CA8A04; }
.pl-anticipo-barra-tope > span { background: #b42318; }

/* Ficha del empleado: cuánto del sueldo o del aguinaldo es en blanco y cuánto en negro */
.pl-desglose-partes dt { padding-inline-start: 0.9rem; font-size: 0.8rem; color: var(--pl-texto-2); }

/* Calendario: lo que hay que cobrar (e-cheqs que nos dieron y saldos de pedidos) se marca con un + verde */
.pl-cal-signo-cobro {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 1.05rem; height: 1.05rem; margin-inline-end: 0.3rem; border-radius: 999px;
    background: #1E7A46; color: #FFFFFF; font-size: 0.75rem; font-weight: 800; line-height: 1; vertical-align: 0.05em;
}
.pl-cal-evento-cobro { box-shadow: inset 0 0 0 1px rgb(30 122 70 / 0.35); }
.pl-cal-evento-cobrar { display: flex; align-items: center; margin-top: 0.2rem; font-size: 0.78rem; font-weight: 700; color: #1E7A46; }
.dark .pl-cal-evento-cobrar { color: #86EFAC; }
.pl-cal-leyenda .pl-cal-signo-cobro { width: 0.95rem; height: 0.95rem; }

/* ---------- Pedidos: dos filas de tarjetas (Vendido ocupa un lugar y Falta cobrar tres) ---------- */
.pl-inicio-numeros.pl-inicio-numeros-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pl-inicio-numero-doble { grid-column: span 2; }
.pl-inicio-numero-triple { grid-column: span 3; }
.pl-inicio-numero-filas { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 0.35rem; padding-top: 0.5rem; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 20%, transparent); font-size: 0.8rem; }
.pl-inicio-numero-filas > span { display: inline-flex; gap: 0.4rem; }
.pl-inicio-numero-filas > span > span { opacity: 0.8; }
@media (max-width: 640px) {
    .pl-inicio-numeros.pl-inicio-numeros-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* En el celular, las dos de plata van una debajo de la otra, a todo el ancho. */
    .pl-inicio-numeros-4 > .pl-inicio-numero:nth-child(-n+2) { grid-column: span 2; }
}

/* ---------- Calendario: vacaciones como una barra que cruza los días del mes ---------- */
/* Cada día es un tramo; se estira hasta la mitad del espacio entre celdas para pegarse al de al lado. */
.pl-cal-mes .pl-cal-tramo { --pl-tramo-extra: calc(0.45rem + 3px); }
.pl-cal-mes .pl-cal-tramo-sigue { width: calc(100% + var(--pl-tramo-extra)); margin-right: calc(-1 * var(--pl-tramo-extra)); border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pl-cal-mes .pl-cal-tramo-viene { width: calc(100% + var(--pl-tramo-extra)); margin-left: calc(-1 * var(--pl-tramo-extra)); border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pl-cal-mes .pl-cal-tramo-viene.pl-cal-tramo-sigue { width: calc(100% + 2 * var(--pl-tramo-extra)); }
/* El nombre va en el primer tramo de la semana y puede ocupar todos los días de ese renglón. */
.pl-cal-mes .pl-cal-tramo .pl-cal-evento-titulo { position: relative; z-index: 1; width: calc(var(--pl-tramo-dias, 1) * (100% + 0.9rem + 6px) - 1.4rem); }
.pl-cal-mes .pl-cal-tramo-oculto { visibility: hidden; }

/* Ficha del empleado: enlaces de cada baja en un renglón */
.pl-ficha-botones-link { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 0.35rem; }

/* Calendario: bajas de empleados (no son plata: azul si está justificada, rojo suave si no) */
.pl-cal-baja { --pl-cal-fondo: #dbeafe; --pl-cal-borde: #2563eb; --pl-cal-texto: #1e3a8a; }
.pl-cal-baja-sin { --pl-cal-fondo: #fee2e2; --pl-cal-borde: #f87171; --pl-cal-texto: #7f1d1d; }
.dark .pl-cal-baja { --pl-cal-fondo: rgba(37, 99, 235, 0.25); --pl-cal-texto: #bfdbfe; }
.dark .pl-cal-baja-sin { --pl-cal-fondo: rgba(248, 113, 113, 0.2); --pl-cal-texto: #fecaca; }
.pl-cal-punto.pl-cal-baja, .pl-cal-punto.pl-cal-baja-sin { background: var(--pl-cal-borde); }

/* ---------- Menú plegado (compu): íconos centrados y el contenido aprovecha el lugar ----------
   Medido en el navegador: el nombre de cada pantalla quedaba en el botón (8 px + 12 px de separación)
   y corría el ícono 10 px a la izquierda; el de la pantalla abierta, además, no se centraba porque
   Filament lo pone en columna. */
@media (min-width: 64rem) {
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav { margin: 0.25rem 0.5rem 1rem 0.75rem; padding: 0.85rem 0.35rem; scrollbar-gutter: auto; }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups { width: 100%; margin-inline: 0; }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item { display: flex; align-items: center; justify-content: center; }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn,
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn { width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; margin-inline: auto; border-radius: 999px; }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-label,
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-badge-ctn,
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-grouped-border { display: none; }
    /* Plegado, en el menú de Administración (con accesos directos sueltos) solo quedan esos:
       los grupos (Ventas, Clientes, Fábrica…) se ven al abrir el menú. Los demás usuarios,
       que tienen todo en grupos, siguen viendo sus íconos. */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups:has(> .fi-sidebar-group[data-group-label=""] .fi-sidebar-group-items > li:nth-child(2))
        > .fi-sidebar-group:not([data-group-label=""]) { display: none; }
    /* Con el menú plegado, menos margen a los costados del contenido. */
    .fi-main-ctn:not(.fi-main-ctn-sidebar-open) .fi-main { padding-inline: 1.25rem; max-width: 92rem; }
}

/* Pedido: entrega prometida urgente (a menos de 1,5 semanas), la fecha en rojo */
.pl-entrega-urgente input, .pl-entrega-urgente .fi-input { color: #dc2626 !important; font-weight: 700; }

/* Configuración → Productos: los SubLOB de cada LOB en su desplegable */
.pl-sublobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; padding-top: 0.25rem; }
.pl-sublob { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.65rem 0.85rem; border-radius: 14px; background: var(--pl-suave); color: inherit; text-decoration: none; transition: background 0.15s; }
.pl-sublob:hover { background: color-mix(in srgb, var(--primary-500) 14%, var(--pl-suave)); }
.pl-sublob-nombre { font-weight: 700; }
.pl-sublob-detalle { font-size: 0.8rem; opacity: 0.75; }
.pl-sublob-inactivo { opacity: 0.55; }
.pl-sublob-vacio { font-size: 0.85rem; opacity: 0.7; margin: 0; }