/* Ajustes propios sobre el tema base de Filament */

.fi-logo {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.fi-simple-header-heading {
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.75;
}

.fi-simple-header-subheading {
    font-size: 0.875rem;
}

/* Fotos de Aros: con panelLayout('grid'), cada ficha subida
   se estiraba a ocupar todo el ancho de la fila (solo la foto de adentro
   se achicaba con imagePreviewHeight). Se limita el ancho de la ficha
   para que varias quepan por fila, sin tocar el tamaño de la foto de
   adentro (eso lo sigue controlando imagePreviewHeight en el codigo). */
.fi-fo-file-upload .filepond--item {
    max-width: 160px;
}

/* Boton para colapsar el menu: se probaron varias posiciones
   flotando en el borde entre el menu y el contenido (estilo VS Code) y
   ninguna termino bien (a la mitad de pantalla estorbaba, invisible no se
   encontraba, arriba tapaba el logo). Se opto por usar el boton propio de
   Filament junto al logo (Opcion A elegida por el usuario), que ya viene
   bien resuelto de fabrica: nunca se mueve de lugar ni tapa nada. Por eso
   ya NO se esconde `.fi-topbar-collapse-sidebar-btn-ctn`. Se probo agregar
   doble clic en el area vacia como segunda forma de abrirlo, pero en movil
   el doble toque es poco confiable (choca con el zoom nativo) y el boton
   ya es suficiente por si solo, asi que se quito. */

/* Quitar las flechitas de subir/bajar en campos numericos: se escriben a mano
   (graduaciones, distancia pupilar, altura, curva base, edad, etc), no se cuentan. */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Tabla de graduacion (RX): encabezado destacado + fila OI con fondo suave */

.rx-fila-encabezado {
    background: var(--primary-50);
    border-radius: 8px 8px 0 0;
    padding: 0.5rem 0.75rem;
    align-items: center;
}

.rx-fila-encabezado > * {
    color: var(--primary-700);
}

.rx-fila-od {
    padding: 0.5rem 0.75rem;
    align-items: center;
}

.rx-fila-oi {
    background: var(--surface-color, rgba(0, 0, 0, 0.02));
    border-radius: 0 0 8px 8px;
    padding: 0.5rem 0.75rem;
    align-items: center;
}

.dark .rx-fila-oi {
    background: rgba(255, 255, 255, 0.03);
}

/* Graduacion en Crear/Editar Expediente, version movil: las
   filas OD/OI pasan a Grid::make(['default' => 2, 'lg' => 6]) en PHP, o sea
   que abajo de 1024px cada campo ya trae su propia etiqueta visible
   (Esfera, Cilindro, etc), en vez de depender de la fila de encabezado de
   arriba (que en pantallas angostas queda separada de los campos y no
   sirve de nada). Arriba de 1024px (breakpoint "lg", el mismo que usa
   Filament para pasar a 6 columnas) se oculta esa etiqueta por campo, para
   que la tabla compacta de siempre se vea exactamente igual que antes. */

@media (min-width: 1024px) {
    .rx-fila-od .fi-fo-field-label-col,
    .rx-fila-oi .fi-fo-field-label-col {
        display: none;
    }
}

@media (max-width: 1023.98px) {
    .rx-fila-encabezado {
        display: none;
    }
}

/* Vista "Ver" de Expediente: documento continuo sin cajas con borde (Section),
   con etiquetas de grupo en mayusculas y una caja suave para el historial
   clinico, tal como el diseño aprobado. */

.gto-encabezado-expediente {
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
}

.dark .gto-encabezado-expediente {
    border-color: var(--gray-700);
}

.gto-etiqueta-seccion {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-top: 1rem;
}

.gto-caja-notas {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.dark .gto-caja-notas {
    background: rgba(255, 255, 255, 0.03);
}

/* Tabla de graduacion en "Ver" Expediente: tabla HTML real en
   vez de Grid de Filament, envuelta en un contenedor que desliza hacia los
   lados en pantallas angostas (celular) en vez de romperse (bug real
   encontrado probando en un telefono de verdad: el Grid de 6 columnas se
   colapsaba a una sola columna, dejando las etiquetas y los valores
   apilados sueltos, sin relacion visible entre ellos). En pantalla ancha
   se ve igual que antes, no hace falta deslizar. */

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

.gto-graduacion-tabla {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.gto-graduacion-tabla thead th {
    text-align: center;
    padding: 0.5rem 0.625rem;
    background: var(--primary-50);
    color: var(--primary-700);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.gto-graduacion-tabla thead th:first-child {
    text-align: left;
    border-radius: 8px 0 0 0;
}

.gto-graduacion-tabla thead th:last-child {
    border-radius: 0 8px 0 0;
}

.gto-graduacion-tabla tbody td {
    text-align: center;
    padding: 0.5rem 0.625rem;
}

.gto-graduacion-ojo {
    text-align: left !important;
    font-weight: 700;
}

.gto-graduacion-fila-alterna {
    background: rgba(0, 0, 0, 0.02);
}

.dark .gto-graduacion-fila-alterna {
    background: rgba(255, 255, 255, 0.03);
}

/* Vista "Ver" de Venta (06/07/2026, Opcion B elegida por el usuario entre 3
   ilustradas: estilo factura moderna tipo Stripe/QuickBooks). Codigo y fecha
   a la izquierda, Total y Estado grandes a la derecha; franja compacta con
   los datos secundarios; tabla real de productos con encabezado discreto en
   mayusculas y el Total final alineado bajo la columna Subtotal. */

.gto-venta-header {
    padding-bottom: 1rem;
    margin-bottom: 0.75rem;
    align-items: flex-start;
}

.gto-venta-subtitulo {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.gto-venta-registro {
    font-size: 0.6875rem;
    color: var(--gray-400);
    text-align: right;
    display: block;
    margin-top: 1rem;
}

.gto-venta-franja {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.dark .gto-venta-franja {
    background: rgba(255, 255, 255, 0.03);
}

/* Notas del cierre de caja: antes se perdian como texto plano al final de la
   pantalla, ahora resaltan con fondo/borde ambar para que no se pasen por
   alto (ej. "Cero ingresos" explicando por que no hubo ventas ese dia). Fondo
   SOLIDO (no semitransparente) a proposito: una version mas sutil con alpha
   bajo no se notaba lo suficiente en la pantalla real. */
.gto-nota-destacada {
    background: #fef3c7 !important;
    border: 1px solid #f5c344 !important;
    border-left: 5px solid #d97706 !important;
    border-radius: 10px !important;
    padding: 0.85rem 1.1rem !important;
}

.gto-nota-destacada .gto-etiqueta-seccion {
    color: #92400e !important;
}

.dark .gto-nota-destacada {
    background: #3f2d0c !important;
    border-color: #78350f !important;
    border-left-color: #f59e0b !important;
}

.dark .gto-nota-destacada .gto-etiqueta-seccion {
    color: #fbbf24;
}

/* Version compacta: mismo aviso amarillo, pero con menos
   relleno alrededor, para notas cortas que no necesitan tanto espacio. */
.gto-nota-compacta {
    padding: 0.55rem 0.75rem !important;
}

/* Vista "Ver" unificada: una sola tarjeta con franja de color
   arriba segun el tipo de registro (Ventas, Creditos, Cierres de Caja,
   Remesas, Expedientes), envuelve las mismas secciones que ya existian
   (gto-venta-header, gto-venta-franja, tablas, gto-venta-tarjeta). El color de
   la franja se elige con una clase modificadora (gto-ver-venta, gto-ver-credito,
   etc), mismo patron ya usado en las tarjetas de Escritorio (gto-acceso-cN). */

.gto-ver-tarjeta {
    border: 1px solid var(--gray-200);
    border-top: 3px solid var(--acento-ver, var(--primary-500));
    border-radius: 12px;
    padding: 1.25rem;
}

.dark .gto-ver-tarjeta {
    border-color: var(--gray-700);
    border-top-color: var(--acento-ver, var(--primary-500));
}

.gto-ver-venta { --acento-ver: var(--primary-600); }
.gto-ver-credito { --acento-ver: #d97706; }
.gto-ver-cierre-caja { --acento-ver: #059669; }
.gto-ver-remesa { --acento-ver: #7c3aed; }
.gto-ver-expediente { --acento-ver: #0d9488; }
.gto-ver-aro { --acento-ver: var(--primary-600); }
.gto-ver-accesorio { --acento-ver: #0891b2; }

.gto-venta-tabla-encabezado {
    padding: 0 0.75rem 0.5rem;
    align-items: center;
}

.gto-venta-tabla-encabezado > * {
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.gto-venta-fila {
    padding: 0.5rem 0.75rem;
    align-items: center;
    border-top: 1px solid var(--gray-100);
}

.dark .gto-venta-fila {
    border-color: var(--gray-800);
}

.gto-venta-fila-total {
    padding: 0.6rem 0.75rem 0;
    align-items: center;
    border-top: 1px solid var(--gray-200);
    margin-top: 0.25rem;
}

.dark .gto-venta-fila-total {
    border-color: var(--gray-700);
}

.gto-venta-centro {
    text-align: center;
}

.gto-venta-derecha {
    text-align: right;
}

/* Resumen de pago (07/07/2026, Opcion B elegida por el usuario entre 3
   ilustradas): 2 tarjetas lado a lado en vez de una franja ancha con
   espacios muertos, mas facil de leer de un vistazo administrativo. */

.gto-venta-resumen-pago {
    gap: 1rem;
    align-items: stretch;
}

.gto-venta-tarjeta {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    padding: 0.875rem 1rem;
}

.dark .gto-venta-tarjeta {
    background: rgba(255, 255, 255, 0.03);
}

.gto-venta-badge-pago {
    margin-bottom: 0.5rem;
}

.gto-venta-fila-resumen {
    padding: 0.25rem 0;
    align-items: center;
}

.gto-venta-fila-saldo {
    border-top: 1px solid var(--gray-200);
    margin-top: 0.25rem;
    padding-top: 0.4rem;
}

.dark .gto-venta-fila-saldo {
    border-color: var(--gray-700);
}

/* Checkbox de seleccion en listados: se sigue pudiendo seleccionar varios y
   borrar en lote, solo que el cuadrito no se ve todo el tiempo. Aparece
   unicamente al activar el boton "Seleccionar varios" del listado (agrega la
   clase gto-seleccion-activa al body), o si ya hay algo marcado/enfocado, para
   no perder de vista una seleccion en curso. Funciona igual en celular, a
   diferencia del hover que ahi no existe. */

.fi-ta-record-checkbox,
.fi-ta-page-checkbox {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

body.gto-seleccion-activa .fi-ta-record-checkbox,
body.gto-seleccion-activa .fi-ta-page-checkbox,
.fi-ta-record-checkbox:checked,
.fi-ta-record-checkbox:focus,
.fi-ta-page-checkbox:checked,
.fi-ta-page-checkbox:focus {
    opacity: 1;
}

/* Cuadrito de seleccion mas visible cuando el modo "Seleccionar varios" esta
   activo: borde oscuro grueso y tamaño un poco mayor, para que se note bien
   en celular y PC (antes se veia demasiado tenue). Al marcarlo se rellena de
   negro. */
body.gto-seleccion-activa .fi-ta-record-checkbox,
body.gto-seleccion-activa .fi-ta-page-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 2px;
    border-color: #111827;
    accent-color: #111827;
}

/* Asistente de Expediente: stepper de circulos conectados por una linea recta
   (opcion "con barra de progreso" elegida por el usuario). El separador nativo
   de Filament es una flecha (chevron), no una linea, asi que se oculta y se
   dibuja una linea propia detras de los circulos. Solo aplica desde tablet/
   escritorio (mismo punto de corte que usa Filament); en movil se deja el
   comportamiento simple de un solo paso visible. */

.fi-sc-wizard-header-step-icon-ctn {
    transition: transform 0.15s ease-in-out;
}

.fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-icon-ctn {
    transform: scale(1.15);
}

@media (min-width: 48rem) {
    .fi-sc-wizard-header {
        display: flex;
        overflow-x: visible;
    }

    .fi-sc-wizard-header-step {
        flex: 1 1 0%;
    }

    .fi-sc-wizard-header-step-btn {
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        gap: 0.5rem;
        position: relative;
        z-index: 1;
    }

    .fi-sc-wizard-header-step-text {
        justify-items: center;
        text-align: center;
    }

    .fi-sc-wizard-header-step-separator {
        display: none;
    }

    .fi-sc-wizard-header-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 1.25rem;
        left: 50%;
        width: 100%;
        height: 2px;
        background-color: var(--gray-200);
    }

    .dark .fi-sc-wizard-header-step:not(:last-child)::after {
        background-color: var(--gray-700);
    }

    .fi-sc-wizard-header-step.fi-completed:not(:last-child)::after {
        background-color: var(--primary-500);
    }

    .fi-sc-wizard-header-step:not(.fi-completed) .fi-sc-wizard-header-step-icon-ctn {
        background-color: var(--color-white);
    }

    .dark .fi-sc-wizard-header-step:not(.fi-completed) .fi-sc-wizard-header-step-icon-ctn {
        background-color: var(--gray-900);
    }
}

/* Buscador y boton de filtros de las tablas: por defecto Filament los pone
   pegados a la derecha. Se prefiere que queden a la izquierda.
   La causa real no era el justify-content del contenedor: Filament pone
   margin-inline-start:auto al segundo hijo del toolbar (el que trae el
   buscador y el filtro), y ese margen automático manda por encima de
   cualquier justify-content del padre. Por eso hay que quitar ese margen
   directamente en el hijo. */

.fi-ta-header-toolbar {
    justify-content: flex-start !important;
}

.fi-ta-header-toolbar > :nth-child(2) {
    margin-inline-start: 0 !important;
}

/* El boton de filtros (el icono de embudo) vive en un contenedor aparte,
   fi-ta-filters-above-content-ctn, que tambien empuja su contenido a la
   derecha con margin-inline-start:auto. Ademas se pide que el buscador
   (fi-ta-header-toolbar) aparezca primero y los filtros
   (fi-ta-filters-above-content-ctn) despues, aunque en el HTML original el
   orden es al reves: se resuelve con flex + order, sin tocar las plantillas
   de Filament. */

.fi-ta-filters-above-content-ctn {
    order: 2;
}

/* El icono SOLO se manda a la izquierda cuando el panel esta CERRADO.
   Bug real encontrado: forzar margin-inline-start:0 tambien
   cuando esta ABIERTO rompia el truco propio de Filament que reacomoda ese
   mismo icono con un margin-top negativo para que quede junto al boton
   "Aplicar filtros" (ese truco esta calculado asumiendo que el icono sigue
   a la derecha). Al quedar a la izquierda, el icono terminaba montado
   encima del boton "Aplicar filtros" (que tambien esta a la izquierda).
   Por eso aqui NO se toca el estado abierto (.fi-open), solo el cerrado. */

.fi-ta-filters-above-content-ctn:not(.fi-open) .fi-ta-filters-trigger-action-ctn {
    margin-inline-start: 0 !important;
}

.fi-ta-header-ctn {
    display: flex !important;
    flex-direction: column !important;
}

.fi-ta-header-toolbar {
    order: 1 !important;
}

.fi-ta-filters-above-content-ctn {
    order: 2 !important;
}

/* Menu lateral: se probo un rediseño completo (Opcion C: panel propio,
   buscador arriba, grupos sin colapsar, tarjeta de usuario al fondo) pero el
   usuario lo probo en el navegador y no le gusto ("quedo horrible"), asi que
   se revirtio por completo. El menu se quedo como estaba antes:
   grupos colapsables normales, sin panel propio ni tarjeta de usuario. */

/* Padding horizontal de las celdas de tabla: Ventas con varias
   columnas dejaba los botones Ver/Anular fuera de pantalla (scroll
   horizontal). El padding por defecto de Filament es px-3 (0.75rem) por
   celda; se reduce a 0.5rem. Aplica a TODAS las tablas del panel (no hay
   forma limpia de aplicarlo solo a Ventas sin tocar plantillas de
   Filament), pero es un ajuste modesto que no afecta la legibilidad. */

.fi-ta-text:not(.fi-inline) {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.fi-ta-cell:has(.fi-ta-actions) {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Menu lateral, segundo rediseño: grupo "Accesos rápidos" fijo
   arriba (sin colapsar) + resto de grupos colapsados por defecto (ver
   AdminPanelProvider.php). El usuario pidio ademas quitar TODOS los iconos
   del menu (los nombres ya son claros, sin iconos se ve mas profesional).
   Sin iconos, Filament pone por defecto un punto+linea en cada item dentro
   de un grupo (fi-sidebar-item-grouped-border); al usuario no le gusto y
   eligio en su lugar una barra solida de color (Opcion 3 de 3 ilustradas).
   Se reemplaza el punto por una barra continua en el <ul> del grupo, y el
   item activo resalta su propio tramo de la barra en color primario. El
   selector ".fi-sidebar-group-btn +" evita que esto le pegue a Escritorio
   (que no tiene grupo con nombre, no debe llevar barra). */

.fi-sidebar-item-grouped-border-part {
    display: none;
}

.fi-sidebar-group-btn + .fi-sidebar-group-items {
    border-left: 2px solid var(--gray-200);
    margin-left: 0.75rem;
}

.dark .fi-sidebar-group-btn + .fi-sidebar-group-items {
    border-left-color: var(--gray-700);
}

.fi-sidebar-group-btn + .fi-sidebar-group-items > .fi-sidebar-item {
    margin-left: -2px;
}

.fi-sidebar-group-btn + .fi-sidebar-group-items > .fi-sidebar-item.fi-active {
    border-left: 2px solid var(--primary-600);
}

/* Titulo de cada pantalla mas pequeño:
   el de Filament era muy grande; asi el contenido sube, sobre todo en
   celular. Aplica a todo el sistema. */

.fi-header .fi-header-heading {
    font-size: 1.375rem;
    line-height: 1.75rem;
}

/* En celular Filament pone los botones del título encima del texto
   (por ejemplo "Crear Aro" tapaba "Inventario de aros"): van debajo. */
@media (max-width: 639px) {
    .fi-header .fi-header-actions-ctn {
        position: static;
        margin-top: 0.5rem;
        justify-content: center;
    }
}

/* Escritorio (rediseño): cabecera con 2 botones del
   mismo tamaño ("Personalizar tarjetas" y "Meta de venta"), y una
   cuadricula de accesos directos, todos con el mismo estilo (franja de
   color arriba + circulo decorativo + sombra), solo cambia el color de
   categoria. Las tarjetas se deciden por permiso real del usuario
   (AccesosDirectosCatalogo), no por rol a mano, y son personalizables. */

/* Espacio muerto entre el titulo "Escritorio" y las tarjetas:
   el titulo de Filament (.fi-header) trae su propio padding-bottom grande
   pensado para paginas con subtitulo o migas de pan, que aqui no existen,
   se veia como espacio vacio. Se reduce SOLO en esta pantalla usando
   :has() para detectar el marcador .gto-escritorio-page que sigue despues
   (agregado en escritorio.blade.php), asi no se toca el espaciado de
   ninguna otra pantalla del sistema. */

.fi-header:has(~ .fi-page .gto-escritorio-page) {
    padding-bottom: 0.5rem;
}

.gto-escritorio-page {
    margin-top: -0.5rem;
}

.gto-escritorio-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-bottom: 1.125rem;
}

.gto-escritorio-boton {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.375rem;
    padding: 0 0.875rem;
    border-radius: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-700);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dark .gto-escritorio-boton {
    color: var(--gray-100);
    background: var(--gray-800);
    border-color: var(--gray-700);
}

.gto-escritorio-boton-detalle {
    color: var(--gray-500);
    font-weight: 600;
}

.gto-escritorio-vacio {
    font-size: 0.8125rem;
    color: var(--gray-500);
    padding: 1rem;
    text-align: center;
}

.gto-accesos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .gto-accesos-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.gto-acceso-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 6.5rem;
    border-radius: 1rem;
    padding: 1.75rem 1.25rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    background: var(--gray-50);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.07);
    overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dark .gto-acceso-tile {
    background: var(--gray-800);
}

.gto-acceso-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 10px 22px rgba(15, 23, 42, 0.1);
}

.gto-acceso-tile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--acento-tarjeta);
}

.gto-acceso-tile::after {
    content: "";
    position: absolute;
    bottom: -1.25rem;
    right: -1.25rem;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--acento-tarjeta);
    opacity: 0.08;
}

.gto-acceso-tile-label {
    position: relative;
    z-index: 1;
    color: var(--gray-800);
}

/* Numero pequeño sobre una tarjeta de acceso directo (ej. depositos de
   remesa pendientes de numero de comprobante), mismo patron visual de un
   contador de notificaciones, para que se note sin tener que entrar. */

.gto-acceso-tile-contador {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    z-index: 2;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 9999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark .gto-acceso-tile-label {
    color: var(--gray-100);
}

/* Pantalla Reportes: tarjeta de resultado con el mismo
   lenguaje visual que las pantallas de Ver (franja de color arriba),
   metricas en una linea compacta, y filas alternadas para leer mas facil
   listas largas. Misma plantilla para los 8 tipos de reporte, no cambia
   nada segun el tipo. El boton "Generar" vive DENTRO del formulario de
   Filament (Actions dentro del Schema, ver Reportes.php), no con CSS
   alrededor: se probo primero solo con CSS (flex en el Blade) y no
   funciono, el formulario de Filament ocupa su propio ancho por dentro y
   el boton quedaba empujado a una fila aparte, mal alineado. */

.gto-reporte-resultado {
    border: 1px solid var(--gray-200);
    border-top: 3px solid #7c3aed;
    border-radius: 12px;
    padding: 1.25rem;
}

.dark .gto-reporte-resultado {
    border-color: var(--gray-700);
}

.gto-reporte-titulo {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0;
}

/* Tabla de resultados: es un <table> HTML real (a diferencia de las
   pantallas de Ver, que arman sus "filas" con Grid de Filament), por eso
   necesita su propio CSS con el padding puesto en <th>/<td> directamente.
   Poner padding o align-items en el <tr> (como se probo primero, copiando
   las clases de Ver) no hace nada en una tabla real, por eso las columnas
   quedaban pegadas sin espacio. */

.gto-reporte-tabla th {
    text-align: left;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-500);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--gray-200);
}

.dark .gto-reporte-tabla th {
    border-color: var(--gray-700);
}

.gto-reporte-tabla td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--gray-100);
}

.dark .gto-reporte-tabla td {
    border-color: var(--gray-800);
}

/* Rediseño 03/09/2026: las metricas ahora son tarjetas apiladas
   (etiqueta arriba, numero abajo) en vez de linea horizontal
   "numero + etiqueta". Se lee natural: primero que es, luego cuanto. */
.gto-reporte-metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 1rem 0;
}

.gto-reporte-tarjeta {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dark .gto-reporte-tarjeta {
    background: var(--gray-900);
    border-color: var(--gray-700);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.gto-reporte-tarjeta-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.dark .gto-reporte-tarjeta-label {
    color: var(--gray-400);
}

.gto-reporte-tarjeta-valor {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.2;
}

.dark .gto-reporte-tarjeta-valor {
    color: var(--gray-100);
}

/* Clases viejas mantenidas por si algo mas del sistema las usa
 (por seguridad, no romper referencias antiguas). */
.gto-reporte-metricas b {
    font-weight: 700;
}

.gto-reporte-metrica-label {
    color: var(--gray-500);
}

.gto-reporte-fila-alterna {
    background: rgba(0, 0, 0, 0.02);
}

.dark .gto-reporte-fila-alterna {
    background: rgba(255, 255, 255, 0.03);
}

/* Menu lateral: los puntos de color por grupo y por item de "Accesos
   rapidos" que hubo en rediseños anteriores se quitaron por completo el
   27/07/2026 (pedido del usuario), para que todo el menu se vea igual,
   sin ningun punto. */

.gto-acceso-c1 { --acento-tarjeta: var(--primary-600); }
.gto-acceso-c2 { --acento-tarjeta: #059669; }
.gto-acceso-c3 { --acento-tarjeta: #7c3aed; }
.gto-acceso-c4 { --acento-tarjeta: #d97706; }
.gto-acceso-c5 { --acento-tarjeta: #e11d48; }
.gto-acceso-c6 { --acento-tarjeta: var(--primary-600); }
.gto-acceso-c7 { --acento-tarjeta: #059669; }
.gto-acceso-c8 { --acento-tarjeta: #d97706; }
.gto-acceso-c9 { --acento-tarjeta: #7c3aed; }
.gto-acceso-c10 { --acento-tarjeta: #64748b; }
.gto-acceso-c11 { --acento-tarjeta: #0891b2; }
/* C12 morado para la tarjeta "Extras de laboratorios",
   mismo tono que la pildora de linea comercial de Prisma en el catalogo. */
.gto-acceso-c12 { --acento-tarjeta: #6d28d9; }

.dark .fi-sidebar-group-btn + .fi-sidebar-group-items > .fi-sidebar-item.fi-active {
    border-left-color: var(--primary-400);
}

/* Tablas de listas de solo lectura en pantallas "Ver":
   Productos, Historial de abonos, Cronograma de cuotas, Ventas ligadas,
   Depositos, Ingresos en efectivo, Gastos del dia. Mismo problema y misma
   solucion que la tabla de graduacion de Expedientes: tabla HTML real
   (App\Support\TablaHtml) en vez de un Grid de Filament imitando una
   tabla, envuelta en scroll horizontal para pantallas angostas. El
   aspecto en escritorio se armo para verse igual que las tablas viejas
   basadas en Grid (mismo padding, mismo gris de encabezado, mismo borde
   entre filas). */

.gto-lista-tabla {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.gto-lista-tabla thead th {
    text-align: left;
    padding: 0 0.75rem 0.5rem;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-500);
    font-weight: 400;
}

.gto-lista-tabla tbody td {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--gray-100);
}

.dark .gto-lista-tabla tbody td {
    border-color: var(--gray-800);
}

.gto-lista-fila-total td {
    padding-top: 0.6rem;
    border-top: 1px solid var(--gray-200);
    font-weight: 700;
}

.dark .gto-lista-fila-total td {
    border-color: var(--gray-700);
}

.gto-lista-derecha {
    text-align: right;
}

/* La version anterior de esta regla (sin !important) no le ganaba a otros
   estilos reales en la pantalla; se fuerza directo para que el encabezado
   quede a la derecha de verdad, igual que su celda de abajo. */
.gto-lista-tabla thead th.gto-lista-derecha {
    text-align: right !important;
}

.gto-lista-centro {
    text-align: center;
}

.gto-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 500;
}

.gto-badge-success { background: var(--success-50); color: var(--success-700); }
.gto-badge-warning { background: var(--warning-50); color: var(--warning-700); }
.gto-badge-danger { background: var(--danger-50); color: var(--danger-700); }
.gto-badge-gray { background: var(--gray-100); color: var(--gray-600); }

.dark .gto-badge-success { background: rgba(5, 150, 105, 0.15); color: var(--success-400); }
.dark .gto-badge-warning { background: rgba(217, 119, 6, 0.15); color: var(--warning-400); }
.dark .gto-badge-danger { background: rgba(220, 38, 38, 0.15); color: var(--danger-400); }
.dark .gto-badge-gray { background: rgba(255, 255, 255, 0.06); color: var(--gray-400); }

.gto-boton-camara {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--gray-0, #fff);
    color: var(--gray-700);
    cursor: pointer;
    margin-bottom: 0.75rem;
}

.dark .gto-boton-camara {
    background: var(--gray-800);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--gray-200);
}

/* Catalogo de aros */
.gto-catalogo-compartir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
    padding: 0.5rem 0.75rem;
    background: var(--gray-50);
    border-radius: 10px;
}

.dark .gto-catalogo-compartir {
    background: rgba(255, 255, 255, 0.04);
}

.gto-catalogo-compartir input {
    flex: 1;
    min-width: 200px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    background: var(--gray-0, #fff);
    color: var(--gray-700);
}

.dark .gto-catalogo-compartir input {
    background: var(--gray-800);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--gray-200);
}

.gto-catalogo-compartir button {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--gray-0, #fff);
    color: var(--gray-700);
    cursor: pointer;
    white-space: nowrap;
}

.gto-boton-whatsapp {
    display: inline-block;
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.gto-catalogo-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    align-items: center;
}

.gto-catalogo-buscar,
.gto-catalogo-select {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    background: var(--gray-0, #fff);
    color: var(--gray-700);
}

.gto-catalogo-buscar {
    flex: 1 1 220px;
    min-width: 180px;
}

.dark .gto-catalogo-buscar,
.dark .gto-catalogo-select {
    background: var(--gray-800);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--gray-200);
}

.gto-catalogo-limpiar {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--gray-0, #fff);
    color: var(--gray-700);
    cursor: pointer;
}

.dark .gto-catalogo-limpiar {
    background: var(--gray-800);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--gray-200);
}

.gto-catalogo-paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    color: var(--gray-600);
}

.gto-catalogo-paginacion button {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-weight: 600;
    background: var(--gray-0, #fff);
    color: var(--gray-700);
    cursor: pointer;
}

.gto-catalogo-paginacion button:disabled {
    opacity: 0.4;
    cursor: default;
}

.dark .gto-catalogo-paginacion button {
    background: var(--gray-800);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--gray-200);
}

.gto-catalogo-grupo {
    margin-bottom: 2rem;
}

.gto-catalogo-etiqueta-nivel {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}

.gto-nivel-economico { background: var(--success-50); color: var(--success-700); }
.gto-nivel-intermedio { background: var(--warning-50); color: var(--warning-700); }
.gto-nivel-de-marca { background: var(--primary-50); color: var(--primary-700); }
.gto-nivel-sin-nivel { background: var(--gray-100); color: var(--gray-600); }

.dark .gto-nivel-economico { background: rgba(5, 150, 105, 0.15); color: var(--success-400); }
.dark .gto-nivel-intermedio { background: rgba(217, 119, 6, 0.15); color: var(--warning-400); }
.dark .gto-nivel-de-marca { background: rgba(var(--primary-600-rgb, 37, 99, 235), 0.15); color: var(--primary-400); }
.dark .gto-nivel-sin-nivel { background: rgba(255, 255, 255, 0.06); color: var(--gray-400); }

.gto-catalogo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.gto-catalogo-tarjeta {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    background: var(--gray-0, #fff);
}

.dark .gto-catalogo-tarjeta {
    border-color: rgba(255, 255, 255, 0.1);
    background: var(--gray-800);
}

.gto-catalogo-foto {
    height: 140px;
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark .gto-catalogo-foto {
    background: rgba(255, 255, 255, 0.04);
}

.gto-catalogo-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gto-catalogo-sin-foto {
    color: var(--gray-400);
    font-size: 0.8125rem;
}

.gto-catalogo-info {
    padding: 0.625rem 0.75rem;
}

.gto-catalogo-nombre {
    font-weight: 600;
    font-size: 0.875rem;
    margin: 0;
}

.gto-catalogo-detalle {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin: 0.125rem 0 0;
}

.gto-catalogo-precio {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0.375rem 0 0;
}

.gto-galeria-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.gto-galeria-contenido {
    background: var(--gray-0, #fff);
    border-radius: 12px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 16px;
    position: relative;
}

.dark .gto-galeria-contenido {
    background: var(--gray-800);
}

.gto-galeria-cerrar {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: var(--gray-100);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
}

.gto-galeria-titulo {
    font-weight: 600;
    margin: 0 0 12px;
    padding-right: 32px;
}

.gto-galeria-carrusel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.gto-galeria-carrusel img {
    max-width: 100%;
    max-height: 60vh;
    border-radius: 8px;
    object-fit: contain;
    background: var(--gray-50);
}

.gto-galeria-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

.gto-galeria-flecha-izq { left: 0; }
.gto-galeria-flecha-der { right: 0; }

.gto-galeria-contador {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin: 10px 0 0;
}

.gto-galeria-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}

.gto-galeria-boton {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: #25d366;
    color: #fff;
    cursor: pointer;
}

.gto-galeria-boton:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Boton de colapsar cada grupo del menu (27/07/2026, pedido del usuario,
   opcion B): se cambia la flechita por defecto de Filament por un signo
   +/- , mas limpio. `aria-expanded` ya lo pone Filament solo segun el
   grupo este abierto o cerrado, no hace falta tocar ninguna plantilla. */
.fi-sidebar-group-collapse-btn svg {
    display: none;
}

.fi-sidebar-group-collapse-btn {
    position: relative;
}

.fi-sidebar-group-collapse-btn::after {
    content: "+";
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.fi-sidebar-group-collapse-btn[aria-expanded="true"]::after {
    content: "–";
}

/* En movil, la barra de pasos del expediente (wizard) se muestra completa y
   desplazable de lado, con los mismos nombres que en PC, para poder navegar
   entre secciones (Datos personales, Historial clinico, Graduacion...). */
@media (max-width: 1024px) {
    .fi-wizard-header {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .fi-wizard-header-step {
        flex: 0 0 auto;
    }

    .fi-wizard-header-step-label {
        display: block;
    }
}

/* Banner de recordatorio de cierre de caja (Escritorio). Colores de aviso
   escritos directo, igual que .gto-acceso-tile: las clases sueltas de
   Tailwind tipo bg-warning-50/border-warning-300 NO existen en el CSS
   compilado de Filament (el color de sus componentes se resuelve por
   dentro con variables propias, no con clases de utilidad sueltas), asi
   que nunca se iban a ver sin esto. */

.gto-banner-cierre {
    display: inline-flex;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #fcd34d;
    background: #fffbeb;
    padding: 0.75rem 1rem;
}

.dark .gto-banner-cierre {
    border-color: #b45309;
    background: #451a03;
}

.gto-banner-cierre-texto {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #92400e;
}

.dark .gto-banner-cierre-texto {
    color: #fde68a;
}

.gto-banner-cierre-boton {
    display: inline-flex;
    align-items: center;
    border-radius: 0.5rem;
    background: #d97706;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
}

.gto-banner-cierre-boton:hover {
    background: #b45309;
    color: #ffffff;
}

.gto-banner-cierre-cerrar {
    color: #b45309;
}

.gto-banner-cierre-cerrar:hover {
    color: #78350f;
}

.dark .gto-banner-cierre-cerrar {
    color: #fcd34d;
}

.dark .gto-banner-cierre-cerrar:hover {
    color: #fde68a;
}

/* Calculadoras opticas: el instructivo largo pasa a un boton
   plegable "Como funciona" y el resultado a una tarjeta con el mismo estilo
   de las pantallas de "Ver". Clases propias gto-calc-* para NO tocar las
   gto-reporte-* que comparte la pantalla de Reportes. */
.gto-calc-ayuda-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: transparent;
    font-size: 0.875rem;
    color: var(--gray-600);
    cursor: pointer;
}

.gto-calc-ayuda-btn:hover {
    background: rgba(0, 0, 0, 0.03);
}

.dark .gto-calc-ayuda-btn {
    border-color: var(--gray-600);
    color: var(--gray-300);
}

.dark .gto-calc-ayuda-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.gto-calc-ayuda-panel[x-cloak] {
    display: none !important;
}

.gto-calc-ayuda-panel {
    margin-top: 0.75rem;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.85rem 1.1rem;
    font-size: 0.8125rem;
    line-height: 1.55;
}

.dark .gto-calc-ayuda-panel {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--gray-700);
}

.gto-calc-ayuda-panel p {
    margin: 0 0 0.4rem;
}

.gto-calc-ayuda-panel p:last-child {
    margin-bottom: 0;
}

.gto-calc-resultado {
    margin-top: 1.5rem;
    background: var(--primary-50);
    border-radius: 12px;
    padding: 1.15rem 1.35rem;
}

.dark .gto-calc-resultado {
    background: rgba(255, 255, 255, 0.03);
}

.gto-calc-resultado-titulo {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--primary-700);
    margin: 0 0 0.75rem;
}

.dark .gto-calc-resultado-titulo {
    color: var(--primary-400);
}

.gto-calc-flujo {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.gto-calc-flujo-etq {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.gto-calc-flujo-num {
    font-family: ui-monospace, 'Courier New', monospace;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.gto-calc-flujo-num.gto-calc-destacado {
    color: var(--primary-700);
}

.dark .gto-calc-flujo-num.gto-calc-destacado {
    color: var(--primary-400);
}

.gto-calc-flecha {
    font-size: 1.35rem;
    color: var(--gray-500);
    align-self: center;
}

.gto-calc-detalle {
    margin-top: 0.9rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.6rem;
}

.gto-calc-detalle-item {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}

.dark .gto-calc-detalle-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--gray-700);
}

.gto-calc-detalle-etq {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.gto-calc-detalle-val {
    font-family: ui-monospace, 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 0.1rem;
}

.gto-calc-nota {
    margin-top: 0.85rem;
    font-size: 0.8125rem;
    color: var(--gray-500);
    line-height: 1.5;
}

/* Precios de lentes — mini bloque con Precio + Costo dentro de la columna
   "Lente" solo para vista movil. En PC ese mini se oculta y se
   ven las columnas Precio y Costo normales. En movil las columnas se
   ocultan (visibleFrom('md') de Filament) y este mini se muestra dentro de
   cada fila-tarjeta, evitando el scroll horizontal. Se usa clase propia en
   vez de md:hidden de Tailwind porque md:hidden no viene incluido en el
   CSS ya compilado de Filament y el mini se quedaba visible siempre en PC. */
.gto-lente-mini-precio {
    display: none;
}

@media (max-width: 767px) {
    .gto-lente-mini-precio {
        display: flex;
    }
}

/* Select de lente en Ventas y Ventas a Credito (05/09/2026, corregido tras
   inspeccionar DOM real: Filament v4 NO usa Choices.js, usa su propio
   componente Alpine). El HTML de cada opcion queda dentro de:
     .fi-select-input-option > span > MI_HTML
   El <span> intermedio es inline por defecto y no respeta width:100%,
   por eso mi flex interno no llenaba el ancho del dropdown y el precio
   quedaba flotando en el medio.
   Estos selectores fuerzan a la opcion y al span interno a ser block+
   width:100%, pero SOLO cuando contienen la clase .gto-lente-flex-wrapper
   (via :has() nativo). Otros Selects del sistema (empresa, sucursal,
   categoria, etc.) no se ven afectados. */
.fi-select-input-option:has(.gto-lente-flex-wrapper),
.fi-select-input-option:has(.gto-lente-flex-wrapper) > span {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Logo y nombre: en línea en la barra superior, apilados en el inicio de sesión. */

.gto-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
}

/* Cualquier logo (cuadrado o alargado) se ajusta sin deformarse. */
.gto-brand-lockup-icon {
    height: 100%;
    width: auto;
    max-width: 8rem;
    object-fit: contain;
    border-radius: 0.375rem;
}

.gto-brand-lockup-textos {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.gto-brand-lockup-text {
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1;
    white-space: nowrap;
}

/* El eslogan solo se muestra en el inicio de sesión. */
.gto-brand-lockup-eslogan {
    display: none;
}

/* En el inicio de sesión el logo va arriba del nombre y ocupa su propio alto. */
.fi-simple-header .fi-logo {
    height: auto !important;
    margin-bottom: 0.75rem;
}

.fi-simple-header .gto-brand-lockup {
    flex-direction: column;
    height: auto;
    gap: 0.5rem;
}

.fi-simple-header .gto-brand-lockup-icon {
    height: 4rem;
    width: auto;
    max-width: 12rem;
}

.fi-simple-header .gto-brand-lockup-text {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.fi-simple-header .gto-brand-lockup-textos {
    align-items: center;
    text-align: center;
}

.fi-simple-header .gto-brand-lockup-eslogan {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
}
/* Celular: los botones de cada fila (Ver, Editar, Borrar...) quedan solo con
   su ícono. Con el texto ocupaban media pantalla y empujaban el precio o el
   total fuera de la vista. El texto sigue en la página para los lectores de
   pantalla. */
@media (max-width: 767px) {
    .fi-ta-actions .fi-link {
        font-size: 0;
        gap: 0;
        padding: 0.35rem;
    }

    .fi-ta-actions .fi-link .fi-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Menos relleno por columna para que quepa más sin deslizar la tabla. */
    .fi-ta-table .fi-ta-cell,
    .fi-ta-table .fi-ta-header-cell {
        padding-inline: 0.5rem;
    }
}

/* Ventanas de la "Guía de esta pantalla" (Driver.js) con la letra y los
   colores del sistema. Con "body" delante porque driver.css carga después. */
body .driver-popover {
    border-radius: 0.875rem;
    padding: 1rem 1.1rem;
    font-family: inherit;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    max-width: 340px;
}

body .driver-popover-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

body .driver-popover-description {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #475569;
}

body .driver-popover-footer button {
    border-radius: 0.5rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
    text-shadow: none;
}

body .driver-popover-next-btn {
    background: var(--primary-600, #0284c7) !important;
    border-color: var(--primary-600, #0284c7) !important;
    color: #fff !important;
}

body .driver-popover-progress-text {
    font-size: 0.8rem;
    color: #64748b;
}