/* ControlOffice / WGourmet — estilos propios sobre la plantilla Materialize (vertical-modern-menu). */
/* Tema corporativo "Azul institucional" (oct-2026). Componentes en css/tema.css. */
:root {
    --co-fuente: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --co-primario: #1f5fad;          /* azul de acción: botones, enlaces, opción activa */
    --co-primario-hover: #174a87;
    --co-primario-suave: #e3ecf8;    /* fondos tenues del color primario */
    --co-secundario: #14213d;        /* azul marino del menú */
    --co-acento: #b26b00;            /* ámbar: avisos y estado "ocupada" */
    --co-exito: #2e7d4f;
    --co-error: #b42318;
    --co-fondo: #f4f6f9;
    --co-superficie: #ffffff;
    --co-texto: #1b2430;
    --co-texto-suave: #5d6b7e;
    --co-borde: #dde3eb;
    --co-tabla-encabezado: #f1f4f8;
    --co-header-catalogo: #f7f9fb;
    --co-menu-fondo: #14213d;
    --co-menu-texto: #b9c4d6;
    --co-menu-hover: rgba(255, 255, 255, .06);
    --co-menu-activo: #1f5fad;
    --co-radio: 8px;
    --co-sombra: 0 1px 2px rgba(16, 24, 40, .06);
    --co-foco: 0 0 0 3px rgba(31, 95, 173, .30);
}

html[data-tema="oscuro"] {
    --co-primario: #4c8bd6;
    --co-primario-hover: #6aa0e0;
    --co-primario-suave: rgba(76, 139, 214, .16);
    --co-fondo: #0e1520;
    --co-superficie: #162030;
    --co-texto: #e4e9f0;
    --co-texto-suave: #9aa8ba;
    --co-borde: #263247;
    --co-tabla-encabezado: #1c2839;
    --co-header-catalogo: #1c2839;
    --co-menu-fondo: #0b111b;
    --co-menu-activo: #2a5ea3;
    --co-sombra: 0 1px 2px rgba(0, 0, 0, .4);
    --co-foco: 0 0 0 3px rgba(76, 139, 214, .40);
}

body { background-color: var(--co-fondo); color: var(--co-texto); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--co-foco); }

