/* Complementos del shell admin (Tailwind + BS4/AdminLTE coexisten con preflight off) */
/*
 * Sin preflight de Tailwind: el modelo de caja por defecto (content-box) hace que
 * inputs con w-full + padding/borde desborden el contenedor y se vean “rotos”.
 */
.admin-shell *,
.admin-shell *::before,
.admin-shell *::after {
    box-sizing: border-box;
}

/* Controles nativos coherentes con modo oscuro (date/time, scrollbars internos) */
.dark .admin-shell input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.dark .admin-shell select,
.dark .admin-shell textarea {
    color-scheme: dark;
}

/* Checkboxes/radios que aún usan clases Bootstrap sin hoja Bootstrap en admin */
.admin-shell .form-check-input,
.admin-shell .custom-control-input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0 0.5rem 0 0;
    vertical-align: middle;
    flex-shrink: 0;
    accent-color: rgb(79 70 229);
    cursor: pointer;
}

.admin-shell .form-check,
.admin-shell .custom-control {
    display: flex;
    align-items: center;
}

.admin-shell .form-check-label,
.admin-shell .custom-control-label {
    cursor: pointer;
    margin-bottom: 0;
}

/*
 * Vistas que aún usan .form-control / .form-control-sm (Bootstrap) sin hoja Bootstrap
 * en layouts.admin: sin esto los campos se ven como controles nativos sin borde ni padding.
 */
.admin-shell select.form-control,
.admin-shell textarea.form-control,
.admin-shell input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]) {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    font-family: inherit;
    color: #0f172a;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.05);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.admin-shell select.form-control:focus,
.admin-shell textarea.form-control:focus,
.admin-shell input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):focus {
    border-color: #6366f1;
    outline: none;
    box-shadow:
        0 1px 2px 0 rgb(15 23 42 / 0.05),
        0 0 0 3px rgb(99 102 241 / 0.2);
}

.dark .admin-shell select.form-control,
.dark .admin-shell textarea.form-control,
.dark .admin-shell input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]) {
    color: #f8fafc;
    background-color: rgb(30 41 59 / 0.92);
    border-color: #94a3b8;
    box-shadow: none;
}

.dark .admin-shell select.form-control:focus,
.dark .admin-shell textarea.form-control:focus,
.dark .admin-shell input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):focus {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgb(165 180 252 / 0.22);
}

.dark .admin-shell select.form-control::placeholder,
.dark .admin-shell textarea.form-control::placeholder,
.dark .admin-shell input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"])::placeholder {
    color: rgb(203 213 225 / 0.92);
}

/*
 * <select> nativos (sin JS): flecha indigo. Con JS, el desplegable visible es .admin-select-enhanced__trigger.
 */
.admin-shell select:not(.admin-select-enhanced__native) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236366f1' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.125rem 1.125rem;
    padding-right: 2.5rem;
    cursor: pointer;
}

html.dark .admin-shell select:not(.admin-select-enhanced__native) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a5b4fc' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}

.admin-shell select:not(.admin-select-enhanced__native):disabled {
    cursor: not-allowed;
}

.admin-shell .admin-select-enhanced__trigger {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236366f1' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.125rem 1.125rem;
    padding-right: 2.5rem;
    cursor: pointer;
}

html.dark .admin-shell .admin-select-enhanced__trigger {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a5b4fc' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}

.admin-shell .admin-select-enhanced__trigger:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

/* Lista de opciones: sin viñetas ni sangría de marcador (preflight Tailwind desactivado) */
.admin-shell .admin-select-enhanced__panel,
.admin-shell .admin-select-enhanced__panel > li {
    list-style: none;
}

.admin-shell .admin-select-enhanced__panel {
    margin-left: 0;
    padding-left: 0;
}

.admin-shell .admin-select-enhanced__panel > li {
    margin-left: 0;
}

/* .form-control fija padding corto a la derecha; reservamos espacio para la flecha */
.admin-shell select:not(.admin-select-enhanced__native).form-control {
    padding-right: 2.5rem;
}

.admin-shell .form-control-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    min-height: 2rem;
}

/* Sin preflight de Tailwind, el UA subraya <a>; quitamos el subrayado base.
   No usar a:hover aquí: las utilidades hover:underline de Tailwind deben poder ganar. */
.admin-shell a {
    text-decoration: none;
}

/* Objetivo táctil mínimo ~44px de alto; iconos cuadrados con min-w en HTML si aplica */
.admin-touch-target {
    min-height: 44px;
    box-sizing: border-box;
}

.admin-touch-target--icon {
    min-width: 44px;
}

.admin-touch-target--wide {
    min-width: unset;
}

