/*
 * ============================================================================
 *  PALETA Y TIPOGRAFÍA — CONTRATO DE FIDELIDAD VISUAL
 * ============================================================================
 *
 *  Todos los valores de este bloque están MEDIDOS EN VIVO sobre la aplicación
 *  actual en producción (https://haulers.kargotools.com/tpl/maritime) con el
 *  inspector del navegador, leyendo estilos computados. No son una
 *  interpretación ni una propuesta de diseño.
 *
 *  El cliente pidió expresamente que el operador NO note el cambio de
 *  plataforma: mismos menús, mismos colores, mismas tablas. Por eso:
 *
 *    NO "mejorar" estos valores sin pedirlo primero.
 *
 *  Si algo aquí parece anticuado (radios de 15px, azul marino saturado,
 *  ámbar sobre marino, cuerpo a 16px), es porque así está hoy y así lo
 *  reconoce la gente que trabaja con esto todos los días.
 *
 *  Excepciones deliberadas y acotadas, todas documentadas donde ocurren:
 *    1. Estados de foco visibles (la app actual no los tiene).
 *    2. El scroll horizontal vive dentro del contenedor, nunca en el body.
 *    3. No hay tema oscuro: la app actual no lo tiene y un operador con el
 *       sistema en oscuro vería una aplicación distinta a la de hoy.
 *    4. "alert-info" en producción es rojo (#EF0000) por un arrastre de
 *       plantilla; aquí se usa el cian #17A2B8 que la propia plantilla
 *       declara como borde. Un aviso informativo en rojo se lee como error.
 *
 *  Propshaft no concatena ni preprocesa: cada hoja se sirve tal cual y el
 *  layout las enlaza en orden (application, layout, grids). Por eso no hay
 *  @import; un @import se resolvería en el navegador contra una ruta sin
 *  digest.
 * ============================================================================
 */

/* ---------------------------------------------------------------------------
 * Tipografía vendorizada
 *
 * La app actual carga "Source Sans Pro" desde Google Fonts, con un @import a
 * fonts.googleapis.com declarado en app/assets/stylesheets/main.scss.
 * Aquí la CSP bloquea recursos externos, así que los .woff2 están
 * vendorizados en app/assets/stylesheets/fonts/ (subconjuntos latin y
 * latin-ext de la MISMA familia y versión que sirve producción, para que las
 * métricas coincidan exactamente). Licencia SIL Open Font License 1.1.
 *
 * Van bajo stylesheets/ y no bajo app/assets/fonts/ porque
 * config.assets.paths sólo incluye images, stylesheets y javascript: un
 * directorio nuevo requeriría tocar config/application.rb, que no es de esta
 * área. Propshaft reescribe estos url() a la ruta con digest.
 *
 * La CSP vigente ya permite font-src 'self', así que no requiere cambios.
 * --------------------------------------------------------------------------- */

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-sans-pro-400-latin-001513a5.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-sans-pro-400-latin-ext-0f2639c5.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/source-sans-pro-600-latin-61fb0ba9.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/source-sans-pro-600-latin-ext-472f091a.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-pro-700-latin-5d622c38.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-pro-700-latin-ext-dcd0cdea.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
 * Variables
 *
 * Nomenclatura: --hn-<cosa>-<matiz>. Los nombres antiguos (--fondo, --texto,
 * --acento, --esp-N, --texto-N) se conservan como alias al final del bloque
 * porque las hojas de shell y de grillas y las vistas ya construidas los
 * usan; ahora apuntan a la paleta de producción.
 * --------------------------------------------------------------------------- */

