/* =====================================================================================================
   2026-10-02 (i): MEJORAS DE DISEÑO del Sistema Nacional HCC (PC y celular), pedido de Jorge.
   Tablas comodas, tablas como tarjetas en el celular, menu compacto, barra de arriba con ruta y buscador,
   barra de abajo en el celular, fichas, siluetas de carga, estados vacios, colores de estado, camara,
   ayuda de atajos y avisos de la app. Cada bloque trae su version para el modo oscuro.
   ===================================================================================================== */

:root {
    --hcc-borde: #E2E8F0;
    --hcc-texto-suave: #64748B;
    --hcc-fondo-tarjeta: #FFFFFF;
    --hcc-fondo-suave: #F8FAFC;
    --hcc-azul: #1D4ED8;
    --hcc-alto-barra-movil: 64px;
}
html.modo-oscuro {
    --hcc-borde: #334155;
    --hcc-texto-suave: #A8B3C7;
    --hcc-fondo-tarjeta: #16213A;
    --hcc-fondo-suave: #1E293B;
    --hcc-azul: #60A5FA;
}

/* ---------------------------------------------------------------- 1. Tablas comodas (PC) */
.hcc-tabla-scroll { overflow: auto; max-height: calc(100vh - 290px); min-height: 160px; border: 1px solid var(--hcc-borde);
                    border-radius: 12px; background: var(--hcc-fondo-tarjeta); }
.hcc-tabla-scroll .cierre-tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--hcc-fondo-suave); }
.hcc-tabla-scroll .cierre-tabla tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--hcc-fondo-suave); }
.cierre-tabla tbody tr:nth-child(even) td { background: rgba(148, 163, 184, .06); }
.cierre-tabla tbody tr:hover td { background: rgba(37, 99, 235, .07); }
tr[data-oculta] { display: none !important; }
.hcc-th-orden { cursor: pointer; user-select: none; }
.hcc-th-orden:hover { color: var(--hcc-azul) !important; }
.hcc-th-orden i { font-size: 11px; margin-left: 2px; }
.hcc-orden-inactivo { opacity: .35; }

.hcc-tabla-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hcc-tabla-buscar { display: flex; align-items: center; gap: 8px; border: 1px solid var(--hcc-borde); border-radius: 10px;
                    padding: 6px 10px; background: var(--hcc-fondo-tarjeta); min-width: 240px; flex: 0 1 340px; }