/* Encabezado de página */
.co-contenido { padding-top: 1rem; }
.co-encabezado { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.co-titulo { margin: 0; font-weight: 500; color: var(--co-texto); }
/* Sucursal activa en la barra superior (title_layout del legado, sin margen fijo de 287 px) */
.navbar-main .nav-wrapper { display: flex; align-items: center; }
.navbar-main .title_layout { margin-left: 0; font-size: 1.15rem; font-family: inherit; letter-spacing: .5pt; white-space: nowrap; }
.navbar-main .nav-wrapper > .title_layout:first-child { margin-left: 64px; opacity: .8; } /* deja libre el botón flotante del menú en móvil */
.navbar-main .navbar-list { margin-left: auto; }
.co-sucursal { margin-left: .4rem; overflow: hidden; text-overflow: ellipsis; color: #fff; font-weight: 600; text-decoration: underline dotted; }
/* En escritorio el menú lateral (260 px) cubre el inicio de la barra; en móvil el menú se oculta. */
@media (min-width: 993px) { .navbar-main .nav-wrapper > .title_layout:first-child { margin-left: calc(260px + 1.5rem); } }

/* Avatar con inicial (sustituye la foto de usuario del legado) */
.co-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--co-acento); color: #fff; font-weight: 600; line-height: 1; margin-top: 16px; }
#profile-dropdown { min-width: 210px; }
#profile-dropdown .co-perfil-nombre { padding: 12px 16px; font-weight: 600; color: var(--co-texto-suave); min-height: 0; }
.co-logout { margin: 0; }
.co-logout button { background: none; border: 0; width: 100%; text-align: left; padding: 14px 16px; cursor: pointer; font-size: 16px; display: flex; align-items: center; gap: 24px; }
.co-logout button i { margin: 0; }

/* Tarjetas y estados */
.card, .card-panel { border-radius: var(--co-radio); box-shadow: var(--co-sombra); }
.co-bienvenida { border-radius: var(--co-radio); }
.co-bienvenida h5, .co-bienvenida p { color: #fff; }
.co-estado-vacio { padding: 3rem 1rem; }
.co-alerta-error { color: var(--co-error); background: rgba(198, 40, 40, .08); border-radius: var(--co-radio); padding: .5rem 1rem; margin: 0 .75rem 1rem; }
.co-alerta-error:empty, .co-alerta-error.validation-summary-valid { display: none; }
.co-alerta-error ul { margin: 0; }
.co-error-campo { color: var(--co-error); font-size: .8rem; }
.co-error-pagina { padding: 2rem 1rem; }
.co-error-pagina h1 { font-size: 5rem; margin: 0; color: var(--co-primario); }

/* Login */
.co-login-logo { text-align: center; margin-bottom: 1rem; }
.co-login-logo img { max-width: 260px; width: 70%; opacity: .9; }
.co-lista-sucursales { display: grid; gap: .5rem; margin: 0 .75rem 1rem; }
.co-opcion-sucursal { display: block; cursor: pointer; }
.co-opcion-sucursal input { position: absolute; opacity: 0; pointer-events: none; }
.co-opcion-sucursal span { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border: 2px solid var(--co-borde); border-radius: var(--co-radio); color: var(--co-texto); font-size: 1rem; min-height: 48px; }
.co-opcion-sucursal input:checked + span { border-color: var(--co-primario); background: var(--co-primario-suave); }
.co-opcion-sucursal input:focus-visible + span { box-shadow: var(--co-foco); }

/* Modo oscuro sobre Materialize (vertical-modern-menu) */
html[data-tema="oscuro"] { color-scheme: dark; }
html[data-tema="oscuro"] body, html[data-tema="oscuro"] #main { background-color: var(--co-fondo) !important; color: var(--co-texto); }
html[data-tema="oscuro"] .sidenav-main, html[data-tema="oscuro"] .sidenav-main .brand-sidebar,
html[data-tema="oscuro"] .sidenav, html[data-tema="oscuro"] .sidenav li > a.active + .collapsible-body,
html[data-tema="oscuro"] .collapsible-body { background-color: var(--co-superficie) !important; }
html[data-tema="oscuro"] .sidenav-main .brand-sidebar .logo-text, html[data-tema="oscuro"] .sidenav li > a,
html[data-tema="oscuro"] .sidenav li > a > i, html[data-tema="oscuro"] .sidenav .collapsible-body > ul > li > a,
html[data-tema="oscuro"] .sidenav .collapsible-body > ul > li > a i, html[data-tema="oscuro"] .navbar-toggler i { color: var(--co-texto) !important; }
html[data-tema="oscuro"] .card, html[data-tema="oscuro"] .card-panel, html[data-tema="oscuro"] .modal,
html[data-tema="oscuro"] .modal .modal-footer, html[data-tema="oscuro"] .dropdown-content,
html[data-tema="oscuro"] .login-card, html[data-tema="oscuro"] .collapsible { background-color: var(--co-superficie) !important; color: var(--co-texto); border-color: var(--co-borde); }
html[data-tema="oscuro"] .card.gradient-45deg-indigo-purple, html[data-tema="oscuro"] .card.gradient-45deg-purple-deep-orange,
html[data-tema="oscuro"] .card.gradient-45deg-green-teal, html[data-tema="oscuro"] .card.gradient-45deg-light-blue-cyan { background-color: transparent !important; }
html[data-tema="oscuro"] .co-titulo, html[data-tema="oscuro"] .card .card-title, html[data-tema="oscuro"] h1, html[data-tema="oscuro"] h4,
html[data-tema="oscuro"] h5 { color: var(--co-texto); }
html[data-tema="oscuro"] .dropdown-content li > a, html[data-tema="oscuro"] .dropdown-content li > span,
html[data-tema="oscuro"] .grey-text.text-darken-1, html[data-tema="oscuro"] .co-logout button { color: var(--co-texto) !important; }
html[data-tema="oscuro"] .dropdown-content li:hover, html[data-tema="oscuro"] .sidenav li > a:hover { background-color: rgba(255, 255, 255, .06) !important; }
html[data-tema="oscuro"] input:not([type]), html[data-tema="oscuro"] input[type=text], html[data-tema="oscuro"] input[type=password],
html[data-tema="oscuro"] input[type=email], html[data-tema="oscuro"] input[type=number], html[data-tema="oscuro"] input[type=tel],
html[data-tema="oscuro"] input[type=search], html[data-tema="oscuro"] input[type=date], html[data-tema="oscuro"] textarea,
html[data-tema="oscuro"] select.browser-default { color: var(--co-texto); border-bottom-color: var(--co-borde); background-color: transparent; }
html[data-tema="oscuro"] .input-field > label, html[data-tema="oscuro"] .input-field .prefix:not(.active) { color: var(--co-texto-suave); }
html[data-tema="oscuro"] table.dataTable tbody tr, html[data-tema="oscuro"] table.dataTable.display tbody tr.odd,
html[data-tema="oscuro"] table.dataTable.display tbody tr.even { background-color: var(--co-superficie) !important; color: var(--co-texto); }
html[data-tema="oscuro"] table.dataTable.display tbody tr:hover > td, html[data-tema="oscuro"] table.dataTable.hover tbody tr:hover { background-color: #1f2c40 !important; }
html[data-tema="oscuro"] table.dataTable tbody td, html[data-tema="oscuro"] table.dataTable thead th { border-color: var(--co-borde) !important; }
html[data-tema="oscuro"] .dataTables_wrapper, html[data-tema="oscuro"] .dataTables_wrapper .dataTables_info,
html[data-tema="oscuro"] .dataTables_wrapper .dataTables_length, html[data-tema="oscuro"] .dataTables_wrapper .dataTables_filter { color: var(--co-texto-suave) !important; }
html[data-tema="oscuro"] .dataTables_wrapper .dataTables_filter input, html[data-tema="oscuro"] .dataTables_wrapper .dataTables_length select { background: var(--co-fondo); color: var(--co-texto); }
html[data-tema="oscuro"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--co-texto) !important; }
html[data-tema="oscuro"] .select2-container--default .select2-selection--single, html[data-tema="oscuro"] .select2-dropdown { background: var(--co-superficie); color: var(--co-texto); border-color: var(--co-borde); }
html[data-tema="oscuro"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--co-texto); }
html[data-tema="oscuro"] .switch label { color: var(--co-texto-suave); }
html[data-tema="oscuro"] .co-lista li { border-color: var(--co-borde); }
html[data-tema="oscuro"] .modal-overlay { background: #000; }

/* Táctil: objetivos de 44 px mínimo */
.btn, .btn-large, .co-opcion-sucursal span { min-height: 44px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

@media (max-width: 600px) {
    .navbar-main .nav-wrapper > .title_layout:first-child { display: none; }
    .navbar-main .co-sucursal { margin-left: 64px; max-width: 55vw; }
}

/* ---------- Componentes de catálogo (co-catalogo / co-modal / tablas) ---------- */
.co-catalogo { margin-top: 0; }
.co-collapsible { box-shadow: none; border: 0; margin: 0; }
.co-collapsible-header { background-color: var(--co-header-catalogo, #ececf3) !important; color: var(--co-texto); font-weight: 500; border-radius: var(--co-radio) var(--co-radio) 0 0; }
.co-collapsible-body { padding: 1.25rem; border: 0 !important; }
.co-catalogo-intro { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.co-catalogo-intro .co-ayuda { flex: 1 1 320px; margin: 0; color: var(--co-texto-suave); line-height: 1.5; }
.co-tabla { width: 100% !important; }
.co-tabla-top, .co-tabla-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .5rem 0; }
.dataTables_wrapper .dataTables_filter input { border: 1px solid var(--co-borde); border-radius: var(--co-radio); padding: 0 .75rem; height: 2.4rem; width: 220px; box-sizing: border-box; margin-left: .5rem; }
.dataTables_wrapper .dataTables_length select { display: inline-block; width: auto; height: 2.4rem; border: 1px solid var(--co-borde); border-radius: var(--co-radio); margin: 0 .5rem; }
table.dataTable thead th { color: var(--co-texto-suave); font-weight: 600; text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; border-bottom: 1px solid var(--co-borde) !important; }
table.dataTable tbody td { vertical-align: middle; }
.co-acciones { white-space: nowrap; }
.co-acciones .btn-flat { padding: 0 .4rem; min-height: 36px; height: 36px; line-height: 36px; }
.co-acciones .btn-flat i { color: var(--co-primario); }
.co-acciones .co-eliminar i { color: var(--co-error); }
.co-badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.co-badge-ok { background: rgba(46, 125, 50, .12); color: var(--co-exito); }
.co-badge-off { background: rgba(198, 40, 40, .12); color: var(--co-error); }
.co-modal { max-width: 640px; border-radius: var(--co-radio); }
.co-modal { max-height: 90%; }
.co-modal .modal-header h5, .co-modal .modal-header a { color: #fff; }
.co-modal .modal-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.25rem; }
.co-modal .modal-header h5 { margin: 0; font-size: 1.25rem; }
.co-modal .modal-content { padding: 1.25rem 1.5rem .5rem; }
/* Encabezado y pie fijos: solo el contenido se desplaza, así Guardar siempre queda visible (pantallas de 720-768 px de alto). */
.co-modal { overflow: hidden; }
.co-modal > form { display: flex; flex-direction: column; max-height: 90vh; }
.co-modal > form > .modal-header, .co-modal > form > .modal-footer { flex: none; }
.co-modal > form > .modal-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.co-modal .modal-content .row { margin-bottom: 0; }
.co-modal-footer { display: flex !important; align-items: center; justify-content: space-between; padding: .5rem 1.25rem 1rem !important; height: auto !important; }
.co-switch-estatus label { color: var(--co-texto-suave); }
input.invalid, select.invalid { border-bottom-color: var(--co-error) !important; box-shadow: 0 1px 0 0 var(--co-error) !important; }
.input-field .co-error-campo { display: block; font-size: .78rem; margin-top: -.6rem; min-height: 1rem; }
.input-field .prefix ~ .co-error-campo { margin-left: 3rem; }

/* ---------- Dashboard ---------- */
.co-subtitulo { margin: -.5rem 0 1rem; color: var(--co-texto-suave); }
.co-subtitulo::first-letter { text-transform: uppercase; }
.co-kpi { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; min-height: 104px; }
.co-kpi-icono i { font-size: 2.6rem; opacity: .85; }
.co-kpi-valor { display: block; font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.co-kpi-valor small { font-size: 1rem; opacity: .8; }
.co-kpi-etiqueta { display: block; font-size: .85rem; opacity: .9; }
.co-card-titulo { font-size: 1.05rem !important; font-weight: 600 !important; color: var(--co-texto); }
.co-grafica { position: relative; height: 260px; }
.co-lista { margin: 0; }
.co-lista li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--co-borde); }
.co-lista li:last-child { border-bottom: 0; }
.co-vacio { display: flex; align-items: center; gap: .5rem; color: var(--co-texto-suave); padding: 1.5rem 0; }
/* Si un ícono no existe en la fuente local, la ligadura no debe desbordar el diseño */
.material-icons { overflow: hidden; max-width: 1.2em; white-space: nowrap; }
html[data-tema="oscuro"] table.dataTable tbody tr > .sorting_1, html[data-tema="oscuro"] table.dataTable.display tbody tr > .sorting_1 { background-color: #25273a !important; }
.dataTables_wrapper .dataTables_length select { color: var(--co-texto) !important; background-color: var(--co-superficie); font-size: .9rem; padding: 0 .4rem; }
/* La plantilla pinta de blanco algunos inputs (sin type / date); en el contenido siempre usan el color del tema */
#main input:not([type=checkbox]):not([type=radio]), #main textarea, .modal input:not([type=checkbox]):not([type=radio]), .modal textarea { color: var(--co-texto); -webkit-text-fill-color: var(--co-texto); }
#main select.browser-default, .modal select.browser-default { color: var(--co-texto); -webkit-text-fill-color: var(--co-texto); background-color: var(--co-superficie); border: 1px solid var(--co-borde); border-radius: var(--co-radio); height: 2.8rem; padding: 0 .6rem; }
/* Campos de fecha: ancho suficiente para dd/mm/aaaa */
#main input[type=date] { min-width: 10.5rem; }

/* ---------- Ajustes de la revisión web (10-oct-2026) ---------- */
/* El tema pone text-transform: capitalize en botones ("Nuevo Usuario"); en español se usa mayúscula solo al inicio. */
.btn, .btn-flat, .btn-large, .btn-small { text-transform: none; }
/* Separación entre "Sucursal:" y el nombre (la regla .navbar-main .title_layout anulaba el margen). */
.navbar-main .title_layout.co-sucursal { margin-left: .4rem; }
/* Encabezados de tabla en modo oscuro. */
html[data-tema="oscuro"] table.dataTable thead, html[data-tema="oscuro"] table.dataTable thead th { background-color: var(--co-superficie) !important; color: var(--co-texto-suave) !important; }
/* Filas que abren un detalle. */
.co-fila-link { cursor: pointer; }
.co-fila-link:hover > td { background-color: var(--co-primario-suave); }