/* ============================================================
   BASE — tokens, controles, layout y header.
   La cargan TODAS las páginas. Tocar solo para cambios globales
   (colores, tipografía, botones, estructura general).
============================================================ */
:root{
  --azul:#1B2E9E; --azul-oscuro:#12206E; --rojo:#E30613; --amarillo:#FFD500;
  --fondo:#F4F6FB; --panel:#FFFFFF; --tinta:#1A1D26; --gris:#6B7280;
  --linea:#E3E7F0; --ok:#0E8A45; --error:#C81E1E;
  --radio:10px;

  /* ---------- Superficies y estados ----------
     Todo fondo que no sea --panel ni --fondo sale de acá. Un color
     escrito a mano en un css de módulo NO cambia en modo oscuro y deja
     texto ilegible: por eso estos tokens, que tema.css redefine.
     Cada estado trae su fondo (-bg) y la tinta que se lee encima (-fg). */
  --suave:#FAFBFF;                          /* fondo apenas distinto del panel */
  --resalte:#EEF1FB;                        /* hover y estado activo */
  --ok-bg:#E4F4EA;      --ok-fg:#1D6B3B;
  --warn-bg:#FDF3DD;    --warn-fg:#8A6216;
  --error-bg:#FBE4E4;   --error-fg:#9C2320;
  --info-bg:#E6EDFA;    --info-fg:#1B4B8F;
  --lila-bg:#F0EAFB;    --lila-fg:#5B3A9C;
  --naranja-bg:#FBEFE6; --naranja-fg:#8A4A0E;
}
*{box-sizing:border-box; margin:0; padding:0}
[hidden]{display:none !important}
html,body{height:100%}
body{
  font-family:'Barlow',system-ui,sans-serif; background:var(--fondo);
  color:var(--tinta); font-size:15px; line-height:1.45;
}
h1,h2,h3,h4{font-family:'Barlow Semi Condensed',sans-serif}
/* Entrada de página: el body arranca oculto y aparece con un fundido
   corto cuando la sesión ya se validó. Evita el parpadeo del login. */
body{
  opacity:1; transform:none;
  transition:opacity .22s ease, transform .22s ease;
}
body.oculto{opacity:0; transform:translateY(6px); visibility:hidden}

/* ---------- Controles ---------- */
.campo{margin-bottom:14px; text-align:left}

/* Una fila de campos, del ancho que entre.
   VIVIA DUPLICADA en auditoria.css y en itinerario.css, con dos valores
   distintos de minmax. La usan siete paginas: las otras cinco la
   escribian en el HTML y no pasaba nada, los campos se apilaban uno
   abajo del otro. Aca la ve todo el mundo.
   `auto-fit` y no columnas fijas para que la misma clase sirva con dos
   campos o con cuatro, y colapse sola en pantalla angosta. */
