/* =====================================================================
   HCC UI · sistema de diseño "A · Ruta del día" (2026-09-26)
   Archivo COMPARTIDO: la misma copia va en PanelHCCWeb, RecoleccionesWeb,
   FacturacionWeb, PortalLogistica y SistemaTransportWeb (wwwroot/css/hcc-ui.css).
   Si se cambia aqui, copiarlo igual a los otros proyectos.
   Se carga DESPUES de los estilos propios de cada proyecto para unificar:
   tipografia, colores, bordes redondeados, tarjetas, botones y campos.
   Modo oscuro: html.modo-oscuro (lo activa el boton luna/sol donde exista).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --hcc-fuente: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hcc-fondo: #F4F6FB;
    --hcc-superficie: #FFFFFF;
    --hcc-superficie-2: #F1F4F9;
    --hcc-texto: #0E1B3D;
    --hcc-texto-2: #3A4666;
    --hcc-muted: #5B6784;
    --hcc-linea: #E3E8F2;
    --hcc-navy: #172554;
    --hcc-navy-2: #111A2E;
    --hcc-azul: #1D4ED8;
    --hcc-azul-suave: #E0E7FF;
    --hcc-naranja: #C2410C;
    --hcc-naranja-suave: #FFEDD5;
    --hcc-verde: #15803D;
    --hcc-verde-suave: #DCFCE7;
    --hcc-rojo: #B91C1C;
    --hcc-rojo-suave: #FEE2E2;
    --hcc-amarillo: #FACC15;
    --hcc-radio: 20px;
    --hcc-radio-sm: 14px;
    --hcc-sombra: 0 6px 20px rgba(23,37,84,.08);
    --hcc-sombra-lg: 0 10px 30px rgba(23,37,84,.12);
}
html.modo-oscuro {
    --hcc-fondo: #0B1220;
    --hcc-superficie: #16213A;
    --hcc-superficie-2: #111A2E;
    --hcc-texto: #E6EBF5;
    --hcc-texto-2: #C3CCE0;
    --hcc-muted: #9AA8C7;
    --hcc-linea: #26334F;
    --hcc-navy: #111A2E;
    --hcc-azul: #3B82F6;
    --hcc-azul-suave: #1E3A8A;
    --hcc-naranja: #FB923C;
    --hcc-naranja-suave: #4A2A16;
    --hcc-verde: #22C55E;
    --hcc-verde-suave: #14532D;
    --hcc-rojo: #F87171;
    --hcc-rojo-suave: #7F1D1D;
    --hcc-sombra: none;
    --hcc-sombra-lg: none;
}

/* ---------- Base ---------- */
html, body { font-family: var(--hcc-fuente) !important; }
body { background: var(--hcc-fondo) !important; color: var(--hcc-texto); }
.mud-typography, .mud-button-root, .mud-input, .mud-input-label, .mud-table, .mud-select, .mud-chip,
.mud-snackbar, .mud-alert, .btn, .form-control, .form-select, input, select, textarea, button {
    font-family: var(--hcc-fuente) !important;
}
.mud-main-content { background: var(--hcc-fondo) !important; }
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { font-weight: 800 !important; letter-spacing: -.01em; color: var(--hcc-texto); }
.mud-typography-h4 { font-size: 1.75rem !important; }

/* Barra superior y tarjetas */
.mud-appbar { background: var(--hcc-navy) !important; box-shadow: none !important; }
.mud-main-content .mud-paper { border-radius: var(--hcc-radio) !important; box-shadow: var(--hcc-sombra) !important;
                               border: 1px solid var(--hcc-linea); background: var(--hcc-superficie) !important; }
.mud-main-content .mud-paper.mud-elevation-0 { box-shadow: none !important; }

/* Botones: esquinas redondeadas y zona de toque de 44px */
.mud-button-root.mud-button { border-radius: var(--hcc-radio-sm) !important; text-transform: none !important;
                              font-weight: 700 !important; letter-spacing: 0 !important; min-height: 40px; }
.mud-button-root.mud-button-size-small { min-height: 36px; border-radius: 12px !important; }
.btn { border-radius: var(--hcc-radio-sm); font-weight: 700; }

/* Campos */
.mud-input-outlined-border { border-radius: 12px !important; }
.form-control, .form-select { border-radius: 12px; }

