/* Fuentes del sistema (sin CDN externo: más rápido y usable en torres con red limitada) */

/* ---- Hub de inicio (módulos) ---- */
.home-hub {
    max-width: 960px;
    margin: 0.75rem auto 2.5rem;
    padding: 0.25rem 0 1rem;
}
.home-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.home-module-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    min-height: 132px;
    padding: 1.1rem 0.85rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    text-decoration: none !important;
    color: var(--heading);
    transition: var(--transition);
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(15, 23, 42, 0.12);
}
.hub-globo {
    position: absolute;
    top: 8px;
    right: 10px;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 6px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.35rem;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
.home-module-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: #cbd5e1;
    color: var(--heading);
}
.home-module-icon {
    font-size: 2rem;
    line-height: 1;
}
.home-module-title {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}
.home-module-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
    max-width: 12rem;
}
.home-module-card--inventarios { border-top: 3px solid #0b3d5c; }
.home-module-card--pedidos { border-top: 3px solid #2e7d32; }
.home-module-card--traspasos { border-top: 3px solid #64748b; }
.home-module-card--recetas { border-top: 3px solid #b45309; }
.home-module-card--cedis-salsas { border-top: 3px solid #c2410c; }
.home-module-card--cedis-panaderia { border-top: 3px solid #a16207; }
.home-module-card--nfc { border-top: 3px solid #0f766e; }
.home-module-card--localizar { border-top: 3px solid #b91c1c; }
.home-module-card--tareas { border-top: 3px solid #15803d; }
.home-module-card--proyectos { border-top: 3px solid #0b3d5c; }
@media (max-width: 480px) {
    .home-module-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .home-module-card {
        min-height: 118px;
        padding: 0.9rem 0.6rem;
    }
}


/*
 * ============================================================
 * SISTEMA DE COLOR FIJO — Recetarioweb
 * No inventar colores por módulo (excepto pestañas de almacén
 * en inventarios / captura, que conservan arcoíris a propósito).
 *
 * Crear / agregar     → --btn-create  (verde)
 * Borrar / cancelar   → --btn-delete  (rojo sobrio)
 * General / export    → --btn-general (= Formatos vacíos PDF)
 * Estados (badges)    → como traspasos
 * Tipografía          → slate neutro, sin morados/azules sueltos
 * ============================================================
 */
:root {
    /* Acciones */
    --btn-create: #2e7d32;
    --btn-create-hover: #1b5e20;
    --btn-delete: #b91c1c;
    --btn-delete-hover: #991b1b;
    --btn-general: #64748b;       /* Formatos vacíos (PDF) / filtros / export */
    --btn-general-hover: #475569;
    --btn-whatsapp: #25d366;
    --btn-whatsapp-hover: #128c7e;

    /* Alias semánticos (compat) */
    --primary: #0b3d5c;           /* acento de marca / links (navy, no indigo) */
    --primary-hover: #082f47;
    --success: #2e7d32;
    --success-hover: #1b5e20;
    --warning: #e65100;
    --warning-hover: #bf360c;
    --danger: #b91c1c;
    --danger-hover: #991b1b;

    /* Superficies */
    --light: #f8fafc;
    --dark: #0f172a;
    --highlight: #fef08a;
    --white: #ffffff;
    --border: #e2e8f0;
    --border-hover: #cbd5e1;

    /* Tipografía (una sola familia de grises) */
    --text: #334155;
    --text-strong: #0f172a;
    --text-muted: #64748b;
    --heading: #0f172a;

    /* Estados — mismos de Traspasos */
    --status-draft-bg: #fff3e0;
    --status-draft-fg: #e65100;
    --status-draft-border: #ffb74d;
    --status-ok-bg: #e8f5e9;
    --status-ok-fg: #2e7d32;
    --status-ok-border: #a5d6a7;
    --status-cancel-bg: #fce4ec;
    --status-cancel-fg: #c62828;
    --status-cancel-border: #f48fb1;
    --status-info-bg: #e3f2fd;
    --status-info-fg: #0d47a1; /* azul más oscuro: legible sobre fondo claro */
    --status-info-border: #90caf9;

    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Reset y Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tipografía: títulos y texto neutros (sin arcoíris de colores por módulo) */
h1, h2, h3, h4, h5, h6 {
    color: var(--heading);
    font-weight: 700;
}

main a:not([class*="btn-"]):not(.logo):not(.nav-icon):not(.sort-link):not(.brand-logo) {
    color: var(--primary);
}

main a:not([class*="btn-"]):not(.logo):not(.nav-icon):hover {
    color: var(--primary-hover);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Navegación Premium */
.navbar {
    background-color: #0f172a;
    color: var(--white);
    padding: 0.7rem 0;
    min-height: 76px;
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid #1e293b;
    position: sticky;
    top: 0;
    z-index: 11060;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-content {
    display: flex;
    width: 100%;
}

.nav-left,
.nav-right {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
}

.nav-right {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* Solo visibles en móvil (menú ☰); en escritorio se ocultan */
.nav-mobile-only {
    display: none !important;
}

.nav-desktop-only {
    display: inline-flex;
}

.logo,
.brand-logo {
    flex: 2;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--white);
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: var(--transition);
    min-width: 0;
    /* visible: no cortar el «MX» del wordmark BOSA MX */
    overflow: visible;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.brand-logo-img {
    height: 36px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Wordmark horizontal BOSA MX — MX debe verse completo (diferencia vs BOSA genérico) */
.brand-logo--wordmark {
    gap: 0;
    flex: 2 1 auto;
    justify-content: center;
    min-width: 200px;
    overflow: visible;
}

.brand-logo-img--wordmark {
    height: 52px;
    max-width: min(400px, 64vw);
    width: auto;
    object-fit: contain;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
}

.brand-logo-text {
    background: linear-gradient(135deg, #e0e7ff, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.logo:hover,
.brand-logo:hover {
    opacity: 0.9;
}

.nav-icon {
    font-size: 20px;
    color: var(--white);
    text-decoration: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: #1e293b;
    transition: var(--transition);
    border: 1px solid #334155;
}

.nav-icon:hover {
    transform: translateY(-2px);
    background-color: #334155;
    box-shadow: var(--shadow-sm);
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Textos de negocio: visualmente en mayúsculas (no usuario/contraseña) */
input[type="text"],
input[type="search"],
input:not([type]),
textarea {
    text-transform: uppercase;
}

input[type="password"],
input[type="email"],
input[type="number"],
input[type="hidden"],
input[type="file"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[name="username"],
input[name="usuario"],
input[data-no-upper="1"] {
    text-transform: none !important;
}

.dropbtn {
    background-color: #1e293b;
    color: white;
    font-size: 18px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #334155;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
}

.dropbtn:hover {
    transform: translateY(-2px);
    background-color: #334155;
    box-shadow: var(--shadow-sm);
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    min-width: 240px;
    max-width: min(320px, 92vw);
    /* Escritorio: scroll si hay muchos ítems (antes overflow:hidden cortaba el menú) */
    max-height: min(75vh, calc(100vh - 96px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: var(--shadow-lg);
    z-index: 11070;
    border-radius: 12px;
    margin-top: 10px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    transform-origin: top left;
}

.dropdown-content::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}

.dropdown-content a {
    color: #334155;
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    font-weight: 500;
    transition: var(--transition);
}

.dropdown-content .nav-section-label {
    padding: 10px 20px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    pointer-events: none;
    user-select: none;
}

.dropdown-content .nav-section-label:first-child {
    border-top: none;
}

.dropdown-content a.nav-sub {
    padding-left: 32px;
    font-size: 0.92rem;
    color: #64748b;
}

.dropdown-content a:hover,
.dropdown-content a:focus-visible {
    background-color: #f1f5f9;
    color: var(--primary);
    padding-left: 24px;
    outline: none;
}

.dropdown-content a.nav-sub:hover,
.dropdown-content a.nav-sub:focus-visible {
    padding-left: 36px;
}

.dropbtn:focus-visible {
    outline: 2px solid #818cf8;
    outline-offset: 2px;
}

.dropdown.open .dropdown-content {
    display: block;
    animation: fadeInDropdown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown:not(.open) .dropdown-content,
.dropdown-content[hidden] {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 11040;
    border: none;
    padding: 0;
    margin: 0;
}

body.nav-menu-open {
    overflow: hidden;
}

body.nav-menu-open .nav-backdrop {
    display: block;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 1px solid #334155;
    padding-left: 15px;
}

.user-info .user-name {
    font-size: 0.9rem;
    color: #e2e8f0;
}

.user-info .logout-link {
    text-decoration: none;
    font-size: 1.2rem;
    color: #f8fafc;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 8px;
    white-space: nowrap;
}
.logout-link-text {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.user-info .logout-link:hover {
    background: #334155;
}

@keyframes fadeInDropdown {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Contenido Principal */
main {
    min-height: calc(100vh - 200px);
    padding: 2.5rem 0;
}

/* Tarjeta estándar (Card) */
.card {
    background: var(--white);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(226, 232, 240, 0.8);
    margin-bottom: 2rem;
}

/* Recepción Pedido fácil: un recuadro debajo del otro (en el celular el de
   2 columnas recortaba la nota/factura y el encargado solo veía producto). */
.pf-foto-slots {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 1rem;
}
.pf-foto-slot {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
}
.pf-foto-slot label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}
.pf-foto-slot input[type="file"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.page-header {
    margin-bottom: 2.5rem;
    text-align: center;
}

.page-header h1 {
    font-size: 32px;
    color: var(--dark);
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 1.5rem;
}

/* Búsqueda */
.search-box {
    width: 100%;
    max-width: 500px;
    padding: 12px 20px;
    font-size: 15px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    outline: none;
    transition: var(--transition);
    background-color: var(--white);
    color: var(--dark);
    font-family: inherit;
}

.search-box:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

/* Tablas */
.table-container {
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 2.5rem;
    border: 1px solid var(--border);
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background-color: #1e293b;
    color: var(--white);
}

thead th {
    padding: 16px 20px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    border-bottom: 1px solid #334155;
    color: inherit; /* hereda blanco del thead; no forzar blanco sobre fondos claros */
}

/* Si un template pone fondo claro en thead/tr, el texto debe ser oscuro (evita blanco sobre azul pálido) */
thead.thead-light,
thead.thead-light th,
tr.thead-light,
tr.thead-light th {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-bottom-color: #e2e8f0 !important;
}

tbody tr {
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}

tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

tbody tr:hover {
    background-color: #f1f5f9;
}

tbody td {
    padding: 16px 20px;
    color: #475569;
    vertical-align: middle;
}

/* Sortable Headers (flechas ↑ ↓ ↕) */
.sortable {
    cursor: pointer;
    user-select: none;
    transition: var(--transition);
    position: relative;
}

.sortable:hover {
    background-color: #334155 !important;
}

.sortable.sorted {
    background-color: #1e3a5f !important;
}

.sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.sort-link:hover {
    color: #e0f2fe;
}

.sort-icon {
    font-size: 0.85rem;
    margin-left: 4px;
    opacity: 0.9;
    font-weight: 700;
}

.sortable.sorted .sort-icon {
    color: #7dd3fc;
    opacity: 1;
}

.receta-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.receta-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.costo,
.precio {
    font-weight: 700;
    color: #047857; /* Darker emerald for readability */
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

/* Botones Premium — mismo alto/padding para armonía visual */
.btn-primary,
.btn-secondary,
.btn-subreceta,
.btn-success,
.btn-create,
.btn-general,
.btn-danger,
.btn-whatsapp,
.btn-edit,
.btn-delete,
.btn-view,
.btn-warning,
.btn-info,
.btn-export-pdf,
.btn-export-excel,
.btn-import {
    padding: 10px 18px;
    min-height: 40px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: var(--transition);
    font-family: inherit;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
}

/* Crear / agregar / confirmar positivo */
.btn-primary,
.btn-create,
.btn-success {
    background-color: var(--btn-create);
    color: var(--white);
    border: 1px solid var(--btn-create);
    box-shadow: 0 2px 4px rgba(46, 125, 50, 0.2);
}

.btn-primary:hover,
.btn-create:hover,
.btn-success:hover {
    background-color: var(--btn-create-hover);
    border-color: var(--btn-create-hover);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.28);
}

/* General: filtros, export, volver, Formatos vacíos PDF */
.btn-secondary,
.btn-general {
    background-color: var(--btn-general);
    color: var(--white);
    border: 1px solid var(--btn-general);
    box-shadow: 0 2px 4px rgba(100, 116, 139, 0.15);
}

.btn-secondary:hover,
.btn-general:hover {
    background-color: var(--btn-general-hover);
    border-color: var(--btn-general-hover);
    color: var(--white);
    transform: translateY(-1px);
}

/* Sub-receta: mismo general (sin teal especial) */
.btn-subreceta {
    background-color: var(--btn-general);
    color: #ffffff;
    border: 1px solid var(--btn-general);
    box-shadow: 0 2px 4px rgba(100, 116, 139, 0.15);
}

.btn-subreceta:hover {
    background-color: var(--btn-general-hover);
    border-color: var(--btn-general-hover);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Acciones de página (traspasos, pedidos, etc.): botones del mismo tamaño */
.header-actions > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.header-actions .btn-primary,
.header-actions .btn-secondary,
.header-actions .btn-subreceta,
.header-actions .btn-success {
    min-height: 40px;
    padding: 10px 18px;
    font-size: 14px;
}

/* Solo en libro de recetas */
.page-header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1rem;
    width: 100%;
}

.page-header-top h1 {
    margin: 0;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.page-header-actions .btn-primary,
.page-header-actions .btn-secondary,
.page-header-actions .btn-subreceta {
    min-height: 40px;
    padding: 10px 18px;
    font-size: 14px;
}

/* btn-success ya unificado arriba con btn-primary / create */

.btn-edit,
.btn-view {
    background-color: var(--btn-general);
    color: var(--white);
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--btn-general);
}

.btn-edit:hover,
.btn-view:hover {
    background-color: var(--btn-general-hover);
    border-color: var(--btn-general-hover);
    transform: translateY(-1px);
}

/* Borrar / cancelar acción destructiva (rojo sobrio) */
.btn-delete,
.btn-delete-row,
.btn-danger {
    background-color: var(--btn-delete);
    color: var(--white);
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--btn-delete);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-delete:hover,
.btn-delete-row:hover,
.btn-danger:hover {
    background-color: var(--btn-delete-hover);
    border-color: var(--btn-delete-hover);
    color: var(--white);
    transform: translateY(-1px);
}

/* Aviso naranja solo cuando es “acción requerida / perfil incompleto” — no decorativo */
.btn-warning {
    background-color: var(--status-draft-fg);
    color: var(--white);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--status-draft-fg);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.btn-warning:hover {
    background-color: var(--warning-hover);
    border-color: var(--warning-hover);
    transform: translateY(-1px);
}

/* Export / import = general (mismo que Formatos vacíos) */
.btn-export-pdf,
.btn-export-excel,
.btn-import,
.btn-info {
    background-color: var(--btn-general);
    color: var(--white);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--btn-general);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    font-family: inherit;
    box-shadow: var(--shadow-sm);
}

.btn-export-pdf:hover,
.btn-export-excel:hover,
.btn-import:hover,
.btn-info:hover {
    background-color: var(--btn-general-hover);
    border-color: var(--btn-general-hover);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.import-export-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Volver: botón general con flecha (reemplaza letreros «← Volver a…») */
.btn-back {
    background-color: var(--btn-general);
    color: var(--white);
    border: 1px solid var(--btn-general);
    padding: 8px 14px;
    min-height: 36px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    box-shadow: 0 2px 4px rgba(100, 116, 139, 0.15);
    white-space: nowrap;
}

.btn-back:hover {
    background-color: var(--btn-general-hover);
    border-color: var(--btn-general-hover);
    color: var(--white);
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-back .btn-back-arrow {
    font-size: 1.1em;
    line-height: 1;
    font-weight: 700;
}

/* WhatsApp (único color de marca externa permitido) */
.btn-whatsapp {
    background-color: var(--btn-whatsapp) !important;
    border-color: var(--btn-whatsapp) !important;
    color: #fff !important;
    gap: 8px;
}

.btn-whatsapp:hover {
    background-color: var(--btn-whatsapp-hover) !important;
    border-color: var(--btn-whatsapp-hover) !important;
    color: #fff !important;
}

.btn-whatsapp .wa-icon {
    width: 1.15em;
    height: 1.15em;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ---- Badges de estado (Traspasos / Pedidos / Salsas) ---- */
.badge-estado {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.badge-estado-borrador {
    background: var(--status-draft-bg);
    color: var(--status-draft-fg);
}

/* Perfil de usuario: un solo color neutro (sin arcoíris por rol) */
.badge-perfil {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.badge-estado-ok,
.badge-estado-confirmado,
.badge-estado-entregado {
    background: var(--status-ok-bg);
    color: var(--status-ok-fg);
}

.badge-estado-cancelado,
.badge-estado-rechazado {
    background: var(--status-cancel-bg);
    color: var(--status-cancel-fg);
}

.badge-estado-diferencia {
    background: #fff7ed;
    color: #c2410c;
}

.badge-estado-info,
.badge-estado-proceso,
.badge-estado-ruta,
.badge-estado-enviado,
.badge-estado-listo {
    background: var(--status-info-bg);
    color: var(--status-info-fg);
}

.pwd-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pwd-wrap input {
    width: 100%;
    padding-right: 2.4rem;
}
.pwd-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    padding: 4px 6px;
    color: #64748b;
}
.pwd-toggle:hover { color: #0f172a; }
.pwd-gen-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.pwd-gen-row button {
    font-size: 0.82rem;
    padding: 0.35rem 0.7rem;
}
.pwd-hint {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0.4rem 0 0;
    min-height: 1.1em;
}
.perm-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #e2e8f0;
    color: #334155;
    font-size: 0.68rem;
    font-weight: 800;
    cursor: help;
    flex-shrink: 0;
}
.perm-i:hover, .perm-i:focus { background: #0f172a; color: #fff; }
.listado-cerrados { margin-top: 1.25rem; }
.listado-cerrados > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--heading);
    padding: 0.55rem 0;
    list-style: none;
}
.listado-cerrados > summary::-webkit-details-marker { display: none; }
.listado-cerrados > summary:before { content: '▸ '; }
.listado-cerrados[open] > summary:before { content: '▾ '; }
.fotos-pendiente { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.fotos-pendiente img {
    width: 56px; height: 56px; object-fit: cover; border-radius: 6px;
    border: 1px solid #e2e8f0;
}

/* ---- Alertas de estado (cajas) ---- */
.alert-estado {
    padding: 0.9rem 1.1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text);
}

.alert-estado-warning {
    background: var(--status-draft-bg);
    border: 1px solid var(--status-draft-border);
    color: #5d4037;
}

.alert-estado-error {
    background: var(--status-cancel-bg);
    border: 1px solid var(--status-cancel-border);
    color: var(--status-cancel-fg);
}

.alert-estado-ok {
    background: var(--status-ok-bg);
    border: 1px solid var(--status-ok-border);
    color: var(--status-ok-fg);
}

.alert-estado-info {
    background: var(--status-info-bg);
    border: 1px solid var(--status-info-border);
    color: var(--status-info-fg);
}

.tr-recibir-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-top: 12px;
}

.tr-recibir-actions form {
    margin: 0;
}

.tr-rechazar-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 1 1 220px;
}

.tr-rechazar-form .form-control {
    flex: 1 1 160px;
    min-width: 160px;
    padding: 8px;
}

@media (max-width: 768px) {
    .tr-recibir-actions,
    .tr-rechazar-form {
        flex-direction: column;
        align-items: stretch;
    }

    .tr-recibir-actions .btn-primary,
    .tr-recibir-actions .btn-danger {
        width: 100%;
        min-height: 44px;
    }
}

.actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Formularios */
.receta-form {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.form-section {
    margin-bottom: 2.5rem;
}

.form-section h2 {
    color: var(--dark);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 0.5rem;
    color: #475569;
}

.form-group input,
.form-group select {
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: var(--transition);
    color: var(--dark);
    font-family: inherit;
    background-color: var(--white);
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

.ingredientes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.costo-total-display {
    font-size: 18px;
    font-weight: 700;
    color: #065f46;
    background-color: #ecfdf5;
    border: 1px solid #a7f3d0;
    padding: 10px 24px;
    border-radius: 8px;
}

.ingredientes-table {
    margin-top: 1.5rem;
}

.ingredientes-table input,
.ingredientes-table select {
    width: 100%;
    padding: 10px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
}

.ingredientes-table input:focus,
.ingredientes-table select:focus {
    border-color: var(--primary);
    outline: none;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
}

/* Vista de Receta */
.receta-detail {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.receta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.receta-header h1 {
    color: var(--dark);
    font-size: 32px;
    font-weight: 800;
}

.receta-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.receta-elab-link {
    display: inline-block;
    margin-left: 4px;
    text-decoration: none;
    font-size: 1rem;
    vertical-align: middle;
}

.elaboracion-section {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    scroll-margin-top: 88px;
}
.elaboracion-section h2 {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
    color: #0f172a;
}
.elaboracion-section h3 {
    margin: 1rem 0 0.35rem;
    font-size: 0.95rem;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.elaboracion-hint {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    color: #64748b;
}
.elaboracion-texto {
    white-space: pre-wrap;
    word-break: break-word;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #1e293b;
}
ol.elaboracion-pasos {
    margin: 0;
    padding: 12px 16px 12px 2.35rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.98rem;
    line-height: 1.55;
    color: #1e293b;
}
ol.elaboracion-pasos li {
    margin: 0 0 0.7rem;
    padding-left: 0.2rem;
}
ol.elaboracion-pasos li:last-child {
    margin-bottom: 0;
}
.elaboracion-alerta {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-left: 4px solid #ea580c;
    border-radius: 8px;
}
.elaboracion-alerta h3 {
    margin-top: 0;
    color: #9a3412;
}
.elaboracion-texto--alerta {
    border-color: #fed7aa;
}
.elaboracion-tip {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-left: 4px solid #059669;
    border-radius: 8px;
}
.elaboracion-tip h3 {
    margin-top: 0;
    color: #065f46;
}
.elaboracion-texto--tip {
    border-color: #a7f3d0;
}
.elaboracion-guia {
    margin: 0 0 0.85rem;
    padding: 0.75rem 0.9rem;
    background: #f1f5f9;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.45;
}
.elaboracion-guia p {
    margin: 0;
}
.elaboracion-guia ul {
    margin: 0.4rem 0;
    padding-left: 1.2rem;
}
.elaboracion-guia-ej {
    margin: 0.35rem 0 0 !important;
    font-style: italic;
    color: #0f172a;
}
#procedimiento {
    min-height: 160px;
}
.elaboracion-vacio {
    color: #64748b;
    margin: 0 0 0.75rem;
}
.elaboracion-edit {
    margin: 0.85rem 0 0;
    font-size: 0.88rem;
}
#elaboracion-form {
    scroll-margin-top: 88px;
}
#elaboracion-form textarea {
    width: 100%;
    min-height: 88px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    line-height: 1.45;
    resize: vertical;
}

.receta-info {
    margin-bottom: 2.5rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.ficha-header {
    background-color: #1e293b;
    color: var(--white);
    text-align: center;
    padding: 12px;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-table-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #fff;
}

.info-column:first-child {
    border-right: 1px solid var(--border);
}

@media (max-width: 768px) {
    .info-table-container {
        grid-template-columns: 1fr;
    }

    .info-column:first-child {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
}

.info-row {
    display: flex;
    border-bottom: 1px solid #f1f5f9;
    padding: 12px 20px;
    align-items: center;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 700;
    color: #475569;
    width: 150px;
    flex-shrink: 0;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.info-value {
    color: #0f172a;
    font-size: 15px;
    font-weight: 500;
}

.info-row.highlight {
    background-color: #fffbeb;
}

.info-row.cost-row {
    background-color: #f0fdf4;
}

.costo-total {
    color: #047857;
    font-size: 22px;
    font-weight: 800;
}

.ingredientes-section {
    margin-top: 2.5rem;
}

.ingredientes-section h2 {
    color: var(--dark);
    font-weight: 800;
    margin-bottom: 1.5rem;
}

/* Sub-recetas: usos en platillos y avisos */
.subreceta-usos-section {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.subreceta-usos-section h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--dark);
}

.subreceta-hint {
    margin: 0 0 0.75rem 0;
    color: #555;
    font-size: 0.95em;
    line-height: 1.45;
}

.platillos-padres-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.platillos-padres-list li {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    font-size: 0.95em;
}

.platillo-meta {
    color: #777;
    font-size: 0.85em;
    margin-left: 0.35rem;
}

.subreceta-count {
    margin: 0.75rem 0 0 0;
    font-size: 0.9em;
    color: #555;
}

.subreceta-empty {
    color: #777;
    font-size: 0.95em;
}

.alert-inline {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    line-height: 1.45;
    font-size: 0.95em;
}

.alert-warning-inline {
    background: #fff8e1;
    color: #8d6e00;
    border: 1px solid #ffe082;
}

.alert-info-inline {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

/* Botones de sub-receta: consultar vs crear (estados distintos) */
.sub-action-cell {
    white-space: nowrap;
}

.btn-sub {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: var(--transition);
    line-height: 1.2;
}

.btn-sub:hover {
    transform: translateY(-1px);
}

.btn-sub-consultar {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

.btn-sub-consultar:hover {
    background: #bbdefb;
    color: #0d47a1;
}

.btn-sub-crear {
    background: #fff8e1;
    color: #f57f17;
    border: 1px solid #ffe082;
}

.btn-sub-crear:hover {
    background: #ffecb3;
    color: #e65100;
}

.btn-sub-vacia {
    background: #fbe9e7;
    color: #bf360c;
    border: 1px solid #ffab91;
}

.btn-sub-vacia:hover {
    background: #ffccbc;
    color: #bf360c;
}

/* Estadísticas */
.stats {
    display: flex;
    gap: 1.5rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.stat-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: var(--shadow);
    text-align: center;
    flex: 1;
    min-width: 200px;
    border: 1px solid var(--border);
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-card h3 {
    font-size: 36px;
    color: var(--primary);
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.stat-card p {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Footer */
footer {
    background-color: #0f172a;
    color: #94a3b8;
    text-align: center;
    padding: 3rem 0;
    margin-top: 5rem;
    border-top: 1px solid #1e293b;
}

footer p {
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    .navbar {
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .navbar .container {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .navbar-content {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 6px !important;
        min-width: 0 !important;
    }
    
    /* Marca compacta en móvil (logo + nombre corto de la empresa) */
    .logo,
    .brand-logo {
        display: inline-flex !important;
        font-size: 14px !important;
        letter-spacing: 0.5px !important;
        gap: 6px !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .brand-logo-img,
    .brand-logo-img--wordmark {
        height: 52px !important;
        max-width: min(240px, 55vw) !important;
    }

    .brand-logo-text {
        max-width: 100px !important;
        font-size: 13px !important;
    }

    .navbar-content {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
    }
    
    .nav-left, .nav-right {
        gap: 6px !important;
        flex: none !important;
        min-width: 0 !important;
        width: auto !important;
    }

    .nav-right {
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
    }

    /* En móvil: botones Receta/Sub-receta salen de la barra (van al menú ☰) */
    .nav-desktop-only {
        display: none !important;
    }

    .nav-mobile-only {
        display: flex !important;
    }

    .dropdown-content a.nav-mobile-only {
        display: flex !important;
    }

    .dropdown-content .nav-section-label.nav-mobile-only {
        display: block !important;
    }

    .dropdown-content a.nav-logout {
        color: #b91c1c !important;
        font-weight: 600 !important;
    }
    
    .nav-right .user-info span {
        display: none !important;
    }
    
    .nav-right .btn-primary,
    .nav-right .btn-subreceta {
        padding: 8px 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .nav-right .btn-primary .btn-full-label,
    .nav-right .btn-subreceta .btn-full-label {
        display: none;
    }

    .user-info {
        border-left: none !important;
        padding-left: 0 !important;
        gap: 0 !important;
        margin: 0 !important;
    }

    .user-info .user-name {
        display: none !important;
    }

    .user-info .logout-link {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .dropdown-content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: min(300px, 86vw) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 16px 16px 0 !important;
        padding: 72px 0 24px 0 !important;
        z-index: 11100 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-105%);
        visibility: hidden;
        display: block !important;
        transition: transform 0.22s ease, visibility 0.22s;
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.25) !important;
        box-sizing: border-box !important;
        pointer-events: none;
    }

    .dropdown.open .dropdown-content {
        display: flex !important;
        flex-direction: column;
        transform: translateX(0);
        visibility: visible;
        animation: none !important;
        pointer-events: auto;
    }

    .dropdown:not(.open) .dropdown-content,
    .dropdown-content[hidden] {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
        transform: none !important;
    }

    .dropdown-content::before {
        display: none;
    }

    .dropdown-content a {
        padding: 14px 22px !important;
        font-size: 1rem !important;
        border-bottom: 1px solid #f1f5f9;
        box-sizing: border-box;
    }

    .nav-backdrop {
        z-index: 11090 !important;
    }

    main {
        padding: 1rem 0 !important;
        max-width: 100vw;
        overflow-x: hidden;
        /* clip no crea contenedor de scroll: no rompe position:sticky (buscador inventario) */
        overflow-x: clip;
    }

    .container {
        padding: 0 12px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .receta-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .receta-form, .receta-detail {
        padding: 16px !important;
        border-radius: 12px !important;
    }
    .elaboracion-section {
        padding: 1rem;
        scroll-margin-top: 72px;
    }
    ol.elaboracion-pasos {
        padding-left: 2.1rem;
        font-size: 1rem;
    }
    #elaboracion-form textarea {
        min-height: 110px;
        font-size: 16px;
    }
    #procedimiento {
        min-height: 180px;
    }

    .form-section {
        margin-bottom: 1.5rem !important;
    }

    .form-actions {
        margin-top: 1.5rem !important;
        padding-top: 1.5rem !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .form-actions button, .form-actions a {
        width: 100% !important;
    }

    /* Conversión de Tablas a Tarjetas Responsivas */
    .table-container table thead {
        display: none;
    }
    .table-container table, 
    .table-container tbody, 
    .table-container tr, 
    .table-container td {
        display: block;
        width: 100%;
    }
    .table-container tr {
        margin-bottom: 1.25rem;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #fff;
        box-shadow: var(--shadow-sm);
        padding: 12px 16px;
        position: relative;
    }
    .table-container td {
        text-align: left;
        padding: 10px 0;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 44px;
    }
    .table-container td:last-child {
        border-bottom: none;
    }
    .table-container td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--text-muted);
        font-size: 0.8rem;
        text-transform: uppercase;
        margin-right: 15px;
        letter-spacing: 0.5px;
    }
    /* Estilo especial para la columna del nombre/receta destacado */
    .table-container td[data-label="Receta"],
    .table-container td[data-label="Nombre"] {
        font-size: 1.1rem;
        border-bottom: 2px solid #e0e7ff;
        padding-bottom: 8px;
        margin-bottom: 8px;
        display: block;
        text-align: center;
    }
    .table-container td[data-label="Receta"]::before,
    .table-container td[data-label="Nombre"]::before {
        display: none;
    }
    .table-container td[data-label="Receta"] a,
    .table-container td[data-label="Nombre"] a {
        display: block;
        width: 100%;
        text-align: center;
        font-weight: 800;
    }
    .table-container td[data-label="Nombre"] .insumo-nombre-wrap {
        align-items: center;
        text-align: left;
    }
    .table-container td[data-label="Nombre"] .insumo-usos-btn {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 1.15rem;
    }
    .table-container td[data-label="Nombre"] .insumo-usos-list a {
        text-align: left;
        font-weight: 700;
        font-size: 0.9rem;
    }
    .insumo-usos-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .insumo-usos-cant { white-space: normal; }
}

/* --- Mobile-Specific Inventory Enhancements --- */

/* Contenedor con scroll horizontal suave */
.responsive-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
    background: white;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

/* Columna pegajosa (Sticky) para la descripción en móviles */
@media (max-width: 900px) {
    .sticky-col {
        position: sticky;
        left: 0;
        background: white !important;
        z-index: 10;
        border-right: 2px solid var(--border) !important;
    }
    
    th.sticky-col {
        z-index: 20;
        background: #f8fafc !important;
        color: #0f172a !important;
    }
}


/* Modal Responsivo */
@media (max-width: 768px) {
    .modal-content {
        width: 95% !important;
        margin: 5% auto !important;
        padding: 20px !important;
        max-height: 90vh;
        overflow-y: auto;
        border-radius: 16px !important;
        box-shadow: var(--shadow-lg) !important;
    }
    
    .modal-grid-info {
        grid-template-columns: 1fr !important;
    }
    
    .modal-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .modal-actions button {
        width: 100%;
    }
}

/* Estilo para los inputs de suma rápida en móvil */
.calc-mobile-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
}

.calc-mobile-row .form-group {
    flex: 1;
    min-width: 120px;
}

/* --- Mobile-Friendly Inventory Card Layout --- */
@media (max-width: 768px) {
    .inventory-table thead {
        display: none; /* Ocultar encabezados en móvil */
    }

    .inventory-table, 
    .inventory-table tbody, 
    .inventory-table tr, 
    .inventory-table td {
        display: block;
        width: 100%;
    }

    .inventory-table tr {
        margin-bottom: 1.5rem;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #fff;
        box-shadow: var(--shadow);
        padding: 15px 10px;
        position: relative;
    }

    .inventory-table td {
        text-align: left;
        padding: 12px 0;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 50px;
    }

    .inventory-table td:last-child {
        border-bottom: none;
    }

    .inventory-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #64748b;
        font-size: 0.8rem;
        text-transform: uppercase;
        margin-right: 15px;
        letter-spacing: 0.5px;
    }

    /* Ajustes específicos para la descripción */
    .inventory-table td.sticky-col {
        position: static;
        background: transparent !important;
        border-right: none !important;
        font-size: 1.15rem;
        color: var(--primary);
        padding-bottom: 10px;
        border-bottom: 2px solid #e0e7ff;
        margin-bottom: 10px;
        display: block;
        text-align: center;
        font-weight: 800;
    }

    .inventory-table td.sticky-col::before {
        display: none; /* No mostrar etiqueta para la descripción */
    }

    /* Ajustes de inputs */
    .input-base {
        width: 100px !important;
        height: 40px !important;
        font-size: 1rem !important;
        padding: 5px 10px !important;
        border-radius: 8px !important;
    }

    .inventory-table td div[title="Capturar y sumar al total"] {
        display: flex !important;
        width: 100%;
        margin-top: 8px;
        justify-content: center;
        border-left: none !important;
        padding-left: 0 !important;
    }

    .inventory-table td div[title="Capturar y sumar al total"] input {
        width: 100px !important;
        height: 40px;
        font-size: 1rem !important;
        border-radius: 8px 0 0 8px !important;
    }

    .inventory-table td div[title="Capturar y sumar al total"] button {
        height: 40px;
        padding: 0 14px !important;
        font-size: 1rem !important;
        border-radius: 0 8px 8px 0 !important;
    }

    /* Botón de presentaciones */
    .inventory-table .btn-secondary {
        width: 100%;
        padding: 12px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        background-color: var(--primary);
        color: white;
        box-shadow: var(--shadow-sm);
    }

    /* Total acumulado */
    .inventory-table td[id^="total-"] {
        font-size: 1.15rem !important;
        color: #047857;
        font-weight: 800;
    }
    
    .card.inventory-card {
        padding: 10px !important;
    }
    
    .responsive-table-wrapper {
        border: none !important;
        box-shadow: none !important;
        max-height: none !important;
    }

    .inventory-table td div[title="Capturar y sumar al total"] input,
    .inventory-table td div[title="Capturar y sumar al total"] button,
    .input-base {
        min-height: 44px !important;
        height: 44px !important;
    }
}

/* --- Notificaciones toast --- */
.app-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 14px 22px;
    color: #fff;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 12000;
    font-weight: 600;
    font-size: 0.95rem;
    max-width: min(360px, calc(100vw - 40px));
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.app-notification--visible {
    transform: translateX(0);
    opacity: 1;
}

.app-notification--success {
    background-color: #059669;
}

.app-notification--error {
    background-color: #dc2626;
}

/* --- Mobile UX v8 (solo ≤768px; escritorio intacto) --- */
@media (max-width: 768px) {
    :root {
        --nav-height: 56px;
    }

    body {
        -webkit-tap-highlight-color: rgba(79, 70, 229, 0.15);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .navbar {
        padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
        padding-bottom: 0.5rem;
        z-index: 11120;
    }

    .nav-icon,
    .dropbtn,
    .user-info .logout-link {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px;
        min-height: 42px;
        max-width: 42px;
        box-sizing: border-box;
    }

    /* Botones verdes ya no van en la barra móvil */
    .nav-right .btn-primary,
    .nav-right .btn-subreceta {
        display: none !important;
    }

    .dropdown-content {
        padding-top: calc(var(--nav-height) + env(safe-area-inset-top, 0px) + 12px) !important;
        padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .dropdown-content a {
        min-height: 48px;
        display: flex !important;
        align-items: center;
    }

    .page-header {
        margin-bottom: 1.5rem;
    }

    .page-header h1 {
        font-size: 1.45rem;
        margin-bottom: 1rem;
        line-height: 1.25;
    }

    .page-header .search-box,
    .page-header .search-wrapper {
        width: 100%;
        max-width: none;
    }

    .search-wrapper {
        display: flex;
        width: 100%;
    }

    .import-export-section.card,
    .form-section.card {
        padding: 16px !important;
    }

    .import-export-buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .import-export-buttons > *,
    .import-export-buttons form,
    .import-export-buttons label,
    .import-export-buttons a {
        width: 100%;
    }

    .import-export-buttons .btn-import,
    .import-export-buttons .btn-secondary,
    .import-export-buttons .btn-export-excel,
    .import-export-buttons .btn-export-pdf {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .card {
        padding: 16px;
        border-radius: 12px;
    }

    .stats {
        flex-direction: column;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .stat-card {
        min-width: 0;
        padding: 1.25rem;
    }

    footer {
        margin-top: 2rem;
        padding: 2rem 0 max(2rem, env(safe-area-inset-bottom, 0px));
    }

    /* Inventarios */
    .header-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-bottom: 1.25rem !important;
    }

    .header-actions > div {
        width: 100%;
    }

    .header-actions h1 {
        font-size: 1.35rem !important;
    }

    .header-actions .btn-primary,
    .header-actions .btn-secondary,
    .header-actions .btn-success,
    .header-actions .btn-danger {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        text-align: center;
    }

    .header-actions > div:first-child > div[style*="background: #e8f5e9"] {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
    }

    .header-actions > div:first-child > div[style*="background: #e8f5e9"] button {
        width: 100%;
        min-height: 44px;
    }

    .grid-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .grid-container .card-actions {
        flex-direction: column !important;
    }

    .grid-container .card-actions a,
    .grid-container .card-actions button,
    .grid-container .card-actions form {
        width: 100%;
    }

    .grid-container .card-actions .btn-primary,
    .grid-container .card-actions .btn-secondary {
        min-height: 44px;
        justify-content: center;
    }

    /* Tablas → tarjetas: acciones táctiles */
    .table-container td[data-label="Acciones"] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding-top: 12px;
    }

    .table-container td[data-label="Acciones"]::before {
        align-self: flex-start;
    }

    .table-container td[data-label="Acciones"] .actions {
        width: 100%;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .table-container td[data-label="Acciones"] .btn-view,
    .table-container td[data-label="Acciones"] .btn-edit,
    .table-container td[data-label="Acciones"] .btn-delete,
    .table-container td[data-label="Acciones"] .btn-delete-row {
        min-width: 44px;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 1.1rem;
    }

    /* Modales por encima del navbar sticky */
    .modal {
        z-index: 12000 !important;
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal .modal-content,
    .modal .modal-content.card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 92dvh;
        padding: 20px 16px max(20px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .modal .modal-content h2,
    .modal .modal-content h3 {
        font-size: 1.15rem;
    }

    .modal .modal-content button,
    .modal .modal-content .btn-primary,
    .modal .modal-content .btn-secondary {
        min-height: 44px;
    }

    .modal .modal-content > div[style*="flex-end"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .modal .modal-content > div[style*="flex-end"] button {
        width: 100%;
    }

    /* Login */
    .login-card {
        margin: 1.5rem auto !important;
        padding: 1.5rem !important;
        max-width: none !important;
    }

    .login-card input {
        font-size: 16px !important;
        min-height: 44px;
        padding: 12px 14px !important;
    }

    .login-card button[type="submit"] {
        min-height: 48px;
    }

    /* Formularios: evita zoom iOS en inputs */
    .form-group input,
    .form-group select,
    .form-group textarea,
    .search-box,
    #buscador-grid {
        font-size: 16px !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 44px;
    }

    /* Audit logs */
    .audit-filters-form {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .audit-filters-form > div {
        min-width: 0 !important;
        width: 100% !important;
    }

    .audit-filters-form > div:last-child {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .audit-filters-form button,
    .audit-filters-form a.btn-secondary {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        text-align: center;
    }

    /* Inventario: barra de búsqueda sticky bajo navbar */
    .inv-toolbar-sticky {
        top: calc(var(--nav-height) + env(safe-area-inset-top, 0px)) !important;
        z-index: 11000 !important;
        margin-left: -10px !important;
        margin-right: -10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #sync-status-bar {
        top: calc(var(--nav-height) + env(safe-area-inset-top, 0px)) !important;
    }

    .alm-tabs-wrap {
        scroll-snap-type: x proximity;
        mask-image: linear-gradient(to right, #000 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%);
    }

    .alm-tab {
        scroll-snap-align: start;
        min-height: 48px;
        padding: 12px 18px !important;
    }

    .alm-btn-header {
        min-height: 44px !important;
        min-width: 44px;
        justify-content: center;
        padding: 10px 14px !important;
    }

    .alm-badge-pill {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Notificaciones centradas en móvil */
    .app-notification {
        top: calc(var(--nav-height) + env(safe-area-inset-top, 0px) + 8px);
        left: 12px;
        right: 12px;
        max-width: none;
        text-align: center;
        transform: translateY(calc(-100% - 16px));
    }

    .app-notification--visible {
        transform: translateY(0);
    }

    /* Sin hover lift en pantallas táctiles */
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-success:hover,
    .btn-edit:hover,
    .btn-delete:hover,
    .nav-icon:hover,
    .dropbtn:hover {
        transform: none;
    }
}

/* ============================================================
   Ayuda contextual (?) � textos de m�dulo ocultos hasta tocar
   ============================================================ */
.ui-help {
    display: inline-flex;
    align-items: center;
    position: relative;
    vertical-align: middle;
    margin-left: 0.35rem;
}

.ui-help-btn {
    width: 1.35rem;
    height: 1.35rem;
    min-width: 1.35rem;
    padding: 0;
    border-radius: 999px;
    border: 1.5px solid #94a3b8;
    background: #f8fafc;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ui-help-btn:hover,
.ui-help-btn:focus {
    background: #e2e8f0;
    border-color: #64748b;
    color: #0f172a;
    outline: none;
}

.ui-help-btn[aria-expanded="true"] {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

.ui-help-panel {
    position: absolute;
    z-index: 80;
    left: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    max-width: min(360px, 85vw);
    padding: 0.75rem 0.9rem;
    background: #fff;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.45;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

.ui-help-panel p {
    margin: 0 0 0.5rem;
}
.ui-help-panel p:last-child {
    margin-bottom: 0;
}

/* Si el ? queda al borde derecho, abrir panel hacia la izquierda */
.ui-help.ui-help--end .ui-help-panel,
.header-actions .ui-help .ui-help-panel {
    left: auto;
    right: 0;
}

h1 .ui-help,
h2 .ui-help,
h3 .ui-help {
    font-size: 1rem;
    font-weight: normal;
}

/* Inline junto a labels */
label .ui-help {
    margin-left: 0.25rem;
}

/* ---- Centro de Control ---- */
.home-module-card--control { border-top: 3px solid #0b3d5c; }
.page-header--modulo {
    text-align: left;
    margin-bottom: 1.5rem;
}
.page-header--modulo h1 {
    margin: 0.35rem 0 0;
    font-size: 1.65rem;
    letter-spacing: -0.03em;
    text-align: left;
}
.page-header--modulo .cc-sub {
    max-width: 36rem;
}
.cc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 0.45rem;
}
.cc-sub { color: var(--text-muted); margin: 0.35rem 0 0; font-size: 0.9rem; }
.cc-section { margin: 1.5rem 0; }
.cc-h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }
.cc-h3 { font-size: 0.95rem; margin: 0 0 0.6rem; }
.cc-proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cc-proj-card { padding: 1rem 1.1rem; text-decoration: none !important; color: inherit; display: block; }
.cc-proj-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cc-pct { font-weight: 800; color: var(--heading); }
.cc-bar { height: 8px; background: #e2e8f0; border-radius: 99px; overflow: hidden; margin: 0.5rem 0; }
.cc-bar i { display: block; height: 100%; background: #0b3d5c; border-radius: 99px; }
.cc-bar--sm { flex: 1; min-width: 60px; margin: 0; }
.cc-mini { list-style: none; padding: 0; margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--text-muted); }
.cc-mini li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.cc-ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cc-ex { padding: 0.85rem 1rem; }
.cc-ex h3 { margin: 0 0 0.4rem; font-size: 0.9rem; display: flex; justify-content: space-between; }
.cc-ex ul { list-style: none; padding: 0; margin: 0; }
.cc-ex li { margin: 0.35rem 0; font-size: 0.85rem; }
.cc-ex li small { display: block; color: var(--text-muted); }
.cc-ex--hot { border-top: 3px solid #b91c1c; }
.cc-empty { color: var(--text-muted); font-size: 0.85rem; margin: 0.3rem 0; }
.cc-list { list-style: none; padding: 0; margin: 0; }
.cc-list li { margin: 0.4rem 0; }
.cc-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin: 0.75rem 0 1rem; }
.cc-kpis div { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem 0.4rem; text-align: center; }
.cc-kpis b { display: block; font-size: 1.2rem; }
.cc-kpis span { font-size: 0.7rem; color: var(--text-muted); }
.cc-kpis .hot b { color: #b91c1c; }
.cc-bigpct { font-size: 2rem; font-weight: 800; }
.cc-hist { font-size: 0.85rem; color: var(--text-muted); }
.cc-filtros { display: flex; flex-wrap: wrap; gap: 8px; padding: 0.75rem; margin-bottom: 0.75rem; align-items: center; }
.cc-filtros .form-control { min-width: 140px; flex: 1; }
.cc-acc { margin: 0.5rem 0; padding: 0; }
.cc-acc summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 0.85rem 1rem; cursor: pointer; flex-wrap: wrap; }
.cc-acc summary::-webkit-details-marker { display: none; }
.cc-acc-name { font-weight: 700; flex: 1; min-width: 140px; }
.cc-acc-body { padding: 0 1rem 0.85rem; }
.cc-tlist { list-style: none; padding: 0; margin: 0; }
.cc-trow { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 10px; padding: 0.45rem 0; border-top: 1px solid #e2e8f0; align-items: baseline; }
.cc-trow small { grid-column: 1 / -1; color: var(--text-muted); }
.cc-trow--vencida { background: #fef2f2; margin: 0 -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; }
.cc-trow--proxima { background: #fff7ed; margin: 0 -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; }
.cc-time { font-size: 0.75rem; font-weight: 700; color: #c2410c; }
.cc-time--vencida { color: #b91c1c; }
.cc-form { display: grid; gap: 8px; }
.cc-form--row { grid-template-columns: auto 1fr auto; align-items: center; }
.cc-form label { font-size: 0.8rem; color: var(--text-muted); }
.cc-check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text); }
.cc-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.cc-dl { display: grid; grid-template-columns: 8rem 1fr; gap: 4px 8px; font-size: 0.9rem; }
.cc-dl dt { color: var(--text-muted); }
.cc-dl dd { margin: 0; }
.cc-cadena { display: flex; flex-wrap: wrap; gap: 8px; margin: 0.5rem 0 0.75rem; }
.cc-cadena span { background: #f1f5f9; border-radius: 8px; padding: 4px 8px; font-size: 0.8rem; }
.cc-cadena small { display: block; color: var(--text-muted); font-size: 0.65rem; }
.cc-obj { background: #f8fafc; border-left: 3px solid #0b3d5c; padding: 0.6rem 0.8rem; }
.cc-avance, .cc-acc-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.5rem 0; }
.cc-avance .is-on { background: #0b3d5c; color: #fff; }
.cc-acciones { display: grid; gap: 8px; margin-top: 0.75rem; }
.cc-evis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 0.75rem; }
.cc-evi { margin: 0; }
.cc-evi img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.cc-evi figcaption { font-size: 0.75rem; color: var(--text-muted); }
.cc-comments { list-style: none; padding: 0; }
.cc-comments li { border-bottom: 1px solid #e2e8f0; padding: 0.5rem 0; }
.cc-comments p { margin: 0.25rem 0 0; }
.cc-tl { list-style: none; padding: 0; }
.cc-tl li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 4px 10px; padding: 0.4rem 0; border-bottom: 1px solid #e2e8f0; font-size: 0.88rem; }
.cc-tl time { color: var(--text-muted); }
@media (max-width: 600px) {
    .cc-trow { grid-template-columns: 1fr auto; }
    .cc-dl { grid-template-columns: 1fr; }
    .cc-form--row { grid-template-columns: 1fr; }
}
.cc-asig { margin: 0 0 0.5rem; }
.cc-asig span { display: block; font-size: 0.75rem; color: var(--text-muted); }
.cc-asig strong { font-size: 1.05rem; }
.cc-obj-preview { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--text); }
.cc-fold { margin-top: 0.5rem; }
.cc-fold-btn { display: inline-block; cursor: pointer; }
.cc-fold-body { margin-top: 0.75rem; }
.cc-fold-card { margin: 0.65rem 0; padding: 0; }
.cc-fold-card > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 1rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cc-fold-card > summary::-webkit-details-marker { display: none; }
.cc-fold-card > summary span { font-weight: 600; color: var(--text-muted); font-size: 0.85rem; }
.cc-fold-card .cc-fold-body { padding: 0 1rem 1rem; }
.cc-rec { max-width: 520px; margin: 1rem auto; text-align: center; padding: 1rem; }
.cc-rec-clock { font-size: 2.4rem; font-weight: 800; letter-spacing: 0.04em; margin: 0.4rem 0; }
.cc-rec-idle, .cc-rec-on, .cc-rec-pause {
    display: inline-block; font-weight: 800; padding: 0.35rem 0.9rem; border-radius: 99px; letter-spacing: 0.06em;
}
.cc-rec-idle { background: #e2e8f0; color: #334155; }
.cc-rec-on { background: #b91c1c; color: #fff; animation: ccPulse 1.2s infinite; }
.cc-rec-pause { background: #e65100; color: #fff; }
@keyframes ccPulse { 50% { opacity: 0.65; } }
.cc-rec-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 1.2rem; }
.cc-rec-big { font-size: 1.15rem !important; padding: 16px 20px !important; width: 100%; }
.cc-hall { border-top: 1px solid #e2e8f0; padding: 0.8rem 0; }
.cc-lab { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.cc-plus-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.cc-plus-row .form-control { flex: 1; }
.cc-plus { min-width: 44px; font-size: 1.35rem !important; font-weight: 800; padding: 0 12px !important; line-height: 1; }
.cc-tkt-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cc-tkt { padding: 0; overflow: hidden; }
.cc-tkt > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.9rem 1rem;
    cursor: pointer;
    min-height: 48px;
}
.cc-tkt > summary::-webkit-details-marker { display: none; }
.cc-tkt-name { flex: 1; font-weight: 700; color: var(--heading); }
.cc-tkt > summary::after {
    content: '▾';
    color: #94a3b8;
    font-size: 1.05rem;
    line-height: 1;
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
}
.cc-tkt[open] > summary::after { transform: rotate(0deg); }
.cc-tkt-body { padding: 0 1rem 1rem; border-top: 1px solid #e2e8f0; }
.cc-tkt--urgente { border-top: 3px solid #b91c1c; }
.cc-tkt--cerrado { background: transparent; box-shadow: none; }
.cc-ticket-form { display: grid; gap: 10px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.cc-ticket-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-ticket-count { font-weight: 600; color: var(--text-muted); }
.cc-ticket-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cc-ticket { padding: 0.85rem 1rem; }
.cc-ticket--urgente { border-top: 3px solid #b91c1c; }
.cc-ticket--cerrado { opacity: 0.85; padding: 0.6rem 0; border-bottom: 1px solid #e2e8f0; }
.cc-ticket-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.cc-ticket-detalle { margin: 0.35rem 0; font-size: 0.9rem; white-space: pre-wrap; }
.cc-ticket-meta { margin: 0.25rem 0 0.5rem; font-size: 0.8rem; color: var(--text-muted); }
.cc-ticket-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cc-ticket-asig { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 1; }
.cc-ticket-asig .form-control { min-width: 140px; flex: 1; }
.cc-pri { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.cc-pri-urgente { background: #fee2e2; color: #991b1b; }
.cc-pri-normal { background: #dbeafe; color: #1e40af; }
.cc-pri-general { background: #f1f5f9; color: #475569; }
@media (max-width: 600px) {
    .cc-ticket-form-row { grid-template-columns: 1fr; }
    .cc-ticket-asig { width: 100%; }
}
.cc-plus-box { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0.5rem; margin-bottom: 8px; }
.cc-chip { display: inline-flex; align-items: center; gap: 6px; background: #e2e8f0; border-radius: 99px; padding: 4px 8px 4px 10px; font-size: 0.82rem; }
.cc-chip button { border: 0; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; color: #64748b; }

/* Campanita de notificaciones */
.notify-bell { position: relative; }
.notify-bell-btn {
    position: relative;
    width: 36px; height: 36px;
    border: 0; background: transparent;
    color: #f8fafc; font-size: 1.15rem;
    border-radius: 8px; cursor: pointer;
}
.notify-bell-btn:hover, .notify-bell-btn.has-unread { background: #334155; }
.notify-bell-count {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: #dc2626; color: #fff;
    font-size: 0.65rem; font-weight: 800;
    border-radius: 99px; line-height: 16px; text-align: center;
}
.notify-bell-panel {
    position: absolute; right: 0; top: calc(100% + 8px);
    width: min(340px, 92vw); max-height: 70vh; overflow: auto;
    background: #fff; color: #0f172a;
    border-radius: 12px; box-shadow: 0 12px 40px rgba(15,23,42,0.25);
    z-index: 12000; text-align: left;
}
.notify-bell-head {
    padding: 10px 14px; font-weight: 700; font-size: 0.85rem;
    border-bottom: 1px solid #e2e8f0; color: #334155;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.notify-bell-silence {
    border: 0; background: #e2e8f0; color: #0f172a;
    font-size: 0.75rem; font-weight: 800; padding: 5px 10px;
    border-radius: 8px; cursor: pointer;
}
.notify-bell-silence:hover { background: #cbd5e1; }
.notify-bell-item {
    display: block; padding: 10px 14px 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none; color: inherit;
    position: relative;
}
.notify-bell-item-x {
    position: absolute; top: 8px; right: 8px;
    border: 0; background: transparent; color: #64748b;
    font-size: 1rem; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.notify-bell-empty { margin: 0; padding: 16px; color: #64748b; font-size: 0.85rem; }
.notify-bell-item:hover { background: #f8fafc; }
.notify-bell-item strong { display: block; font-size: 0.82rem; color: #0f172a; }
.notify-bell-item span { display: block; font-size: 0.78rem; color: #475569; margin-top: 2px; }

.tr-expand-btn {
    width: 32px; height: 32px;
    border: 1px solid #cbd5e1; background: #fff;
    border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1;
}
.tr-expand-btn[aria-expanded="true"] { background: #e2e8f0; }

.insumo-nombre-wrap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
}
.insumo-nombre-txt { flex: 1; min-width: 0; }
.insumo-usos-btn {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    margin-top: 1px;
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: #334155;
}
.insumo-usos-btn[aria-expanded="true"] { background: #e2e8f0; }
.insumo-usos-panel {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-align: left;
}
.insumo-usos-panel[hidden] { display: none !important; }
.insumo-usos-title {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.insumo-usos-empty {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
}
.insumo-usos-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.insumo-usos-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.88rem;
}
.insumo-usos-list li:last-child { border-bottom: none; }
.insumo-usos-list a {
    color: #0f766e;
    font-weight: 700;
    text-decoration: none;
}
.insumo-usos-list a:hover { text-decoration: underline; }
.insumo-usos-cant {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: #334155;
    font-size: 0.82rem;
    white-space: nowrap;
}

.tr-lines-table {
    width: 100%;
    font-size: 0.85rem;
    border-collapse: collapse;
    background: #fff;
}
.tr-lines-table thead {
    background-color: #0b3d5c;
    color: #fff;
}
.tr-lines-table thead th {
    color: #fff !important;
    padding: 8px 10px;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #1e4a66;
}
.tr-lines-table tbody td {
    padding: 6px 10px;
    color: #334155;
    vertical-align: top;
}
.tr-lines-table td.obs {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 280px;
    font-size: 0.82rem;
    color: #475569;
}

/* Panel operador: catálogo tipos de sucursal (columnas fijas) */
.tipos-suc-alta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 1rem;
}
.tipos-suc-alta label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    color: #64748b;
}
.tipos-suc-alta .form-control { padding: 8px; min-width: 200px; }
.tipos-sucursal-table { width: 100%; table-layout: fixed; }
.tipos-sucursal-table th:nth-child(1),
.tipos-sucursal-table td:nth-child(1) { width: 36%; }
.tipos-sucursal-table th:nth-child(2),
.tipos-sucursal-table td:nth-child(2) { width: 22%; }
.tipos-sucursal-table th:nth-child(3),
.tipos-sucursal-table td:nth-child(3) { width: 16%; }
.tipos-sucursal-table th:nth-child(4),
.tipos-sucursal-table td:nth-child(4) { width: 26%; }
.tipos-sucursal-table td { vertical-align: middle; }
.tipos-suc-nombre { width: 100%; max-width: 100%; padding: 8px 10px; box-sizing: border-box; }
.tipos-suc-activo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    margin: 0;
}
.tipos-suc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}
.tipos-suc-actions form { margin: 0; }
.tipos-suc-actions .btn-secondary,
.tipos-suc-actions .btn-danger {
    padding: 6px 12px;
    font-size: 0.82rem;
}
.tipos-suc-sistema { font-size: 0.78rem; color: #64748b; white-space: nowrap; }
@media (max-width: 768px) {
    .tipos-sucursal-table,
    .tipos-sucursal-table th:nth-child(n),
    .tipos-sucursal-table td:nth-child(n) { width: 100%; table-layout: auto; }
    .tipos-suc-actions { justify-content: flex-start; }
}

.pagos-page { max-width: 1100px; }
.pagos-rango {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
    padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.pagos-rango label { display: block; font-size: 0.8rem; font-weight: 700; color: #475569; }
.pagos-rango .form-control { padding: 8px; min-width: 140px; }
.pagos-hint { font-size: 0.85rem; color: #64748b; margin: 0 0 1rem; }
.pagos-torre { margin: 0 0 1rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; padding: 0.25rem 0.85rem 0.85rem; }
.pagos-torre > summary { cursor: pointer; font-weight: 800; font-size: 1.05rem; padding: 0.75rem 0.2rem; display: flex; align-items: center; gap: 10px; }
.pagos-count { font-size: 0.78rem; background: #e2e8f0; border-radius: 999px; padding: 2px 8px; color: #334155; }
.pagos-bloque { background: #fafafa; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.85rem; margin: 0.65rem 0; }
.pagos-prov { font-weight: 800; color: #0b3d5c; }
.pagos-meta { font-size: 0.88rem; color: #334155; margin-top: 2px; }
.pagos-lock { color: #94a3b8; font-size: 0.78rem; }
.pagos-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 0.75rem 0; }
.pagos-campos label { font-size: 0.75rem; font-weight: 700; color: #475569; display: flex; flex-direction: column; gap: 4px; }
.pagos-items { margin-top: 0.35rem; }
.pagos-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 1rem 0; }

.btn-ojito {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-left: 6px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    vertical-align: middle;
}
.btn-ojito:hover { background: #f1f5f9; }
.btn-ojito--show { background: #ecfdf5; border-color: #6ee7b7; }

/* Recetas ocultas (libro, quien tenga permiso) */
.recetas-ocultas-wrap {
    margin: 1.25rem 0 0;
    border: 1px dashed #94a3b8;
    border-radius: 12px;
    background: #f8fafc;
    padding: 0.35rem 0.85rem 0.85rem;
}
.recetas-ocultas-wrap > summary {
    cursor: pointer;
    font-weight: 700;
    color: #334155;
    padding: 0.65rem 0.2rem;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.recetas-ocultas-wrap > summary::-webkit-details-marker { display: none; }
.recetas-ocultas-wrap > summary::before {
    content: '▸';
    color: #64748b;
}
.recetas-ocultas-wrap[open] > summary::before { content: '▾'; }
.recetas-ocultas-count {
    display: inline-block;
    min-width: 1.4em;
    padding: 1px 7px;
    border-radius: 999px;
    background: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}
.recetas-ocultas-hint {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    color: #64748b;
}
.recetas-ocultas-empty {
    margin: 0.25rem 0 0.5rem;
    color: #94a3b8;
    font-size: 0.88rem;
}
.receta-ocultar-form {
    display: inline;
    margin-left: 8px;
}
.btn-ocultar-receta {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    cursor: pointer;
}
.btn-ocultar-receta:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* Marca captura SoftRestaurant (traspasos, admin) */
.tr-capturado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    min-height: 40px;
    padding: 4px 6px;
}
.tr-capturado-check {
    width: 22px;
    height: 22px;
    accent-color: #15803d;
    cursor: pointer;
    flex-shrink: 0;
}
.tr-capturado-mark {
    color: #15803d;
    font-weight: 800;
    min-width: 1em;
    font-size: 1.1rem;
}
.tr-capturado-cell {
    text-align: center;
    vertical-align: middle;
}

/* Export Compras: un toque → Descargar o WhatsApp */
.export-choice-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.export-choice-btn {
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    min-height: 40px;
}
@media (max-width: 768px) {
    .export-choice-row { flex-direction: column; align-items: stretch; }
    .export-choice-btn { width: 100%; }
}

/* ---- NFC Clientes ---- */
.nfc-connect-row { margin: 0 0 1rem; }
.nfc-fallback { padding: 1rem 1.15rem; margin-bottom: 1rem; }
.nfc-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.86rem;
    color: var(--text-muted);
}
.nfc-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #dc2626;
    flex-shrink: 0;
}
.nfc-dot.ok {
    background: #16a34a;
    box-shadow: 0 0 8px #86efac;
}
.nfc-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 1rem;
    flex-wrap: wrap;
}
.nfc-tab {
    appearance: none;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-muted);
    padding: 10px 16px;
    border-radius: 12px;
    font: 600 0.95rem inherit;
    cursor: pointer;
}
.nfc-tab.activa {
    color: #fff;
    background: #0f766e;
    border-color: #0f766e;
}
.nfc-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 16px;
}
@media (max-width: 860px) {
    .nfc-grid { grid-template-columns: 1fr; }
}
.nfc-card { padding: 1.25rem; }
.nfc-input { font-size: 1.25rem !important; font-weight: 650; }
.nfc-hint { color: var(--text-muted); font-size: 0.88rem; line-height: 1.45; margin-top: 12px; }
.nfc-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 16px 0 0;
}
.nfc-pulse {
    min-height: 200px;
    display: grid;
    place-items: center;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 16px;
    background: #f8fafc;
    padding: 1rem;
}
.nfc-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid #0f766e;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    font-weight: 800;
    color: #0f766e;
    animation: nfc-pulse 1.4s ease-out infinite;
}
@keyframes nfc-pulse {
    0% { box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.35); }
    100% { box-shadow: 0 0 0 18px rgba(15, 118, 110, 0); }
}
.nfc-ok { color: #15803d; font-weight: 650; margin-bottom: 8px; }
.nfc-err { color: #dc2626; font-weight: 650; }
.nfc-num { font-size: 1.8rem; font-weight: 750; color: #0f766e; letter-spacing: 0.02em; }
.nfc-result { font-size: 0.92rem; line-height: 1.7; }
.nfc-uid { font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; color: var(--text-muted); }
.nfc-toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.nfc-toolbar input { flex: 1; min-width: 180px; }
.nfc-tabs + .hidden,
section.hidden,
section[hidden],
.nfc-grid[hidden],
.nfc-fallback[hidden],
.nfc-oculto { display: none !important; }

/* Visor de evidencia: cabe en el viewport del celular (no abre el JPEG crudo). */
body.bosa-lb-open { overflow: hidden; }
#bosa-photo-lb[hidden] { display: none !important; }
#bosa-photo-lb {
    position: fixed;
    inset: 0;
    z-index: 40000;
    background: rgba(15, 23, 42, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    box-sizing: border-box;
}
#bosa-photo-lb-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
    transition: filter 0.18s ease;
}
#bosa-photo-lb-img.bosa-lb-soft {
    filter: blur(8px);
    transform: scale(1.04);
}
.bosa-lb-close,
.bosa-lb-prev,
.bosa-lb-next {
    position: absolute;
    z-index: 2;
    border: none;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    min-width: 44px;
    min-height: 44px;
    border-radius: 999px;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}
.bosa-lb-close { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); font-size: 1.1rem; }
.bosa-lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.bosa-lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.bosa-lb-cap {
    position: absolute;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    text-align: center;
    color: #e2e8f0;
    font-size: 0.85rem;
    font-weight: 600;
}
.bosa-photo-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bosa-photo-thumbs a { display: block; }
.bosa-photo-thumbs img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    display: block;
    background: #f8fafc;
}

/* Presentaciones en inventario: tarjetas, captura al frente, sin scroll horizontal */
.pres-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 0;
    overflow: hidden;
}
.pres-modal-box.modal-content {
    background: #fff;
    width: 96%;
    max-width: 640px;
    padding: 0 !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.pres-modal-head {
    background: #C00000;
    color: #fff;
    padding: 12px 14px 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    gap: 8px;
}
.pres-modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
.pres-modal-x {
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    min-width: 44px;
    min-height: 44px;
}
.pres-modal-body {
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
    -webkit-overflow-scrolling: touch;
}
.pres-insumo-info {
    background: #f8fafc;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #eee;
}
.pres-insumo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: #64748b;
    font-size: 0.8rem;
    margin-bottom: 4px;
}
.pres-insumo-nombre {
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.pres-calc {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    padding: 10px 12px;
}
.pres-calc-title {
    margin: 0 0 8px 0;
    color: #e65100;
    font-size: 0.9rem;
}
.pres-calc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: end;
}
.pres-calc-row label {
    display: block;
    font-size: 0.72rem;
    color: #666;
    margin-bottom: 3px;
}
.pres-calc-row input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ffb74d;
    padding: 8px;
    min-height: 42px;
}
.pres-calc-sumar {
    grid-column: 1 / -1;
    min-height: 44px;
    width: 100%;
}
.pres-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pres-list-msg {
    text-align: center;
    padding: 24px 8px;
    color: #64748b;
    margin: 0;
}
.pres-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}
.pres-card-name {
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    overflow-wrap: anywhere;
    font-size: 0.95rem;
}
.pres-card-factor {
    font-size: 0.8rem;
    font-weight: 700;
    color: #4472C4;
}
.pres-card-captura {
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: #e8f5e9;
    border-radius: 8px;
    padding: 8px;
}
.pres-card-qty {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    text-align: center;
    border: 1px solid #90caf9;
    padding: 8px;
    border-radius: 6px;
    min-height: 48px;
    font-size: 1.15rem;
    font-weight: 700;
    box-sizing: border-box;
}
.pres-card-sumar {
    flex: 0 0 auto;
    min-height: 48px;
    min-width: 96px;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 700;
    white-space: nowrap;
}
.pres-card-cerrado {
    color: #94a3b8;
    font-size: 0.9rem;
}
.pres-barcode {
    margin: 0;
}
.pres-barcode-sum {
    cursor: pointer;
    color: #64748b;
    font-size: 0.78rem;
    list-style: none;
    user-select: none;
}
.pres-barcode-sum::-webkit-details-marker { display: none; }
.pres-barcode-sum::marker { content: ''; }
.pres-barcode-sum::before { content: '▸ '; }
.pres-barcode[open] .pres-barcode-sum::before { content: '▾ '; }
.pres-barcode-ro {
    font-size: 0.78rem;
    color: #64748b;
    font-family: ui-monospace, monospace;
}
.pres-barcode-edit {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
}
.pres-barcode-edit input {
    flex: 1 1 140px;
    min-width: 0;
    font-size: 0.85rem;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-family: ui-monospace, monospace;
    box-sizing: border-box;
    min-height: 40px;
}
.pres-barcode-btn {
    padding: 8px 10px;
    font-size: 0.85rem;
    border-radius: 6px;
    border: none;
    color: #fff;
    cursor: pointer;
    min-width: 40px;
    min-height: 40px;
}
.pres-barcode-save { background: #2e7d32; }
.pres-barcode-auto { background: #0288d1; }
.pres-modal-footer {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #eee;
    display: flex;
    justify-content: stretch;
    gap: 8px;
    background: #f8fafc;
    flex-shrink: 0;
}
.pres-modal-footer button {
    flex: 1;
    min-height: 44px;
}
@media (max-width: 768px) {
    .pres-modal-box.modal-content {
        width: 100% !important;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0 !important;
        margin: 0 !important;
    }
}
.inv-lupa-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    font-weight: 800;
    cursor: pointer;
    color: #0f172a;
}
.inv-lupa-btn[aria-expanded="true"] {
    background: #1e293b;
    color: #fff;
    border-color: #1e293b;
}
.inv-filtro-count {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
}
.inv-filtros-panel {
    margin-bottom: 1.25rem;
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.inv-filtros-panel[hidden] {
    display: none !important;
}
.inv-torre {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    margin-bottom: 10px;
    overflow: hidden;
}
.inv-torre-sum {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    min-height: 48px;
    font-weight: 800;
    font-size: 1.05rem;
    user-select: none;
}
.inv-torre-sum::-webkit-details-marker { display: none; }
.inv-torre-sum::marker { content: ''; }
.inv-torre-sum::before {
    content: '▶';
    display: inline-block;
    margin-right: 8px;
    color: #64748b;
    font-size: 0.85rem;
    transition: transform 0.15s ease;
}
.inv-torre[open] > .inv-torre-sum::before {
    transform: rotate(90deg);
}
.inv-torre-nombre {
    flex: 1;
}
.inv-torre-meta {
    font-weight: 600;
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
}
.inv-torre-grid {
    padding: 0 12px 12px;
}
.inv-torre-empty {
    grid-column: 1 / -1;
    color: #64748b;
    padding: 8px 4px 12px;
    margin: 0;
}
@media (min-width: 700px) {
    .pres-calc-row {
        grid-template-columns: 1fr 1fr auto;
    }
    .pres-calc-sumar {
        grid-column: auto;
        width: auto;
        padding: 0 18px;
    }
    .pres-card {
        display: grid;
        grid-template-columns: 1fr minmax(200px, 240px);
        grid-template-areas:
            "name captura"
            "factor captura"
            "barcode barcode";
        align-items: center;
        gap: 6px 12px;
    }
    .pres-card-name { grid-area: name; }
    .pres-card-factor { grid-area: factor; }
    .pres-card-captura { grid-area: captura; }
    .pres-barcode, .pres-barcode-ro { grid-area: barcode; }
}

/* Configuración por recetario */
.cfg-libros-lead { color: var(--text-muted); margin: 0 0 1.25rem; max-width: 40rem; }
.cfg-libros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.cfg-libro-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 1.1rem 1.15rem 1.2rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    text-decoration: none !important;
    color: var(--heading);
}
.cfg-libro-card:hover { border-color: #94a3b8; }
.cfg-libro-card-top { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.cfg-libro-ico { font-size: 1.4rem; }
.cfg-libro-marca { font-size: 0.92rem; color: #334155; }
.cfg-libro-tag { font-size: 0.8rem; color: var(--text-muted); }
.cfg-libro-params {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    font-size: 0.82rem;
    color: #475569;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}
.cfg-libro-go { margin-top: 8px; font-weight: 700; font-size: 0.85rem; color: #0f172a; }

/* Precio $0 / $1 — costo dudoso en insumos y recetas */
.badge-precio-incompleto {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.4;
}
.badge-precio-incompleto[hidden] { display: none !important; }

.badge-sub-insumo {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #6ee7b7;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.4;
}

.alert-costo-incompleto {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fdba74;
}
.alert-costo-incompleto a {
    color: #9a3412;
    font-weight: 700;
}

tr.insumo-sin-precio,
tr.receta-costo-incompleto,
tr.ing-sin-precio {
    background: #fffbeb;
}
tr.insumo-sin-precio td[data-label="Costo"],
tr.receta-costo-incompleto td.costo,
tr.ing-sin-precio td.costo {
    color: #c2410c;
    font-weight: 700;
}

.filtro-precio-incompleto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #9a3412;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    min-height: 40px;
}
.filtro-precio-incompleto input {
    width: 18px;
    height: 18px;
    accent-color: #c2410c;
    cursor: pointer;
    margin: 0;
}

.insumo-receta-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}
.insumo-receta-cell .insumo-select,
.insumo-receta-cell .ts-wrapper {
    flex: 1;
    min-width: 0;
}
.btn-insumo-lapiz {
    flex-shrink: 0;
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 8px;
    min-width: 40px;
    min-height: 40px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.btn-insumo-lapiz:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.receta-insumo-modal {
    display: none;
}
.receta-insumo-modal .receta-insumo-lbl {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    margin: 10px 0 4px;
    color: #334155;
}
.receta-insumo-hint {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0 0 8px;
}
.receta-insumo-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.rev-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    background: #e2e8f0;
    color: #334155;
    border-radius: 999px;
    padding: 1px 8px;
    vertical-align: middle;
    margin-left: 4px;
}
.btn-link-revision,
.btn-link-historial {
    background: none;
    border: none;
    padding: 0;
    color: #0f766e;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    font-size: inherit;
    font-family: inherit;
}
.btn-link-historial {
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}
.revision-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}
.revision-lista li {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}
.revision-texto {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.9rem;
    background: #f8fafc;
    padding: 8px;
    border-radius: 8px;
}


/* Filtros ocultos tras lupa (listas CEDIS / pedidos / traspasos) */
.filtros-lupa{padding:0 !important;margin-bottom:.75rem !important}
.filtros-lupa>summary{list-style:none;cursor:pointer;padding:.7rem 1rem;font-weight:600;display:flex;align-items:center;gap:.5rem;min-height:44px;user-select:none}
.filtros-lupa>summary::-webkit-details-marker{display:none}
.filtros-lupa>summary::after{content:"\25BE";margin-left:auto;opacity:.6}
.filtros-lupa[open]>summary::after{content:"\25B4"}
.filtros-lupa[open]>summary{border-bottom:1px solid #e2e8f0}
.filtros-lupa>form{padding:1rem 1.25rem}
.filtro-chip-count{background:#1565c0;color:#fff;border-radius:999px;padding:0 .5rem;font-size:.75rem;line-height:1.4rem}
.filtros-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 1rem}
.filtro-chip{background:#e3f2fd;color:#0d47a1;border-radius:999px;padding:3px 10px;font-size:.8rem;text-decoration:none}
.filtro-chip-clear{background:#fdecea;color:#b71c1c;font-weight:600}
@media (max-width:600px){.filtros-lupa>form>div{min-width:100% !important;flex:1 1 100% !important}.filtros-lupa>form input,.filtros-lupa>form select{width:100%;font-size:16px}}


/* Pedido fácil: foto por renglón, faltantes y tabla de recepción en móvil */
.pf-linea-fotos{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:4px}
.pf-linea-fotos img{width:44px;height:44px;object-fit:cover;border-radius:6px;border:1px solid #cbd5e1}
.pf-linea-foto-btn{display:inline-flex;align-items:center;gap:2px;font-size:.75rem;padding:4px 8px;min-height:32px;border:1px dashed #64748b;border-radius:6px;cursor:pointer;color:#334155;background:#f8fafc}
.pf-linea-foto-btn.lista{border-style:solid;border-color:#2e7d32;color:#2e7d32}
.pf-faltan{font-size:.75rem;font-weight:700;color:#b45309}
.pf-rx-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:600px){
  .pf-rx-table th,.pf-rx-table td{padding:6px 4px !important;font-size:.82rem}
  .pf-rx-table input[type=number]{width:64px !important}
  .pf-rx-table select{max-width:110px;font-size:.8rem}
  .pf-rx-table td:last-child input{min-width:90px}
}