:root {
  /* No hay tema oscuro: la app actual no lo tiene. Ver excepción 3 arriba. */
  color-scheme: light;

  /* --- Marca (medido) ---------------------------------------------------- */
  --hn-marino: #041f41;        /* barra lateral y barra de título */
  --hn-ambar: #ffc21f;         /* subenlaces y títulos sobre marino */
  --hn-blanco: #ffffff;

  /* --- Lienzo (medido en body) ------------------------------------------ */
  --hn-fondo: #e9ecef;
  --hn-texto: #212529;

  /* --- Superficies (medido en .card / .form-control de producción) ------- */
  --hn-superficie: #ffffff;
  --hn-superficie-borde: rgba(0, 0, 0, 0.125);
  --hn-campo-borde: rgba(0, 0, 0, 0.15);
  --hn-campo-texto: #495057;
  --hn-tabla-borde: #dee2e6;
  --hn-boton-claro: #f8f9fa;
  --hn-gris: #6c757d;          /* .btn-secondary */

  /* --- Enlaces y avisos (medido) ---------------------------------------- */
  --hn-enlace: #0866c6;
  --hn-exito: #00a65a;
  --hn-peligro: #dd4b39;
  --hn-alerta: #f39c12;
  --hn-info: #17a2b8;          /* ver excepción 4 */
  --hn-naranja: #f49917;       /* tarjetas de resumen y badge-warning */

  /* --- Grilla (medido en Handsontable). Declaradas aquí para que exista una
         sola fuente de verdad; los estilos de Handsontable son de F3 y viven
         en handsontable_theme.css. --------------------------------------- */
  --hn-grilla-encabezado-fondo: #455a64;
  --hn-grilla-encabezado-texto: #ffffff;
  --hn-grilla-borde: #cccccc;
  --hn-grilla-celda-fondo: #ffffff;
  --hn-grilla-celda-texto: #373737;
  --hn-grilla-fila-alto: 42px;
  --hn-grilla-fuente-tamano: 13px;

  /* --- Tipografía (medido) ---------------------------------------------- */
  --hn-fuente: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* La etiqueta "MENÚ" de la barra usa Roboto en producción; sin Roboto
     vendorizado se cae a la misma pila, que a 10px y en mayúsculas es
     indistinguible. */
  --hn-fuente-etiqueta: var(--hn-fuente);
  --hn-fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  --hn-texto-xs: 0.6875rem;     /* 11px */
  --hn-texto-sm: 0.75rem;       /* 12px — insignias */
  --hn-texto-grilla: 0.8125rem; /* 13px — celdas, encabezados y subenlaces */
  --hn-texto-menu: 0.875rem;    /* 14px — enlaces de grupo */
  --hn-texto-base: 1rem;        /* 16px — cuerpo */
  --hn-texto-lg: 1.125rem;      /* 18px */
  --hn-texto-xl: 1.5rem;        /* 24px — título del panel */
  --hn-etiqueta-barra: 0.625rem;/* 10px — etiqueta "MENÚ" */

  /* --- Geometría (medido) ----------------------------------------------- */
  --hn-radio: 3px;             /* botones, campos, tarjetas */
  --hn-radio-grande: 15px;     /* .very-rounded: barra lateral y de título */
  --hn-sombra: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
  --hn-transicion: 0.2s ease-in-out;

  --hn-barra-colapsada: 60px;  /* .collapsed-menu .br-sideleft */
  --hn-barra-expandida: 230px; /* .expand-menu .br-sideleft */
  /* Carril que reserva el armazón: el riel de 60px más los 10px de separación
     con el borde de la ventana que tiene hoy (.br-sideleft margin: 10px). */
  --hn-barra-carril: 70px;
  --hn-alto-cabecera: 60px;    /* .br-logo / .main-title-container */
  --hn-alto-fila-menu: 40px;   /* .br-menu-item */

  --hn-foco: #0866c6;          /* foco sobre fondo claro */
  --hn-foco-inverso: #ffc21f;  /* foco sobre marino */

  /* --- Espaciado -------------------------------------------------------- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;

  /* --- Alias heredados -------------------------------------------------- *
   * Las hojas de shell y de grillas y las vistas de A2..A5 se escribieron
   * contra estos nombres. Se mantienen para no romperlas, pero ahora
   * apuntan a la paleta de producción. */
  --fuente: var(--hn-fuente);
  --fuente-mono: var(--hn-fuente-mono);

  --texto-xs: var(--hn-texto-xs);
  --texto-sm: var(--hn-texto-sm);
  --texto-md: var(--hn-texto-grilla);
  --texto-lg: var(--hn-texto-lg);
  --texto-xl: var(--hn-texto-xl);

  --radio: var(--hn-radio);
  --radio-lg: var(--hn-radio-grande);

  --fondo: var(--hn-fondo);
  --fondo-elevado: var(--hn-superficie);
  --fondo-hundido: #dee2e6;
  --fondo-tenue: #f1f3f5;
  --fondo-fila-alterna: #f7f8f9;
  --fondo-fila-activa: #e0f7fa;   /* lightcyan del hover de tabla legado */
  --fondo-destacado: #b3e5fc;     /* .handsontable .colored del legado */

  --borde: var(--hn-tabla-borde);
  --borde-suave: #e9ecef;

  --texto: var(--hn-texto);
  --texto-suave: #495057;
  --texto-tenue: #6c757d;
  --texto-invertido: #ffffff;

  --acento: var(--hn-marino);
  --acento-fuerte: #02142b;
  --acento-tenue: #e4e9f0;

  --ok: var(--hn-exito);
  --ok-tenue: #e4f5ec;
  --alerta: var(--hn-alerta);
  --alerta-tenue: #fdf3e2;
  --error: var(--hn-peligro);
  --error-tenue: #fbe9e7;
  --info: var(--hn-info);
  --info-tenue: #e3f4f7;

  --foco: var(--hn-foco);
  --sombra: 0 1px 2px rgba(16, 24, 32, 0.08);
  --sombra-media: var(--hn-sombra);

  --alto-barra: var(--hn-alto-cabecera);
  --ancho-nav: var(--hn-barra-expandida);
}

