/* flight-deal-monitor · panel de control
   Paleta y tipografía tomadas de emexurxes.github.io/meritos: papel claro,
   verde profundo en cabecera y botones, tinta casi negra, bordes suaves. */

:root {
  --papel: #F0F3F1;
  --panel: #FFFFFF;
  --tinta: #14201A;
  --apagado: #5D6B61;
  --linea: #E2E7E3;
  --linea-suave: #EDF0ED;
  --verde-texto: #0D5134;
  --verde-cl: #2E7D55;
  --verde-tinte: #EAF1EC;
  --verde-medio: #A9C7B5;
  --cab-bg: #0D5134;
  --boton: #0D5134;
  --boton-hover: #0A4029;
  --sec-hover: #E2EBE4;
  --oro: #8A6A10;
  --oro-tinte: #FBF3DC;
  --oro-borde: #E0B93C;
  --rojo: #8C2F2A;
  --rojo-tinte: #F6E8E6;
  --radio: 6px;
  --fuente-titulos: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fuente-texto: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--verde-texto); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--verde-cl); }

h1, h2, h3 { font-family: var(--fuente-titulos); color: var(--verde-texto); margin: 0; line-height: 1.2; }
h1 { font-size: 1.55rem; font-weight: 700; }
h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: .75rem; }
h3 { font-size: .95rem; font-weight: 600; }

