* {
    font-family: 'Inter', sans-serif;

}

.py-8 {
    padding-bottom: 1rem !important;
    padding-top: 2rem;
}
aside {
    border-right:1px solid rgb(231, 231, 231);
    height: 90vh;
}

.st0 {
    stroke-width: 12 !important;
}
.icon {
    width: 30px !important;
    height: 30px !important;
}
.filament-sidebar-item-active path {
    stroke: white !important;
}
.filament-page-actions  {
    width: 20%;
}
.bg-img {
    background-image: url('img/login-responsive.png') !important;
    background-position: center !important;
    background-size: cover !important;
}
.filament-sidebar-header::before {
    --tw-gradient-stops: var(--tw-gradient-from), #c7c7c7 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
     
.fi-sidebar svg {
    color: #252525;
    stroke-width: 1 !important;
}

.fi-sidebar-item-icon {
    height: 1.6rem !important;
    width: 1.6rem !important;
}
/* Botón grande solo en el login: antes esta regla agrandaba todos los botones del panel. */
#login .fi-ac-btn-action {
    font-size: 1.2rem !important;
   width: 12.5rem !important;
}
.fi-section header {
    background: #C6D1E5;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.fi-fo-repeater-item {
    background: #C6D1E5 !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.fi-fo-repeater-item .fi-icon-btn-icon{
    color: black !important;
}
.fi-fo-repeater-item .border-t {
    background: white !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}


.fi-topbar .fi-dropdown-trigger div {
    background-color: white !important;
    border: 1px solid #071226 ;
    color: #071226;
}
.fi-fo-field-wrp th {
    font-size: 0.8rem !important;
}
.fi-ta-filters h4 {
    display: none;
}
/* graficas */

@media (max-width: 850px) {
    .fi-wi-stats-overview {
        gap: 0.5rem !important; 
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .gap-6 {
        gap: 0.5rem !important; 
    }
}

.fi-ac-btn-action {
    border: 2px solid transparent;
}

@media (max-width: 950px) {
    #login .fi-ac-btn-action {
        font-size: 1.2rem !important;
       width: auto !important;
    }
    .fi-global-search-field {
        display: block !important;
    }
    .fi-global-search-results-ctn {
        position: absolute;
        left: 0;
        width: 16rem !important;
    }
    #data\.detalle-pedido {
        display: none !important;
    }

}

/* buscador */
/* .fi-global-search-field {
    display: none;
} */
.max-w-7xl {
    max-width: 100rem !important;
}

/* Pantalla "Hoy" (inicio) */
/* Las 5 tarjetas en fila (Filament solo admite hasta 4 columnas). */
@media (min-width: 768px) {
    .fi-dashboard-page .fi-wi-stats-overview-stats-ctn {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem !important;
    }
}
@media (min-width: 1280px) {
    .fi-dashboard-page .fi-wi-stats-overview-stats-ctn {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}
/* Tablas del día vacías: mensaje compacto. */
.fi-dashboard-page .fi-ta-empty-state {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}
.fi-dashboard-page .fi-ta-empty-state-icon-ctn {
    display: none;
}
/* Móvil: los botones de cada fila bajan de línea en vez de salirse, y sin el icono de abrir. */
@media (max-width: 639px) {
    .fi-dashboard-page .fi-ta-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 0.5rem;
    }
    .fi-dashboard-page .fi-ta-actions .fi-icon-btn {
        display: none;
    }
}
/* Por debajo de 1024px ya está la barra fija "Nueva prueba": sin duplicar el botón de cabecera. */
@media (max-width: 1023px) {
    .fi-dashboard-page .fi-header .fi-ac-btn-action {
        display: none !important;
    }
}