.admin-shell-main {
    min-height: calc(100vh - 3.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

/*
 * Listados admin: con preflight off, width:auto deja la tabla solo al ancho del contenido
 * y aparece hueco a la derecha en escritorio. Forzamos 100% del contenedor con scroll horizontal si hace falta.
 */
.admin-shell .admin-table-shell > table {
    width: 100%;
    border-collapse: collapse;
}

/*
 * divide-y solo dibuja una línea de 1px entre hijos; el espacio “grande” suele ser el padding (py-3, etc.).
 * Filas más densas en tablas envueltas por admin-table-shell (gana a utilidades Tailwind del CDN).
 */
.admin-shell .admin-table-shell th,
.admin-shell .admin-table-shell td {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/*
 * Listas en cards: separador entre filas sin usar divide-y (misma línea; controlamos padding en cada <li>).
 */
.admin-shell ul.admin-list-lines > li:not(:last-child) {
    border-bottom: 1px solid rgb(241 245 249);
}

.dark .admin-shell ul.admin-list-lines > li:not(:last-child) {
    border-bottom-color: rgb(51 65 85 / 0.8);
}

/* Enlaces del menú lateral: compactos en escritorio; ~44px en overlay móvil */
.admin-shell-nav a.group {
    min-height: 2.25rem;
    align-items: center;
}

@media (max-width: 1023px) {
    .admin-shell-nav a.group {
        min-height: 44px;
    }
}

/* Scroll suave en sidebar */
.admin-shell-nav {
    scrollbar-width: thin;
    scrollbar-color: rgb(148 163 184 / 0.5) transparent;
}

.admin-shell-nav::-webkit-scrollbar {
    width: 6px;
}

.admin-shell-nav::-webkit-scrollbar-thumb {
    background: rgb(148 163 184 / 0.45);
    border-radius: 999px;
}

.admin-shell-nav-group {
    margin-top: 0.125rem;
}

.admin-shell-nav-group:first-of-type {
    margin-top: 0.25rem;
}

.admin-shell-nav-group__toggle {
    min-height: 2rem;
    -webkit-tap-highlight-color: transparent;
}

.admin-shell-nav-group__body a.group {
    margin-left: 0;
}

@media (max-width: 1023px) {
    .admin-shell-nav-group__toggle {
        min-height: 44px;
    }
}

/* Animación entrada contenido */
@keyframes admin-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-shell-animate {
    animation: admin-fade-in 0.35s ease-out;
}

/* Transición suave al alternar tema (class dark en <html>) */
.admin-shell,
.admin-shell-header,
.admin-shell-footer,
.admin-shell-sidebar,
.admin-shell-main {
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

/* Tablas: filas alternas y hover legibles en oscuro */
.admin-shell .admin-table-shell tbody > tr:nth-child(even):not(:hover) {
    background-color: rgb(248 250 252 / 0.65);
}

.dark .admin-shell .admin-table-shell tbody > tr:nth-child(even):not(:hover) {
    background-color: rgb(30 41 59 / 0.35);
}

/* Toast “nuevo pedido”: legible en modo oscuro */
.dark .app-status-toast.toast-new-order {
    background: linear-gradient(135deg, rgb(15 23 42), rgb(30 41 59));
    color: #f1f5f9;
    border: 1px solid rgb(99 102 241 / 0.35);
    box-shadow: 0 14px 30px rgb(0 0 0 / 0.35);
}

.dark .app-status-toast.toast-new-order .toast-meta {
    color: rgb(148 163 184 / 0.95);
}

.dark .app-status-toast.toast-new-order .toast-order-badge {
    background: rgb(99 102 241 / 0.2);
    border-color: rgb(129 140 248 / 0.45);
    color: #c7d2fe;
}

.dark .app-status-toast.toast-new-order .toast-close {
    color: rgb(148 163 184 / 0.75);
}

.dark .app-status-toast.toast-new-order .toast-close:hover,
.dark .app-status-toast.toast-new-order .toast-close:focus {
    color: #e2e8f0;
}

/*
 * Filtros de listados: misma altura mínima que botones con .admin-touch-target (~44px)
 * y alineación con el componente filter-actions (label fantasma en lg).
 */
.admin-shell .admin-filter-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
    min-height: 2.75rem;
}

/*
 * Modo oscuro: los filtros suelen usar <select>, <input type="date">, etc.
 * Las utilidades Tailwind (CDN) a veces pierden frente a estilos UA; forzamos contraste.
 */
html.dark .admin-shell .admin-filter-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
    color: #f8fafc;
    background-color: rgb(30 41 59 / 0.96);
    border-color: #94a3b8;
    box-shadow: none;
}

html.dark .admin-shell .admin-filter-control::placeholder {
    color: rgb(203 213 225 / 0.92);
    opacity: 1;
}

html.dark .admin-shell .admin-filter-control:focus {
    outline: none;
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgb(165 180 252 / 0.22);
}

html.dark .admin-shell select.admin-filter-control {
    color: #f8fafc;
    background-color: rgb(30 41 59 / 0.96);
}

html.dark .admin-shell .admin-filter-control:-webkit-autofill,
html.dark .admin-shell .admin-filter-control:-webkit-autofill:hover,
html.dark .admin-shell .admin-filter-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #f8fafc;
    box-shadow: 0 0 0 1000px rgb(30 41 59) inset;
    transition: background-color 999999s ease-in-out 0s;
}

/* Etiquetas de campos dentro del panel de filtros */
html.dark .admin-shell .admin-filters-panel .admin-filter-field > label {
    color: #e2e8f0;
}

/*
 * Panel de filtros en modo oscuro: el CDN de Tailwind a veces no aplica `dark:` a tiempo
 * o no genera reglas para clases del DOM; forzamos superficie y tipografía aquí.
 */
html.dark .admin-shell .admin-filters-panel {
    background-color: rgb(30 41 59 / 0.96) !important;
    /* Un solo trazo: sin sombra ni ring (la sombra se leía como “borde negro” abajo/lados) */
    border: 1px solid rgb(100 116 139) !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000;
    --tw-ring-offset-shadow: 0 0 #0000;
}

html.dark .admin-shell .admin-filters-panel > button {
    color: #f8fafc !important;
    background-color: transparent;
    /* Mismo trazo que el contenedor exterior (#64748b ≈ slate-600) */
    border: 1px solid rgb(100 116 139) !important;
    border-radius: 0.75rem;
}

html.dark .admin-shell .admin-filters-panel > button:hover {
    background-color: rgb(51 65 85 / 0.55);
    color: #ffffff !important;
}

html.dark .admin-shell .admin-filters-panel > button .fa-sliders-h {
    color: #a5b4fc !important;
}

html.dark .admin-shell .admin-filters-panel > button span.text-sm {
    color: #cbd5e1 !important;
}

/* Sin fondo ni borde propios: se ve el fondo del panel; anula dark:bg-slate-900/55 del HTML */
html.dark .admin-shell .admin-filters-panel__body {
    border-radius: 0.75rem;
    box-shadow: none !important;
    background-color: transparent !important;
}

html.dark .admin-shell .admin-filters-panel p,
html.dark .admin-shell .admin-filters-panel .text-xs {
    color: #cbd5e1;
}

/* Botones icónicos de tablas: sin preflight, <a> no hereda border-style sólido y el borde puede no pintarse */
.admin-shell .admin-icon-action {
    box-sizing: border-box;
    border-style: solid;
    text-decoration: none;
}

/* Refuerzo modo oscuro si utilidades del CDN no aplican */
html.dark .admin-shell .admin-icon-action {
    background-color: rgb(15 23 42 / 0.94) !important;
    border-color: rgb(100 116 139 / 0.95) !important;
}

/* Una sola fila en escritorio: scroll suave si hay muchos campos */
.admin-shell .admin-filter-form {
    scrollbar-width: thin;
    scrollbar-color: rgb(148 163 184 / 0.6) transparent;
}

.admin-shell .admin-filter-form::-webkit-scrollbar {
    height: 6px;
}

.admin-shell .admin-filter-form::-webkit-scrollbar-thumb {
    background: rgb(148 163 184 / 0.45);
    border-radius: 999px;
}

/* Formularios crear/editar (alineado con configuración del sitio) */
.admin-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #6b7280;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.dark .admin-form-label {
    color: #d1d5db;
}

.admin-form-hint {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.5rem;
    margin-bottom: 0;
    line-height: 1.45;
}

.dark .admin-form-hint {
    color: #cbd5e1;
}

.admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.dark .admin-form-actions {
    border-color: rgba(51, 65, 85, 0.65);
}

.admin-aside-panel {
    border-radius: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: rgba(248, 250, 252, 0.75);
    padding: 1.5rem;
}

.dark .admin-aside-panel {
    border-color: rgba(148, 163, 184, 0.45);
    background: rgba(30, 41, 59, 0.55);
}

.admin-aside-panel h3 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: #0f172a;
    margin-bottom: 1rem;
}

.dark .admin-aside-panel h3 {
    color: #f8fafc;
}

@media print {
    .admin-print-hidden,
    .admin-shell-sidebar,
    .admin-shell-header,
    .admin-shell-footer {
        display: none !important;
    }

    .admin-shell-print-reset {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
    }
}