/* Tablas */
.mud-table { border-radius: var(--hcc-radio) !important; }
.mud-table-head .mud-table-cell { font-weight: 800 !important; color: var(--hcc-muted) !important; font-size: 12px !important;
                                   text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Componentes HCC (usados por el Inicio del Panel HCC) ---------- */
.hcc-hero { background: var(--hcc-navy); color: #fff; border-radius: 24px; padding: 20px 20px 64px; margin-bottom: -44px; }
.hcc-hero-fila { display: flex; justify-content: space-between; align-items: center; }
.hcc-marca { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--hcc-amarillo); }
.hcc-hola { margin: 12px 0 0; font-size: 26px; font-weight: 800; line-height: 1.15; color: #fff; }
.hcc-fecha { font-size: 14px; color: #C7D2FE; margin-top: 4px; }
.hcc-btn-icono { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
                 color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; text-decoration: none; }
.hcc-btn-icono.claro { border: 1px solid var(--hcc-linea); background: var(--hcc-superficie-2); color: var(--hcc-azul); width: 48px; height: 48px; border-radius: var(--hcc-radio-sm); }
.hcc-gira { display: inline-block; animation: hcc-gira .9s linear infinite; }
@keyframes hcc-gira { to { transform: rotate(360deg); } }

.hcc-inicio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 12px; position: relative; }
@media (min-width: 960px) {
    .hcc-inicio { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; padding: 0 20px; }
    .hcc-inicio .hcc-admin { grid-column: 1 / -1; }
}
.hcc-card { background: var(--hcc-superficie); border: 1px solid var(--hcc-linea); border-radius: var(--hcc-radio); padding: 18px;
            box-shadow: var(--hcc-sombra); color: var(--hcc-texto); }
.hcc-dia { box-shadow: var(--hcc-sombra-lg); display: flex; flex-direction: column; gap: 14px; }
.hcc-card-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hcc-etiqueta { font-size: 12px; font-weight: 800; color: var(--hcc-muted); text-transform: uppercase; letter-spacing: .06em; }
.hcc-etiqueta.azul { color: var(--hcc-azul); }
.hcc-muted { font-size: 14px; color: var(--hcc-muted); line-height: 1.45; }
.hcc-mini { font-size: 12px; color: var(--hcc-muted); }
.hcc-sub { font-size: 13px; font-weight: 800; color: var(--hcc-texto-2); margin-bottom: 4px; }
.hcc-avance { display: flex; flex-direction: column; gap: 6px; text-decoration: none !important; color: var(--hcc-texto) !important; }
.hcc-avance-txt { display: flex; justify-content: space-between; font-size: 14px; }
.hcc-barra { height: 10px; border-radius: 5px; background: var(--hcc-linea); overflow: hidden; }
.hcc-barra > div { height: 100%; border-radius: 5px; transition: width .4s; }
.hcc-barra > .azul { background: var(--hcc-azul); }
.hcc-barra > .naranja { background: var(--hcc-naranja); }
.hcc-cobrado { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--hcc-linea); }
.hcc-monto { font-size: 22px; font-weight: 800; white-space: nowrap; }
.hcc-siguiente { border: 2px solid var(--hcc-azul); display: flex; flex-direction: column; gap: 8px; }
.hcc-sig-nombre { font-size: 18px; font-weight: 800; }
.hcc-sig-acciones { display: flex; gap: 10px; margin-top: 6px; }
.hcc-btn { height: 48px; border-radius: var(--hcc-radio-sm); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center;
           justify-content: center; gap: 8px; text-decoration: none !important; padding: 0 18px; border: 0; cursor: pointer; }
.hcc-btn-primario { flex-grow: 1; background: var(--hcc-azul); color: #fff !important; }
.hcc-btn-primario:hover { filter: brightness(1.08); }
.hcc-listo { display: flex; gap: 12px; align-items: center; }
.hcc-listo > i { font-size: 28px; color: var(--hcc-verde); }
.hcc-accesos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hcc-acceso { display: flex; flex-direction: column; gap: 8px; text-decoration: none !important; color: var(--hcc-texto) !important; box-shadow: none; }
.hcc-acceso:hover { border-color: var(--hcc-azul); }
.hcc-acceso b { font-size: 15px; }
.hcc-acceso .hcc-muted { font-size: 13px; }
.hcc-ico { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.hcc-ico.azul { background: var(--hcc-azul-suave); color: var(--hcc-azul); }
.hcc-ico.naranja { background: var(--hcc-naranja-suave); color: var(--hcc-naranja); }
html.modo-oscuro .hcc-ico.azul { color: #BFDBFE; }
html.modo-oscuro .hcc-ico.naranja { color: #FED7AA; }
.hcc-enlace { font-size: 13px; font-weight: 700; color: var(--hcc-azul); text-decoration: none; }
.hcc-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 10px; }

/* ---------- Listas de Recolectas / Entregas (Panel HCC) como tarjetas ---------- */
.panel-lista { gap: 12px !important; }
.panel-item { background: var(--hcc-superficie) !important; border: 1px solid var(--hcc-linea) !important; border-left: 5px solid #EA580C !important;
              border-radius: var(--hcc-radio) !important; padding: 16px !important; box-shadow: var(--hcc-sombra); }
.panel-item.hecho { border-left-color: var(--hcc-verde) !important; }
.panel-item.devuelta { border-left-color: var(--hcc-rojo) !important; }
.panel-item-titulo { font-size: 16px; font-weight: 800 !important; color: var(--hcc-texto) !important; }
.panel-item-sub { color: var(--hcc-muted) !important; }
.panel-chip { font-weight: 800 !important; padding: 5px 10px !important; }
@media (max-width: 700px) {
    /* En el celular las acciones ocupan todo el ancho, con botones grandes. */
    .panel-item-acciones { width: 100%; display: flex !important; flex-wrap: wrap; gap: 10px !important; }
    .panel-item-acciones .panel-chip { flex: 0 0 100%; max-width: max-content; }
    .panel-item-acciones .mud-button-root { flex: 1 1 40%; min-height: 50px; font-size: 15px !important; }
}

/* En modo oscuro el borde de color de las tarjetas conserva su grosor. */
html.modo-oscuro .panel-item { border-left-width: 5px !important; }