/* Artículos pedido (resources/views/forms/components/order-items.blade.php) */
.oi {
    --oi-cols: 1.5rem minmax(7.5rem, 1fr) minmax(0, 2.4fr) minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 1.2fr) 2rem;
}
.oi-head,
.oi-row {
    display: grid;
    grid-template-columns: var(--oi-cols);
    column-gap: 0.75rem;
    align-items: center;
    padding: 0.375rem 0;
}
.oi-head {
    padding-top: 0;
    border-bottom: 1px solid #E4E4E7;
    color: #71717A;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.oi-list > .oi-row + .oi-row {
    border-top: 1px solid #F0F0F2;
}
.oi-num {
    color: #A1A1AA;
    font-size: 0.75rem;
}
/* Campos de la tabla sin caja hasta pasar el ratón o editar; con error se ve el borde rojo. */
.oi .fi-input-wrp:not(.fi-invalid):not(:hover):not(:focus-within) {
    --tw-ring-color: transparent;
    background: transparent;
}
/* Select: elegido solo muestra el código; en el desplegable se ve producto, talla y color. */
.oi .choices__list--single .oi-opt-rest {
    display: none;
}
/* El desplegable de código es más ancho y alto que su columna, para leer producto, talla y color. */
.oi .choices__list--dropdown,
.oi .choices__list[aria-expanded] {
    width: 34rem;
    max-width: calc(100vw - 2rem);
    z-index: 30;
}
.oi .choices__list--dropdown .choices__list,
.oi .choices__list[aria-expanded] .choices__list {
    max-height: 22rem;
}
.oi .choices__list--dropdown .choices__item {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.oi-opt-code {
    font-weight: 600;
    color: #191931;
}
.dark .oi-opt-code { color: white; }
.oi-cell {
    min-width: 0;
    font-size: 0.875rem;
}
.oi-garment {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}
.oi-product,
.oi-value {
    font-weight: 500;
    color: #191931;
}
/* Observaciones de la prenda: una línea bajo el producto, completas al pasar el ratón. */
.oi-notes {
    flex-basis: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    color: #71717A;
}
.dark .oi-notes { color: #A1A1AA; }
.oi-muted {
    color: #A1A1AA;
}
.oi-label {
    display: none;
}
.oi-actions {
    display: flex;
    justify-content: flex-end;
}
.oi-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: #71717A;
    font-size: 0.875rem;
}
.oi-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #E4E4E7;
}
.oi-extras {
    padding-top: 1rem;
    border-top: 1px solid #E4E4E7;
}
.cm-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #71717A;
}
.oi-count {
    font-size: 0.8125rem;
    color: #71717A;
}
.dark .oi-head,
.dark .oi-list > .oi-row + .oi-row,
.dark .oi-foot,
.dark .oi-extras { border-color: rgba(255, 255, 255, 0.08); }
.dark .oi-head,
.dark .cm-subtitle { color: #A1A1AA; }
.dark .oi-product,
.dark .oi-value { color: white; }

/* Crear pedido: columna de código más ancha para el botón "Buscar artículo". */
.oi--create {
    --oi-cols: 1.5rem minmax(11rem, 1.3fr) minmax(0, 2.2fr) minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 1.2fr) 2rem;
}

/* Móvil: cada artículo es una tarjeta con sus etiquetas (en tablet se mantiene la tabla). */
@media (max-width: 639px) {
    .oi-head { display: none; }
    .oi-row {
        grid-template-columns: 1fr 1fr;
        row-gap: 0.75rem;
        position: relative;
        padding: 1rem 0;
    }
    .oi-num { grid-column: 1 / -1; }
    .oi-code, .oi-garment, .oi-size { grid-column: 1 / -1; }
    .oi-label {
        display: block;
        width: 100%;
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: #71717A;
    }
    .oi .choices__list--dropdown,
    .oi .choices__list[aria-expanded] {
        width: 100%;
    }
    .oi-actions {
        position: absolute;
        top: 0.75rem;
        right: 0;
    }
}

