/* ==========================================================================
   GRANJITA DUCKS · Hoja de estilos del sistema
   --------------------------------------------------------------------------
   Todas las pantallas usan este archivo. Para cambiar un color en todo el
   sistema, edita los valores de :root (justo aquí abajo).

   Índice
     1. Colores y medidas          6. Tablas, etiquetas y paginación
     2. Base                       7. Avisos, ventanas y estados vacíos
     3. Estructura (menú, barra)   8. Pantallas: inicio, corrales, pedidos…
     4. Paneles y formularios      9. Pantallas sueltas (editar, detalle)
     5. Botones                   10. Celular, tablet e impresión
   ========================================================================== */

/* 1. COLORES Y MEDIDAS ---------------------------------------------------- */
:root {
    /* Menú lateral: el verde y el dorado del logo */
    --menu-arriba: #0a5c30;
    --menu-abajo: #053a1d;
    --menu-texto: #dcebe2;
    --menu-tenue: #9fc4ae;       /* iconos y textos secundarios del menú */
    --menu-linea: rgba(255, 255, 255, 0.14);
    --menu-hover: rgba(255, 255, 255, 0.09);
    --menu-activo: rgba(224, 176, 56, 0.17);
    --menu-acento: #ecc45a;      /* dorado claro: icono de la opción activa */
    --dorado: #d8a838;           /* dorado del logo: marca la opción activa */

    /* Acciones */
    --primario: #00672f;         /* verde del logo: botones principales y enlaces */
    --primario-oscuro: #004d23;
    --primario-suave: #e2f2e8;
    --primario-borde: #b5dcc4;
    --verde: #0a6b3b;            /* confirmaciones */
    --verde-suave: #e3f3ea;
    --info: #075985;             /* azul: solo para distinguir etiquetas */
    --info-suave: #e0f2fe;
    --oscuro: #1c2b23;           /* botones secundarios oscuros y cabeceras de corral */
    --oscuro-fuerte: #101a15;
    --campana: #7a5a12;          /* cabecera de las campanas (recién nacidos) */
    --ambar: #8a5a00;
    --ambar-suave: #fdf2d0;
    --rojo: #b3261e;
    --rojo-suave: #fde8ea;
    --excel: #107c41;

    /* Superficies y texto */
    --fondo: #f3f6f9;
    --superficie: #ffffff;
    --superficie-2: #f8fafc;
    --borde: #e2e8f0;
    --borde-fuerte: #cbd5e1;
    --titulo: #0f172a;
    --texto: #1e293b;
    --suave: #64748b;

    /* Medidas */
    --radio: 12px;
    --radio-control: 8px;
    --alto-control: 40px;
    --ancho-menu: 256px;
    --alto-barra: 64px;
    --sombra: 0 1px 2px rgba(15, 23, 42, 0.04);
    --sombra-alta: 0 12px 32px rgba(15, 23, 42, 0.16);
    --foco: 0 0 0 3px rgba(0, 103, 47, 0.22);
}

/* 2. BASE ----------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--texto);
    background-color: var(--fondo);
}

h1, h2, h3, h4 { color: var(--titulo); font-weight: 600; line-height: 1.3; }
a { color: var(--primario); }
small { font-size: 0.8125rem; }
code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.82em; background: #eef2f6; padding: 2px 6px; border-radius: 6px; color: #334155; }
ul { list-style: none; }

/* Controles de formulario: mismo alto, borde y foco en todo el sistema */
input[type="text"], input[type="number"], input[type="date"], input[type="email"],
input[type="password"], input[type="search"], input[type="tel"], input[type="file"],
input[type="time"], input[type="month"],
select, textarea {
    height: var(--alto-control);
    padding: 0 12px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-control);
    background-color: #fff;
    color: var(--texto);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    max-width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { height: auto; padding: 10px 12px; }
input[type="file"] { height: auto; padding: 8px; font-size: 0.85rem; }
input::placeholder { color: #94a3b8; }

select {
    -webkit-appearance: none; appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 1.2 6 5.8l4.6-4.6' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

input:focus, select:focus, textarea:focus { border-color: var(--primario); box-shadow: var(--foco); }
input[readonly], input:disabled, select:disabled { background-color: #f1f5f9; color: #475569; }
input:disabled, select:disabled { cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--primario); cursor: pointer; vertical-align: middle; }

:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* 3. ESTRUCTURA: MENÚ LATERAL Y BARRA SUPERIOR ---------------------------- */
.app-wrapper { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--ancho-menu);
    flex-shrink: 0;
    position: sticky; top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--menu-arriba) 0%, var(--menu-abajo) 100%);
    color: #fff;
    z-index: 40;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.logo-sidebar { padding: 16px 16px 12px; }
/* El logo va sobre una placa blanca para que su verde y su dorado se lean sobre el menú */
.enlace-logo {
    display: flex; align-items: center; justify-content: center;
    height: 92px; overflow: hidden;
    background: #fff; border-radius: var(--radio);
}
.icono-logo { height: 142px; width: auto; display: block; }

.sidebar-user {
    display: flex; align-items: center; gap: 12px;
    margin: 0 16px; padding: 12px 0 14px;
    border-bottom: 1px solid var(--menu-linea);
}
.avatar {
    width: 40px; height: 40px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--menu-activo);
    border: 1px solid rgba(224, 176, 56, 0.55);
    color: var(--menu-acento);
    font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em;
}
.user-info { display: flex; flex-direction: column; min-width: 0; }
.user-name { font-weight: 600; font-size: 0.9rem; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 0.78rem; color: var(--menu-tenue); }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 28px; }
.nav-heading { padding: 18px 12px 6px; font-size: 0.72rem; font-weight: 600; color: var(--menu-tenue); letter-spacing: 0.04em; }

