/* ══════════════════════════════════════════════════════════════════════════
   GESTIÓN DE ENTRADAS — LA CAPA ERP
   --------------------------------------------------------------------------
   Los apartados, las cotizaciones, el correo en dos sabores, la IA, y el
   pulido general para que la pantalla se lea como un ERP: denso, con color
   solo donde dice algo. Se carga la última: lo que pisa, lo pisa a propósito.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── El fondo y las tarjetas grandes, como el resto del ERP de la casa ──── */
body {
    background:
        radial-gradient(1100px 520px at 10% -8%, #dbe9ff 0%, transparent 58%),
        radial-gradient(900px 460px at 94% 2%, #dcf3ec 0%, transparent 60%),
        #e9eef6 !important;
    background-attachment: fixed !important;
}

/* ── LA LUPA DEL BUSCADOR ────────────────────────────────────────────────
   La regla de la casa `.search-bar input` deja sitio para el icono, pero la
   general de los campos (`input[type=text]`) empata en peso y va después,
   así que ganaba ella y el icono acababa encima del texto. Con el id no hay
   empate posible. */
#searchInput { padding-left: 2.4rem !important; }
.search-bar .search-icon { left: 13px; font-size: .92rem; }

/* ── EL PANEL DE APARTADOS (columna derecha) ─────────────────────────────
   Ocupa el hueco que dejó el mapa. Es la navegación de la pantalla: los
   siete apartados siempre a la vista, con lo que hay en cada uno. */
.apartados-panel {
    /* Va delante de la lista en el documento (así en móvil queda arriba sin
       depender de saltos de línea) y aquí se manda a la derecha. */
    order: 1;
    flex: 0 0 232px; min-width: 232px;
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e6ecf3; border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -16px rgba(30,58,95,.3);
    margin-left: 10px; overflow: hidden;
}
.ap-cab {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 13px; flex-shrink: 0;
    background: #1e3a5f; color: #fff;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
}
.ap-cab i { opacity: .8; }
.ap-lista { padding: 7px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.ap-item {
    --sec-color: #475569;
    display: flex; align-items: center; gap: 9px; width: 100%; min-height: 42px;
    padding: 7px 9px; border: 1px solid transparent; border-radius: 8px;
    background: transparent; font-family: inherit; text-align: left;
    cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.ap-ico {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--sec-color) 13%, #fff);
    color: var(--sec-color); font-size: 11.5px;
}
.ap-txt {
    flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: #334155;
    line-height: 1.25; overflow: hidden; text-overflow: ellipsis;
}
.ap-txt b { color: var(--sec-color); font-weight: 800; margin-right: 2px; }
.ap-item:hover { background: #f4f7fb; }
.ap-item.activa {
    background: color-mix(in srgb, var(--sec-color) 10%, #fff);
    border-color: color-mix(in srgb, var(--sec-color) 35%, #fff);
}
.ap-item.activa .ap-txt { color: var(--sec-color); font-weight: 800; }
.ap-item.activa .ap-ico { background: var(--sec-color); color: #fff; }
.sec-n {
    flex-shrink: 0; min-width: 20px; text-align: center;
    background: #eef2f7; color: #64748b; border-radius: 7px;
    padding: 1px 6px; font-size: 10.5px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
/* Sin pedidos no se pinta pastilla vacía */
.sec-n:empty { display: none; }
.ap-item.activa .sec-n { background: var(--sec-color); color: #fff; }

/* En pantalla estrecha (tablet de pie) la columna de apartados se pone
   arriba, en tira horizontal.

   SE APILA EN COLUMNA, no con saltos de línea: la lista de pedidos viene de
   la casa con flex-basis 0, así que en una fila con wrap nunca llegaba a
   bajar de renglón — se quedaba pegada al panel y se salía de la pantalla.
   En columna cada uno ocupa su ancho entero sin depender de nada. */
@media (max-width: 980px) {
    .app-container { flex-direction: column; flex-wrap: nowrap; }
    .panel-pedidos { flex: 1 1 auto !important; min-width: 0 !important; width: 100%; }
    .apartados-panel {
        order: 0; flex: 0 0 auto; width: 100%; min-width: 0; margin: 0 0 8px;
        max-height: none;
    }
    .ap-cab { display: none; }
    .ap-lista { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
    .ap-lista::-webkit-scrollbar { display: none; }
    .ap-item { width: auto; flex-shrink: 0; }
    .ap-txt { white-space: nowrap; }
}

/* ── LA BANDA DE APARTADO EN CADA TARJETA ───────────────────────────────── */
.pedido-card.con-seccion { border-left: 4px solid var(--sec-color) !important; }
.seccion-banda {
    display: flex; align-items: center; gap: 6px;
    margin: -2px 0 6px; font-size: 10px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--sec-color);
}
.seccion-banda i { font-size: 9.5px; }

/* ── LA TARJETA DE COTIZACIÓN (apartado 0) ──────────────────────────────── */
.cotizacion-card {
    border-left: 4px solid var(--sec-color) !important;
    background: linear-gradient(180deg, #faf5ff 0%, #fff 30%) !important;
}
.cot-cuerpo { display: flex; flex-direction: column; gap: 6px; }
.cot-titulo {
    display: flex; align-items: center; gap: 7px;
    font-size: 13.5px; color: #1e293b;
}
.cot-titulo i { color: #7c3aed; }
.cot-ref {
    font-size: 10.5px; background: #ede9fe; color: #6d28d9;
    border-radius: 4px; padding: 1px 6px; font-weight: 700;
}
.cot-fecha { margin-left: auto; font-size: 11.5px; color: #64748b; }
.cot-linea {
    display: flex; justify-content: space-between; gap: 8px;
    font-size: 12.5px; padding: 4px 8px;
    background: #f8fafc; border: 1px solid #eef2f7; border-radius: 7px;
}
.cot-linea span { color: #475569; white-space: nowrap; }
.cot-provs-titulo { font-size: 10.5px; font-weight: 800; color: #7c3aed;
    text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.cot-provs { display: flex; flex-wrap: wrap; gap: 4px; }
.cot-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: #ede9fe; color: #5b21b6; border-radius: 6px;
    padding: 3px 8px; font-size: 11.5px; font-weight: 600;
}
.cot-chip.mini { padding: 2px 7px; font-size: 10.5px; }
.cot-chip button {
    border: none; background: transparent; color: #7c3aed;
    cursor: pointer; padding: 0 1px; font-size: 11px;
}
.cot-chip button:hover { color: #4c1d95; }
.cot-acciones {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin-top: 4px; padding-top: 8px; border-top: 1px dashed #e2e8f0;
}
.cot-pista { font-size: 11px; color: #64748b; line-height: 1.45; margin: 6px 0 0; }
.cot-sugg {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
    max-height: 200px; overflow-y: auto; margin-top: 3px;
}
.cot-sugg-item { padding: 7px 10px; cursor: pointer; font-size: 12.5px; }
.cot-sugg-item:hover { background: #f5f3ff; }
.cot-sugg-item small { color: #94a3b8; margin-left: 6px; }
.cot-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

/* ── CONTROLES GENÉRICOS DE LA CAPA ─────────────────────────────────────── */
.erp-label {
    display: block; font-size: 11px; font-weight: 800; color: #475569;
    text-transform: uppercase; letter-spacing: .03em; margin: 8px 0 4px;
}
.erp-label .req { color: #dc2626; }
.erp-select, .erp-input {
    width: 100%; padding: 8px 10px;
    border: 1.5px solid #e2e8f0; border-radius: 8px;
    font-size: 13px; font-family: inherit; background: #fff; color: #1f2937;
}
.erp-select:focus, .erp-input:focus { outline: none; border-color: #2563eb; }
.erp-select.chico { width: auto; flex: 1; min-width: 130px; padding: 6px 8px; font-size: 12px; }
textarea.erp-input { resize: vertical; line-height: 1.5; }

.btn-erp-ent {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 10px; border-radius: 7px;
    border: 1px solid #e2e8f0; background: #fff; color: #475569;
    font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer;
    transition: all .13s ease;
}
.btn-erp-ent:hover { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
.btn-erp-ent.primario { background: #2563eb; border-color: #2563eb; color: #fff; }
.btn-erp-ent.primario:hover { background: #1d4ed8; }
.btn-erp-ent.peligro:hover { border-color: #fca5a5; background: #fef2f2; color: #dc2626; }
.btn-erp-ent:disabled { opacity: .5; cursor: default; }

.seccion-selector-caja { margin-bottom: 4px; }
.cotizacion-box {
    margin-top: 8px; padding: 10px;
    background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 10px;
}

/* ── LOS MODALES DE LA CAPA ─────────────────────────────────────────────── */
.modal-overlay-ent {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .18s ease;
}
.modal-overlay-ent.visible { opacity: 1; }
.ficha-ent {
    width: 100%; max-width: 560px; max-height: 92vh;
    display: flex; flex-direction: column;
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    transform: translateY(12px) scale(.99); transition: transform .2s ease;
}
.modal-overlay-ent.visible .ficha-ent { transform: none; }
.ficha-ent.ancha { max-width: 760px; }
.ficha-ent-cab {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 18px; color: #fff;
    background: linear-gradient(135deg, #1e3a5f, #2563eb);
}
.ficha-ent-cab.morada { background: linear-gradient(135deg, #5b21b6, #7c3aed); }
.ficha-ent-cab h3 { font-size: 15px; font-weight: 700; margin: 0; }
.ficha-ent-cab h3 i { margin-right: 7px; }
.ficha-ent-x {
    background: rgba(255, 255, 255, .18); border: none; color: #fff;
    width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
}
.ficha-ent-x:hover { background: rgba(255, 255, 255, .32); }
.ficha-ent-cuerpo { padding: 16px 18px; overflow-y: auto; }
.ficha-ent-pie {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 18px; border-top: 1px solid #e2e8f0; background: #f8fafc;
}

/* ── EL CORREO EN DOS SABORES ───────────────────────────────────────────── */
.correo-para { font-size: 13px; color: #334155; margin-bottom: 10px; }
.correo-para small { color: #94a3b8; margin-left: 6px; }
.correo-opciones { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.correo-opcion {
    text-align: left; padding: 12px 14px;
    border: 1.5px solid #e2e8f0; border-radius: 12px; background: #f8fafc;
    font-family: inherit; cursor: pointer;
    transition: border-color .13s ease, background .13s ease;
}
.correo-opcion:hover { border-color: #2563eb; background: #eff6ff; }
.correo-opcion.outlook { cursor: default; }
.correo-opcion.outlook:hover { border-color: #e2e8f0; background: #f8fafc; }
.correo-opcion > i { color: #2563eb; font-size: 15px; margin-right: 7px; }
.correo-opcion b { font-size: 13.5px; color: #1e293b; }
.correo-opcion span { display: block; font-size: 11.5px; color: #64748b; margin-top: 2px; }
.correo-plantillas { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.correo-plantilla {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 8px; text-align: left;
    border: 1px solid #dbeafe; background: #fff;
    font-size: 12.5px; font-weight: 600; color: #1e40af;
    font-family: inherit; cursor: pointer;
    transition: all .12s ease;
}
.correo-plantilla:hover { background: #dbeafe; border-color: #93c5fd; }

/* ── EL GESTOR DE PLANTILLAS ────────────────────────────────────────────── */
.plantillas-dos-columnas { display: flex; gap: 16px; }
.plantillas-lista { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 5px; }
.plantilla-fila { display: flex; gap: 4px; }
.plantilla-nombre {
    flex: 1; text-align: left; padding: 7px 9px;
    border: 1px solid #e2e8f0; border-radius: 7px; background: #fff;
    font-size: 12px; font-weight: 600; color: #334155;
    font-family: inherit; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plantilla-nombre:hover { border-color: #93c5fd; background: #eff6ff; }
.plantillas-editor { flex: 1; min-width: 0; }
.plantillas-huecos {
    margin-top: 8px; font-size: 11px; color: #64748b; line-height: 1.9;
}
.plantillas-huecos code {
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 4px;
    padding: 1px 5px; font-size: 10.5px; color: #0f766e;
}
.plantillas-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
@media (max-width: 720px) {
    .plantillas-dos-columnas { flex-direction: column; }
    .plantillas-lista { width: 100%; }
}

/* ── LA IA ──────────────────────────────────────────────────────────────── */
.tipo-card.tipo-ia i { color: #7c3aed !important; }
.ia-pista { font-size: 12.5px; color: #475569; line-height: 1.55; margin-bottom: 10px; }
.ia-error {
    display: flex; align-items: center; gap: 8px; margin-top: 10px;
    padding: 9px 11px; border-radius: 8px;
    border: 1px solid #fca5a5; background: #fef2f2;
    color: #b91c1c; font-size: 12.5px; font-weight: 600;
}
.ia-lineas-box {
    margin: 10px 0; padding: 10px 12px;
    background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 10px;
}
.ia-lineas-titulo {
    font-size: 11px; font-weight: 800; color: #6d28d9;
    text-transform: uppercase; letter-spacing: .03em; margin-bottom: 7px;
}
.ia-linea {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 5px 0; font-size: 12.5px; color: #334155;
    border-top: 1px dashed #e9d5ff;
}
.ia-linea:first-of-type { border-top: none; }
.ia-candidatos { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.ia-candidatos .btn-erp-ent { padding: 4px 9px; font-size: 12px; }

/* ── PULIDO GENERAL DE LA PÁGINA ────────────────────────────────────────── */
.panel-pedidos {
    border: 1px solid #e6ecf3 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -16px rgba(30,58,95,.3) !important;
}
.pedido-card {
    border-radius: 9px !important;
    border: 1px solid #e6ecf3 !important;
    transition: border-color .13s ease, box-shadow .13s ease !important;
}
.pedido-card:hover {
    border-color: #93c5fd !important;
    box-shadow: 0 6px 16px -8px rgba(30, 58, 95, .35) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA BARRA DE HERRAMIENTAS
   ---------------------------------------------------------------------------
   Antes eran tres renglones apilados de píldoras de colores. Ahora es una
   tira sola: filtros agrupados a la izquierda (como los mandos de un ERP) y
   los botones de trabajo a la derecha. Menos alto, más lista a la vista.
   ═══════════════════════════════════════════════════════════════════════════ */
.panel-header {
    padding: 8px 10px 7px !important;
    gap: 7px !important;
    border-bottom: 1px solid #e6ecf3 !important;
}
.erp-barra {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.erp-barra .erp-sep { flex: 1 1 0; min-width: 0; }

/* Los filtros: mandos agrupados, sin píldoras sueltas */
.erp-barra .filter-tabs,
.erp-barra .filter-tabs-fecha {
    display: inline-flex; gap: 0; flex-wrap: nowrap;
    padding: 2px; border-radius: 8px;
    background: #eef2f7; border: 1px solid #e2e8f0;
}
.erp-barra .filter-tab,
.erp-barra .filter-tab-fecha {
    border: none !important; border-radius: 6px !important;
    background: transparent !important;
    padding: 4px 10px !important; font-size: 11.5px !important;
    font-weight: 700 !important; color: #64748b !important;
    white-space: nowrap; cursor: pointer;
}
.erp-barra .filter-tab i,
.erp-barra .filter-tab-fecha i { font-size: 10px; opacity: .85; }
.erp-barra .filter-tab:hover,
.erp-barra .filter-tab-fecha:hover { color: #1e3a5f !important; background: #e2e8f0 !important; }
.erp-barra .filter-tab.active,
.erp-barra .filter-tab-fecha.active {
    background: #fff !important; color: #1e3a5f !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .16);
}
.erp-barra .filter-tab-fecha.active[data-fecha="vencidos"] { color: #b91c1c !important; }

/* Los botones de trabajo: planos, cuadrados, sin fuegos artificiales */
.erp-barra .panel-header-actions { gap: 6px !important; }
.erp-barra .btn-buscar-entradas,
.erp-barra .btn-ordenar,
.erp-barra .btn-transportistas,
.erp-barra .btn-nuevo-pedido {
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    box-shadow: none !important;
    background-image: none !important;
    transition: filter .13s ease !important;
}
.erp-barra .btn-buscar-entradas { background: #1e3a5f !important; }
.erp-barra .btn-transportistas { background: #c2680a !important; }
.erp-barra .btn-nuevo-pedido { background: #0f9d63 !important; }
.erp-barra .btn-ordenar { border: 1px solid #dbe3ec !important; background: #fff !important; }
.erp-barra .btn-ordenar.active { background: #7c3aed !important; border-color: #7c3aed !important; color: #fff !important; }
.erp-barra .btn-buscar-entradas:hover,
.erp-barra .btn-transportistas:hover,
.erp-barra .btn-nuevo-pedido:hover { transform: none !important; filter: brightness(1.09); }
.erp-barra .btn-compacto { width: 30px !important; height: 30px !important; border-radius: 8px !important; }

/* Sin las pestañas arriba, la cabecera es una sola tira */
.app-container { padding: 10px !important; gap: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   LA FICHA DE PEDIDO COMPACTA
   ---------------------------------------------------------------------------
   Tres renglones: quién y cuándo · qué · cuánto y qué hago con él. Cabe el
   triple de pedidos en pantalla sin perder un solo dato ni un solo botón.
   ═══════════════════════════════════════════════════════════════════════════ */
.pedidos-list { padding: 9px 11px !important; gap: 7px !important; }

.erp-ficha {
    padding: 7px 11px 8px !important;
    display: flex; flex-direction: column; gap: 5px;
    font-variant-numeric: tabular-nums;
}
.erp-ficha.con-seccion::before { display: none; }   /* la banda la da el borde */

/* Renglón 1 — apartado, proveedor, referencia, estado y entrega */
.erp-cab {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 0 !important; min-width: 0;
}
.erp-sec {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    padding: 2px 7px; border-radius: 5px;
    background: color-mix(in srgb, var(--sec-color) 12%, #fff);
    color: var(--sec-color);
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
}
.erp-sec i { font-size: 9.5px; }
.erp-pro {
    font-size: 13px; font-weight: 800; color: #1e3a5f;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.erp-ref {
    flex-shrink: 0; padding: 1px 6px; border-radius: 4px;
    background: #f1f5f9; color: #64748b; font-size: 10.5px; font-weight: 700;
}
.erp-cab-der {
    margin-left: auto; display: flex; align-items: center; gap: 5px;
    flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end;
}
.erp-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 5px;
    font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.erp-badge i { font-size: 9.5px; }
.erp-badge.pendiente { background: #fef3c7; color: #92400e; }
.erp-badge.parcial   { background: #dbeafe; color: #1d4ed8; }
.erp-badge.hecho     { background: #d1fae5; color: #065f46; }
.erp-badge.delsol    { background: #ede9fe; color: #6d28d9; }
.erp-badge.local     { background: #f1f5f9; color: #64748b; }

.erp-fecha {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 5px;
    background: #f1f5f9; color: #334155;
    border: 1px solid transparent;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.erp-fecha i { font-size: 9.5px; }
/* La entrega sin confirmar se dibuja con el trazo cortado: se lee de un
   vistazo que ese día todavía no es seguro, sin robarle sitio al color de
   urgencia, que sigue diciendo lo suyo. */
.erp-fecha.variable { border-color: currentColor; border-style: dashed; }
.erp-fecha.vencido { background: #fee2e2; color: #b91c1c; }
.erp-fecha.hoy     { background: #f59e0b; color: #fff; }
.erp-fecha.manana  { background: #dbeafe; color: #1d4ed8; }
.erp-fecha.pronto  { background: #ecfdf5; color: #047857; }
.erp-fecha.sin     { background: #f8fafc; color: #94a3b8; }

/* Renglón 2 — los productos */
.erp-lineas { margin: 0 !important; display: flex; flex-direction: column; gap: 2px; }
.erp-linea {
    display: flex; align-items: baseline; gap: 9px;
    padding: 3px 8px; border-radius: 6px;
    background: #f8fafc; border: 1px solid #eef2f7;
    font-size: 12px; min-width: 0;
}
.erp-prod {
    flex: 1 1 auto; min-width: 0; font-weight: 700; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.erp-cant { flex-shrink: 0; font-weight: 700; color: #334155; }
.erp-cant i { font-style: normal; font-weight: 500; color: #94a3b8; font-size: 11px; }
.erp-precio {
    flex-shrink: 0; min-width: 74px; text-align: right;
    font-weight: 700; color: #1d4ed8; font-size: 11.5px;
}
.erp-mas { font-size: 10.5px; color: #94a3b8; font-weight: 700; padding: 1px 8px; }
.erp-progreso { height: 3px; border-radius: 2px; background: #e2e8f0; overflow: hidden; margin-top: 2px; }
.erp-progreso > div { height: 100%; background: #10b981; }

/* Renglón 3 — datos sueltos a la izquierda, acciones a la derecha */
.erp-pie {
    display: flex !important; align-items: center; gap: 10px;
    margin: 1px 0 0 !important; flex-wrap: wrap;
}
.erp-meta {
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 11px; color: #64748b; font-weight: 600;
}
.erp-meta i { font-size: 9.5px; opacity: .8; }
.erp-meta .erp-total { color: #0f172a; font-weight: 800; font-size: 11.5px; }

.erp-acciones {
    margin: 0 !important;
    display: flex !important; flex-wrap: wrap; gap: 5px; justify-content: flex-start;
}
.erp-pie .erp-meta { margin-left: auto; }
.erp-acciones .btn-card {
    padding: 5px 9px !important; font-size: 11px !important;
    border-radius: 7px !important; box-shadow: none !important;
    min-height: 28px; gap: 5px !important;
}
.erp-acciones .btn-card i { font-size: 10.5px !important; }
.erp-acciones .btn-card:hover { transform: none !important; filter: brightness(.96); }
.erp-acciones .erp-btn-ppr {
    background: #dcfce7; color: #065f46; border: 1px solid #86efac;
}
.erp-acciones .erp-btn-actualizar {
    background: #e0f2fe; color: #075985; border: 1px solid #7dd3fc;
}
.erp-acciones .btn-card-eliminar { padding: 5px 8px !important; }

/* El modo compacto de la casa sigue mandando sobre la ficha nueva */
.pedidos-list.compacto .erp-ficha { padding: 5px 10px !important; gap: 0; }
.pedidos-list.compacto .erp-lineas,
.pedidos-list.compacto .erp-pie { display: none !important; }

/* En pantalla estrecha las acciones bajan solas a su renglón */
@media (max-width: 820px) {
    .erp-pie { align-items: flex-start; }
    .erp-pie .erp-meta { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL FORMULARIO DE PEDIDO, TAMBIÉN DE ERP
   ---------------------------------------------------------------------------
   Los campos venían con aire de formulario web: etiqueta grande, mucho hueco
   y un desplazamiento largo para llegar a los artículos. Se aprieta sin
   perder legibilidad — sigue siendo cómodo de rellenar con el dedo.
   ═══════════════════════════════════════════════════════════════════════════ */
#modalFormPedido .modal-form-body,
#modalFormEntrada .modal-form-body { padding: 12px 16px !important; }
#modalFormPedido .form-section,
#modalFormPedido .form-group,
#modalFormEntrada .form-section,
#modalFormEntrada .form-group { gap: 4px !important; }
#modalFormPedido .form-label,
#modalFormEntrada .form-label {
    font-size: 10.5px !important; letter-spacing: .05em !important; color: #64748b !important;
}
#modalFormPedido .form-label i,
#modalFormEntrada .form-label i { font-size: 10px; }
#modalFormPedido input[type=text],
#modalFormPedido input[type=date],
#modalFormPedido input[type=number],
#modalFormPedido select,
#modalFormPedido textarea,
#modalFormEntrada input[type=text],
#modalFormEntrada input[type=date],
#modalFormEntrada input[type=number],
#modalFormEntrada select,
#modalFormEntrada textarea {
    padding: 7px 10px !important; font-size: 13px !important;
    border-width: 1px !important; border-radius: 7px !important;
}
#modalFormPedido .modal-form-header,
#modalFormEntrada .modal-form-header { padding: 12px 16px !important; }
#modalFormPedido .modal-form-header h2,
#modalFormEntrada .modal-form-header h2 { font-size: 16px !important; }
#modalFormPedido .modal-form-footer,
#modalFormEntrada .modal-form-footer { padding: 10px 16px !important; }

/* ── EL PEDIDO DE RUTAS ENLAZADO (apartados 1 y 6) ──────────────────────── */
.ruta-box, .importacion-box {
    margin-top: 8px; padding: 10px 11px; border-radius: 10px;
    background: #f5f9ff; border: 1px solid #dbeafe;
}
.importacion-box { background: #f5f3ff; border-color: #ddd6fe; }
.cot-sugg-item.vacio { color: #94a3b8; font-style: italic; cursor: default; }
.ruta-elegida {
    display: flex; align-items: center; gap: 9px; margin-top: 7px;
    padding: 8px 10px; border-radius: 9px;
    background: #fff; border: 1px solid #bfdbfe;
}
.ruta-elegida > i { color: #2563eb; font-size: 14px; flex-shrink: 0; }
.ruta-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ruta-datos b { font-size: 12.5px; color: #1e3a5f; }
.ruta-datos small { font-size: 11px; color: #64748b; }
.ruta-datos .ruta-art { color: #334155; font-style: italic; }
.ruta-elegida > button {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
    border: 1px solid #fecaca; background: #fef2f2; color: #dc2626; font-size: 11px;
}

/* ── EL REPARTO DE LA IMPORTACIÓN (apartado 4) ──────────────────────────── */
.imp-fila {
    display: flex; align-items: flex-end; gap: 10px; margin-top: 7px; flex-wrap: wrap;
}
.imp-campo { display: flex; flex-direction: column; gap: 3px; min-width: 130px; }
.imp-campo > span {
    font-size: 10px; font-weight: 700; color: #6d28d9;
    text-transform: uppercase; letter-spacing: .04em;
}
.imp-campo > span b { font-variant-numeric: tabular-nums; }
.imp-flecha { color: #a78bfa; margin-bottom: 9px; }
.imp-resultado {
    padding: 7px 10px; border-radius: 7px; background: #fff;
    border: 1px solid #ddd6fe; color: #94a3b8;
    font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.imp-resultado.hay { color: #6d28d9; border-color: #a78bfa; background: #f5f3ff; }
#impAplicar:disabled { opacity: .5; cursor: not-allowed; }

/* Las dos marcas nuevas en la ficha del pedido */
.erp-meta .erp-ruta { color: #1d4ed8; font-weight: 700; }
.erp-meta .erp-imp { color: #6d28d9; font-weight: 700; }

/* ── EL AVISO DEL PRECIO DE COSTE ───────────────────────────────────────── */
.coste-intro {
    font-size: 12.5px; color: #334155; line-height: 1.5; margin-bottom: 11px;
}
.coste-tabla {
    width: 100%; border-collapse: collapse; font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.coste-tabla th {
    text-align: right; padding: 6px 8px;
    background: #1e3a5f; color: #fff;
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.coste-tabla th:first-child, .coste-tabla td:first-child { text-align: left; }
.coste-tabla td { padding: 7px 8px; text-align: right; border-bottom: 1px solid #eef2f7; }
.coste-tabla .coste-art { color: #1e293b; }
.coste-tabla .coste-art b { color: #64748b; font-weight: 700; margin-right: 4px; }
.coste-tabla .coste-mas { color: #92400e; font-weight: 700; }
.coste-tabla .coste-nuevo { color: #6d28d9; font-weight: 800; }
.coste-nota {
    margin-top: 11px; padding: 8px 10px; border-radius: 8px;
    background: #f8fafc; border: 1px solid #eef2f7;
    font-size: 11px; color: #64748b; line-height: 1.45;
}
.coste-pie { flex-wrap: wrap; gap: 6px; }

/* ── LOS TÍTULOS DE CADA TRAMO ──────────────────────────────────────────
   El formulario era una fila de campos sin descanso. Ahora se anuncia por
   tramos: datos, artículos, transporte. */
.bloque-tit {
    display: flex; align-items: center; gap: 7px;
    margin: 14px 0 2px; padding-bottom: 6px;
    border-bottom: 1px solid #e6ecf3;
    font-size: 11px; font-weight: 800; color: #1e3a5f;
    text-transform: uppercase; letter-spacing: .07em;
}
.bloque-tit:first-child { margin-top: 0; }
.bloque-tit i { color: #2563eb; font-size: 11px; }

/* ── LAS LÍNEAS DE ARTÍCULO ─────────────────────────────────────────────
   Venían literalmente sin estilos: etiquetas sueltas y casillas a todo lo
   ancho, una debajo de otra. Ahora cada artículo es una ficha con sus
   cuatro datos en renglón: cantidad, kilos, precio y logística. */
.articulo-item {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 9px 10px; margin-bottom: 6px;
    border: 1px solid #e6ecf3; border-radius: 9px; background: #fff;
}
.articulo-item:last-child { margin-bottom: 0; }
.articulo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.articulo-info > strong {
    font-size: 12.5px; font-weight: 800; color: #1e3a5f; line-height: 1.3;
}
.articulo-details {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important; align-items: start;
}
.articulo-details .cantidad-grupo,
.articulo-details .kilos-grupo,
.articulo-details .precio-grupo,
.articulo-details .logistica-grupo {
    display: flex !important; flex-direction: column !important;
    align-items: stretch !important; gap: 3px !important;
    margin-top: 0 !important; min-width: 0;
}
.articulo-details label {
    font-size: 9.5px !important; font-weight: 800 !important;
    text-transform: uppercase; letter-spacing: .04em;
    color: #94a3b8 !important; white-space: nowrap !important;
    display: flex; align-items: center; gap: 4px;
}
.articulo-details input {
    width: 100% !important; padding: 6px 8px !important;
    font-size: 12.5px !important; border-radius: 6px !important;
    border: 1px solid #dbe3ec !important;
    font-variant-numeric: tabular-nums;
}
.articulo-details .cantidad-grupo > span { font-size: 10px !important; color: #64748b; }
.articulo-details .logistica-grupo label { color: #92400e !important; }
.articulo-details .logistica-grupo input {
    border-color: #fcd34d !important; background: #fffbeb !important;
}
.articulo-details .logistica-grupo > span { font-size: 9.5px !important; line-height: 1.3; }
.articulo-actions { flex-shrink: 0; }
.articulo-actions button {
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    border: 1px solid #fecaca; background: #fef2f2; color: #dc2626;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; transition: all .12s ease;
}
.articulo-actions button:hover { background: #fee2e2; border-color: #fca5a5; }
@media (max-width: 640px) {
    .articulo-details { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Los totales y los extras, con cuerpo de ERP */
#modalFormPedido .totales-resumen,
#modalFormPedido .ge-totales,
#modalFormPedido [class*="total"] { font-variant-numeric: tabular-nums; }
.ge-btn-recogida { border-radius: 9px !important; font-size: 12.5px !important; }

/* La cabecera de cada bloque del formulario, como un separador de ERP */
.seccion-selector-caja { margin-bottom: 2px; }
.erp-label { font-size: 10.5px !important; letter-spacing: .05em; }
.erp-label .req { color: #dc2626; }

/* ── EL APARTADO, ELEGIDO A DEDO ─────────────────────────────────────────
   Siete fichas pulsables en lugar de un desplegable: se ve de una vez lo
   que hay y no hay que abrir nada. El <select> real queda escondido. */
.oculto-erp { display: none !important; }
.sec-fichas {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
}
.sec-ficha {
    --sec-color: #475569;
    display: flex; align-items: center; gap: 6px;
    padding: 7px 8px; border-radius: 8px;
    border: 1px solid #e2e8f0; background: #fff;
    font-family: inherit; font-size: 11px; font-weight: 700; color: #475569;
    cursor: pointer; text-align: left; transition: all .12s ease; min-width: 0;
}
.sec-ficha i { color: var(--sec-color); font-size: 12px; flex-shrink: 0; }
.sec-ficha span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-ficha span b { color: var(--sec-color); }
.sec-ficha:hover { border-color: var(--sec-color); background: #f8fafc; }
/* Sin resalte pegado tras pulsar (parecía otra ficha elegida), pero el
   recuadro sigue saliendo si se navega con el teclado. */
.sec-ficha:focus { outline: none; }
.sec-ficha:focus-visible { outline: 2px solid var(--sec-color); outline-offset: 1px; }
.sec-ficha.elegida {
    background: var(--sec-color); border-color: var(--sec-color); color: #fff;
}
.sec-ficha.elegida i, .sec-ficha.elegida span b { color: #fff; }
@media (max-width: 620px) { .sec-fichas { grid-template-columns: repeat(2, 1fr); } }

/* ── LA VENTANA DE «¿QUÉ QUIERES REGISTRAR?» ─────────────────────────────
   Tres renglones anchos en vez de tres columnas altas: se lee de un golpe. */
.modal-card.tipo-erp {
    max-width: 520px !important; padding: 0 !important; gap: 0 !important;
    overflow: hidden; border-radius: 14px !important;
}
.tipo-cab {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px; background: linear-gradient(135deg, #1e3a5f, #2563eb); color: #fff;
}
.tipo-cab h3 { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.tipo-ops { padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.tipo-op {
    --op-color: #2563eb;
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px 13px; border-radius: 11px;
    border: 1px solid #e6ecf3; background: #fff;
    font-family: inherit; text-align: left; cursor: pointer;
    transition: border-color .13s ease, background .13s ease, transform .13s ease;
}
.tipo-op:hover {
    border-color: var(--op-color); background: color-mix(in srgb, var(--op-color) 5%, #fff);
    transform: translateX(2px);
}
.tipo-op.pedido  { --op-color: #2563eb; }
.tipo-op.entrada { --op-color: #0f9d63; }
.tipo-op.ia      { --op-color: #7c3aed; }
.tipo-op-ico {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--op-color) 12%, #fff);
    color: var(--op-color); font-size: 17px;
}
.tipo-op-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tipo-op-txt b { font-size: 14px; font-weight: 800; color: #1e293b; }
.tipo-op-txt small { font-size: 11.5px; color: #64748b; line-height: 1.35; }
.tipo-op-flecha { color: #cbd5e1; font-size: 12px; flex-shrink: 0; }
.tipo-op:hover .tipo-op-flecha { color: var(--op-color); }

/* ── EL BORRADOR DEL CORREO ──────────────────────────────────────────────
   Se ve el correo terminado antes de abrir nada, y hay tres salidas por si
   este ordenador no tiene programa de correo asociado. */
.borrador { display: flex; flex-direction: column; gap: 3px; }
.borrador .erp-label { margin-top: 8px; }
.borrador .erp-label:first-child { margin-top: 0; }
.borrador textarea.erp-input { line-height: 1.5; font-size: 12.5px; resize: vertical; }
.brd-aviso {
    display: flex; align-items: flex-start; gap: 6px; margin-top: 5px;
    padding: 7px 9px; border-radius: 8px;
    background: #fffbeb; border: 1px solid #fde68a;
    font-size: 11.5px; color: #92400e;
}
.brd-salidas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.brd-pista {
    margin-top: 9px; padding: 8px 10px; border-radius: 8px;
    background: #f8fafc; border: 1px solid #eef2f7;
    font-size: 11px; color: #64748b; line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
    .modal-overlay-ent, .ficha-ent { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA FICHA DEL PEDIDO (ventana de detalle)
   ═══════════════════════════════════════════════════════════════════════════ */
#detalleTitulo .det-sec {
    display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 5px;
    background: color-mix(in srgb, var(--sec-color) 15%, #fff); color: var(--sec-color);
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    vertical-align: middle;
}
.det-cabecera {
    /* Sin esto el cuerpo del modal (columna flexible) los encoge y les corta
       el contenido por abajo — se veía la etiqueta y no el dato. */
    flex-shrink: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 1px; background: #e6ecf3; border: 1px solid #e6ecf3; border-radius: 10px;
    overflow: hidden; margin-bottom: 14px;
}
.det-dato { background: #fff; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
/* Si el último dato se queda solo en su renglón, que lo ocupe entero: si no
   queda un hueco gris al lado que parece que falta algo. */
.det-dato:last-child:nth-child(odd) { grid-column: 1 / -1; }
.det-dato > span {
    font-size: 9.5px; font-weight: 800; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .05em;
}
.det-dato > b { font-size: 12.5px; color: #1e293b; font-variant-numeric: tabular-nums; }
.det-dato .det-no { color: #94a3b8; font-weight: 500; font-style: normal; }
.det-estado {
    display: inline-block; padding: 1px 8px; border-radius: 5px; font-size: 11px;
    text-transform: capitalize; width: fit-content;
}
.det-estado.pendiente { background: #fef3c7; color: #92400e; }
.det-estado.parcial { background: #dbeafe; color: #1d4ed8; }
.det-estado.completado { background: #d1fae5; color: #065f46; }

.det-titulo {
    display: flex; align-items: center; gap: 7px; margin: 0 0 7px;
    font-size: 11px; font-weight: 800; color: #1e3a5f;
    text-transform: uppercase; letter-spacing: .06em;
}
.det-titulo i { color: #2563eb; }
.det-titulo > span {
    margin-left: auto; font-size: 10.5px; font-weight: 700; color: #94a3b8;
    text-transform: none; letter-spacing: 0;
}
.det-tabla-caja { border: 1px solid #e6ecf3; border-radius: 10px; overflow-x: auto; flex-shrink: 0; }
.det-extras, .det-totales { flex-shrink: 0; }
.det-tabla {
    width: 100%; border-collapse: collapse; font-size: 12px;
    font-variant-numeric: tabular-nums; min-width: 440px;
}
.det-tabla th {
    background: #1e3a5f; color: #fff; text-align: right; padding: 7px 10px;
    font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    white-space: nowrap;
}
.det-tabla th:first-child, .det-tabla td:first-child { text-align: left; }
.det-tabla td { padding: 8px 10px; text-align: right; border-top: 1px solid #eef2f7; vertical-align: top; }
.det-tabla tbody tr:nth-child(even) td { background: #fbfdff; }
.det-prod b { display: block; font-size: 12.5px; color: #0f172a; line-height: 1.3; }
.det-prod small { font-size: 10px; color: #94a3b8; font-weight: 700; }
.det-rec {
    display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 4px;
    background: #d1fae5; color: #065f46; font-size: 10px; font-weight: 700;
}
.det-cant small, .det-kg small { display: block; font-size: 10px; color: #94a3b8; font-weight: 600; }
.det-cant, .det-kg { white-space: nowrap; color: #334155; font-weight: 700; }
.det-pre { color: #1d4ed8; font-weight: 700; white-space: nowrap; }
.det-imp { color: #0f172a; font-weight: 800; white-space: nowrap; }
.det-vacio { text-align: center !important; color: #94a3b8; font-style: italic; padding: 16px !important; }

.det-extras { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; }
.det-extra {
    display: flex; gap: 10px; padding: 9px 11px; border-radius: 9px;
    background: #f8fafc; border: 1px solid #eef2f7;
}
.det-extra > i { font-size: 14px; margin-top: 1px; color: #64748b; }
.det-extra > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.det-extra b { font-size: 12px; color: #1e293b; }
.det-extra span { font-size: 11.5px; color: #64748b; line-height: 1.45; }
.det-extra.importacion { background: #f5f3ff; border-color: #ddd6fe; }
.det-extra.importacion > i, .det-extra.importacion b { color: #6d28d9; }
.det-extra.ruta { background: #f5f9ff; border-color: #dbeafe; }
.det-extra.ruta > i, .det-extra.ruta b { color: #1d4ed8; }
.det-extra.recogida { background: #fffbeb; border-color: #fde68a; }
.det-extra.recogida > i, .det-extra.recogida b { color: #92400e; }

.det-totales {
    margin-top: 14px; margin-left: auto; width: 100%; max-width: 280px;
    border: 1px solid #e6ecf3; border-radius: 10px; overflow: hidden;
    font-variant-numeric: tabular-nums;
}
.det-totales > div {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 7px 12px; font-size: 12px; color: #64748b;
}
.det-totales > div + div { border-top: 1px solid #eef2f7; }
.det-totales b { color: #1e293b; font-weight: 700; }
.det-totales .det-total {
    background: #1e3a5f; color: #fff; font-size: 13px; padding: 9px 12px;
}
.det-totales .det-total span { color: rgba(255,255,255,.75); font-weight: 700; }
.det-totales .det-total b { color: #fff; font-size: 15px; font-weight: 800; }

/* ── ESCRIBIR A UNO O A TODOS (cotizaciones) ─────────────────────────────
   Dos opciones bien grandes al entrar: a uno solo, o un correo para cada
   proveedor consultado. La segunda es la que evita que se vean entre ellos. */
.cot-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.cot-modo-op {
    display: flex; flex-direction: column; gap: 3px; text-align: left;
    padding: 11px 12px; border-radius: 10px; cursor: pointer;
    border: 1.5px solid #e2e8f0; background: #fff; font-family: inherit;
    transition: border-color .13s ease, background .13s ease;
}
.cot-modo-op > i { font-size: 15px; color: #94a3b8; }
.cot-modo-op b { font-size: 13px; color: #1e293b; }
.cot-modo-op span { font-size: 11px; color: #64748b; line-height: 1.35; }
.cot-modo-op:hover { border-color: #93c5fd; background: #f8fbff; }
.cot-modo-op.activa { border-color: #2563eb; background: #eff6ff; }
.cot-modo-op.activa > i, .cot-modo-op.activa b { color: #1d4ed8; }

/* La lista de destinatarios, con su dirección editable */
.multi-lista {
    display: flex; flex-direction: column; gap: 5px;
    max-height: 210px; overflow-y: auto; padding: 2px;
}
.multi-fila {
    display: grid; grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.2fr);
    gap: 8px; align-items: center;
    padding: 7px 9px; border-radius: 9px;
    background: #f8fafc; border: 1px solid #eef2f7;
}
.multi-fila.sin-email { background: #fffbeb; border-color: #fde68a; }
.multi-check {
    display: flex; align-items: center; gap: 7px; cursor: pointer; min-width: 0;
    font-size: 12.5px; font-weight: 700; color: #1e293b;
}
.multi-check input { width: 15px; height: 15px; accent-color: #2563eb; flex-shrink: 0; cursor: pointer; }
.multi-check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-email { padding: 6px 9px !important; font-size: 12px !important; }
.multi-fila.sin-email .multi-email { border-color: #fcd34d !important; background: #fff; }

/* El parte de lo que se ha mandado */
.multi-parte {
    margin-top: 12px; border: 1px solid #e6ecf3; border-radius: 10px; overflow: hidden;
}
.multi-parte-tit {
    padding: 8px 11px; background: #1e3a5f; color: #fff;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.multi-parte-fila {
    display: flex; align-items: center; gap: 8px; padding: 7px 11px;
    font-size: 12px; border-top: 1px solid #eef2f7;
}
.multi-parte-fila b { color: #1e293b; }
.multi-parte-fila span { margin-left: auto; color: #64748b; font-size: 11px; text-align: right; }
.multi-parte-fila.bien > i { color: #059669; }
.multi-parte-fila.mal > i { color: #dc2626; }
.multi-parte-fila.mal span { color: #b91c1c; }

@media (max-width: 620px) {
    .cot-modo { grid-template-columns: 1fr; }
    .multi-fila { grid-template-columns: 1fr; gap: 5px; }
    .multi-lista { max-height: none; }
}

/* ── El borrador del correo: cuenta, copia y opciones ────────────────────── */
.brd-copia {
    margin: 4px 0 2px; font-size: 11px; color: #64748b;
    display: flex; align-items: center; gap: 6px;
}
.brd-copia i { color: #94a3b8; }
.brd-copia b { color: #334155; }
.brd-opciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 11px; }
.brd-check {
    display: flex; align-items: center; gap: 7px; cursor: pointer;
    font-size: 12px; color: #334155; font-weight: 600;
}
.brd-check input { width: 15px; height: 15px; accent-color: #2563eb; cursor: pointer; }
.brd-check i { color: #64748b; font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MÓVILES Y TABLETS
   ---------------------------------------------------------------------------
   La pantalla se usa en el almacén con el móvil en la mano y en la oficina
   con el iPad. Lo que manda ahí: que se lea, que se pueda pulsar con el dedo
   y que nada se salga por los lados.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (hasta 1024): la lista se estrecha, los botones respiran ────── */
@media (max-width: 1024px) {
    .erp-ficha { padding: 8px 10px 9px !important; }
    .erp-pro { font-size: 12.5px; }
    .erp-acciones .btn-card { padding: 6px 10px !important; min-height: 32px; }
    .det-cabecera { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
    .sec-fichas { grid-template-columns: repeat(3, 1fr); }
}

/* ── Móvil grande y tablet estrecha (hasta 700) ──────────────────────────
   Por encima de esto (el iPad de pie son 820) la ficha cabe entera en un
   renglón, que es como mejor se lee: no conviene apilarla antes de tiempo. */
@media (max-width: 700px) {
    .erp-barra { gap: 6px; }
    .erp-barra .erp-sep { display: none; }
    .erp-barra .filter-tabs,
    .erp-barra .filter-tabs-fecha { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
    .erp-barra .filter-tabs::-webkit-scrollbar,
    .erp-barra .filter-tabs-fecha::-webkit-scrollbar { display: none; }
    .erp-barra .panel-header-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }

    /* La ficha pasa a dos renglones: datos arriba, acciones abajo */
    .erp-cab { flex-wrap: wrap; }
    .erp-cab-der { margin-left: 0; width: 100%; justify-content: flex-start; }
    .erp-linea { flex-wrap: wrap; gap: 4px 9px; }
    .erp-precio { min-width: 0; text-align: left; }
    .erp-acciones { width: 100%; }
    .erp-acciones .btn-card { flex: 1 1 auto; justify-content: center; }
}

/* ── Móvil (hasta 620): todo a lo ancho y dedo-friendly ─────────────────── */
@media (max-width: 620px) {
    body { background: #eef2f7 !important; }
    .app-container { padding: 6px !important; }
    .panel-pedidos { border-radius: 10px !important; }
    .pedidos-list { padding: 6px !important; gap: 6px !important; }

    .apartados-panel { margin-bottom: 6px; }
    .ap-lista { padding: 5px; gap: 4px; }
    .ap-item { min-height: 38px; padding: 6px 9px; }
    .ap-txt { font-size: 11.5px; }

    /* La ficha del pedido, apilada */
    .erp-ficha { padding: 8px 9px 9px !important; }
    .erp-sec { font-size: 9px; padding: 2px 5px; }
    .erp-pro { font-size: 12.5px; white-space: normal; }
    .erp-linea { padding: 5px 7px; font-size: 11.5px; }
    .erp-prod { white-space: normal; }
    .erp-meta { font-size: 10.5px; gap: 7px; }
    /* Ocho botones con texto ocupaban cuatro renglones y dejaban una sola
       ficha en pantalla. En el móvil van en una tira que se desliza, con el
       texto solo en el principal: el resto se reconoce por el icono y el
       color de siempre (el nº de PPR ya se ve arriba en su etiqueta). */
    .erp-acciones {
        gap: 5px; flex-wrap: nowrap; overflow-x: auto;
        scrollbar-width: none; padding-bottom: 2px;
    }
    .erp-acciones::-webkit-scrollbar { display: none; }
    .erp-acciones .btn-card {
        flex: 0 0 auto; min-height: 38px; padding: 7px 11px !important;
    }
    .erp-acciones .btn-card:not(.btn-card-completar) {
        font-size: 0 !important; gap: 0 !important;
    }
    .erp-acciones .btn-card:not(.btn-card-completar) i { font-size: 14px !important; }
    .erp-acciones .btn-card-completar { font-size: 11.5px !important; }

    /* Las ventanas ocupan la pantalla, con el pie siempre a mano */
    .ficha-ent, #modalFormPedido .modal-card, #modalFormEntrada .modal-card,
    #modalDetalle .modal-card, #modalCompletar .modal-card {
        max-width: 100% !important; width: 100% !important;
        max-height: 100dvh !important; height: 100dvh !important;
        border-radius: 0 !important; margin: 0 !important;
    }
    .modal-overlay, .modal-overlay-ent { padding: 0 !important; }
    .ficha-ent-cuerpo, .modal-form-body { padding: 12px !important; }
    .ficha-ent-pie, .modal-form-footer, #detalleFooter {
        flex-wrap: wrap; gap: 6px; padding: 10px 12px !important;
    }
    .ficha-ent-pie .btn-erp-ent, .modal-form-footer button { flex: 1 1 auto; min-height: 42px; }

    /* Formulario: una columna y campos altos */
    #modalFormPedido .form-row, #modalFormEntrada .form-row { flex-direction: column; gap: 10px !important; }
    .sec-fichas { grid-template-columns: repeat(2, 1fr); }
    .sec-ficha { padding: 9px 8px; min-height: 40px; }
    /* Los selectores llevan el tipo porque la regla de arriba (la que aprieta
       el formulario en el ordenador) también lo lleva: sin él, pierde. */
    #modalFormPedido input[type=text], #modalFormPedido input[type=date],
    #modalFormPedido input[type=number], #modalFormPedido select, #modalFormPedido textarea,
    #modalFormEntrada input[type=text], #modalFormEntrada input[type=date],
    #modalFormEntrada input[type=number], #modalFormEntrada select, #modalFormEntrada textarea,
    .ficha-ent .erp-input, .ficha-ent .erp-select {
        font-size: 16px !important;           /* menos de 16 y iOS hace zoom solo */
        padding: 9px 11px !important;
    }
    .articulo-details { grid-template-columns: repeat(2, 1fr) !important; }
    .imp-fila { flex-direction: column; align-items: stretch; }
    .imp-flecha { display: none; }
    #impAplicar { width: 100%; justify-content: center; }

    /* ── La ficha de detalle en el móvil ──────────────────────────────
       La tabla de productos deja de ser tabla: cada línea pasa a ser una
       ficha con «etiqueta: valor». Una tabla de cinco columnas en 390px
       obliga a arrastrar de lado y corta el nombre del producto. */
    .det-cabecera { grid-template-columns: repeat(2, 1fr); }
    .det-totales { max-width: 100%; }
    .det-tabla-caja { overflow: visible; }
    .det-tabla { min-width: 0; }
    .det-tabla thead { display: none; }
    .det-tabla, .det-tabla tbody, .det-tabla tr, .det-tabla td { display: block; width: 100%; }
    .det-tabla tr { padding: 9px 11px; border-top: 1px solid #eef2f7; }
    .det-tabla tbody tr:first-child { border-top: none; }
    .det-tabla tbody tr:nth-child(even) { background: #fbfdff; }
    .det-tabla tbody tr:nth-child(even) td { background: transparent; }
    .det-tabla td {
        text-align: left !important; border: none; padding: 3px 0;
        display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    }
    .det-tabla td::before {
        content: attr(data-t); flex-shrink: 0;
        font-size: 9.5px; font-weight: 800; color: #94a3b8;
        text-transform: uppercase; letter-spacing: .05em;
    }
    .det-tabla .det-prod { display: block; padding-bottom: 6px; }
    .det-tabla .det-prod::before { display: none; }
    .det-cant small, .det-kg small { display: inline; margin-left: 5px; }

    /* El pie, de dos en dos: cinco botones a lo ancho eran cinco renglones */
    #detalleFooter {
        flex-direction: row !important;      /* la casa lo pone en columna */
        flex-wrap: wrap; align-items: stretch;
    }
    #detalleFooter button {
        flex: 1 1 calc(50% - 4px) !important;
        width: auto !important; min-height: 44px; height: auto !important;
    }
    #detalleFooter .btn-entrada { flex: 1 1 100% !important; }

    /* El borrador del correo */
    .brd-salidas { flex-direction: column; }
    .brd-salidas .btn-erp-ent { width: 100%; justify-content: center; min-height: 42px; }
    .coste-pie { flex-direction: column-reverse; }
    .coste-pie .btn-erp-ent { width: 100%; justify-content: center; min-height: 42px; }
}

/* ── Móvil pequeño (hasta 400) ──────────────────────────────────────────── */
@media (max-width: 400px) {
    .articulo-details { grid-template-columns: 1fr !important; }
}

/* ── Pantalla tumbada y baja (móvil en horizontal) ──────────────────────── */
@media (max-height: 520px) and (max-width: 900px) {
    .ficha-ent, #modalFormPedido .modal-card { height: 100dvh !important; }
    .apartados-panel .ap-lista { max-height: 120px; }
}


/* ── Un pedido que llega en varios camiones ──────────────────────────────── */
.erp-entregas {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 5px;
    background: #eef2ff; color: #3730a3;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.erp-entregas i { font-size: 9.5px; }

.det-entrega {
    display: grid; grid-template-columns: 20px 1fr auto auto 1.4fr auto;
    gap: 9px; align-items: center; padding: 4px 0;
    border-bottom: 1px solid #eef2f7; font-size: 12.5px;
}
.det-entrega:last-of-type { border-bottom: 0; }
.det-entrega.hecha { opacity: .6; }
.det-entrega-n {
    width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
    background: #e0e7ff; color: #3730a3; font-size: 10.5px; font-weight: 800;
}
.det-entrega-f { font-weight: 700; color: #1e293b; }
.det-entrega-t { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; padding: 1px 6px; border-radius: 4px; }
.det-entrega-t.fija { background: #d1fae5; color: #065f46; }
.det-entrega-t.var  { background: #fef3c7; color: #92400e; border: 1px dashed #d9a441; }
.det-entrega-kg { font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.det-entrega-nota { color: #64748b; }
.det-entrega-ok { color: #047857; font-size: 11px; font-weight: 700; }
.det-entrega-suma { display: block; margin-top: 6px; color: #64748b; font-size: 11.5px; }


/* ── El porte sacado de la tarifa del transportista ──────────────────────── */
.imp-transporte {
    display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
    margin-bottom: 11px; padding-bottom: 11px; border-bottom: 1px dashed #e2e8f0;
}
.imp-rotulo { font-size: 11px; font-weight: 800; color: #475569; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.imp-rotulo i { color: #92400e; margin-right: 3px; }
.imp-transporte select {
    flex: 1 1 260px; min-width: 200px; padding: 7px 9px;
    border: 1px solid #cbd5e1; border-radius: 8px;
    font-family: inherit; font-size: 13px; background: #fff; color: #1f2937;
}
.imp-transporte select:focus { border-color: #2563eb; outline: none; }
.imp-tarifa { font-size: 11.5px; font-weight: 700; color: #047857; white-space: nowrap; }
.imp-tarifa:empty { display: none; }
.imp-tarifa.falta { color: #b45309; }


/* ══ ARTÍCULOS COMO EN GESTIÓN DE RUTAS ══════════════════════════════════════
   Calcado de formularios-erp.css (#pedidoModal), que es como se añaden los
   artículos en el pedido de cliente: el alta en UNA fila y cada línea como un
   renglón de tabla, con el rótulo pequeño a la izquierda de cada cifra.

   La ventana se ensancha para que quepa el renglón entero: con 760 px cada
   artículo se partía en una cuadrícula de cajas, que es justo lo que hacía
   que esto no pareciera un ERP. */
#modalFormPedido .modal-card,
#modalFormEntrada .modal-card { max-width: min(1320px, 96vw); }

/* ── El alta: buscar · formato · cantidad · Añadir, en una fila ── */
.ge-art-container {
    /* En FILA: la regla de la casa lo pone en columna, y con eso los anchos
       de abajo se convertían en alturas y el bloque salía de medio metro. */
    display: flex !important; flex-direction: row !important;
    flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
}
.ge-art-container > .ge-art-search-wrap { flex: 1 1 320px; position: relative; margin: 0; }
.ge-art-container > .ge-tipo-container {
    flex: 1 1 380px; flex-direction: row !important; flex-wrap: wrap;
    align-items: center; gap: 10px !important;
    background: #f8fafc; padding: 8px 10px; border-radius: 8px; margin: 0;
}
.ge-formato { flex: 1 1 200px; min-width: 170px; }
.ge-cantidad-wrap { display: flex; align-items: center; gap: 8px; flex: 0 1 220px; }
.ge-cantidad-wrap input { width: 110px; flex: 0 0 110px; }
.ge-unidad { font-size: .85rem; color: #64748b; white-space: nowrap; }
.ge-personalizado { flex: 1 1 100%; gap: 8px; }
.ge-personalizado input { flex: 1; background: #f5f3ff; border-color: #c4b5fd !important; }
.ge-personalizado input:first-child { flex: 2; }
.ge-art-container > .ge-add-btn { flex: 0 0 auto; min-width: 110px; margin: 0; }
.ge-art-container > .articulos-lista {
    flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 2px;
}
.ge-art-container > .articulos-lista:empty { display: none; }

/* ── Cada artículo en UN renglón: el nombre a la izquierda, las cifras a la
      derecha, con el rótulo a su lado y no encima ── */
.ge-art-card {
    display: flex !important; align-items: center !important; flex-wrap: wrap;
    gap: 10px; padding: 7px 10px !important; margin: 0 !important;
    background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 6px !important;
}
.ge-art-card:hover { background: #f1f5f9 !important; }
.ge-art-card .articulo-info {
    flex: 1; min-width: 0;
    display: flex !important; flex-direction: row !important; align-items: center;
    flex-wrap: wrap; gap: 6px 12px !important;
}
.ge-art-card .articulo-info > strong {
    flex: 1 1 230px; margin: 0; font-size: 12.5px; font-weight: 800; color: #1e293b;
}
.ge-art-card .articulo-details {
    display: flex !important; grid-template-columns: none !important;
    flex: 3 1 640px; flex-wrap: wrap; align-items: center; gap: 6px 12px !important; margin: 0 !important;
}
.ge-art-card .articulo-details > div {
    flex: 1 1 96px; min-width: 0;
    display: flex !important; flex-direction: row !important; align-items: center !important;
    gap: 5px !important; padding: 0 !important; margin: 0 !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
}
.ge-art-card .articulo-details label {
    margin: 0; white-space: nowrap;
    font-size: 10px !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: .04em; color: #64748b !important;
}
.ge-art-card .articulo-details input {
    width: 100% !important; min-width: 56px; padding: 5px 7px !important; font-size: 13px !important;
    border: 1px solid #dbe3ec !important; border-radius: 6px !important; background: #fff;
}
.ge-art-card .articulo-details > div > span { font-size: 11px; color: #64748b; white-space: nowrap; }
/* Cada casilla con su ancho, como en rutas: estiradas a todo lo ancho no
   cabían en un renglón y cada artículo se partía en dos. Y ningún grupo se
   encoge por debajo de lo que lleva dentro: antes el nombre del envase
   («IBC», «sacos») se montaba encima del rótulo de los litros. */
.ge-art-card .articulo-info > strong { flex: 0 1 185px; }
.ge-art-card .articulo-details { flex: 1 1 0; justify-content: flex-end; gap: 6px 8px !important; }
.ge-art-card .articulo-details > div { flex: 0 0 auto !important; min-width: max-content; }
.ge-art-card .articulo-details input { width: auto !important; }
.ge-art-card .cantidad-grupo input  { width: 72px !important; }
.ge-art-card .cantidad-grupo > span { width: 46px; min-width: 46px; overflow: hidden; text-overflow: ellipsis; }
/* El guion de «no aplica» ocupa lo mismo que la casilla que sustituye, para
   que las columnas cuadren de un artículo a otro como en una tabla. */
.ge-art-card .sin-dato .ge-nada {
    display: inline-block; text-align: center; padding: 0 !important;
    line-height: 29px; border: 1px dashed #e2e8f0; border-radius: 6px; color: #cbd5e1;
}
.ge-art-card .litros-grupo.sin-dato .ge-nada { width: 72px; }
/* Las dos columnas que a veces llevan casilla y a veces guion, con el ancho
   fijo: así cuadran igual en un saco que en un granel. */
.ge-art-card .litros-grupo { width: 121px; }
.ge-art-card .bultos-grupo { width: 108px; }
.ge-art-card .sin-dato .ge-nada { box-sizing: border-box; }
.ge-art-card .bultos-grupo.sin-dato .ge-nada { width: 50px; }
.ge-art-card .litros-grupo input    { width: 72px !important; }
.ge-art-card .kilos-grupo input     { width: 82px !important; }
.ge-art-card .bultos-grupo input    { width: 50px !important; }
.ge-art-card .precio-grupo input    { width: 84px !important; }
.ge-art-card .logistica-grupo input { width: 74px !important; }
.ge-art-card .logistica-grupo label { color: #92400e !important; }
.ge-art-card .logistica-grupo input { border-color: #fcd34d !important; background: #fffbeb !important; }
.ge-art-card .ge-coste-real {
    flex: 1 1 100%; text-align: right; margin-top: -2px;
    font-size: 10.5px; font-weight: 700; color: #92400e;
}
.ge-art-card .lote-grupo { flex: 1 1 100%; grid-column: auto; margin-top: 2px; }
.ge-art-card .articulo-actions { flex-shrink: 0; align-self: center; margin: 0; }

/* En tableta no cabe el renglón entero: el nombre arriba y las cifras en
   dos filas de tres, alineadas, en vez de caer a trompicones. */
@media (max-width: 900px) {
    .ge-art-card .articulo-info > strong { flex: 1 1 100%; }
    .ge-art-card .articulo-details { flex: 1 1 100%; justify-content: flex-start; }
    .ge-art-card .articulo-details > div { flex: 1 1 30% !important; min-width: 0; }
    .ge-art-card .articulo-details label { min-width: 62px; }
}


/* ── El precio con su unidad al lado: €/kg o €/saco ─────────────────────── */
.ge-art-card .precio-grupo { position: relative; }
/* La regla general de la casa pone TODOS los select a lo ancho: aquí el
   selector se estiraba y apretaba la casilla del precio hasta no dejar ver
   el número. Cada pieza con su ancho y sin encoger. */
.ge-art-card .articulo-details > div > * { flex: 0 0 auto; }
/* Mismo ancho diga lo que diga («€/IBC», «€/tarra», «€/kg»): si no, las
   columnas de la derecha bailan de un artículo a otro. */
.ge-art-card .precio-unidad, .ge-art-card .precio-unidad-fija { width: 88px !important; }
.ge-art-card .precio-unidad-fija { display: inline-block; text-align: center; }
.ge-art-card .precio-unidad {
    min-width: 0;
    padding: 4px 4px; border: 1px solid #dbe3ec; border-radius: 6px;
    font-family: inherit; font-size: 11.5px; font-weight: 700; color: #334155;
    background: #f1f5f9; cursor: pointer;
}
.ge-art-card .precio-unidad:focus { outline: none; border-color: #2563eb; }
.ge-art-card .precio-unidad-fija { font-size: 11.5px; font-weight: 700; color: #64748b; }
/* La equivalencia, pequeña y debajo, sin ocupar ancho en el renglón */
.ge-art-card .precio-nota {
    position: absolute; left: 0; right: 0; top: 100%; margin-top: 1px;
    font-size: 9.5px; font-weight: 600; color: #94a3b8; text-align: right; white-space: nowrap;
}
.ge-art-card .precio-nota.aviso { color: #b45309; }
.ge-art-card:has(.precio-nota) { padding-bottom: 14px !important; }