/* ---------- Pedido (editar): mismo lenguaje que la tabla de artículos ---------- */
.fi-resource-orders.fi-resource-edit-record-page .fi-section-content {
    padding: 1.25rem 1.5rem;
}
/* Etiquetas en gris, pequeñas y en mayúsculas (los toggles mantienen su etiqueta normal). */
.fi-resource-orders.fi-resource-edit-record-page .fi-fo-field-wrp:not(:has([role="switch"])) .fi-fo-field-wrp-label > span {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #71717A;
}
.fi-resource-orders.fi-resource-edit-record-page .fi-fo-field-wrp-label sup {
    color: #DC2626;
}
/* Campos de solo lectura (fecha evento, fianza): sin caja gris pesada. */
.fi-resource-orders.fi-resource-edit-record-page .fi-input-wrp.fi-disabled {
    background: #F7F8FA;
}
/* Fecha de prueba (texto, no campo) alineada con los inputs vecinos. */
.fi-resource-orders.fi-resource-edit-record-page .fi-fo-placeholder {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    font-weight: 500;
    color: #191931;
}
/* Botones dentro del formulario a tamaño normal (la regla grande de .fi-ac-btn-action es para el login). */
.fi-resource-orders.fi-resource-edit-record-page .fi-section .fi-ac-btn-action,
.oi .fi-ac-btn-action {
    font-size: 0.875rem !important;
    width: auto !important;
}
.dark .fi-resource-orders.fi-resource-edit-record-page .fi-input-wrp.fi-disabled {
    background: rgba(255, 255, 255, 0.03);
}

/* Subtítulos dentro de una tarjeta (Evento, Cliente, Complementos). */
.cm-subtitle {
    display: block;
    width: 100%;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid #E4E4E7;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #191931;
}
.dark .cm-subtitle {
    border-color: rgba(255, 255, 255, 0.08);
    color: #E4E4E7;
}
.oi-extras .cm-subtitle {
    border-bottom: 0;
    padding-bottom: 0;
    color: #71717A;
}

/* Total del pedido: tipo ticket. */
.cm-total {
    font-size: 0.875rem;
}
.cm-total dl > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
}
.cm-total dt {
    color: #52525B;
}
.cm-total dd {
    font-weight: 500;
    color: #191931;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cm-total-discount {
    color: #15803D !important;
}
.cm-total-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.75rem;
    padding-top: 0.875rem;
    border-top: 1px solid #191931;
    color: #191931;
}
.cm-total-main span {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cm-total-main strong {
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.cm-total-tax {
    margin-top: 0.25rem;
    text-align: right;
    font-size: 0.75rem;
    color: #71717A;
}
.cm-total-extra {
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: #F4F6FB;
}
.dark .cm-total dt { color: #A1A1AA; }
.dark .cm-total dd,
.dark .cm-total-main { color: white; }
.dark .cm-total-main { border-color: rgba(255, 255, 255, 0.4); }
.dark .cm-total-extra { background: rgba(255, 255, 255, 0.05); }

/* Pantallas táctiles (tablet): campos y botones algo más altos para el dedo. */
@media (pointer: coarse) {
    .fi-resource-orders.fi-resource-edit-record-page .fi-input,
    .fi-resource-orders.fi-resource-edit-record-page .choices__inner {
        min-height: 2.75rem;
    }
    .fi-resource-orders.fi-resource-edit-record-page .fi-section .fi-btn {
        min-height: 2.75rem;
    }
}

/* Paso "Información cliente" del wizard: sin tarjetas anidadas, bloques con subtítulo y línea */
.wizard-flat + .wizard-flat {
    margin-top: .5rem;
}
/* Más grande y con barra de color para no confundirse con las etiquetas de los campos */
.wizard-subheading {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid #C6D1E5;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #191931;
}
.wizard-subheading::before {
    content: '';
    width: 4px;
    height: 1.15em;
    border-radius: 2px;
    background: #191931;
}