.nav-item {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0; border-radius: var(--radio-control);
    background: none;
    color: var(--menu-texto);
    font-family: inherit; font-size: 0.9rem; font-weight: 500; text-align: left; text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.nav-item > i:first-child { width: 20px; text-align: center; font-size: 1rem; color: var(--menu-tenue); flex-shrink: 0; }
.nav-item:hover { background: var(--menu-hover); color: #fff; }
.nav-item:hover > i:first-child { color: #e2e8f0; }
.nav-item.active { background: var(--menu-activo); color: #fff; }
.nav-item.active > i:first-child { color: var(--menu-acento); }
.nav-item.active::before {
    content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--dorado);
}
.nav-item .chevron { margin-left: auto; font-size: 0.7rem; color: var(--menu-tenue); transition: transform 0.2s; }
.nav-grupo.abierto > .nav-item { color: #fff; }
.nav-grupo.abierto > .nav-item .chevron { transform: rotate(180deg); }

.submenu { display: none; flex-direction: column; gap: 2px; margin: 2px 0 6px 21px; padding-left: 10px; border-left: 1px solid var(--menu-linea); }
.nav-grupo.abierto > .submenu { display: flex; }
.submenu .nav-item { padding: 8px 12px; font-size: 0.85rem; }
.submenu .nav-item.active::before { left: -11px; }

.main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 12px;
    min-height: var(--alto-barra);
    padding: 0 32px;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--borde);
}
.topbar h1 { font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar .espacio { flex: 1; }

/* Menú del usuario: nombre, perfil y salida */
.menu-usuario { position: relative; flex-shrink: 0; }
.menu-usuario-boton { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 10px 0 4px; border: 1px solid transparent; border-radius: 999px; background: none; font-family: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.menu-usuario-boton:hover, .menu-usuario.abierto .menu-usuario-boton { background: var(--superficie-2); border-color: var(--borde); }
.menu-usuario .avatar, .avatar.claro { background: var(--primario); border-color: var(--primario); color: #fff; }
.menu-usuario .avatar { width: 38px; height: 38px; }
.menu-usuario-texto { display: flex; flex-direction: column; min-width: 0; max-width: 190px; line-height: 1.25; }
.menu-usuario .user-name { color: var(--titulo); font-size: 0.875rem; }
.menu-usuario .user-role { color: var(--suave); font-size: 0.75rem; }
.menu-usuario .chevron { font-size: 0.7rem; color: var(--suave); transition: transform 0.2s; }
.menu-usuario.abierto .chevron { transform: rotate(180deg); }
.menu-usuario-lista { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 220px; padding: 6px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-alta); }
.menu-usuario.abierto .menu-usuario-lista { display: block; }
.menu-usuario-lista a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radio-control); color: var(--texto); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.menu-usuario-lista a i { width: 18px; text-align: center; color: var(--suave); }
.menu-usuario-lista a:hover { background: var(--primario-suave); color: var(--primario-oscuro); }
.menu-usuario-lista a:hover i { color: var(--primario); }
.menu-usuario-lista a.salir { margin-top: 4px; border-top: 1px solid var(--borde); border-radius: 0 0 var(--radio-control) var(--radio-control); padding-top: 12px; }
.menu-usuario-lista a.salir:hover { background: var(--rojo-suave); color: var(--rojo); }
.menu-usuario-lista a.salir:hover i { color: var(--rojo); }

.btn-menu-mobile {
    display: none;
    width: 40px; height: 40px; flex-shrink: 0;
    border: 1px solid var(--borde-fuerte); border-radius: var(--radio-control);
    background: #fff; color: var(--texto); font-size: 1rem; cursor: pointer;
}
.overlay { display: none; position: fixed; inset: 0; z-index: 39; background: rgba(8, 24, 15, 0.55); }

.contenido { padding: 24px 32px 56px; width: 100%; }

/* 4. PANELES Y FORMULARIOS ------------------------------------------------ */
.content-box, .panel {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 20px 24px 24px;
    margin-bottom: 20px;
}
.panel.angosto { max-width: 520px; }

.panel-cabecera { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; }
.panel-titulo, .content-box > h3 { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; }
.content-box > h3 { margin-bottom: 16px; }
.panel-titulo > i, .content-box > h3 > i { color: var(--primario); font-size: 0.95em; }
.panel-descripcion { margin-top: 2px; color: var(--suave); font-size: 0.875rem; }
.panel-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.seccion-titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 28px 0 12px; font-size: 1.0625rem; }
.seccion-titulo small { color: var(--suave); font-weight: 400; }
.contenido > .seccion-titulo:first-child { margin-top: 0; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 16px; align-items: start; }
.campo, .form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo.ancho-2 { grid-column: span 2; }
.campo.fila-completa { grid-column: 1 / -1; }
.campo > label, .form-group > label { font-size: 0.8125rem; font-weight: 500; color: #475569; }
.campo input, .campo select, .campo textarea,
.form-group input, .form-group select, .form-group textarea { width: 100%; }
.ayuda { font-size: 0.78rem; color: var(--suave); }
.campo.con-boton { align-self: end; }
.form-acciones { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.form-acciones.izquierda { justify-content: flex-start; }

.bloque { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 10px; padding: 16px; margin-bottom: 16px; }

/* Barra de filtros encima de una tabla */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px 16px; margin-bottom: 16px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 10px; }
.filtros form { display: contents; }
.filtros .campo { flex: 0 1 auto; }
.filtros .campo.crece { flex: 1 1 200px; }
.filtros input[type="date"] { width: 160px; }
.filtros .al-final { margin-left: auto; }
.filtros .grupo-botones { display: flex; gap: 8px; }
.search-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.search-container input[type="text"] { flex: 1 1 220px; }

/* Buscador de clientes (Select2) con el mismo aspecto que los demás campos */
.select2-container { max-width: 100%; }
.select2-container--default .select2-selection--single { height: var(--alto-control); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-control); }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; padding-left: 12px; padding-right: 34px; color: var(--texto); font-size: 0.9rem; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #94a3b8; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; right: 6px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--primario); box-shadow: var(--foco); }
.select2-dropdown { border: 1px solid var(--borde-fuerte); border-radius: var(--radio-control); overflow: hidden; box-shadow: var(--sombra-alta); font-size: 0.9rem; }
.select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field { height: 36px; padding: 0 10px; border: 1px solid var(--borde-fuerte); border-radius: 6px; font-family: inherit; }
.select2-results__option { padding: 8px 12px; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--primario); }

/* 5. BOTONES --------------------------------------------------------------- */
.btn, .btn-submit, .btn-search, .btn-clear, .btn-excel, .btn-logout {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--alto-control);
    padding: 0 16px;
    border: 1px solid transparent; border-radius: var(--radio-control);
    font-family: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1;
    text-decoration: none; white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primario, .btn-submit { background: var(--primario); color: #fff; }
.btn-primario:hover, .btn-submit:hover { background: var(--primario-oscuro); }
.btn-secundario, .btn-clear, .btn-logout { background: #fff; color: var(--texto); border-color: var(--borde-fuerte); }
.btn-secundario:hover, .btn-clear:hover { background: #f1f5f9; }
.btn-logout:hover { background: var(--rojo-suave); border-color: #f1b9be; color: var(--rojo); }
.btn-oscuro, .btn-search { background: var(--oscuro); color: #fff; }
.btn-oscuro:hover, .btn-search:hover { background: var(--oscuro-fuerte); }
.btn-exito { background: var(--verde); color: #fff; }
.btn-exito:hover { background: #07552e; }
.btn-excel { background: var(--excel); color: #fff; }
.btn-excel:hover { background: #0b6534; }
.btn-peligro { background: var(--rojo); color: #fff; }
.btn-peligro:hover { background: #8f1d17; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 0.8125rem; }
.btn-grande { height: 46px; padding: 0 22px; font-size: 0.95rem; }
.btn-bloque { width: 100%; }
.btn-cuadrado { width: var(--alto-control); padding: 0; flex-shrink: 0; }
.btn[disabled], .btn-submit[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Botones de acción dentro de las tablas (ver, editar, anular…) */
.acciones { display: flex; gap: 6px; justify-content: flex-end; }
.accion {
    width: 34px; height: 34px;
    display: inline-grid; place-items: center;
    border: 1px solid var(--borde); border-radius: var(--radio-control);
    background: #fff; color: #475569;
    font-size: 0.875rem; text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}
.accion:hover { background: #f1f5f9; border-color: var(--borde-fuerte); }
.accion.ver { color: var(--primario); }
.accion.estado { color: #0f766e; }
.accion.editar, .btn-edit { color: #b45309; }
.accion.peligro, .btn-delete { color: var(--rojo); }
.accion.peligro:hover { background: var(--rojo-suave); border-color: #f1b9be; }
.accion.pdf { color: #b3261e; }
.accion-texto { white-space: nowrap; width: auto; padding: 0 10px; gap: 6px; display: inline-flex; align-items: center; font-weight: 600; font-size: 0.8125rem; }

/* 6. TABLAS, ETIQUETAS Y PAGINACIÓN --------------------------------------- */
.table-responsive { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borde); border-radius: 10px; background: #fff; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tabla th { padding: 10px 14px; text-align: left; font-size: 0.78rem; font-weight: 600; color: #475569; background: var(--superficie-2); border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 10px 14px; border-bottom: 1px solid #eef2f6; vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla .centro { text-align: center; }
.tabla .angosta { width: 1%; white-space: nowrap; }
.tabla .fuerte { font-weight: 600; color: var(--titulo); }
.tabla .tachado { text-decoration: line-through; color: #94a3b8; }
.tabla .secundario { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--suave); font-weight: 400; }
.tabla .texto-largo { min-width: 260px; max-width: 420px; white-space: normal; overflow-wrap: anywhere; }
.tabla tr.fila-vacia td { padding: 28px 14px; text-align: center; color: var(--suave); }
.tabla tr.fila-vacia:hover { background: none; }
.tabla tr.seleccionada { background: #eef8f1; }
.tabla tfoot td { background: var(--superficie-2); font-weight: 600; border-top: 1px solid var(--borde); border-bottom: 0; }
.tabla input[type="number"], .tabla input[type="text"], .tabla select { height: 36px; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #eef2f6; color: #475569; font-size: 0.75rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.badge.pendiente, .badge.ambar { background: var(--ambar-suave); color: var(--ambar); }
.badge.cancelado, .badge.verde { background: #dff3e7; color: var(--verde); }
.badge.anulado, .badge.rojo, .badge.admin { background: var(--rojo-suave); color: var(--rojo); }
.badge.azul { background: var(--info-suave); color: var(--info); }
.badge.violeta { background: #ede9fe; color: #5b21b6; }
.badge.cuadrada { border-radius: 6px; }

.paginacion { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.paginacion a, .paginacion span { min-width: 36px; height: 36px; padding: 0 10px; display: inline-grid; place-items: center; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-control); background: #fff; color: var(--texto); font-size: 0.85rem; font-weight: 500; text-decoration: none; }
.paginacion a:hover { background: #f1f5f9; }
.paginacion .actual { background: var(--primario); border-color: var(--primario); color: #fff; font-weight: 600; }
.paginacion .puntos { border: 0; background: none; color: var(--suave); min-width: 20px; padding: 0; }
.paginacion-info { margin-top: 10px; text-align: center; color: var(--suave); font-size: 0.8125rem; }

/* 7. AVISOS, VENTANAS Y ESTADOS VACÍOS ------------------------------------ */
.alerta { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 16px; border: 1px solid; border-radius: 10px; font-size: 0.9rem; font-weight: 500; transition: opacity 0.4s ease; }
.alerta > i { margin-top: 3px; }
.alerta .texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.alerta.success { background: #e7f6ed; border-color: #b9e3c9; color: #0b5a33; }
.alerta.error { background: #fdecee; border-color: #f5c2c7; color: #8f1d27; }
.alerta .cerrar { flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer; opacity: 0.7; }
.alerta .cerrar:hover { opacity: 1; background: rgba(15, 23, 42, 0.08); }

.modal-fondo { position: fixed; inset: 0; z-index: 100; padding: 24px 16px; overflow-y: auto; background: rgba(15, 23, 42, 0.55); justify-content: center; align-items: flex-start; }
.modal-caja { width: 100%; max-width: 820px; margin: auto; padding: 20px 24px 24px; background: #fff; border-radius: 14px; box-shadow: var(--sombra-alta); }
.modal-caja > h3 { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--borde); }
.modal-caja > h3 > i { color: var(--primario); }

.tabla tr.fila-nueva > td { background: #fdf6dc; }
.firma-guardada { display: block; max-height: 80px; max-width: 220px; margin: 4px 0 8px; padding: 6px; background: #fff; border: 1px dashed var(--borde-fuerte); border-radius: 8px; }
.campo .casilla-sola { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; font-weight: 400; margin-bottom: 8px; }
.campo .casilla-sola input { width: auto; height: auto; margin: 0; }
.btn-pdf { background: #b3261e; border-color: #b3261e; color: #fff; }
.btn-pdf:hover { background: #941f18; border-color: #941f18; color: #fff; }

/* Conciliación bancaria */
.conciliacion-seguro { border-left: 4px solid var(--primario); }
.conciliacion-sugerido { border-left: 4px solid var(--ambar); }
.conciliacion-revisar { border-left: 4px solid var(--rojo); }
.tabla-conciliacion .docs-propuestos { display: inline-block; margin: 0 6px; font-weight: 600; }
.deposito-resumen { margin: -4px 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--fondo, #f4f7f5); font-size: 0.9rem; }
.lista-docs { max-height: 320px; overflow-y: auto; margin: 4px 0 10px; border: 1px solid var(--borde); border-radius: 8px; }
.lista-docs .tabla { margin: 0; }
.lista-docs input[type=checkbox] { width: 18px; height: 18px; }
.barra-suma { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 0.9rem; }
.barra-suma .ok { color: var(--primario); font-weight: 700; }
.barra-suma .mal { color: var(--rojo); font-weight: 700; }
.barra-suma .aviso-dif { color: var(--ambar); font-weight: 600; }

.vacio { padding: 28px 16px; text-align: center; color: var(--suave); font-size: 0.9rem; }
.vacio i { display: block; margin-bottom: 10px; font-size: 1.75rem; color: #cbd5e1; }
.vacio strong { display: block; color: var(--texto); }

/* 8. PANTALLAS ------------------------------------------------------------ */

/* Inicio (dashboard) */
.saludo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 20px; }
.saludo h2 { font-size: 1.375rem; }
.saludo p { color: var(--suave); font-size: 0.9rem; }
.accesos { display: flex; flex-wrap: wrap; gap: 8px; }

.resumen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grupo { min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px 22px 20px; }
.grupo-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.grupo-cabecera h3 { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; }
.grupo-cabecera h3 i { color: var(--primario); }
.grupo-cabecera a { font-size: 0.8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.grupo-cabecera a:hover { text-decoration: underline; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px 24px; }
.grupo.destacado .kpis { flex: 1; align-content: center; }
.kpi .valor { display: block; font-size: 1.75rem; font-weight: 700; color: var(--titulo); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .valor small { font-size: 0.55em; font-weight: 600; color: var(--suave); }
.kpi .etiqueta { display: block; margin-top: 4px; font-size: 0.8125rem; color: var(--suave); }
.kpi.principal .valor { font-size: 2.375rem; }
.grupo.destacado { border-top: 3px solid var(--dorado); }

.cuadro-mini { width: 100%; border-collapse: collapse; }
.cuadro-mini th { padding: 0 0 8px; text-align: right; font-size: 0.78rem; font-weight: 500; color: var(--suave); }
.cuadro-mini th:first-child, .cuadro-mini td:first-child { text-align: left; }
.cuadro-mini td { padding: 10px 0; border-top: 1px solid #eef2f6; text-align: right; font-size: 1.375rem; font-weight: 700; color: var(--titulo); font-variant-numeric: tabular-nums; }
.cuadro-mini td:first-child { font-size: 0.9rem; font-weight: 500; color: var(--texto); }
.cuadro-mini td.atenuado { color: #94a3b8; font-weight: 600; }

/* Compatibilidad: tarjetas de estadísticas del diseño anterior */
.stats-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 20px; }
.stat-card h3 { font-size: 1.75rem; font-weight: 700; }
.stat-card p { color: var(--suave); font-size: 0.8125rem; }

/* Corrales y lotes */
.corrales-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; align-items: start; }
.corrales-grid.amplia { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); }
.corral { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.corral-cabecera { padding: 12px 16px 14px; background: var(--oscuro); color: #fff; }
.corral-cabecera .linea { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.corral-cabecera h4 { color: #fff; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.corral-cabecera h4 i { color: var(--menu-tenue); font-size: 0.85em; }
.corral-cabecera .ocupacion { font-size: 0.8125rem; color: #cbd5e1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.barra-ocupacion { height: 4px; margin-top: 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.barra-ocupacion span { display: block; height: 100%; border-radius: 4px; background: var(--menu-acento); }
.barra-ocupacion.llena span { background: #f87171; }

.lote { padding: 14px 16px 16px; }
.lote + .lote { border-top: 1px solid var(--borde); }
.lote-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.lote-codigo { font-weight: 600; color: var(--titulo); }
.lote-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 12px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 10px; }
.lote-datos dt { font-size: 0.75rem; color: var(--suave); }
.lote-datos dd { font-weight: 600; color: var(--titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lote-datos .alimento dd { color: #b45309; }
.lote-accion { margin-top: 12px; }
.lote-accion > span { display: block; margin-bottom: 6px; font-size: 0.78rem; font-weight: 500; color: #475569; }
.lote-accion form { display: grid; grid-template-columns: 84px minmax(0, 1fr) var(--alto-control); gap: 8px; }
.lote-accion input, .lote-accion select { width: 100%; }

.corrales-vacios { display: flex; flex-wrap: wrap; gap: 8px; }
.corral-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 12px; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-control); background: #fff; font-size: 0.8125rem; font-weight: 500; color: var(--texto); }
.corral-chip small { color: var(--suave); font-weight: 400; font-size: 0.75rem; }

.total-dia { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 16px 22px; margin-bottom: 20px; background: #fff; border: 1px solid var(--borde); border-left: 4px solid var(--dorado); border-radius: var(--radio); }
.total-dia span { font-weight: 500; color: var(--texto); display: flex; align-items: center; gap: 10px; }
.total-dia span i { color: #b45309; }
.total-dia strong { font-size: 1.875rem; font-weight: 700; color: var(--titulo); font-variant-numeric: tabular-nums; }
.total-dia strong small { font-size: 0.5em; color: var(--suave); font-weight: 600; }

/* Notas de pedido */
.tabla-productos td { padding: 8px 10px; }
.tabla-productos .producto-fijo { width: 100%; min-width: 190px; height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; font-weight: 600; color: var(--titulo); cursor: default; }
.tabla-productos .col-importe { background: var(--superficie-2); }
.con-unidad { display: flex; align-items: center; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-control); background: #fff; transition: border-color 0.15s, box-shadow 0.15s; }
.con-unidad:focus-within { border-color: var(--primario); box-shadow: var(--foco); }
.con-unidad input { flex: 1; min-width: 0; width: 100%; height: 34px; border: 0; background: transparent; box-shadow: none; text-align: right; padding: 0 8px; }
.con-unidad input:focus { box-shadow: none; }
.con-unidad .unidad { padding: 0 9px; font-size: 0.72rem; font-weight: 600; color: #94a3b8; }
.tabla-productos .cantidad { width: 76px; text-align: center; }
.importe-fila { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: #94a3b8; font-size: 0.8rem; font-weight: 600; }
.importe-fila input { width: 92px; height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: right; font-size: 0.9375rem; font-weight: 700; color: var(--titulo); }

.nota-datos { grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1.2fr) 170px; align-items: start; }
.cierre-nota { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px 24px; }
.cierre-nota > .campo { width: 180px; }
.totales { display: grid; gap: 8px; min-width: 280px; }
.totales .linea { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 0.875rem; font-weight: 500; color: #475569; }
.totales .linea.total { padding-top: 10px; border-top: 1px dashed var(--borde-fuerte); font-size: 0.95rem; font-weight: 600; color: var(--titulo); }
.monto { display: inline-flex; align-items: center; gap: 6px; }
.monto .moneda { font-weight: 600; color: #94a3b8; }
.monto input { width: 130px; height: 36px; text-align: right; font-weight: 600; background: #f1f5f9; }
.monto.grande .moneda { color: var(--primario); font-size: 1.125rem; }
.monto.grande input { width: 170px; height: 48px; font-size: 1.375rem; font-weight: 700; color: var(--primario-oscuro); background: var(--primario-suave); border-color: var(--primario-borde); }

/* Facturación SUNAT */
.opciones-carga { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.opcion-carga { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie-2); }
.opcion-carga h4 { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; }
.opcion-carga h4 i { color: var(--primario); }
.opcion-carga p { color: var(--suave); font-size: 0.85rem; flex: 1; }
.opcion-carga input[type="file"] { width: 100%; }
.copiar-correo { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: var(--alto-control); padding: 0 12px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-control); background: #fff; color: var(--texto); font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.btn.ocupado { pointer-events: none; opacity: 0.75; }
.btn.ocupado i { animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.copiar-correo:hover { background: #f1f5f9; }
.copiar-correo i { color: #94a3b8; }

/* Despacho */
.barra-seleccion { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 16px -24px -24px; padding: 12px 24px; background: #fff; border-top: 1px solid var(--borde); border-radius: 0 0 var(--radio) var(--radio); }
.barra-seleccion .conteo { color: var(--suave); font-size: 0.875rem; }
.barra-seleccion .conteo strong { color: var(--titulo); }
.tabla.compacta th, .tabla.compacta td { padding: 8px 12px; }
.tabla-edicion td { padding: 6px 8px; }
.tabla-edicion input, .tabla-edicion select { width: 100%; min-width: 84px; }
.tabla-edicion select { min-width: 230px; }
.tabla-edicion .calc-importe { font-weight: 600; text-align: right; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tabla .orden { width: 68px; text-align: center; padding: 0 6px; }

/* 9. PANTALLAS SUELTAS (editar cliente, editar pedido, detalle de nota…) -- */
.pagina-simple { min-height: 100vh; }
.barra-simple { display: flex; align-items: center; gap: 14px; min-height: var(--alto-barra); padding: 0 24px; background: #fff; border-bottom: 1px solid var(--borde); }
.barra-simple .volver { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-control); color: var(--texto); font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.barra-simple .volver:hover { background: #f1f5f9; }
.barra-simple h1 { font-size: 1.125rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-simple h1 .numero { color: var(--primario); }
.contenido-simple { max-width: 1120px; margin: 0 auto; padding: 24px 24px 56px; }
.contenido-simple.angosto { max-width: 560px; }

.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 24px; padding: 16px 18px; margin-bottom: 20px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 10px; }
.ficha dt { font-size: 0.78rem; color: var(--suave); }
.ficha dd { font-weight: 600; color: var(--titulo); overflow-wrap: anywhere; }

.barra-simple .espacio { flex: 1; }
.tabla tfoot td.num { color: #475569; }
.tabla tfoot tr.total td { font-size: 1rem; font-weight: 700; color: var(--titulo); }

/* Corrales: campanas, proveedor y datos del lote */
.grupo.ancho { grid-column: 1 / -1; }
.corral.campana .corral-cabecera { background: var(--campana); }
.lote-proveedor { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px; font-size: 0.8125rem; font-weight: 500; color: var(--texto); overflow-wrap: anywhere; }
.lote-proveedor i { color: var(--suave); font-size: 0.85em; }
.lote-proveedor.sin-dato { color: var(--suave); font-weight: 400; }
.lote-datos.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
.lote-datos dd small { font-size: 0.78em; font-weight: 400; color: var(--suave); }

/* Indicadores */
.atajos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.variacion { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.78rem; font-weight: 500; color: var(--suave); }
.variacion.sube { color: var(--verde); }
.variacion.baja { color: var(--rojo); }
.desglose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef2f6; }
.desglose > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.85rem; }
.desglose dt { color: var(--suave); }
.desglose dd { font-weight: 600; color: var(--titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cuadro-mini.chico { margin-top: 14px; }
.cuadro-mini.chico td { padding: 8px 0 8px 12px; font-size: 0.875rem; font-weight: 600; }
.cuadro-mini.chico th { padding-left: 12px; white-space: nowrap; }
.cuadro-mini.chico td:first-child { padding-left: 0; font-weight: 500; overflow-wrap: break-word; }

.grafico-meses { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; height: 250px; padding-top: 6px; }
.grafico-meses .eje-y { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 28px; text-align: right; font-size: 0.72rem; color: var(--suave); font-variant-numeric: tabular-nums; line-height: 1; }
.grafico-meses .columnas { position: relative; display: flex; align-items: stretch; gap: 2px; padding-bottom: 28px; }
.grafico-meses .columnas::before { content: ""; position: absolute; inset: 0 0 28px 0; border-top: 1px solid #eef2f6; border-bottom: 1px solid var(--borde-fuerte); background: linear-gradient(#eef2f6, #eef2f6) 0 50% / 100% 1px no-repeat; }
.grafico-meses .columna { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; outline: none; }
.grafico-meses .barra { width: min(24px, 62%); height: var(--alto); border-radius: 4px 4px 0 0; background: var(--primario); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.grafico-meses .columna:hover .barra, .grafico-meses .columna:focus-visible .barra { background: var(--primario-oscuro); }
.grafico-meses .columna:hover::after, .grafico-meses .columna:focus-visible::after { content: ""; position: absolute; inset: 0; background: rgba(15, 23, 42, 0.04); border-radius: 4px; pointer-events: none; }
.grafico-meses .mes { position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; text-align: center; font-size: 0.72rem; color: var(--suave); white-space: nowrap; }
.grafico-meses .mes.actual { color: var(--titulo); font-weight: 600; }
.grafico-meses .globo { display: none; position: absolute; z-index: 6; bottom: calc(var(--alto) + 10px); left: 50%; transform: translateX(-50%); padding: 8px 10px; background: var(--oscuro-fuerte); color: #fff; border-radius: 8px; font-size: 0.78rem; white-space: nowrap; box-shadow: var(--sombra-alta); pointer-events: none; }
.grafico-meses .globo strong { display: block; color: #fff; font-weight: 600; }
.grafico-meses .columna:hover .globo, .grafico-meses .columna:focus-visible .globo { display: block; }
.grafico-meses .columna:nth-child(-n+2) .globo { left: 0; transform: none; }
.grafico-meses .columna:nth-last-child(-n+2) .globo { left: auto; right: 0; transform: none; }
.ver-tabla { margin-top: 14px; }
.ver-tabla summary { cursor: pointer; width: fit-content; font-size: 0.8125rem; font-weight: 600; color: var(--primario); }
.ver-tabla .table-responsive { margin-top: 10px; max-width: 520px; }

.pista { height: 8px; border-radius: 4px; background: var(--primario-suave); overflow: hidden; }
.pista span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--primario); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.barras-lista { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.barras-lista .fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.875rem; }
.barras-lista .nombre { min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras-lista .monto-barra { font-weight: 600; color: var(--titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barras-lista .pista { margin: 5px 0 3px; }
.barras-lista .detalle { font-size: 0.75rem; color: var(--suave); }
.parte { display: flex; align-items: center; gap: 10px; }
.parte .pista { flex: 1; min-width: 40px; }
.parte > span { width: 50px; text-align: right; font-size: 0.8rem; color: #475569; font-variant-numeric: tabular-nums; }

/* Pantalla de inicio de sesión */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: #eef3ef; }
.acceso-marco { width: 100%; max-width: 940px; min-height: 560px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #fff; border-radius: 20px; box-shadow: var(--sombra-alta); overflow: hidden; }
.acceso-marca { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 48px 44px 32px; overflow: hidden; color: var(--menu-texto); background: linear-gradient(155deg, var(--menu-arriba), var(--menu-abajo)); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.acceso-adorno { position: absolute; border-radius: 50%; pointer-events: none; }
.acceso-adorno.uno { width: 420px; height: 420px; right: -190px; top: -170px; border: 56px solid rgba(255, 255, 255, 0.05); }
.acceso-adorno.dos { width: 210px; height: 210px; right: -96px; bottom: -104px; border: 2px solid rgba(236, 196, 90, 0.45); box-shadow: 0 0 0 26px rgba(236, 196, 90, 0.08); }
.acceso-marca-texto { position: relative; margin-top: 44px; }
.acceso-sobre { display: inline-block; padding-bottom: 10px; margin-bottom: 18px; border-bottom: 3px solid var(--dorado); font-size: 0.95rem; font-weight: 600; color: var(--menu-acento); }
.acceso-lema { max-width: 15ch; font-size: 2rem; font-weight: 600; line-height: 1.2; color: #fff; }
.acceso-puntos { list-style: none; display: grid; gap: 12px; margin-top: 30px; font-size: 0.9rem; }
.acceso-puntos li { display: flex; align-items: center; gap: 12px; }
.acceso-puntos i { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: var(--menu-acento); font-size: 0.9rem; }
.acceso-pie-marca { position: relative; font-size: 0.78rem; color: var(--menu-tenue); }
.acceso-caja { align-self: center; width: 100%; max-width: 420px; justify-self: center; padding: 24px 40px 32px; }
.acceso-logo { height: 118px; margin-bottom: 2px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.acceso-logo img { height: 184px; width: auto; }
.acceso-caja h1 { font-size: 1.375rem; text-align: center; }
.acceso-ayuda { margin: 4px 0 20px; text-align: center; color: var(--suave); font-size: 0.9rem; }
.acceso-caja .campo { margin-bottom: 14px; }
.acceso-caja .campo input { height: 46px; }
.acceso-caja .btn-login { margin-top: 14px; }
.acceso-recordar { margin-top: 2px; font-size: 0.875rem; color: var(--texto); }
.acceso-nota { margin-top: 18px; text-align: center; font-size: 0.8125rem; color: var(--suave); }
.campo-icono { position: relative; }
.campo-icono > i { position: absolute; left: 14px; bottom: 15px; color: var(--suave); font-size: 0.95rem; pointer-events: none; }
.campo-icono input { padding-left: 40px; }
.campo-icono:focus-within > i { color: var(--primario); }
.campo-clave { position: relative; }
.campo-clave input { padding-right: 46px; }
.ver-clave { position: absolute; right: 4px; bottom: 5px; width: 38px; height: 36px; border: 0; border-radius: 6px; background: transparent; color: var(--suave); cursor: pointer; }
.ver-clave:hover { background: #f1f5f9; color: var(--texto); }

/* Inicio: saludo, cifras por bloque y listas */
.bienvenida { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 16px; padding: 26px 30px; overflow: hidden; border-radius: 16px; color: var(--menu-texto); background: linear-gradient(120deg, var(--menu-arriba), var(--menu-abajo)); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bienvenida::after { content: ""; position: absolute; right: -90px; top: -150px; width: 340px; height: 340px; border-radius: 50%; border: 46px solid rgba(255, 255, 255, 0.05); pointer-events: none; }
.bienvenida-texto { position: relative; min-width: 0; }
.bienvenida-fecha { font-size: 0.8125rem; color: var(--menu-acento); font-weight: 500; }
.bienvenida h2 { margin: 2px 0 4px; font-size: 1.625rem; color: #fff; }
.bienvenida-texto p:last-child { font-size: 0.9rem; color: var(--menu-texto); }
.bienvenida-avisos { position: relative; z-index: 1; list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.bienvenida-avisos a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.11); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; font-size: 0.8125rem; font-weight: 500; text-decoration: none; }
.bienvenida-avisos a i { color: var(--menu-acento); }
.bienvenida-avisos a:hover { background: rgba(255, 255, 255, 0.2); }
.accesos-inicio { margin-bottom: 22px; }

.tramo { margin-bottom: 22px; }
.tramo-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tramo-cabecera h3 { font-size: 1rem; }
.tramo-cabecera a { font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
.tramo-cabecera a:hover { text-decoration: underline; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(164px, 1fr)); gap: 12px; }
.dato { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 16px 18px 14px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); color: inherit; text-decoration: none; }
.dato.principal { border-left: 4px solid var(--dorado); }
.dato-icono { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--primario-suave); color: var(--primario); font-size: 0.95rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dato-icono.dorado, .dato-icono.ambar { background: var(--ambar-suave); color: var(--ambar); }
.dato-icono.rojo { background: var(--rojo-suave); color: var(--rojo); }
.dato-icono.azul { background: var(--info-suave); color: var(--info); }
.dato .valor { padding-right: 44px; font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dato .valor small { font-size: 0.5em; font-weight: 600; color: var(--suave); }
.dato .etiqueta { margin-top: 2px; font-size: 0.875rem; font-weight: 500; color: var(--texto); }
.dato .detalle { margin-top: 2px; font-size: 0.78rem; color: var(--suave); }
.dato .detalle a { font-weight: 600; text-decoration: none; }
.dato .detalle a:hover { text-decoration: underline; }
a.dato.enlace { transition: border-color 0.15s, box-shadow 0.15s; }
a.dato.enlace:hover { border-color: var(--primario-borde); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); }
.resumen { margin-bottom: 22px; }
.resumen:empty { display: none; }
.grupo-vacio { padding: 18px 0; color: var(--suave); font-size: 0.875rem; }
.grupo-nota { margin-top: 12px; font-size: 0.78rem; color: var(--suave); }
.grupo .tabla small { color: var(--suave); font-size: 0.75rem; }
.grupo .tabla strong { white-space: nowrap; }
.solo-movil { display: none; }
.grafico-meses.chico { flex: 1 1 auto; height: auto; min-height: 200px; }
.grafico-meses.chico .barra { width: min(34px, 60%); }
.pista.excedida span { background: var(--rojo); }
.barras-lista .nombre .badge { margin-left: 6px; padding: 1px 8px; font-size: 0.7rem; }

/* Mi perfil */
.perfil { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.perfil-tarjeta { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 22px 22px; background: #fff; border: 1px solid var(--borde); border-top: 4px solid var(--dorado); border-radius: var(--radio); box-shadow: var(--sombra); text-align: center; }
.perfil-avatar { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; background: var(--primario); color: #fff; font-size: 2rem; font-weight: 600; letter-spacing: 0.02em; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.perfil-tarjeta h2 { margin-top: 6px; font-size: 1.125rem; overflow-wrap: anywhere; }
.perfil-datos { width: 100%; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--borde); display: grid; gap: 10px; text-align: left; }
.perfil-datos dt { font-size: 0.75rem; color: var(--suave); }
.perfil-datos dd { font-size: 0.875rem; font-weight: 500; overflow-wrap: anywhere; }
.perfil-modulos { width: 100%; padding-top: 14px; border-top: 1px solid var(--borde); text-align: left; }
.perfil-modulos .titulo { display: block; margin-bottom: 8px; font-size: 0.75rem; color: var(--suave); }
.perfil-modulos p { font-size: 0.875rem; }
.perfil-modulos .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.perfil-panel { margin-bottom: 0; padding-top: 8px; }
.pestanas { display: flex; gap: 4px; margin: 0 -24px 22px; padding: 0 24px; border-bottom: 1px solid var(--borde); overflow-x: auto; }
.pestana { display: inline-flex; align-items: center; gap: 10px; padding: 14px 16px 12px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--suave); font-family: inherit; font-size: 0.9rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.pestana:hover { color: var(--texto); }
.pestana.activa { color: var(--primario); border-bottom-color: var(--primario); }
.form-clave { max-width: 420px; }
input[readonly] { background: var(--superficie-2); color: var(--suave); }

/* Permisos por módulo */
.notas-permisos { list-style: none; display: grid; gap: 8px; margin-bottom: 18px; padding: 14px 16px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-control); font-size: 0.875rem; }
.notas-permisos li { display: flex; gap: 12px; align-items: baseline; }
.notas-permisos i { width: 18px; text-align: center; color: var(--primario); }
.permisos-lista { display: grid; gap: 14px; }
.permiso-usuario { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.permiso-cabecera { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; background: var(--superficie-2); border-bottom: 1px solid var(--borde); }
.permiso-quien { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.permiso-quien strong { color: var(--titulo); }
.permiso-quien span { font-size: 0.8rem; color: var(--suave); overflow-wrap: anywhere; }
.permiso-botones { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-chico { height: 32px; padding: 0 12px; font-size: 0.8rem; }
.permiso-grupos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1.2fr); gap: 0; }
.permiso-grupo { min-width: 0; margin: 0; padding: 14px 16px 16px; border: 0; border-right: 1px solid var(--borde); }
.permiso-grupo:last-child { border-right: 0; }
.permiso-grupo legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; font-size: 0.78rem; font-weight: 600; color: var(--suave); }
.permiso-grupo legend + * { clear: both; }
.permiso-grupo .casilla { margin-bottom: 8px; }
.permiso-grupo:nth-child(2) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-content: start; }
.permiso-grupo:nth-child(2) legend { grid-column: 1 / -1; }
.casilla { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; cursor: pointer; }
.casilla input { flex-shrink: 0; margin-top: 2px; }
.casilla small { display: block; font-size: 0.75rem; color: var(--suave); }

/* Clientes: nombre comercial y dato menor en la lista */
.alias { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 6px; background: var(--primario-suave); color: var(--primario-oscuro); font-size: 0.72rem; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.dato-menor { display: block; margin-top: 2px; font-size: 0.75rem; font-weight: 400; color: var(--suave); }
.badge.tenue { background: transparent; border: 1px dashed var(--borde-fuerte); color: var(--suave); font-weight: 500; }

/* «Mis clientes»: botón flotante y panel lateral */
.boton-flotante { position: fixed; right: 24px; bottom: 24px; z-index: 35; display: inline-flex; align-items: center; height: 56px; min-width: 56px; padding: 0 17px; border: 0; border-radius: 28px; background: var(--primario); color: #fff; font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 77, 35, 0.35), 0 1px 3px rgba(15, 23, 42, 0.2); transition: background-color 0.15s, box-shadow 0.15s; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.boton-flotante i { width: 22px; text-align: center; font-size: 1.25rem; color: var(--menu-acento); }
.boton-flotante span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.2s ease, opacity 0.15s ease, margin-left 0.2s ease; }
.boton-flotante:hover, .boton-flotante:focus-visible { background: var(--primario-oscuro); box-shadow: 0 8px 22px rgba(0, 77, 35, 0.42), 0 1px 3px rgba(15, 23, 42, 0.2); }
.boton-flotante:hover span, .boton-flotante:focus-visible span { max-width: 130px; margin-left: 10px; opacity: 1; }
.boton-flotante:focus-visible { outline: 3px solid var(--dorado); outline-offset: 2px; }
/* Que no tape el último renglón de la página ni la barra de «Guardar» de algunas pantallas */
body:has(.boton-flotante) .contenido { padding-bottom: 104px; }
body:has(.barra-seleccion) .boton-flotante, body:has(.barra-cobro) .boton-flotante { bottom: 92px; }
body.con-directorio { overflow: hidden; }
body.con-directorio .boton-flotante { display: none; }

.directorio-fondo { position: fixed; inset: 0; z-index: 89; background: rgba(8, 24, 15, 0.5); }
.directorio { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(460px, 100%); display: flex; flex-direction: column; background: var(--fondo); box-shadow: -12px 0 32px rgba(15, 23, 42, 0.18); transform: translateX(24px); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease; }
.directorio[hidden], .directorio-fondo[hidden] { display: none; }
.directorio.abierto { transform: none; opacity: 1; }
.directorio-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 16px 20px; color: #fff; background: linear-gradient(120deg, var(--menu-arriba), var(--menu-abajo)); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.directorio-cabecera h2 { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; color: #fff; }
.directorio-cabecera h2 i { color: var(--menu-acento); }
.directorio-cabecera p { margin-top: 2px; font-size: 0.8125rem; color: var(--menu-texto); }
.directorio-cerrar { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1rem; cursor: pointer; }
.directorio-cerrar:hover { background: rgba(255, 255, 255, 0.24); }
.directorio-filtros { padding: 14px 16px 12px; background: #fff; border-bottom: 1px solid var(--borde); }
.directorio-buscador { position: relative; }
.directorio-buscador i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--suave); font-size: 0.9rem; pointer-events: none; }
.directorio-buscador input { width: 100%; height: 44px; padding: 0 12px 0 38px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-control); background: #fff; color: var(--texto); font-family: inherit; font-size: 0.9rem; }
.directorio-buscador input:focus { outline: none; border-color: var(--primario); box-shadow: var(--foco); }
.directorio-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.directorio-chips .salto { flex-basis: 100%; height: 0; }
.chip { height: 30px; padding: 0 12px; border: 1px solid var(--borde-fuerte); border-radius: 999px; background: #fff; color: var(--texto); font-family: inherit; font-size: 0.78rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.chip:hover { border-color: var(--primario); color: var(--primario-oscuro); }
.chip.activa { background: var(--primario); border-color: var(--primario); color: #fff; }
.directorio-lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 10px; outline: none; }
.directorio-aviso { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; text-align: center; color: var(--suave); font-size: 0.875rem; }
.directorio-aviso i { font-size: 1.75rem; color: var(--borde-fuerte); }
.directorio-aviso strong { color: var(--titulo); font-size: 0.95rem; }
.cliente-ficha { flex-shrink: 0; padding: 14px 16px 12px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.cliente-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cliente-nombre { min-width: 0; }
.cliente-nombre h3 { display: inline; font-size: 0.95rem; line-height: 1.35; overflow-wrap: anywhere; }
.cliente-nombre .alias { margin-left: 4px; }
.cliente-precio { flex-shrink: 0; text-align: right; line-height: 1.2; }
.cliente-precio strong { display: block; font-size: 1.0625rem; color: var(--titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cliente-precio small { font-size: 0.72rem; color: var(--suave); }
.cliente-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 8px; }
.cliente-ficha .linea { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; font-size: 0.8125rem; color: var(--texto); }
.cliente-ficha .linea > i { width: 14px; flex-shrink: 0; text-align: center; font-size: 0.78rem; color: var(--suave); }
.cliente-ficha .linea > span { min-width: 0; overflow-wrap: anywhere; }
.cliente-ficha .linea.ruc > span { font-variant-numeric: tabular-nums; font-weight: 500; }
.cliente-ficha .linea.nota { margin-top: 8px; padding: 8px 10px; border-radius: var(--radio-control); background: var(--superficie-2); }
.cliente-ficha .linea.precios { background: var(--ambar-suave); color: #5c3c00; }
.cliente-ficha .linea.precios > i { color: var(--ambar); }
.cliente-ficha .copiar { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid var(--borde); border-radius: 6px; background: #fff; color: var(--suave); font-family: inherit; font-size: 0.72rem; font-weight: 500; cursor: pointer; }
.cliente-ficha .copiar:hover { border-color: var(--primario-borde); color: var(--primario-oscuro); }
.cliente-ficha .copiar.copiado { border-color: var(--primario-borde); background: var(--primario-suave); color: var(--primario-oscuro); }
.cliente-editar { display: inline-block; margin-top: 10px; font-size: 0.78rem; font-weight: 600; text-decoration: none; }
.cliente-editar:hover { text-decoration: underline; }

/* 10. CELULAR, TABLET E IMPRESIÓN ----------------------------------------- */
@media (max-width: 1024px) {
    .sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: auto; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: none; }
    .sidebar.active { transform: translateX(0); box-shadow: var(--sombra-alta); }
    .overlay.active { display: block; }
    .btn-menu-mobile { display: inline-grid; place-items: center; }
    .topbar { padding: 0 16px; }
    .contenido { padding: 16px 16px 48px; }
}

@media (max-width: 900px) {
    .perfil { grid-template-columns: 1fr; }
    .permiso-grupos { grid-template-columns: 1fr; }
    .permiso-grupo { border-right: 0; border-bottom: 1px solid var(--borde); }
    .permiso-grupo:last-child { border-bottom: 0; }
    .acceso-marco { grid-template-columns: 1fr; max-width: 440px; min-height: 0; }
    .acceso-marca { padding: 22px 28px; }
    .acceso-marca-texto { margin-top: 0; }
    .acceso-lema { max-width: none; font-size: 1.125rem; }
    .acceso-sobre { margin-bottom: 10px; padding-bottom: 6px; }
    .acceso-puntos, .acceso-pie-marca, .acceso-adorno.dos { display: none; }
    .acceso-caja { padding: 14px 28px 28px; }
    .nota-datos { grid-template-columns: 130px minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .resumen { grid-template-columns: 1fr; }
    .boton-flotante { right: 16px; bottom: 16px; }
    .boton-flotante:hover span, .boton-flotante:focus-visible span { max-width: 0; margin-left: 0; opacity: 0; }
    body:has(.barra-seleccion) .boton-flotante { bottom: 132px; }
    .menu-usuario-texto, .menu-usuario .chevron { display: none; }
    .menu-usuario-boton { padding: 0 4px; }
    .bienvenida { padding: 20px 20px 22px; }
    .bienvenida h2 { font-size: 1.375rem; }
    .bienvenida-avisos { width: 100%; }
    .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dato { padding: 14px 14px 12px; }
    .dato .valor { font-size: 1.5rem; }
    .pestanas { margin: 0 -16px 18px; padding: 0 16px; }
    .content-box, .panel { padding: 16px 16px 18px; }
    .barra-seleccion { margin: 16px -16px -18px; padding: 10px 16px; }
    .barra-seleccion .btn { flex: 1 1 100%; }
    .topbar h1 { font-size: 1.0625rem; }
    .btn-logout span { display: none; }
    .btn-logout { width: var(--alto-control); padding: 0; }
    .filtros .campo, .filtros .campo.crece { flex: 1 1 140px; }
    .filtros input[type="date"] { width: 100%; }
    .filtros .al-final { margin-left: 0; }
    .cierre-nota { align-items: stretch; }
    .cierre-nota > .campo, .cierre-nota > .form-grid, .totales { width: 100%; min-width: 0; }
    .monto input { width: 120px; }
    .monto.grande input { width: 150px; }
    .accion { width: 38px; height: 38px; }
    .accion.accion-texto { width: auto; }
    .contenido-simple { padding: 16px 16px 48px; }
    .barra-simple { padding: 0 16px; }
    .barra-simple .volver span { display: none; }
    .barra-simple .volver { width: 36px; padding: 0; justify-content: center; }
    .barra-simple .btn span { display: none; }
    .barra-simple .btn { width: var(--alto-control); padding: 0; }
    .modal-fondo { padding: 12px; }
    .modal-caja { padding: 16px 16px 18px; }
    .kpi .valor { font-size: 1.5rem; }
    .kpi.principal .valor { font-size: 1.75rem; }
}

@media (max-width: 760px) {
    /* Productos de la nota de pedido: una ficha por producto */
    .tabla-productos thead { display: none; }
    .tabla-productos, .tabla-productos tbody { display: block; }
    .tabla-productos tr { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; padding: 12px 14px; border-bottom: 1px solid var(--borde); }
    .tabla-productos tr:last-child { border-bottom: 0; }
    .tabla-productos td { display: block; padding: 0; border: 0; text-align: left; }
    .tabla-productos td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; margin-bottom: 4px; font-size: 0.72rem; font-weight: 500; color: var(--suave); }
    .tabla-productos td.celda-producto { grid-column: 1 / -1; grid-row: 1; }
    .tabla-productos .producto-fijo { min-width: 0; }
    .tabla-productos .cantidad { width: 100%; }
    .tabla-productos td.col-importe { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; background: transparent; }
    .tabla-productos td.col-importe::before { margin-bottom: 0; font-size: 0.8125rem; }
}

@media (max-width: 640px) {
    /* Listados: cada fila se convierte en una ficha con el título de cada dato a la izquierda */
    .tabla.apilable thead { display: none; }
    .tabla.apilable, .tabla.apilable tbody, .tabla.apilable tr, .tabla.apilable td { display: block; width: auto; }
    .tabla.apilable tr { padding: 10px 14px; border-bottom: 1px solid var(--borde); }
    .tabla.apilable tr:last-child { border-bottom: 0; }
    .tabla.apilable td { position: relative; min-height: 30px; padding: 5px 0 5px 40%; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
    .tabla.apilable td::before { content: attr(data-etiqueta); position: absolute; left: 0; top: 6px; width: 37%; font-size: 0.78rem; font-weight: 500; color: var(--suave); white-space: normal; }
    .tabla.apilable td[data-etiqueta=""] { padding-left: 0; }
    .tabla.apilable td::before { overflow: hidden; text-overflow: ellipsis; }
    .tabla.apilable td[data-etiqueta=""] .acciones { justify-content: flex-end; }
    .tabla.apilable .texto-largo { min-width: 0; max-width: none; }
    .tabla.apilable tfoot { display: block; border-top: 1px solid var(--borde); background: var(--superficie-2); }
    .tabla.apilable tfoot tr { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 0; }
    .tabla.apilable tfoot td { min-height: 0; padding: 0; background: transparent; border: 0; }
    .tabla.apilable tfoot td::before { display: none; }
    .tabla.apilable tr.fila-vacia td { padding: 18px 0; text-align: center; }
    .tabla.apilable tr.fila-vacia td::before { display: none; }
    .corrales-grid.amplia { grid-template-columns: 1fr; }

    /* Documentos para la hoja de ruta: tres líneas por documento */
    .tabla-despacho thead { display: none; }
    .tabla-despacho, .tabla-despacho tbody { display: block; }
    .tabla-despacho tr { display: grid; grid-template-columns: 26px auto minmax(0, 1fr) 76px; gap: 3px 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--borde); }
    .tabla-despacho tr:last-child { border-bottom: 0; }
    .tabla-despacho td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
    .tabla-despacho td:nth-child(1) { grid-column: 1; grid-row: 1 / span 3; align-self: start; padding-top: 2px; }
    .tabla-despacho td:nth-child(3) { grid-column: 2; grid-row: 1; }
    .tabla-despacho td:nth-child(4) { grid-column: 3; grid-row: 1; }
    .tabla-despacho td:nth-child(7) { grid-column: 4; grid-row: 1; text-align: right; }
    .tabla-despacho td:nth-child(5) { grid-column: 2 / span 2; grid-row: 2; }
    .tabla-despacho td:nth-child(6) { grid-column: 2 / span 2; grid-row: 3; min-width: 0; max-width: none; font-size: 0.8125rem; color: var(--suave); }
    .tabla-despacho td:nth-child(2) { grid-column: 4; grid-row: 2 / span 2; text-align: right; }
    .tabla-despacho td:nth-child(2)::before { content: "Orden"; display: block; font-size: 0.7rem; color: var(--suave); }
    .tabla-despacho .orden { width: 64px; }
    .tabla-despacho tr.fila-vacia { display: block; }
    .tabla-despacho tr.fila-vacia td { padding: 18px 0; text-align: center; }
    .tabla-despacho tr.fila-vacia td::before { display: none; }
}

@media (max-width: 560px) {
    .solo-ancho { display: none; }
    .solo-movil { display: inline; }
    .grupo { padding: 16px 16px 18px; }
    .accesos-inicio .btn { flex: 1 1 100%; }
    .dato-icono { width: 30px; height: 30px; top: 12px; right: 12px; font-size: 0.8rem; }
    .dato .valor { padding-right: 34px; }
    .permiso-grupo:nth-child(2) { grid-template-columns: 1fr; }
    .permiso-botones, .permiso-botones .btn { width: 100%; }
    .acceso { padding: 0; place-items: stretch; background: #fff; }
    .acceso-marco { max-width: none; border-radius: 0; box-shadow: none; align-content: start; }
    .form-grid { grid-template-columns: 1fr; }
    .desglose { grid-template-columns: 1fr; }
    .grafico-meses .mes { font-size: 0.64rem; }
    .grafico-meses .columna:nth-child(odd) .mes { display: none; }
    .grafico-meses.chico .columna:nth-child(odd) .mes { display: block; }
    .filtros .atajos { width: 100%; }
    .nota-datos { grid-template-columns: 1fr; }
    .campo.ancho-2 { grid-column: auto; }
    .form-acciones .btn, .form-acciones .btn-submit { flex: 1 1 100%; }
    .corrales-grid { grid-template-columns: 1fr; }
    .saludo .accesos { width: 100%; }
    .saludo .accesos .btn { flex: 1 1 100%; }
    .panel-acciones, .panel-acciones .btn { width: 100%; }
}

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

/* 11. COBRANZAS ------------------------------------------------------------ */
.pestanas.navegacion { margin: 0 0 20px; padding: 0; }
a.pestana { text-decoration: none; }
.texto-alerta { color: var(--rojo) !important; }
.tabla a.enlace-fila { color: var(--titulo); text-decoration: none; }
.tabla a.enlace-fila:hover { color: var(--primario); text-decoration: underline; }
.tabla tr.resaltada { background: #fff8e6; }
.aviso-cobranza { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin-bottom: 16px; border: 1px solid #f1d58a; border-radius: 10px; background: var(--ambar-suave); color: #5c3d00; font-size: 0.875rem; }
.aviso-cobranza > i { margin-top: 3px; color: var(--ambar); }
.aviso-cobranza strong { display: block; color: #4a3100; }
.aviso-cobranza a { color: var(--primario); font-weight: 600; }
.tramos-cobro { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tramos-cobro a { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 8px 10px; margin: 0 -10px; border-radius: 8px; color: var(--texto); text-decoration: none; }
.tramos-cobro a:hover { background: var(--superficie-2); }
.tramos-cobro .nombre { font-size: 0.875rem; }
.tramos-cobro .nombre small { color: var(--suave); margin-left: 4px; }
.tramos-cobro .monto { font-weight: 700; color: var(--titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tramos-cobro .barra { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: #eef2f6; overflow: hidden; }
.tramos-cobro .barra span { display: block; height: 100%; border-radius: 6px; background: var(--primario); }
.tramos-cobro li.atrasado .barra span { background: #d97706; }
.tramos-cobro li.atrasado:last-child .barra span { background: var(--rojo); }
.pasos-cobro { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 0.875rem; color: var(--texto); }
.campo.casillas { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-height: var(--alto-control); border: 0; padding: 0; margin: 0; }
.campo.casillas legend { width: 100%; margin-bottom: 6px; font-size: 0.8125rem; font-weight: 500; color: #475569; }
.campo.casillas label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--texto); font-weight: 500; cursor: pointer; }
.campo.casillas input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin: 0; }
.cobro-totales { display: flex; flex-wrap: wrap; gap: 12px 32px; padding: 4px 0 14px; }
.cobro-totales > div { display: flex; flex-direction: column; }
.cobro-totales .etiqueta { font-size: 0.78rem; color: var(--suave); }
.cobro-totales .valor { font-size: 1.5rem; font-weight: 700; color: var(--titulo); font-variant-numeric: tabular-nums; }
.cobro-totales .valor.chico { font-size: 1.05rem; }
.cuenta-saldo { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cuenta-saldo .etiqueta { font-size: 0.78rem; color: var(--suave); }
.cuenta-saldo .valor { font-size: 1.75rem; font-weight: 700; color: var(--rojo); font-variant-numeric: tabular-nums; line-height: 1.1; }
.subtitulo-cobro { margin: 18px 0 10px; font-size: 0.95rem; color: var(--titulo); }
.repartir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-bottom: 12px; }
.repartir .campo input { width: 170px; }
.repartir .ayuda { flex: 1 1 220px; margin: 0 0 10px; }
.tabla-cobro .cobro-monto { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.tabla-cobro input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
input.con-error { border-color: var(--rojo) !important; box-shadow: 0 0 0 3px var(--rojo-suave) !important; }
.barra-cobro { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 18px -24px -24px; padding: 12px 24px; background: #fff; border-top: 1px solid var(--borde); border-radius: 0 0 var(--radio) var(--radio); }
.barra-cobro .conteo { color: var(--suave); font-size: 0.875rem; }
.barra-cobro .conteo strong { color: var(--titulo); }
.panel.compacto { padding: 14px 20px; }
.lista-ayuda { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 4px; font-size: 0.85rem; color: var(--suave); }
.vista-previa-cobro { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--primario-borde); border-radius: 10px; background: var(--primario-suave); }
.vista-previa-cobro p { margin: 0 0 12px; }
.vista-previa-cobro form { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) {
    .cuenta-saldo { align-items: flex-start; }
    .barra-cobro { margin: 16px -16px -20px; padding: 12px 16px; }
    .barra-cobro .btn { flex: 1 1 100%; }
    body:has(.barra-cobro) .boton-flotante { bottom: 132px; }
    .tabla-cobro .cobro-monto { width: 100%; }
    .tabla.apilable.tabla-cobro td:first-child { padding-left: 0; }
}

/* 12. COSTOS, MOVILIDAD Y PLANILLA ------------------------------------------ */
.lote-accion form:has(.campo-kilos) { grid-template-columns: 64px minmax(0, 1fr) 64px var(--alto-control); }
.tabla-costos td:first-child { min-width: 200px; }
.tabla-costos td.num .secundario { white-space: normal; max-width: 260px; margin-left: auto; }
.panel.editando { border-color: var(--dorado); box-shadow: 0 0 0 3px rgba(216, 168, 56, 0.25), var(--sombra); }
.panel.editando .panel-titulo { color: #6b4a00; }
.selector-mes { display: inline-flex; align-items: center; gap: 8px; }
.selector-mes strong { min-width: 120px; text-align: center; font-size: 0.9rem; }
.fila-codigo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.fila-codigo select { min-width: 200px; }
.vehiculos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.vehiculos-grid .desglose { grid-template-columns: 1fr; }
.leyenda-asistencia { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 12px; font-size: 0.78rem; color: var(--suave); }
.tabla-asistencia th, .tabla-asistencia td { padding: 4px 2px; font-size: 0.75rem; }
.tabla-asistencia th { text-align: center; line-height: 1.1; }
.tabla-asistencia th.domingo { color: var(--rojo); }
.tabla-asistencia td.nombre-asistencia, .tabla-asistencia th:first-child { position: sticky; left: 0; z-index: 1; min-width: 170px; padding: 6px 10px; text-align: left; background: #fff; }
.tabla-asistencia th:first-child { background: var(--superficie-2); }
.tabla-asistencia td.fuera { color: #cbd5e1; }
.dia-asistencia { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: #f1f5f9; color: #94a3b8; font: 600 0.72rem/1 inherit; cursor: pointer; }
span.dia-asistencia { cursor: default; }
.dia-asistencia:hover { border-color: var(--borde-fuerte); }
.dia-asistencia.e-A { background: #dff3e7; color: var(--verde); }
.dia-asistencia.e-T { background: var(--ambar-suave); color: var(--ambar); box-shadow: inset 0 -3px 0 #f0b429; }
.dia-asistencia.e-F, .dia-asistencia.e-S { background: var(--rojo-suave); color: var(--rojo); }
.dia-asistencia.e-J, .dia-asistencia.e-P, .dia-asistencia.e-M { background: var(--info-suave); color: var(--info); }
.dia-asistencia.e-V, .dia-asistencia.e-R { background: #ede9fe; color: #5b21b6; }
.dia-asistencia.e-D { background: #f1f5f9; color: #64748b; }
.dia-asistencia.e-vacio { background: #fff; border: 1px dashed #f1b9be; color: #f1b9be; }

@media print {
    body { background: #fff; }
    .sidebar, .topbar, .overlay, .barra-simple, .no-imprimir, .alerta, .accesos-inicio, .boton-flotante, .directorio, .directorio-fondo { display: none !important; }
    body:has(.boton-flotante) .contenido { padding-bottom: 0; }
    .contenido, .contenido-simple { padding: 0; max-width: none; }
    .content-box, .panel, .corral, .grupo { box-shadow: none; break-inside: avoid; }
    /* Sin fondos oscuros: así se lee igual aunque el navegador no imprima los colores de fondo */
    .corral-cabecera { background: none; border-bottom: 2px solid #1c2b23; }
    .corral-cabecera h4, .corral-cabecera h4 i, .corral-cabecera .ocupacion { color: #0f172a; }
    .barra-seleccion, .barra-cobro { position: static; }
}