@media (max-width:700px){
    .user-info { position:absolute; right:0; top:0; padding-right:0; width:60vw; height:40px; display:flex; align-items:center; justify-content:flex-end; }
    nav { position:relative; }
    .user-info #user-name {
        width:100%;
        max-width:100%;
        font-size:15px;
        padding:6px 18px;
        background:rgba(0,0,0,0.10);
        color:#fff !important;
        font-weight:700;
        border-radius:10px;
        display:block;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        letter-spacing:0.5px;
    }
}
/* Ocultar botón salir en escritorio, mostrar solo en móviles */
.logout-desktop { display:block; }
@media (min-width: 701px) {
    .logout-desktop { display:none !important; }
}
/* Estilo para la columna de fecha en la tabla de recojos */
table th:first-child, table td:first-child {
    min-width: 110px;
    white-space: nowrap;
}
@media print {
    @page {
    justify-content: flex-start;
    }
    body * {
        visibility: hidden !important;
    }
    #resumen, #resumen * {
    padding: 0;
    }
    #resumen button, #resumen h2, #resumen form {
    margin: 6px 8px;
    }
    .container {
        box-shadow: none;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100vw !important;
        margin-top: 0 !important;
    padding: 10px 8px;
    }
    #resumen {
        width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        background: #fff !important;
    }
    table {
        width: 100vw !important;
        min-width: 0 !important;
        font-size: 14px !important;
        margin: 0 !important;
    }
    th, td {
        padding: 6px !important;
        font-size: 13px !important;
    }
}
@media print {
    body * {
        visibility: hidden !important;
    }
    #resumen, #resumen * {
        visibility: visible !important;
    }
    #resumen button {
        display: none !important;
    }
    .container {
        box-shadow: none;
        margin: 0;
        padding: 0;
        max-width: 100vw;
    }
}
@media (max-width: 800px) {
    .container {
        max-width: 98vw;
        padding: 10px 2vw 20px 2vw;
    }
    table {
        font-size: 14px;
        min-width: 0;
        width: 100%;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .menu {
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }
    .menu li {
        margin: 4px 6px;
    }
    nav { max-width: 100%; padding: 0 8px; }
    .menu a { padding: 10px 8px; font-size: 14px; }
    th, td { padding: 6px; }
}

@media (max-width: 600px) {
    .container {
        max-width: 100vw;
        padding: 8px 8px 12px 8px;
        margin: 0 auto;
    }
    h2 {
        font-size: 18px;
    }
    table {
        font-size: 12px;
        min-width: 0;
        width: 100%;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .progress { height: 12px; }
    /* Barra de Avance compacta en la misma línea que el % */
    td .progress { display: inline-block; width: 120px; margin: 0 6px 0 0; vertical-align: middle; }
    /* Mostrar barra de avance global en cabeceras en una nueva línea y más visible */
    .progress-global { display: block; width: 80vw; max-width: 260px; height: 12px; margin-top: 6px; }
    .progress { height: 12px; }
    th, td {
        padding: 4px;
    }
    input[type="file"], input[type="text"] {
        width: 100%;
        box-sizing: border-box;
    }
    button { width: 100%; margin-top: 8px; }
}

/* Extra compacto para móviles muy pequeños */
@media (max-width: 480px) {
    nav { padding: 0 6px; }
    .menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; justify-items: center; }
    .menu li { margin: 0; }
    .menu a { padding: 10px 6px; font-size: 13px; }
    .container { padding: 8px 6px 12px 6px; }
    /* Mostrar hamburguesa y ocultar menú horizontal */
    .mobile-nav-toggle { display:inline-block; }
    .menu { display:none; }
    nav { position:sticky; top:0; z-index:1001; background:#007bff; }
    h2 { font-size: 17px; }
    table { font-size: 12px; }
    th, td { padding: 6px; }
    /* Mantener barra y % en línea sin romper */
    .avance-cell { white-space: nowrap; }
    td .progress { width: 110px; }
}
@media print {
    body * {
        visibility: hidden !important;
    }
    #resultados, #resultados * {
        visibility: visible !important;
    }
    #resultados {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        background: #fff;
        box-shadow: none;
        margin: 0;
        padding: 0;
    }
    #resultados button {
        display: none !important;
    }
}
/* Imprimir: solo la sección de cobranzas */
@media print {
    /* Orientación y márgenes para abarcar todas las columnas */
    @page { size: landscape; margin: 10mm; }
    body * { visibility: hidden !important; }
    #cobranzas, #cobranzas * { visibility: visible !important; }
    #cobranzas { position: absolute; left: 0; top: 0; width: 100%; background: #fff; box-shadow: none; margin: 0; padding: 0; }
    #cobranzas button { display: none !important; }
    /* La tabla de cobranzas debe ajustarse al ancho de la hoja */
    #cobranzas .tabla-cobranzas { width: 100% !important; min-width: 0 !important; table-layout: fixed; font-size: 12px; border-spacing: 0 4px; }
    #cobranzas .tabla-cobranzas th, #cobranzas .tabla-cobranzas td { padding: 6px; white-space: normal; word-break: normal; }
    #cobranzas .tabla-cobranzas thead th { font-size: 13px; white-space: nowrap; }
    /* Anchos por columna para la tabla de detalle (11 columnas) */
    #cobranzas .tabla-cobranzas thead th:nth-child(1),
    #cobranzas .tabla-cobranzas tbody td:nth-child(1) { width: 8%; min-width: 0 !important; }
    #cobranzas .tabla-cobranzas thead th:nth-child(2),
    #cobranzas .tabla-cobranzas tbody td:nth-child(2) { width: 7%; min-width: 0 !important; }
    #cobranzas .tabla-cobranzas thead th:nth-child(3),
    #cobranzas .tabla-cobranzas tbody td:nth-child(3) { width: 6%; min-width: 0 !important; }
    #cobranzas .tabla-cobranzas thead th:nth-child(4),
    #cobranzas .tabla-cobranzas tbody td:nth-child(4) { width: 9%; min-width: 0 !important; }
    #cobranzas .tabla-cobranzas thead th:nth-child(5),
    #cobranzas .tabla-cobranzas tbody td:nth-child(5) { width: 24%; min-width: 0 !important; }
    #cobranzas .tabla-cobranzas thead th:nth-child(6),
    #cobranzas .tabla-cobranzas tbody td:nth-child(6) { width: 6%; min-width: 0 !important; }
    #cobranzas .tabla-cobranzas thead th:nth-child(7),
    #cobranzas .tabla-cobranzas tbody td:nth-child(7) { width: 6%; min-width: 0 !important; }
    #cobranzas .tabla-cobranzas thead th:nth-child(8),
    #cobranzas .tabla-cobranzas tbody td:nth-child(8) { width: 11%; min-width: 0 !important; }
    #cobranzas .tabla-cobranzas thead th:nth-child(9),
    #cobranzas .tabla-cobranzas tbody td:nth-child(9) { width: 11%; min-width: 0 !important; }
    #cobranzas .tabla-cobranzas thead th:nth-child(10),
    #cobranzas .tabla-cobranzas tbody td:nth-child(10) { width: 6%; min-width: 0 !important; text-align: right; }
    #cobranzas .tabla-cobranzas thead th:nth-child(11),
    #cobranzas .tabla-cobranzas tbody td:nth-child(11) { width: 6%; min-width: 0 !important; text-align: right; }
    /* Ajuste de quiebre en Nombre Cliente solamente en el cuerpo */
    #cobranzas .tabla-cobranzas tbody td:nth-child(5) { overflow-wrap: anywhere; }
}
body {
    font-family: Arial, sans-serif;
    background: #f7f7f7;
    margin: 0;
    padding: 0;
}
header {
    background: #007bff;
    padding: 0;
    margin-bottom: 30px;
}
nav {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.menu {
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: auto;
    flex: 1;
    margin: 0;
    padding: 0;
}
.menu li {
    margin: 6px 10px;
    position: relative;
}
/* Empujar elementos a la derecha en la barra */
.menu li.push-right { margin-left: auto; }
.menu a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    display: block;
    padding: 12px 10px;
    white-space: nowrap;
}
.menu a.is-enabled { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; }
.menu a.is-disabled { opacity: .45; cursor: not-allowed; filter: grayscale(35%); }
/* Nuevo bloque para usuario fuera del menú */
/* Ajuste usuario sin icono y texto blanco */
/* Bloque usuario siempre blanco y menú funcional */
.user-info { margin-left:auto; display:flex; align-items:center; font-weight:600; padding:8px 10px; font-size:14px; position:relative; }
.user-info #user-name { display:inline-block; vertical-align:middle; color:#fff !important; font-weight:600; padding:2px 8px; border-radius:6px; background:transparent; cursor:pointer; }
.user-info #user-name:focus, .user-info #user-name:hover { background:rgba(255,255,255,0.12); outline:none; color:#fff !important; }
.user-menu { position:absolute; top:100%; right:0; background:#222; color:#fff; min-width:150px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.15); padding:6px 0; z-index:1002; }
.user-menu a { display:block; color:#fff; text-decoration:none; padding:8px 16px; font-size:14px; border-radius:6px; transition:background .15s; }
.user-menu a:hover { background:#007bff; }
@media (max-width:700px){
    nav { gap:2px; }
    .menu { flex: 0 1 0.1px; min-width: 0; }
    .menu li { margin: 2px 2px; padding: 0 2px; }
    .user-info { font-size:15px; padding:6px 2px; flex:1 1 100%; min-width:0; overflow:hidden; }
    .user-info #user-name {
        width:100%;
        font-weight:700;
        letter-spacing:0.5px;
        background:rgba(0,0,0,0.10);
        color:#fff !important;
        border-radius:8px;
        padding:8px 16px;
        display:block;
        white-space:pre-line;
        overflow:visible;
        text-overflow:unset;
        word-break:break-word;
        font-size:13px;
        line-height:1.2;
        max-width:99vw;
    }
}
@media (max-width:850px){
    .user-info { font-size:13px; padding:6px 8px; max-width:none; overflow:visible; }
    .user-info #user-name { max-width:none; overflow:visible; text-overflow:unset; white-space:normal; }
}
@media (max-width:700px){
    .user-info { font-size:13px; padding:6px 8px; max-width:120px; }
    .user-info #user-name { max-width:60px; }
}
.menu a:hover {
    text-decoration: underline;
}
/* Submenu for Gestión de Devoluciones */
.menu .submenu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: #ffffff;
    color: #333;
    min-width: 220px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    padding: 6px 0;
    z-index: 50;
}
.menu li.has-submenu:hover > .submenu { display: block; }
/* Mostrar submenu también al hacer click (clase .open se maneja por JS) */
.menu li.has-submenu.open > .submenu { display: block; }
.menu li.has-submenu > a.submenu-toggle { cursor: pointer; }
.menu .submenu li { margin: 0; }
.menu .submenu a { color: #333; padding: 8px 12px; display: block; }
.menu .submenu a:hover { background: #f1f5ff; text-decoration: none; }
.menu .submenu a.is-enabled { font-weight: 600; }
.menu .submenu a.is-disabled { color: #9aa0a6; cursor: not-allowed; opacity: .6; }
.menu .submenu a.is-disabled:hover { background: transparent; text-decoration: none; }
.container {
    max-width: 1100px;
    margin: 40px auto;
    background: #fff;
    padding: 30px 40px 40px 40px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Modo pantalla completa para módulos que requieren ancho completo (Cobranzas y Devoluciones) */
.container.fullwidth {
    max-width: 100vw;
    margin: 0 auto;
    padding: 16px 24px 24px 24px;
    border-radius: 0;
    box-shadow: none;
}
.container.fullwidth #modulo-cobranzas,
.container.fullwidth #modulo-devoluciones { width: 100%; max-width: 100%; margin: 0; }
h2 {
    color: #333;
    margin-bottom: 20px;
}
/* Iconos en menú principal */
/* line-height moved to correct block below */
.menu a .nav-icon svg { width:16px; height:16px; fill:#fff; stroke:#fff; }
/* Caret del submenu */
.menu li.has-submenu > a .caret { display:inline-flex; width:14px; height:14px; margin-left:6px; vertical-align:middle; transition: transform .2s ease; }
.menu li.has-submenu > a .caret svg { width:14px; height:14px; fill:none; stroke:#fff; }
/* Rotar cuando está abierto o en hover (dispositivos con hover) */
.menu li.has-submenu.open > a .caret { transform: rotate(180deg); }
@media (hover: hover) {
    .menu li.has-submenu:hover > a .caret { transform: rotate(180deg); }
}

/* Submenú deshabilitado (cuando todos sus hijos lo están) */
.menu li.has-submenu.disabled > a { opacity: .45; cursor: not-allowed; filter: grayscale(35%); }
.menu li.has-submenu.disabled:hover > .submenu { display: none; }
.menu li.has-submenu.disabled.open > .submenu { display: none; }

/* Marca RikFlex */
.brand-logo {
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.brand-logo:hover { background: rgba(255,255,255,0.18); }

@media (max-width: 600px) {
    .brand-logo { font-size: 16px; padding: 5px 9px; }
}
/* Botón hamburguesa móvil */
.mobile-nav-toggle { display:none; margin-left:auto; background:transparent; border:none; padding:8px; cursor:pointer; border-radius:8px; }
.mobile-nav-toggle .mn-bar { display:block; width:22px; height:2px; background:#fff; margin:4px 0; border-radius:2px; }

/* Panel menú móvil */
.mobile-menu-panel { display:none; position:fixed; z-index:1000; top:56px; left:0; right:0; background:#ffffff; border-top:1px solid #e5e7eb; box-shadow:0 8px 20px rgba(0,0,0,0.15); padding:10px 12px; }
.mobile-menu-panel.open { display:block; }
.mobile-menu-panel ul { list-style:none; margin:0; padding:0; }
.mobile-menu-panel li { border-bottom:1px solid #f1f5f9; }
.mobile-menu-panel a { display:flex; align-items:center; gap:10px; padding:12px 4px; color:#111827; text-decoration:none; font-weight:700; }
.mobile-menu-panel .submenu { display:none; padding-left:14px; }
.mobile-menu-panel li.open > .submenu { display:block; }
.mobile-menu-panel a.is-disabled { color:#9aa0a6; }

/* Activación del menú móvil */
@media (max-width: 700px) {
    .mobile-nav-toggle { display:inline-block; }
    nav { position:sticky; top:0; z-index:1001; background:#007bff; }
    nav .menu { display:none; }
}
/* Forzar en caso de clase agregada por JS */
body.is-mobile nav .menu { display:none !important; }
body.is-mobile .mobile-nav-toggle { display:inline-block !important; }
/* Gestión de Devoluciones */
.bloque-vehiculo { border:1px solid #e3e3e3; border-radius:6px; padding:12px; margin:16px 0; background:#fafafa; }
.bloque-vehiculo h3 { margin:0 0 10px 0; }
.estado-selects { display:flex; flex-wrap:wrap; gap:6px; }
.estado-resumen { margin-bottom:6px; color:#333; font-size:14px; }
.estado-select { min-width:160px; padding:4px; }
.msg-ok { background:#e8f8ec; border:1px solid #bfe6c9; color:#2f7d3b; padding:8px 10px; border-radius:6px; margin:8px 0; }
.msg-err { background:#fdecea; border:1px solid #f5c2c0; color:#842029; padding:8px 10px; border-radius:6px; margin:8px 0; }
/* Resaltar la fila bajo el cursor en la gestión de devoluciones */
#modulo-devoluciones .bloque-vehiculo table tbody tr.dev-row td { transition: background-color .15s ease; }
#modulo-devoluciones .bloque-vehiculo table tbody tr.dev-row:hover td { background: #eef6ff; }

/* Compactar filas en Gestión de Devoluciones para reducir scroll */
#modulo-devoluciones .bloque-vehiculo { padding:10px 12px; margin:12px 0; }
#modulo-devoluciones table { font-size: 13px; margin-top: 14px; }
#modulo-devoluciones th, #modulo-devoluciones td { padding: 4px; line-height: 1.1; }
#modulo-devoluciones tr.dev-row td { padding-top: 3px; padding-bottom: 3px; }
#modulo-devoluciones .form-bulk { margin-top: 2px !important; gap: 3px !important; }
#modulo-devoluciones .form-bulk label { margin: 0; }
#modulo-devoluciones .form-bulk input[type="number"] { width: 64px; padding: 1px 4px; height: 24px; font-size: 13px; }
#modulo-devoluciones .form-bulk select,
#modulo-devoluciones .form-bulk .estado-select { min-width: 120px; padding: 1px 4px; height: 24px; font-size: 13px; }
#modulo-devoluciones .form-bulk button { padding: 3px 6px; font-size: 12px; line-height: 1.1; }
#modulo-devoluciones .btn-undo { padding: 4px 8px !important; }
#modulo-devoluciones .btn-add-line, #modulo-devoluciones .btn-ok-restantes { padding: 5px 8px !important; font-size: 13px; }
#modulo-devoluciones .msg-ajax { margin-top: 2px !important; }
input[type="file"] {
    margin-bottom: 15px;
}
button {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
button:hover {
    background: #0056b3;
}

/* ========================
   Seguimiento de Pedidos
   ======================== */
.seg-mobile { display:none; }
.seg-mobile .seg-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.seg-mobile .seg-head h3 { margin:0; font-size:16px; color:#333; }
.seg-mobile .seg-card { border:1px solid #e5e7eb; border-radius:8px; padding:10px; margin:10px 0; background:#fafafa; }
.seg-mobile .seg-vendor { font-weight:800; font-size:16px; color:#111827; margin-bottom:6px; }
.seg-mobile .seg-badges { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 8px 0; }
.seg-mobile .seg-badge { background:#eef2ff; color:#111827; border-radius:999px; padding:4px 10px; font-weight:700; font-size:13px; min-width:64px; text-align:center; }
.seg-mobile .seg-last { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; color:#374151; }
.seg-mobile .seg-last .seg-time { font-weight:700; color:#111827; }

/* Forzar tarjetas en móviles */
@media (max-width: 700px) {
    .seg-desktop { display:none; }
    .seg-mobile { display:block; }
}

/* Paleta por rango para mejor escaneo */
.seg-mobile .seg-badge.r1 { background:#dbeafe; color:#1e3a8a; } /* azul claro */
.seg-mobile .seg-badge.r2 { background:#dcfce7; color:#065f46; } /* verde claro */
.seg-mobile .seg-badge.r3 { background:#fef3c7; color:#92400e; } /* ámbar claro */
.seg-mobile .seg-badge.r4 { background:#fee2e2; color:#991b1b; } /* rojo claro */
table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    margin-top: 30px;
    font-size: 16px;
}
th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}
th {
    background: #f2f2f2;
}
/* Indicador visual de cabecera clickable en Devoluciones (Nombre Cliente) */
#modulo-devoluciones thead th.sortable { cursor: pointer; }

/* Estilo específico para tablas de Cobranzas: sin líneas, encabezado más fuerte */
.tabla-cobranzas { border-collapse: separate; border-spacing: 0 6px; margin-top: 18px; }
.tabla-cobranzas th, .tabla-cobranzas td { border: none !important; background: transparent; }
.tabla-cobranzas thead th { font-weight: 800; color: #23354d; padding-top: 2px; padding-bottom: 10px; background: transparent !important; }
.tabla-cobranzas tbody tr td { padding: 10px 8px; }
.tabla-cobranzas tbody tr:hover td { background: #f7fbff; }
.tabla-cobranzas tbody tr td:last-child, .tabla-cobranzas thead th:last-child { text-align: right; }

/* Barra de avance en resumen */
.progress { width: 120px; height: 10px; background: #eee; border-radius: 6px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 6px; }
.progress .bar { height: 100%; transition: width .3s ease; display: block; }
.avance-cell { white-space: nowrap; }
.avance-cell small { margin-left: 6px; display: inline-block; }
.bar-red { background: #dc3545; }
.bar-orange { background: #fd7e14; }
.bar-yellow { background: #ffc107; }
.bar-green { background: #28a745; }

@media print {
    .progress { width: 100px; height: 8px; }
}

/* Global progress in header */
.progress-global { width: 220px; height: 12px; vertical-align: middle; margin-left: 8px; }

/* =====================
     Resumen móvil (lista)
     ===================== */
.resumen-mobile { display: none; }
.rm-title { margin: 0 0 10px 0; font-weight: 800; color: #111827; }
.rm-list { display: flex; flex-direction: column; gap: 8px; }
.rm-item { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; background: #ffffff; border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.rm-label { font-weight: 600; color: #111827; font-size: clamp(14px, 3.7vw, 16px); letter-spacing: .2px; line-height: 1.2; }
.rm-sub { font-weight: 500; color: #4b5563; font-size: 12px; margin-top: 3px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
/* Etiqueta dentro de la barra */
.rm-track { height: 16px; background: #e5e7eb; border-radius: 999px; overflow: hidden; position: relative; }
.rm-track .bar { height: 100%; display:block; position:relative; display:flex; align-items:center; }
.rm-track .bar .pct-in { position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; letter-spacing:.4px; color:#fff; mix-blend-mode:normal; }
/* Ajustar contraste según color de fondo (simple fallback: texto oscuro si fondo muy claro amarillo) */
.bar-yellow .pct-in { color:#222; }
/* Para barras muy pequeñas (<15%) mover el texto fuera para legibilidad */
.rm-track .bar[data-small="1"] .pct-in { position:static; padding-left:4px; justify-content:flex-start; color:#111827; }
@media (max-width: 500px) { .rm-track { height:14px; } .rm-track .bar .pct-in { font-size:10px; } }
@media (max-width: 500px) { .rm-track { height:14px; } }

/* Mostrar lista en pantallas pequeñas y ocultar la tabla de resumen */
@media (max-width: 700px) {
    table.resumen-desktop { display: none !important; }
    .resumen-mobile { display: block; }
    .container { padding: 14px 12px 18px 12px; margin: 0 auto; max-width: 100vw; }
}

/* =====================
   Herramientas (DNI/RUC)
   ===================== */
.tool-form{display:grid;gap:10px;margin:10px 0}
.tool-form .tf-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tool-form input{height:36px;padding:6px 10px;font-size:16px}
.tool-form button{height:36px;padding:0 12px}
.tool-msg{margin:8px 0;color:#c0392b}
.tool-results{display:grid;gap:12px}
.tool-card{border:1px solid #e5e7eb;border-radius:8px;padding:12px;background:#fff}
.tool-card h3{margin:0 0 8px 0}
.tr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tr-grid .wide{grid-column:1/-1}
.tr-grid b{display:block;color:#555;margin-bottom:2px}
.tr-grid span{display:block;color:#111}
@media (max-width:600px){.tr-grid{grid-template-columns:1fr}}

/* Resumen global móvil */
.rm-global { background:#f9fbff; border:1px solid #e5eefc; border-radius:12px; padding:10px 12px; margin:8px 0 12px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.rm-global .rg-metrics { display:flex; flex-wrap:wrap; gap:8px 12px; font-size:13px; color:#1f2937; align-items:center; }
.rm-global .rg-metrics strong { font-weight:800; color:#111827; }
.rm-global .rg-bar { margin-top:8px; }
.rm-global .rg-track { height:16px; background:#e5e7eb; border-radius:999px; overflow:hidden; position:relative; }
.rm-global .rg-track .bar { height:100%; display:block; position:relative; display:flex; align-items:center; }
.rm-global .rg-track .bar .pct-in { position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }
.rm-global .bar-yellow .pct-in { color:#111; }
.rm-global .rg-track .bar[data-small="1"] .pct-in { position:static; padding-left:4px; justify-content:flex-start; color:#111; }
@media (max-width: 500px) { .rm-global .rg-track { height:14px; } .rm-global .rg-metrics { font-size:12px; } }

/* Indicador de días de vencimiento */
.vcto { display:inline-flex; align-items:center; gap:6px; }
.vcto-dot { width:10px; height:10px; border-radius:50%; background:#bdbdbd; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
.vcto-ok { background:#28a745; }
.vcto-yellow { background:#ffc107; }
.vcto-orange { background:#fd7e14; }
.vcto-red { background:#dc3545; }
.vcto-unk { background:#6c757d; }
/* ========================
     Recojos: vista móvil
     ======================== */
.recojos-mobile-grid { display:none; }
.rk-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; gap:4px; box-shadow:0 1px 3px rgba(0,0,0,.08); font-size:13px; }
.rk-head { display:flex; justify-content:space-between; font-weight:700; color:#111827; }
.rk-head .rk-fecha { font-weight:600; color:#0b5ed7; }
.rk-body { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:4px 10px; }
.rk-line { display:flex; align-items:center; gap:4px; }
.rk-line.rk-wide { grid-column: 1 / -1; }
.rk-trunc { max-width:100%; display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk-lbl { font-weight:600; color:#374151; }
.rk-val { font-weight:600; color:#1f2937; letter-spacing:.3px; }
.rk-est { padding:2px 6px; border-radius:6px; font-size:12px; font-weight:600; background:#e5e7eb; color:#111827; display:inline-block; }
.rk-est.est-ok { background:#d1fae5; color:#065f46; }
.rk-est.est-sin-compra { background:#fde68a; color:#92400e; }
.rk-est.est-no-llego-al-almacen { background:#fcd3d3; color:#7f1d1d; }
.rk-est.est-no-autorizado { background:#fca5a5; color:#7f1d1d; }
.rk-est.est-no-digitado { background:#e0e7ff; color:#3730a3; }
.rk-est.est-pendientes { background:#f1f5f9; color:#0f172a; }
@media (max-width: 700px) {
    .recojos-desktop { display:none !important; }
    .recojos-mobile-grid { display:grid; grid-template-columns: 1fr; gap:10px; margin-top:12px; }
}
/* Detalle expandible en tarjetas de recojos (móvil) */
.rk-card { cursor: default; }
.rk-card.open { box-shadow:0 2px 6px rgba(0,0,0,.12); }
.rk-detail { border-top:1px solid #eef2f7; margin-top:6px; padding-top:6px; display:none; }
.rk-drow { padding:6px 2px; border-bottom:1px dashed #edf2f7; }
.rk-drow:last-child { border-bottom:none; }

/* Modal para detalle de recojos */
.rk-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:2000; align-items:center; justify-content:center; padding:14px; }
.rk-modal-overlay.open { display:flex; }
.rk-modal { background:#fff; width:100%; max-width:680px; max-height:82vh; overflow:auto; border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.25); }
.rk-modal-header { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #e5e7eb; }
.rk-modal-header h3 { margin:0; font-size:16px; color:#111827; }
.rk-modal-close { background:transparent; border:none; font-size:22px; line-height:1; cursor:pointer; padding:4px 8px; color:#444; }
.rk-modal-body { padding:10px 12px; }
.rk-modal-meta { display:grid; grid-template-columns: 1fr; gap:6px; margin-bottom:8px; font-size:13px; color:#374151; }
.rk-modal-detail .rk-drow { padding:8px 2px; }
@media (max-width: 480px) { .rk-modal { max-height:88vh; } }