/* ============================================================
   HORIZONTE GLOBAL — Estilos de gerencia y área del cliente
   /public/assets/css/hg.css

   Primero el celular. Nada de tablas anchas: tarjetas apiladas.
   Sin degradados ni sombras decorativas. Espacio en blanco antes
   que líneas divisorias.

   Sistema de color: la marca (tinta + sol) manda en cabecera,
   botones y títulos. Junto a ella hay un tono fijo por SIGNIFICADO
   de dato, igual en toda la plataforma, para que el trabajador
   identifique qué es qué sin leer el texto:
     · cielo  → informativo / nuevo
     · exito  → precio de venta, confirmado, lo más barato
     · sol    → en curso / requiere atención
     · alerta → vencido, perdido, caro
     · interno→ dato que NO ve el cliente (costo, margen, proveedor)
   Cada uno trae su versión "fondo" (pastel, para tarjetas y cajas)
   y "texto" (con contraste suficiente sobre ese fondo).
   ============================================================ */

   :root{
    --tinta:#0E3057;   /* azul noche — marca */
    --sol:#E39B10;     /* ámbar — marca */
    --papel:#fff;
    --suave:#F4F6F8;
    --gris:#5C6672;
    --linea:#E2E6EA;
    --radio:10px;
  
    /* informativo / nuevo */
    --cielo:#1E7FB8;
    --cielo-fondo:#E5F2FA;
    --cielo-texto:#0C4C6E;
  
    /* precio de venta, confirmado, más barato */
    --exito:#12603C;
    --exito-fondo:#E8F3ED;
    --exito-texto:#12603C;
    --exito-borde:#BEE0CC;
  
    /* en curso / requiere atención (comparte tono con --sol) */
    --sol-fondo:#FDF0D5;
    --sol-texto:#7A5200;
  
    /* vencido, perdido, caro */
    --alerta:#B4231C;
    --alerta-fondo:#FBE9E7;
    --alerta-texto:#8A1A15;
  
    /* solo uso interno — nunca lo ve el cliente */
    --interno-fondo:#FFF8EC;
    --interno-texto:#8A6200;
    --interno-texto-fuerte:#6B4E00;
  }
  
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;overflow-x:hidden;background:var(--papel);color:var(--tinta);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;height:auto}
  a{color:inherit}
  h1,h2,h3{letter-spacing:-.01em}
  
  .hg-wrap{width:100%;max-width:560px;margin:0 auto;padding:0 20px}
  
  /* Barra superior */
  .hg-barra{background:var(--tinta);color:#fff;border-bottom:2px solid var(--sol)}
  .hg-barra .hg-wrap{display:flex;align-items:center;gap:14px;min-height:56px}
  .hg-barra p{margin:0;font-size:13px;letter-spacing:.2em;font-weight:600;flex:1}
  .hg-barra a{color:#C3D0DD;text-decoration:none;font-size:14px}
  
  /* Bloques */
  .hg-seccion{padding:28px 0 96px}
  .hg-titulo{font-size:21px;font-weight:600;margin:0 0 4px}
  .hg-sub{color:var(--gris);font-size:14px;margin:0 0 22px}
  
  .hg-tarjeta{border:1px solid var(--linea);border-radius:var(--radio);padding:16px;margin-bottom:14px}
  .hg-tarjeta h3{font-size:17px;font-weight:600;margin:0 0 2px}
  .hg-tarjeta p{margin:0;color:var(--gris);font-size:14px}
  .hg-dato{list-style:none;padding:0;margin:12px 0 0;font-size:15px}
  .hg-dato li{padding:6px 0;border-top:1px solid var(--linea)}
  .hg-dato li:first-child{border-top:0}
  
  /* Tarjeta con un acento de color a la izquierda, según su significado.
     Un solo modificador por tarjeta: el color dice de un vistazo de qué
     se trata sin tener que leer el rótulo. */
  .hg-tarjeta.es-exito{border-left:3px solid var(--exito)}
  .hg-tarjeta.es-sol{border-left:3px solid var(--sol)}
  .hg-tarjeta.es-cielo{border-left:3px solid var(--cielo)}
  .hg-tarjeta.es-alerta{border-left:3px solid var(--alerta)}
  
  /* El precio que ve el cliente: siempre en verde y grande, para que se
     distinga de cualquier otro número de la pantalla a simple vista. */
  .hg-monto{font-size:22px;font-weight:700;margin:10px 0 0;color:var(--exito)}
  .hg-monto small{display:block;font-size:13px;font-weight:400;color:var(--gris);margin-top:2px}
  
  .hg-precio-panel{background:var(--suave);border-radius:var(--radio);padding:14px 16px;margin:10px 0 12px}
  .hg-precio-venta{display:block;font-size:28px;font-weight:800;color:var(--exito);
    font-variant-numeric:tabular-nums;line-height:1.15}
  .hg-precio-pax{display:block;margin-top:2px;font-size:13px;color:var(--gris);font-weight:600}
  .hg-precio-chip{display:inline-block;background:var(--exito);color:#fff;font-weight:700;
    font-size:12px;padding:2px 8px;border-radius:999px;margin-left:6px;
    font-variant-numeric:tabular-nums}
  
  /* Todo lo que es solo para uso interno (costo, margen, proveedor) queda
     marcado con el mismo tono ámbar-tierra en cualquier pantalla, para que
     un operador aprenda una sola vez "ese color = no se lo digo al cliente". */
  .hg-costo-interno{background:var(--interno-fondo);border-radius:10px;padding:10px 12px;
    margin-top:10px;font-size:13px;color:var(--interno-texto-fuerte)}
  .hg-costo-interno b{color:var(--interno-texto);text-transform:uppercase;font-size:11px;
    letter-spacing:.06em;display:block;margin-bottom:3px;font-weight:700}
  .hg-costo-interno span{display:block;margin-top:2px}
  .hg-interno-mini{display:block;color:var(--interno-texto);font-size:13px;margin-top:2px}
  .hg-margen-bajo{color:var(--alerta);font-weight:700}
  
  /* Insignias cortas sobre una tarjeta (elegida, recomendada, más barata…).
     Distintas de .hg-estado: aquí puede haber más de una a la vez. */
  .hg-badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
  .hg-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;
    letter-spacing:.03em;padding:4px 10px;border-radius:999px;line-height:1.3}
  .hg-badge-exito{background:var(--exito);color:#fff}
  .hg-badge-exito-suave{background:var(--exito-fondo);color:var(--exito-texto);border:1px solid var(--exito-borde)}
  .hg-badge-sol{background:var(--sol);color:#3A2900}
  .hg-badge-cielo{background:var(--cielo-fondo);color:var(--cielo-texto)}
  .hg-badge-alerta{background:var(--alerta-fondo);color:var(--alerta-texto)}
  
  /* Estados de un pedido/cotización: un color fijo por etapa */
  .hg-estado{
    display:inline-block;padding:3px 10px;border-radius:20px;
    font-size:12px;font-weight:600;letter-spacing:.02em;
    background:var(--suave);color:var(--gris)
  }
  .hg-estado.es-nueva{background:var(--cielo-fondo);color:var(--cielo-texto)}
  .hg-estado.es-sin_ruta{background:var(--sol-fondo);color:var(--sol-texto)}
  .hg-estado.es-cotizada,.hg-estado.es-enviada{background:var(--sol);color:#3A2900}
  .hg-estado.es-aceptada,.hg-estado.es-facturada{background:var(--exito);color:#fff}
  .hg-estado.es-vencida{background:var(--suave);color:var(--gris)}
  .hg-estado.es-perdida{background:var(--alerta-fondo);color:var(--alerta-texto)}
  
  /* Formularios */
  .hg-campo{margin-bottom:16px}
  .hg-campo label{display:block;font-size:13px;color:var(--gris);margin-bottom:6px}
  .hg-campo input,.hg-campo select,.hg-campo textarea{
    width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:16px;
    color:var(--tinta);background:var(--papel);
    border:1px solid var(--linea);border-radius:var(--radio)
  }
  .hg-campo textarea{min-height:96px;resize:vertical}
  .hg-campo input:focus,.hg-campo select:focus,.hg-campo textarea:focus{
    outline:2px solid var(--sol);outline-offset:1px;border-color:transparent
  }
  .hg-codigo-campo{letter-spacing:.4em;font-size:22px;text-align:center}
  
  .hg-btn{
    display:flex;align-items:center;justify-content:center;
    width:100%;min-height:52px;padding:14px 18px;border:0;border-radius:var(--radio);
    background:var(--tinta);color:#fff;font:inherit;font-size:17px;font-weight:600;
    cursor:pointer;text-decoration:none
  }
  .hg-btn:active{background:#092440}
  .hg-btn-sol{background:var(--sol);color:#20180A}
  .hg-btn-sol:active{background:#C98B0E}
  .hg-btn-exito{background:var(--exito);color:#fff}
  .hg-btn-exito:active{background:#0D4C30}
  .hg-btn-linea{background:transparent;color:var(--tinta);border:1px solid var(--linea)}
  .hg-btn-chico{min-height:44px;font-size:15px;width:auto;padding:0 16px;display:inline-flex}
  .hg-acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  
  .hg-msg{display:block;color:var(--alerta);font-size:14px;margin:-8px 0 14px}
  .hg-vacio{color:var(--gris);font-size:15px}
  .hg-aparte{position:absolute;left:-9999px}
  
  /* Filtros */
  .hg-filtros{display:flex;gap:8px;overflow-x:auto;padding:0 0 16px;-webkit-overflow-scrolling:touch}
  .hg-filtros a{
    flex:none;padding:9px 14px;border:1px solid var(--linea);border-radius:20px;
    font-size:14px;text-decoration:none;color:var(--gris);white-space:nowrap
  }
  .hg-filtros a[aria-current]{background:var(--tinta);border-color:var(--tinta);color:#fff}
  
  @media (min-width:768px){
    .hg-wrap{max-width:860px}
    .hg-lista{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .hg-tarjeta{margin-bottom:0}
    .hg-btn{width:auto;min-width:260px}
  }
  @media (min-width:1200px){
    .hg-wrap{max-width:1100px}
    .hg-lista{grid-template-columns:repeat(3,1fr)}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}