.fila-config{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px 14px; align-items:start; margin-bottom:16px;
}
.fila-config .campo{margin-bottom:0}
.campo-boton{padding-top:22px}   /* alinea el boton con la base de los inputs */
.campo-ancho{grid-column:span 2}
.campo label{
  display:block; font-size:12.5px; font-weight:600; color:var(--gris);
  margin-bottom:4px; text-transform:uppercase; letter-spacing:.6px;
}
input, select{
  width:100%; padding:10px 12px; border:1px solid var(--linea); border-radius:8px;
  font:inherit; background:#fff; color:var(--tinta);
}
input[readonly]{background:#F7F8FC}
input:focus, select:focus, button:focus-visible{outline:2px solid var(--azul); outline-offset:1px}
/* Sin text-transform: la mayoría de las hints son oraciones ("Si ponés
   algo acá, Mara se lo transmite al cliente") y capitalizarlas palabra
   por palabra las dejaba en "Si Ponés Algo Acá". Donde hace falta la
   inicial en mayúscula —las fechas legibles— la pone el JS con
   capitalizar(). */
.hint{
  display:block; margin-top:4px; font-size:12.5px; color:var(--gris);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Barlow Semi Condensed'; font-weight:700; font-size:15px;
  letter-spacing:.4px; text-transform:uppercase;
  border:none; border-radius:8px; padding:11px 20px; cursor:pointer;
  transition:background .15s;
}
.btn-full{width:100%}
.btn-azul{background:var(--azul); color:#fff}
.btn-azul:hover{background:var(--azul-oscuro)}
.btn-rojo{background:var(--rojo); color:#fff}
.btn-rojo:hover{background:#B90510}
.btn-sec{background:#fff; border:1.5px solid var(--azul); color:var(--azul)}
.btn-sec:hover{background:var(--resalte)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.mini{
  background:none; border:1px solid var(--linea); border-radius:6px;
  padding:3px 8px; font-size:11.5px; cursor:pointer; color:var(--gris);
}
.mini:hover{border-color:var(--azul); color:var(--azul)}
.mini-rojo:hover{border-color:var(--rojo); color:var(--rojo)}

/* ---------- Mensajes ---------- */
.msg-error{color:var(--error); font-size:13.5px; margin-top:10px; min-height:18px}
.msg-ok{color:var(--ok); font-size:13.5px; font-weight:600; margin-top:10px; min-height:18px}
.texto-vacio{color:var(--gris); font-size:14px}
.texto-vacio.con-pad{padding:14px}
.aviso{
  border-left:3px solid var(--amarillo); background:#FFFBEA;
  padding:10px 12px; font-size:13px; border-radius:0 8px 8px 0; margin-bottom:14px;
}
.aviso b{color:var(--warn-fg)}

/* ---------- Header / footer ---------- */
header{background:var(--panel); border-bottom:4px solid var(--azul)}
/* A ancho completo, NO alineado con el `main` de 1100px.
   El logo apaisado mide 109px y antes arrancaba donde arranca el
   contenido: en una pantalla de 1920 eso son ~400px de aire muerto a la
   izquierda, justo cuando las herramientas de la derecha se pelean por
   lugar y bajan de renglón a los 1080px. Corriendo el logo al borde real
   se recupera todo ese ancho para la barra. El header tiene fondo y
   borde propios, así que se lee como una banda aparte y no queda raro
   que su contenido no empiece donde empieza el texto de la página. */
.header-inner{
  max-width:none; margin:0; padding:14px 22px;
  display:flex; align-items:center; gap:12px 12px; flex-wrap:wrap;
}
/* El logo y el título son una unidad: juntos se leen como la marca, y
   separados parecen dos elementos sueltos. El resto de la barra igual
   queda lejos, porque .barra-tools se lleva el sobrante con flex:1. */
.header-inner img{height:48px; width:auto; flex:0 0 auto; margin-right:-2px}
/* El titulo ya no crece: lo que empuja las herramientas a la derecha es
   el justify-content de .barra-tools. Con flex:1 aca, el titulo se comia
   el sobrante y despues se lo devolvia partiendose en dos renglones. */
.header-title{flex:0 1 auto; min-width:0}
.header-title h1{font-size:22px; font-weight:800; color:var(--azul); letter-spacing:.2px}
.header-title span{font-size:12.5px; color:var(--gris); text-transform:uppercase; letter-spacing:1.2px; white-space:nowrap}
.volver{font-size:13px; color:var(--gris); text-decoration:none; font-weight:600}
.volver:hover{color:var(--rojo)}

/* ---------- Los dos grupos de la barra ----------
   Los arma zonaBarra() en comunes.js; ver ahi el porque. Lo que define
   el reparto es como cede cada uno cuando falta lugar: las herramientas
   se achican primero y bajan enteras si hace falta; la cuenta no se
   toca, que era el bug — "Salir" caia solo a un renglon de abajo. */
.barra-tools{
  /* base 0 y no `auto` a proposito: flexbox decide el corte de linea con
     el tamano NATURAL de cada item, antes de encoger nada. Con base auto,
     los tres chips median ~700px, no entraban, y empujaban a la cuenta a
     un renglon de abajo aunque despues hubiera lugar de sobra. Con base 0
     la cuenta entra siempre, y las herramientas se reparten lo que queda. */
  flex:1 1 0; min-width:0;
  /* nowrap para que, cuando falte lugar, los chips SE ACHIQUEN en vez de
     partirse en dos renglones: lo primero que cede es el texto del clima,
     que es lo mas largo y lo menos urgente de la barra. */
  display:flex; align-items:center; justify-content:flex-end;
  flex-wrap:nowrap; gap:10px;
}
.barra-cuenta{
  flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
}

/* Cuando ya no entran en una fila, las herramientas bajan enteras y la
   cuenta se queda arriba con el titulo. El orden importa: sin `order`,
   la cuenta quedaria debajo de las herramientas. */
@media (max-width:1080px){
  .barra-cuenta{order:2; margin-left:auto}
  .barra-tools{order:3; flex-basis:100%; justify-content:flex-start}
}
/* ---------- Tipo de cambio en la barra ----------
   Lo inyecta cargarFX() en comunes.js. Mismo lenguaje visual que el
   chip del clima y el boton del menu de fotos. */
.fx-barra{position:relative}
.fx-boton{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--linea); color:var(--gris);
  padding:4px 12px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:12.5px; white-space:nowrap;
}
.fx-boton:hover{border-color:var(--azul)}
.fx-boton[aria-expanded="true"]{border-color:var(--azul); background:var(--resalte)}
.fx-par{display:inline-flex; align-items:baseline; gap:4px}
.fx-mon{font-size:11.5px; opacity:.75}
.fx-val{font-weight:700; color:var(--tinta); font-variant-numeric:tabular-nums}
.fx-flecha{font-size:10px; opacity:.7}
/* En pantallas chicas queda solo el dolar: es el que mas se usa */
@media (max-width:900px){ .fx-par:not(:first-child){display:none} }

.fx-panel{
  position:absolute; top:calc(100% + 8px); right:0; z-index:800;
  min-width:250px;
  background:var(--panel); border:1px solid var(--linea);
  border-radius:var(--radio); box-shadow:0 16px 44px rgba(0,0,0,.18);
  overflow:hidden;
}
.fx-panel-cab{
  padding:9px 14px; border-bottom:1px solid var(--linea); background:var(--suave);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--gris);
}
.fx-tabla{width:100%; border-collapse:collapse; font-size:13px}
.fx-tabla td{padding:8px 14px; border-bottom:1px solid var(--linea); vertical-align:middle}
.fx-tabla tr:last-child td{border-bottom:0}
.fx-t-mon{font-weight:700; color:var(--azul)}
.fx-t-val{font-weight:700; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.fx-t-meta{font-size:11px; color:var(--gris); text-align:right; line-height:1.35}
.fx-t-cuando{opacity:.8}
.fx-panel-pie{padding:9px 14px; font-size:11.5px; color:var(--gris); background:var(--suave)}
#btn-logout{
  background:none; border:1px solid var(--linea); color:var(--gris);
  padding:6px 12px; border-radius:8px; cursor:pointer; font-size:13px;
}
#btn-logout:hover{border-color:var(--rojo); color:var(--rojo)}
footer{
  max-width:1500px; margin:0; padding:0 22px 30px;
  font-size:12px; color:var(--gris);
}

/* ---------- Layout ---------- */
/* Alineado con el header, no centrado.
   El header pasó a ancho completo y arranca a 22px del borde; con el
   contenido centrado en 1100px, en una pantalla de 1920 el logo quedaba
   a 22px y el primer panel a ~430px, como dos páginas distintas.
   `margin:0` los alinea y el max-width se sube a 1500 para que no quede
   media pantalla vacía a la derecha — sin soltarlo del todo, porque una
   línea de texto a 1900px no se lee. El login de index.html no se ve
   afectado: vive fuera del <main> y tiene su propio centrado. */
main{max-width:1500px; margin:0; padding:24px 22px 60px}
.grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px}
@media (max-width:820px){ .grid{grid-template-columns:1fr} }
.panel{
  background:var(--panel); border:1px solid var(--linea);
  border-radius:var(--radio); padding:20px;
  /* No tenia ninguno: los paneles se tocaban y las secciones se leian
     como una sola cosa larga, separadas solo por el borde de 1px. */
  margin-bottom:22px;
}
.panel:last-child{margin-bottom:0}
/* Dentro de un .grid el aire lo pone el `gap`; el margen ahi sobra y
   descuadra las dos columnas. */
.grid > .panel{margin-bottom:0}
.panel h2{
  font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:1px;
  color:var(--azul); border-bottom:2px solid var(--amarillo);
  padding-bottom:8px; margin-bottom:16px;
}
.fila-form{display:grid; grid-template-columns:1fr 90px; gap:10px}
.fila-fechas{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.acciones{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; align-items:center}
#aviso-copia{color:var(--ok); font-size:13px; opacity:0; transition:opacity .2s}
.cargando{opacity:.55; pointer-events:none}

/* ---------- Tablas ---------- */
table{width:100%; border-collapse:collapse; font-size:14px}
th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--gris); padding:6px 8px; border-bottom:1px solid var(--linea);
}
td{padding:8px; border-bottom:1px solid #F1F3F9; vertical-align:top}
/* `top` es lo correcto para celdas de texto que pueden tener dos
   renglones, pero deja una casilla de 17px pegada al techo de una fila
   de 40. Las celdas que son solo un control van centradas. */
td.centro, td:has(> input[type="checkbox"]:only-child){vertical-align:middle}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
tfoot td{font-weight:600; border-bottom:none}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
  body.oculto{transform:none}
}
.saludo{
  font-size:13px; font-weight:600; color:var(--azul);
  background:var(--resalte); padding:5px 12px; border-radius:999px; white-space:nowrap;
}

/* ---------- Sacar del catálogo ----------
   Separado del resto y al final: apagar con «Se ofrece» resuelve casi
   todos los casos y es reversible; esto no. El borde de aviso es para
   que no se confunda con un sub-bloque más mientras se guarda un horario. */
.zona-riesgo{
  border:1px solid var(--error-bg); border-left:3px solid var(--error);
  border-radius:var(--radio); padding:12px 14px; margin-top:22px;
  background:var(--error-bg);
}
.zona-riesgo h4{color:var(--error-fg)}
.zona-riesgo .hint{color:var(--error-fg); opacity:.92}
.zona-riesgo .btn{width:auto; margin-top:8px}