/* ---------------------------------------------------------------------------
 * Base
 * --------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Requisito: el ancho de una grilla no llega nunca al documento. El scroll
     horizontal vive dentro de .tabla-scroll (ver grids.css). */
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--hn-fondo);
  color: var(--hn-texto);
  font-family: var(--hn-fuente);
  font-size: var(--hn-texto-base);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--esp-2);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: var(--hn-texto-xl); }
h2 { font-size: 1.25rem; }
h3 { font-size: var(--hn-texto-lg); }
h4,
h5,
h6 { font-size: var(--hn-texto-base); }

p { margin: 0 0 var(--esp-3); }

/* Producción no subraya los enlaces. El subrayado al pasar el cursor y en el
   foco es un añadido de accesibilidad que no cambia el aspecto en reposo. */
a {
  color: var(--hn-enlace);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--hn-enlace);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

code,
kbd,
samp,
pre {
  font-family: var(--hn-fuente-mono);
  font-size: var(--hn-texto-grilla);
}

hr {
  border: 0;
  border-top: 1px solid var(--hn-tabla-borde);
  margin: var(--esp-4) 0;
}

img,
svg {
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * Foco visible
 *
 * Añadido respecto de la app actual, que no marca el foco en ninguna parte.
 * No altera el aspecto en reposo y cierra un incumplimiento de WCAG 2.4.7.
 * Sobre el marino de la barra lateral y de la barra de título el anillo pasa
 * a ámbar para conservar contraste.
 * --------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--hn-foco);
  outline-offset: 2px;
  border-radius: 2px;
}

.hn-sidebar :focus-visible,
.hn-topbar :focus-visible {
  outline-color: var(--hn-foco-inverso);
}

/* El anillo no debe recortarse contra el borde de un contenedor con scroll. */
.tabla-scroll :focus-visible {
  outline-offset: -1px;
}

/* ---------------------------------------------------------------------------
 * Utilidades
 * --------------------------------------------------------------------------- */

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: var(--esp-2) var(--esp-3);
  background: var(--hn-marino);
  color: var(--hn-blanco);
  border-radius: 0 0 var(--hn-radio) 0;
  font-weight: 600;
}

.salto-contenido:focus {
  left: 0;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Tarjetas y bloques
 * (equivale a .card de producción: blanco, borde tenue, radio 3px)
 * --------------------------------------------------------------------------- */

.tarjeta {
  background: var(--hn-superficie);
  border: 1px solid var(--hn-superficie-borde);
  border-radius: var(--hn-radio);
  padding: var(--esp-4);
}

.tarjeta__titulo {
  font-size: var(--hn-texto-base);
  font-weight: 700;
  margin: 0 0 var(--esp-2);
}

.rejilla-tarjetas {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin: 0 0 var(--esp-5);
  padding: 0;
  list-style: none;
}

.encabezado-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}

.encabezado-pagina p {
  margin: 0;
  color: var(--texto-suave);
}

.dato-secundario {
  color: var(--texto-suave);
  font-size: var(--hn-texto-grilla);
}

.lista-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-1) var(--esp-3);
  margin: 0;
}

.lista-datos dt {
  color: var(--texto-suave);
  font-size: var(--hn-texto-grilla);
  font-weight: 600;
}

.lista-datos dd {
  margin: 0;
}

.nota {
  color: var(--texto-suave);
  font-size: var(--hn-texto-grilla);
}

/* ---------------------------------------------------------------------------
 * Avisos
 *
 * Producción usa .alert de Bootstrap: fondo saturado, texto blanco, radio 3px,
 * relleno 15px 20px. Se replica tal cual.
 * --------------------------------------------------------------------------- */

.mensaje,
.hn-flash__aviso {
  border-radius: var(--hn-radio);
  background: var(--hn-info);
  color: var(--hn-blanco);
  padding: 15px 20px;
  margin: 0 0 var(--esp-3);
}

.mensaje a,
.hn-flash__aviso a {
  color: var(--hn-blanco);
  text-decoration: underline;
}