.hcc-tabla-buscar i { color: var(--hcc-texto-suave); }
.hcc-tabla-buscar input { border: 0; outline: 0; background: transparent; width: 100%; color: inherit; font-size: 14px; }
.hcc-tabla-resumen { font-size: 13px; color: var(--hcc-texto-suave); }
.hcc-btn-excel { border: 1px solid #16A34A; color: #16A34A; background: transparent; border-radius: 10px; padding: 6px 12px;
                 font-weight: 700; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.hcc-btn-excel:hover { background: #16A34A; color: #fff; }

/* ---------------------------------------------------------------- 6. Tablas como tarjetas en el celular */
@media (max-width: 767.98px) {
    .hcc-tabla-scroll { max-height: none; border: 0; background: transparent; overflow: visible; }
    :is(table.cierre-tabla, table.table, .hcc-tarjetas table):not(.sin-tarjetas) thead { display: none; }
    :is(table.cierre-tabla, table.table, .hcc-tarjetas table):not(.sin-tarjetas), :is(table.cierre-tabla, table.table, .hcc-tarjetas table):not(.sin-tarjetas) tbody,
    :is(table.cierre-tabla, table.table, .hcc-tarjetas table):not(.sin-tarjetas) tfoot { display: block; width: 100%; }
    :is(table.cierre-tabla, table.table, .hcc-tarjetas table):not(.sin-tarjetas) tr { display: block; background: var(--hcc-fondo-tarjeta); border: 1px solid var(--hcc-borde);
        border-radius: 14px; padding: 8px 12px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(15, 23, 42, .05); }
    :is(table.cierre-tabla, table.table, .hcc-tarjetas table):not(.sin-tarjetas) tbody tr:nth-child(even) td,
    :is(table.cierre-tabla, table.table, .hcc-tarjetas table):not(.sin-tarjetas) tbody tr:hover td { background: transparent; }
    :is(table.cierre-tabla, table.table, .hcc-tarjetas table):not(.sin-tarjetas) td { display: flex; justify-content: space-between; align-items: center; gap: 12px;
        border: 0 !important; border-bottom: 1px dashed var(--hcc-borde) !important; padding: 6px 0 !important; text-align: right; }
    :is(table.cierre-tabla, table.table, .hcc-tarjetas table):not(.sin-tarjetas) td:last-child { border-bottom: 0 !important; }
    :is(table.cierre-tabla, table.table, .hcc-tarjetas table):not(.sin-tarjetas) td::before { content: attr(data-label); font-size: 11px; font-weight: 700; text-transform: uppercase;
        letter-spacing: .04em; color: var(--hcc-texto-suave); text-align: left; flex-shrink: 0; max-width: 45%; }
    :is(table.cierre-tabla, table.table, .hcc-tarjetas table):not(.sin-tarjetas) td[data-label=""]::before { content: none; }
    :is(table.cierre-tabla, table.table, .hcc-tarjetas table):not(.sin-tarjetas) td[data-label=""] { justify-content: flex-end; }
    /* La primera celda (guia, documento, codigo) va como titulo de la tarjeta. */
    :is(table.cierre-tabla, table.table, .hcc-tarjetas table):not(.sin-tarjetas) tbody td:first-child { font-size: 16px; font-weight: 800; justify-content: flex-start; }
    :is(table.cierre-tabla, table.table, .hcc-tarjetas table):not(.sin-tarjetas) tbody td:first-child::before { content: none; }
    :is(table.cierre-tabla, table.table, .hcc-tarjetas table):not(.sin-tarjetas) tfoot tr { background: var(--hcc-fondo-suave); }
}

/* ---------------------------------------------------------------- 2. Menu compacto (solo iconos) */
.pl-compacto .pl-nav-texto, .pl-compacto .pl-nav-section-title { display: none !important; }
.pl-compacto .pl-nav-item { justify-content: center; padding: 10px 6px; }
.pl-compacto .pl-nav-item:hover { transform: none; }
.pl-compacto .pl-logout-btn { justify-content: center; font-size: 0; }
.pl-compacto .pl-logout-btn .icon { font-size: 15px; }
.pl-nav-separador { height: 1px; background: rgba(255, 255, 255, .18); margin: 10px 8px; }
.hcc-logo-compacto { width: 40px; height: 40px; border-radius: 10px; background: #fff; padding: 3px; }
.hcc-btn-compactar { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 16px); margin: 4px 8px 12px;
    border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; border-radius: 10px; padding: 6px;
    font-size: 12px; font-weight: 700; cursor: pointer; }
.hcc-btn-compactar:hover { background: rgba(255, 255, 255, .18); }

/* ---------------------------------------------------------------- 3. Barra de arriba: ruta y buscador de guia */
.hcc-ruta { display: flex; align-items: center; gap: 6px; color: #fff; min-width: 0; font-size: 15px; }
.hcc-ruta .hcc-ruta-grupo { opacity: .7; font-weight: 500; white-space: nowrap; }
.hcc-ruta .hcc-ruta-sep { opacity: .5; }
.hcc-ruta .hcc-ruta-titulo { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcc-buscador-global { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px; padding: 4px 6px 4px 12px; margin: 0 8px; }
.hcc-buscador-global input { background: transparent; border: 0; outline: 0; color: #fff; width: 170px; font-size: 14px; }
.hcc-buscador-global input::placeholder { color: rgba(255, 255, 255, .7); }
.hcc-buscador-global .hcc-btn-camara { width: 30px; height: 30px; background: rgba(255, 255, 255, .18); color: #fff; border: 0; }
@media (max-width: 599.98px) {
    .hcc-buscador-global { display: none; }
    .hcc-ruta .hcc-ruta-grupo, .hcc-ruta .hcc-ruta-sep { display: none; }
}

/* ---------------------------------------------------------------- 5. Fichas de resumen */
.hcc-fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.hcc-ficha { display: flex; align-items: center; gap: 12px; background: var(--hcc-fondo-tarjeta); border: 1px solid var(--hcc-borde);
    border-left: 4px solid var(--ficha-color); border-radius: 14px; padding: 12px 14px; box-shadow: 0 2px 8px rgba(15, 23, 42, .04); }
.hcc-ficha-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; flex-shrink: 0;
    color: var(--ficha-color); background: color-mix(in srgb, var(--ficha-color) 14%, transparent); }
.hcc-ficha-tit { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--hcc-texto-suave); }
.hcc-ficha-val { font-size: 20px; font-weight: 800; line-height: 1.2; }
.hcc-ficha-det { font-size: 12px; color: var(--hcc-texto-suave); }
@media (max-width: 599.98px) {
    .hcc-fichas { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .hcc-ficha { padding: 10px; gap: 8px; }
    .hcc-ficha-ico { width: 32px; height: 32px; font-size: 16px; }
    .hcc-ficha-val { font-size: 16px; }
}

/* ---------------------------------------------------------------- 10. Silueta de carga y estado vacio */
.hcc-esqueleto { background: var(--hcc-fondo-tarjeta); border: 1px solid var(--hcc-borde); border-radius: 12px; padding: 10px 14px; }
.hcc-esqueleto-fila { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; padding: 6px 0;
    border-bottom: 1px solid var(--hcc-borde); }
.hcc-esqueleto-fila:last-child { border-bottom: 0; }
.hcc-vacio { text-align: center; padding: 34px 16px; color: var(--hcc-texto-suave); background: var(--hcc-fondo-tarjeta);
    border: 1px dashed var(--hcc-borde); border-radius: 14px; }
.hcc-vacio > i { font-size: 38px; display: block; margin-bottom: 6px; opacity: .55; }
.hcc-vacio-tit { font-weight: 800; font-size: 16px; color: inherit; }
.hcc-vacio-det { font-size: 13px; margin-top: 2px; }

/* ---------------------------------------------------------------- 11. Estado de la guia (mismo color en todo el sistema) */
.hcc-estado { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
    border: 1px solid transparent; }
.hcc-estado.digitada { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }
.hcc-estado.bodega { background: #DBEAFE; color: #1E40AF; }
.hcc-estado.transito { background: #FFEDD5; color: #9A3412; }
.hcc-estado.entregada { background: #DCFCE7; color: #166534; }
.hcc-estado.devuelta { background: #EDE9FE; color: #5B21B6; }
.hcc-estado.anulada { background: #FEE2E2; color: #991B1B; }
html.modo-oscuro .hcc-estado.digitada { background: #1E293B; color: #CBD5E1; border-color: #334155; }
html.modo-oscuro .hcc-estado.bodega { background: #172554; color: #93C5FD; }
html.modo-oscuro .hcc-estado.transito { background: #431407; color: #FDBA74; }
html.modo-oscuro .hcc-estado.entregada { background: #052E16; color: #86EFAC; }
html.modo-oscuro .hcc-estado.devuelta { background: #2E1065; color: #C4B5FD; }
html.modo-oscuro .hcc-estado.anulada { background: #450A0A; color: #FCA5A5; }

/* ---------------------------------------------------------------- 8. Camara y botones tactiles */
.hcc-btn-camara { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--hcc-borde); background: var(--hcc-fondo-tarjeta);
    color: var(--hcc-azul); font-size: 18px; display: inline-grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.hcc-btn-camara:disabled { opacity: .4; cursor: default; }
.hcc-camara { position: fixed; inset: 0; z-index: 3000; background: rgba(2, 6, 23, .92); display: grid; place-items: center; }
.hcc-camara-caja { position: relative; width: min(92vw, 520px); }
.hcc-camara video { width: 100%; border-radius: 16px; background: #000; display: block; min-height: 240px; }
.hcc-camara-guia { position: absolute; left: 10%; right: 10%; top: 38%; height: 24%; border: 3px solid #FACC15; border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .25); pointer-events: none; }
.hcc-camara-msg { color: #fff; text-align: center; margin: 12px 0; font-size: 15px; }
.hcc-camara-cerrar { display: block; margin: 0 auto; border: 0; border-radius: 999px; padding: 10px 22px; font-weight: 700; background: #fff; color: #0F172A; }
@media (max-width: 959.98px) {
    .mud-main-content .form-control, .mud-main-content .panel-modal-select, .mud-main-content input[type="text"],
    .mud-main-content input[type="search"], .mud-main-content input[type="date"] { min-height: 44px; font-size: 16px; }
    .mud-main-content .mud-button-root { min-height: 40px; }
    .mud-main-content .dash-btn { padding: 11px 16px; }
}

/* ---------------------------------------------------------------- 7. Barra de abajo en el celular */
.hcc-nav-movil { display: none; }
@media (max-width: 959.98px) {
    .hcc-nav-movil { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300;
        height: calc(var(--hcc-alto-barra-movil) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
        background: #172554; box-shadow: 0 -4px 16px rgba(2, 6, 23, .25); }
    .hcc-nav-movil a, .hcc-nav-movil button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        color: rgba(255, 255, 255, .75); text-decoration: none; font-size: 11px; font-weight: 600; background: transparent; border: 0; }
    .hcc-nav-movil i { font-size: 20px; }
    .hcc-nav-movil a.active { color: #FACC15; }
    body:has(.hcc-nav-movil) .mud-main-content { padding-bottom: calc(var(--hcc-alto-barra-movil) + 12px + env(safe-area-inset-bottom)) !important; }
}

/* ---------------------------------------------------------------- 4. Ayuda de atajos */
.hcc-ayuda-atajos { position: fixed; inset: 0; z-index: 3000; background: rgba(2, 6, 23, .45); display: grid; place-items: center; }
.hcc-ayuda-caja { background: var(--hcc-fondo-tarjeta); color: inherit; border-radius: 16px; padding: 18px 22px; min-width: 300px;
    box-shadow: 0 20px 50px rgba(2, 6, 23, .35); border: 1px solid var(--hcc-borde); }
html.modo-oscuro .hcc-ayuda-caja { color: #E2E8F0; }
.hcc-ayuda-caja table { margin: 10px 0; }
.hcc-ayuda-caja td { padding: 4px 10px 4px 0; font-size: 14px; }
.hcc-ayuda-caja kbd { background: #1D4ED8; color: #fff; border-radius: 6px; padding: 2px 7px; font-size: 12px; }
.hcc-ayuda-caja small { color: var(--hcc-texto-suave); }

/* ---------------------------------------------------------------- 9. Avisos de la app (sin internet / version nueva) */
.hcc-aviso-app { position: fixed; left: 50%; transform: translateX(-50%); top: 72px; z-index: 2500; padding: 10px 16px; border-radius: 12px;
    color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 10px 30px rgba(2, 6, 23, .3); display: flex; gap: 10px; align-items: center;
    max-width: calc(100vw - 24px); }
.hcc-aviso-app.rojo { background: #B91C1C; }
.hcc-aviso-app.verde { background: #15803D; }
.hcc-aviso-app.azul { background: #1D4ED8; }
.hcc-aviso-app button { border: 0; border-radius: 999px; padding: 5px 14px; font-weight: 700; background: #fff; color: #0F172A; }


/* =====================================================================================================
   2026-10-02 (j): lo mismo para los demas proyectos (menu con GrupoMenu.razor, tablas sin barra propia).
   ===================================================================================================== */
/* Encabezado fijo en cualquier tabla larga dentro de su cuadro con scroll (solo PC). */
@media (min-width: 768px) {
    .mud-main-content div[style*="overflow-x:auto"]:has(> table.cierre-tabla),
    .mud-main-content div[style*="overflow-x: auto"]:has(> table.cierre-tabla) { max-height: calc(100vh - 250px); overflow-y: auto; }
    .mud-main-content div[style*="overflow-x:auto"] > table.cierre-tabla thead th,
    .mud-main-content div[style*="overflow-x: auto"] > table.cierre-tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--hcc-fondo-suave); }
}

/* Menu compacto (solo iconos) del menu con grupos: el texto de cada opcion se oculta con font-size 0. */
.hcc-menu-compacto .pl-nav-item, .hcc-menu-compacto .pl-logout-btn { font-size: 0 !important; justify-content: center; padding: 10px 6px !important; gap: 0 !important; }
.hcc-menu-compacto .pl-nav-item .icon, .hcc-menu-compacto .pl-logout-btn .icon { font-size: 17px !important; margin: 0 !important; }
.hcc-menu-compacto .pl-nav-item:hover { transform: none; }
.hcc-menu-compacto .pl-nav-grupo { font-size: 0; height: 1px; padding: 0; margin: 10px 8px; background: rgba(255, 255, 255, .18); pointer-events: none; }
.hcc-menu-compacto .pl-nav-grupo-flecha { display: none; }
.hcc-menu-compacto .pl-nav-grupo-items { display: block !important; animation: none; }
.hcc-menu-compacto .pl-nav-section-title, .hcc-menu-compacto .sel-empresa { display: none !important; }

/* Ruta de arriba armada desde el menu (wwwroot/js/ui-hcc.js pone data-grupo / data-titulo). */
.hcc-ruta-auto { display: flex; align-items: center; gap: 6px; color: #fff; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; }
.hcc-ruta-auto::before { content: attr(data-grupo); opacity: .7; font-weight: 500; }
.hcc-ruta-auto[data-grupo]:not([data-grupo=""])::before { content: attr(data-grupo) "  ›"; }
.hcc-ruta-auto::after { content: attr(data-titulo); font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 599.98px) { .hcc-ruta-auto::before { display: none; } }

/* Busqueda flotante (F4) para tablas sin barra propia. */
.hcc-buscar-flotante { position: fixed; top: 76px; right: 18px; z-index: 2400; display: flex; align-items: center; gap: 8px;
    background: var(--hcc-fondo-tarjeta); border: 1px solid var(--hcc-borde); border-radius: 12px; padding: 8px 10px;
    box-shadow: 0 12px 32px rgba(2, 6, 23, .25); }
html.modo-oscuro .hcc-buscar-flotante { color: #E2E8F0; }
.hcc-buscar-flotante input { border: 0; outline: 0; background: transparent; color: inherit; width: 240px; font-size: 14px; }
.hcc-buscar-flotante button { border: 0; background: transparent; color: var(--hcc-texto-suave); font-size: 16px; padding: 2px 6px; cursor: pointer; }
.hcc-buscar-flotante button:first-of-type { color: #16A34A; }

/* Boton de camara dentro de cajas de busqueda con estilo propio (rastreo internacional). */
.rst-caja .hcc-btn-camara { background: transparent; color: var(--hcc-azul); border: 1px solid var(--hcc-borde); padding: 0; width: 38px; height: 38px; }

/* 2026-10-05 (k, pedido de Jorge): en modo claro no se veian los botones de imprimir (el "Reporte (PDF)" de arriba y el
   icono de la impresora de cada fila): tomaban el color de texto del tema y quedaban casi blancos sobre fondo claro.
   Se les fija el color en modo claro; el modo oscuro no cambia. */
html:not(.modo-oscuro) .mud-main-content .mud-button-outlined.mud-button-outlined-default { color: #0F172A !important; border-color: #94A3B8 !important; }
html:not(.modo-oscuro) .mud-main-content .mud-button-outlined.mud-button-outlined-default .mud-icon-root { color: #1D4ED8 !important; }
html:not(.modo-oscuro) .mud-main-content .mud-button-outlined.mud-button-outlined-default:hover { background: #EEF3FF !important; }
html:not(.modo-oscuro) .cierre-tabla td a:not([style*="color"]):not(.mud-button-root),
html:not(.modo-oscuro) .table td a:not([style*="color"]):not(.mud-button-root) { color: #1D4ED8; }
html:not(.modo-oscuro) .cierre-tabla td a .bi-printer, html:not(.modo-oscuro) .table td a .bi-printer { font-size: 16px; }