/* --- cabecera --- */
.cab { background: var(--cab-bg); color: #fff; }
.cab-in {
  max-width: 1120px; margin: 0 auto; padding: .85rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.marca { color: #fff; text-decoration: none; font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.05rem; }
.marca:hover { color: #fff; }
.ruta {
  display: inline-block; margin-left: .5rem; padding: .05rem .5rem; border-radius: var(--radio);
  background: rgba(255,255,255,.13); font-weight: 500; font-size: .9rem; letter-spacing: .02em;
}
.cab nav { display: flex; gap: 1.1rem; flex-wrap: wrap; flex: 1; }
.cab nav a { color: #A9C7B5; text-decoration: none; font-weight: 500; padding: .2rem 0; border-bottom: 2px solid transparent; }
.cab nav a:hover { color: #fff; }
.cab nav a.on { color: #fff; border-bottom-color: #fff; }
.salir { margin: 0; }
.btn-cab {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radio);
  padding: .3rem .8rem; font: inherit; font-size: .85rem; cursor: pointer;
}
.btn-cab:hover { background: rgba(255,255,255,.13); }

/* --- estructura --- */
main { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.encabezado { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.sub { color: var(--apagado); margin: .25rem 0 0; }

.tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.rejilla .tarjeta { margin-bottom: 0; }
.dato-etq { color: var(--apagado); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.dato { font-family: var(--fuente-titulos); font-size: 1.6rem; font-weight: 600; color: var(--tinta); margin: .2rem 0; }
.dato.verde { color: var(--verde-texto); }
.nota { color: var(--apagado); font-size: .85rem; margin: .15rem 0 0; }

/* --- insignias --- */
.insignia { display: inline-block; padding: .1rem .55rem; border-radius: var(--radio); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.insignia.ok { background: var(--verde-tinte); color: var(--verde-texto); }
.insignia.warn { background: var(--oro-tinte); color: var(--oro); }
.insignia.bad { background: var(--rojo-tinte); color: var(--rojo); }
.insignia.neutral { background: var(--linea-suave); color: var(--apagado); }

/* --- avisos --- */
.aviso { border-radius: var(--radio); padding: .7rem 1rem; margin-bottom: 1rem; border: 1px solid var(--linea); background: var(--panel); }
.aviso.ok { border-color: var(--verde-medio); background: var(--verde-tinte); color: var(--verde-texto); }
.aviso.error { border-color: #D9B3AF; background: var(--rojo-tinte); color: var(--rojo); }
.aviso.warn { border-color: var(--oro-borde); background: var(--oro-tinte); color: var(--oro); }
.aviso ul { margin: .3rem 0 0; padding-left: 1.2rem; }

/* --- botones --- */
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.acciones form { margin: 0; }
.btn {
  display: inline-block; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
  background: var(--boton); color: #fff; border: 1px solid var(--boton); border-radius: var(--radio);
  padding: .5rem 1rem; text-decoration: none;
}
.btn:hover { background: var(--boton-hover); color: #fff; }
.btn.sec { background: var(--panel); color: var(--verde-texto); border-color: var(--linea); }
.btn.sec:hover { background: var(--sec-hover); }
.btn.peligro { background: var(--panel); color: var(--rojo); border-color: #D9B3AF; }
.btn.peligro:hover { background: var(--rojo-tinte); }

/* --- tablas --- */
.tabla-env { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th {
  text-align: left; color: var(--apagado); font-weight: 600; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .05em; padding: .45rem .6rem; border-bottom: 1px solid var(--linea); white-space: nowrap;
}
td { padding: .5rem .6rem; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.precio { font-weight: 600; font-variant-numeric: tabular-nums; }
.precio.oferta { color: var(--verde-texto); }
.precio.excepcional { color: var(--oro); }
.vacio { color: var(--apagado); font-style: italic; }
.mini { font-size: .8rem; color: var(--apagado); }
.error-txt { color: var(--rojo); font-size: .82rem; }

/* --- matriz de fechas --- */
.leyenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--apagado); margin-bottom: .75rem; }
.leyenda span::before { content: ""; display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; border: 1px solid var(--linea); }
.leyenda .l-excepcional::before { background: var(--oro-tinte); border-color: var(--oro-borde); }
.leyenda .l-oferta::before { background: var(--verde-tinte); border-color: var(--verde-medio); }
.leyenda .l-cerca::before { background: var(--linea-suave); }
.leyenda .l-pendiente::before { background: var(--panel); }
.matriz td, .matriz th { text-align: center; padding: .3rem .4rem; }
.matriz td.dia { text-align: left; white-space: nowrap; color: var(--tinta); }
.celda { display: block; border-radius: 4px; padding: .15rem .3rem; font-variant-numeric: tabular-nums; font-size: .85rem; }
.celda.exceptional { background: var(--oro-tinte); color: var(--oro); font-weight: 700; }
.celda.deal { background: var(--verde-tinte); color: var(--verde-texto); font-weight: 700; }
.celda.near { background: var(--linea-suave); color: var(--tinta); }
.celda.plain { color: var(--apagado); }
.celda.none { color: #B4BDB6; }
.mes td { background: var(--papel); font-family: var(--fuente-titulos); font-weight: 600; color: var(--verde-texto); text-align: left; }

/* --- formularios --- */
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem 1.5rem; }
.campo label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .25rem; }
.campo input[type=text], .campo input[type=number], .campo input[type=password], .campo select {
  width: 100%; font: inherit; color: var(--tinta); background: var(--panel); border: 1px solid #CBD3CD;
  border-radius: var(--radio); padding: .45rem .6rem;
}
.campo input:focus, .campo select:focus { outline: 2px solid var(--verde-medio); outline-offset: 0; border-color: var(--verde-cl); }
.campo .ayuda { color: var(--apagado); font-size: .8rem; margin: .25rem 0 0; }
.campo .origen { color: var(--oro); font-size: .78rem; margin: .2rem 0 0; }
.resumen {
  margin: 1.1rem 0 .2rem; padding: .65rem .9rem; border-radius: var(--radio);
  background: var(--verde-tinte); color: var(--verde-texto); font-size: .92rem;
}
.campo input[type=date] {
  width: 100%; font: inherit; color: var(--tinta); background: var(--panel); border: 1px solid #CBD3CD;
  border-radius: var(--radio); padding: .4rem .6rem;
}
.check { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .88rem; }
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--verde-texto); }
.pie-form { display: flex; gap: .75rem; align-items: center; margin-top: 1.25rem; flex-wrap: wrap; }
dl.fijos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; font-size: .9rem; }
dl.fijos dt { color: var(--apagado); }
dl.fijos dd { margin: 0; }

/* --- acceso --- */
.acceso { max-width: 380px; margin: 4rem auto; }
.acceso h1 { margin-bottom: .25rem; }
.acceso .campo { margin-top: 1rem; }
.acceso .btn { width: 100%; margin-top: 1.25rem; padding: .65rem; }

@media (max-width: 640px) {
  .cab-in { gap: .75rem; }
  .dato { font-size: 1.35rem; }
  main { padding: 1rem .9rem 2rem; }
}

.tarjeta > .ayuda { color: var(--apagado); font-size: .82rem; margin: .4rem 0 0; }