.mensaje--exito,
.hn-flash__aviso--exito { background: var(--hn-exito); }

.mensaje--aviso,
.hn-flash__aviso--aviso { background: var(--hn-alerta); }

.mensaje--error,
.hn-flash__aviso--error { background: var(--hn-peligro); }

.avisos {
  margin-bottom: var(--esp-4);
}

.avisos > :last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Estados del contenedor (ct_state)
 *
 * Producción los pinta como píldora con borde del color primario
 * (.container-state: borde 3px, radio 50px, peso 600). Se conserva la forma y
 * se añaden matices por estado, que ya existen hoy vía clases de Bootstrap.
 * --------------------------------------------------------------------------- */

.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 0 12px;
  border: 2px solid var(--hn-marino);
  border-radius: 50px;
  color: var(--hn-marino);
  font-size: var(--hn-texto-grilla);
  font-weight: 600;
  white-space: nowrap;
}

.estado__punto {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentcolor;
  flex: none;
}

.estado--transito { border-color: var(--hn-info); color: #10707f; }
.estado--pendiente { border-color: var(--hn-alerta); color: #8a5200; }
.estado--programado { border-color: var(--hn-enlace); color: var(--hn-enlace); }
.estado--patio { border-color: var(--hn-gris); color: #52595f; }
.estado--cerrado { border-color: var(--hn-exito); color: #0a6b3d; }
.estado--problema { border-color: var(--hn-peligro); color: #a1281a; }

/* ---------------------------------------------------------------------------
 * Formularios
 * (equivale a .form-control: 16px, relleno 10.4px 12px, radio 3px)
 * --------------------------------------------------------------------------- */

.formulario {
  display: grid;
  gap: var(--esp-3);
}

.campos-en-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-3);
}

.campo {
  display: grid;
  gap: var(--esp-1);
}

label {
  color: var(--hn-texto);
  font-size: var(--hn-texto-grilla);
  font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hn-campo-borde);
  border-radius: var(--hn-radio);
  background: var(--hn-superficie);
  color: var(--hn-campo-texto);
  font-family: inherit;
  font-size: var(--hn-texto-base);
  line-height: 1.5;
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--hn-fondo);
  color: var(--texto-tenue);
  cursor: not-allowed;
}

input::placeholder,
textarea::placeholder {
  color: var(--texto-tenue);
}

fieldset {
  border: 1px solid var(--hn-superficie-borde);
  border-radius: var(--hn-radio);
  padding: var(--esp-3) var(--esp-4);
  margin: 0 0 var(--esp-4);
}

legend {
  padding: 0 var(--esp-2);
  font-size: var(--hn-texto-grilla);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
 * Botones
 * (.btn-primary de producción: marino, texto blanco, radio 3px, 16px)
 * --------------------------------------------------------------------------- */

button,
.boton,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 10px 12px;
  border: 1px solid var(--hn-marino);
  border-radius: var(--hn-radio);
  background: var(--hn-marino);
  color: var(--hn-blanco);
  font-family: inherit;
  font-size: var(--hn-texto-base);
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--hn-transicion);
}

button:hover,
.boton:hover,
input[type="submit"]:hover {
  background: var(--hn-marino);
  border-color: var(--hn-marino);
  color: var(--hn-blanco);
  text-decoration: none;
  filter: brightness(1.35);
}

button:disabled,
input[type="submit"]:disabled {
  cursor: not-allowed;
  filter: none;
  opacity: 0.55;
}

/* .btn-light de producción */
.boton--secundario,
button.boton--secundario {
  background: var(--hn-boton-claro);
  border-color: var(--hn-campo-borde);
  color: #111111;
}

.boton--secundario:hover,
button.boton--secundario:hover {
  background: #e2e6ea;
  border-color: var(--hn-campo-borde);
  color: #111111;
  filter: none;
}

.boton--plano,
button.boton--plano {
  background: transparent;
  border-color: transparent;
  color: var(--hn-enlace);
  padding-inline: var(--esp-1);
}

.boton--plano:hover,
button.boton--plano:hover {
  background: transparent;
  border-color: transparent;
  color: var(--hn-enlace);
  text-decoration: underline;
  filter: none;
}

.boton--pequeno {
  padding: 4px 8px;
  font-size: var(--hn-texto-menu);
}

/* Los formularios de un solo botón (por ejemplo `button_to` para salir) no
   deben aportar caja ni margen. */
.formulario-en-linea {
  display: contents;
}

.paginacion {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-3);
  color: var(--texto-suave);
  font-size: var(--hn-texto-grilla);
}