/* ==========================================================================
   estilo-16.css · RONDA 2.7 DE RECEPCION EN VIVO
   Encargo 807 · corrida 480 · 1-oct-2026

   Va DESPUES de estilo-15 y gana por orden de fuente donde la especificidad es
   la misma. Lo unico que sube especificidad a proposito son los cinco temas en
   nocturno, y se dice por que mas abajo.

   NI UN COLOR SUELTO EN LAS PANTALLAS: todo lo que esta hoja agrega son VALORES
   de los tokens --o-* que ya existen (estilo-10) o clases propias con su color
   declarado una sola vez. Asi los cinco temas, el nocturno y las pantallas
   siguen hablando el mismo idioma.

   TRES COSAS, y las tres son puntos del encargo:
     6 · el fondo llega hasta abajo, en los dos modos
     3 · los cinco temas aplican a TODA la interfaz nueva, tambien en nocturno
     4 · un color por origen de reserva en el calendario, con su leyenda
   ========================================================================== */

/* ══ PUNTO 6 · EL FONDO CUBRE TODO EL ALTO ════════════════════════════════
   TEXTUAL: «FRANJA BLANCA ABAJO en Corte y en Ayuda (nocturno): el fondo crema
   aparece debajo del contenido. El fondo cubre todo el alto en todas las
   pantallas, claro y nocturno.»

   LA CAUSA, medida en el codigo y no supuesta: estilo-01 pone el fondo en
   <html> Y en <body> («html,body{background:var(--paper)}»), y el nocturno de
   estilo-13 lo pone SOLO en body.ohm-opera. Cuando los dos elementos tienen
   fondo, el que pinta el lienzo de la ventana es el de la RAIZ: <body> pinta su
   caja y debajo asoma el crema de <html>. Por eso la franja sale justo en las
   pantallas cuyo contenido es mas corto que la ventana —Corte y Ayuda— y no en
   las largas.

   NO SE ARREGLA CON min-height EN EL CUERPO: body ya trae padding-bottom (la
   barra de abajo), asi que un min-height de una ventana completa le agrega esa
   altura y aparece una barra de desplazamiento donde no habia nada que
   desplazar. Se pinta la raiz, que es donde estaba el color equivocado.
   La clase en <html> la pone app-64 (ohq64PintaBarra); en claro la raiz ya
   tiene el --paper del tema y no hace falta tocarla. */
/* modo-dia-noche */
@media(prefers-color-scheme:dark){
  html.ohm-opera:where(:not(.oh-dia)){background:#0D161D}
}
/* la misma, cuando se elige Noche en el menu */
  html.ohm-opera:where(.oh-noche){background:#0D161D}



/* ══ PUNTO 3 · LOS CINCO TEMAS, EN LOS DOS MODOS ══════════════════════════
   TEXTUAL DE EDUARDO: «se quedan para que el personal escoja color en su turno,
   PERO cada tema debe aplicar a TODA la interfaz nueva y en los dos modos,
   claro y nocturno, con contraste AA, sin pantallas raras.»

   POR QUE «elegir uno no cambia nada», medido leyendo las dos hojas: en CLARO
   si cambiaba —estilo-10 declara --o-fondo:var(--paper), --o-super:var(--card) y
   --o-acento:var(--teal), y el tema mueve esos tres— pero en NOCTURNO no, porque
   estilo-13 reescribe los doce tokens con numeros fijos dentro de
   body.ohm-opera y ahi se pierde el tema entero. Eduardo probo a las 23:30: en
   nocturno. O sea que la queja era exacta y la causa no era la pantalla de
   temas: era que el nocturno no tenia tema.

   LO QUE FALTABA TAMBIEN EN CLARO, y es lo que hacia que el cambio se notara a
   medias: --o-acento-t (la tinta del acento sobre su propio tinte) y
   --o-acento-suave (el tinte) estaban escritos con el teal a mano. Con otro
   tema el boton cambiaba de color y su letra se quedaba en teal.

   CADA VALOR ESTA MEDIDO, no elegido a ojo. Contraste calculado (WCAG 2.1,
   relacion de luminancias) de lo que de verdad se encima:

   NOCTURNO · texto principal #E8EDF0 / segundo #B4C1CA / tercero #9AA9B4,
   contra el fondo y contra la superficie de tarjeta de cada tema:
     teal     15.49 / 13.12  ·  9.94 / 8.42  ·  7.57 / 6.42
     pizarra  15.46 / 13.51  ·  9.92 / 8.67  ·  7.56 / 6.61
     papel    15.77 / 14.04  · 10.12 / 9.00  ·  7.72 / 6.87
     navy     15.66 / 13.26  · 10.05 / 8.51  ·  7.66 / 6.49
     malva    16.04 / 14.60  · 10.29 / 9.37  ·  7.85 / 7.14
   Y la tinta del boton de acento sobre su acento: teal 9.20 · pizarra 8.24 ·
   papel 9.37 · navy 9.82 · malva 9.20. El piso AA de texto son 4.5; el mas
   bajo de toda la lista es 6.42.

   CLARO · la tinta del acento sobre la tarjeta y sobre la pagina:
     teal #0E5560 8.44 / 7.73 · pizarra #24414D 10.83 / 9.73 ·
     papel #0E5560 7.73 / 8.44 · navy #24414D 9.99 / 8.29 ·
     malva #6B3E4D 8.67 / 7.88

   RESUELTO EL 8-oct-2026: el blanco sobre el teal de la marca (#188396) daba
   4.44 contra un piso de 4.5 (encargo 553.002, id 364). Eduardo decidio «cambia
   el teal»: --teal es ahora #13707F (5.3), un tono mas profundo del mismo teal,
   para textos y botones. El logotipo es PNG y conserva su teal original.

   POR QUE ESTOS SELECTORES: data-paleta vive en <html> (app-31) y la clase
   ohm-opera en <body>, asi que el tema solo se puede alcanzar desde la raiz
   hacia el cuerpo. Eso sube la especificidad a 0,2,2 contra los 0,1,1 de
   estilo-13, que es exactamente lo que hace falta para ganarle a sus numeros
   fijos. El tema «teal» no pone atributo —app-31 lo quita a proposito— asi que
   se nombra con :not([data-paleta]) y tambien por su nombre, para el dia que
   alguien lo escriba. */
/* CLARO · la tinta y el tinte del acento, por tema. Sin esto el boton cambia de
   color y su letra se queda en el teal del tema anterior.
   VA ANTES DEL BLOQUE DE NOCTURNO Y NO DESPUES, y esto se midio: puesto
   despues, estas dos reglas -que no cuelgan de ninguna consulta de medio- le
   ganaban por orden de fuente a las de dentro del @media y en nocturno la tinta
   del acento de pizarra, navy y malva salia con su valor CLARO (#24414D y
   #6B3E4D) sobre un fondo oscuro. Medido en Chromium el 1-oct-2026: pizarra
   contestaba --o-acento-t #24414D con --o-fondo #10161A, o sea 1.6:1. Las
   reglas sin @media van primero y el nocturno las corrige; al reves no. */
html[data-paleta="pizarra"] body.ohm-opera,
html[data-paleta="navy"] body.ohm-opera{
  --o-acento-t:#24414D;
  --o-acento-suave:rgba(50,90,107,.12)}
html[data-paleta="malva"] body.ohm-opera{
  --o-acento-t:#6B3E4D;
  --o-acento-suave:rgba(142,90,107,.12)}

/* modo-dia-noche */
@media(prefers-color-scheme:dark){

  /* TEAL · es el que ya habia; se repite entero para que los cinco temas se
     lean en el mismo sitio y con la misma forma. Un tema definido por omision
     y cuatro por excepcion es como se desincroniza el quinto. */
  html:not([data-paleta]):where(:not(.oh-dia)) body.ohm-opera,
html[data-paleta="teal"]:where(:not(.oh-dia)) body.ohm-opera{
    --o-fondo:#0D161D; --o-super:#18262F;
    --o-acento:#58C7D8; --o-acento-t:#58C7D8;
    --o-acento-suave:rgba(88,199,216,.14);
    background:#0D161D}
  html.ohm-opera:not([data-paleta]):where(:not(.oh-dia)),
html.ohm-opera[data-paleta="teal"]:where(:not(.oh-dia)){background:#0D161D}

  /* PIZARRA · su acento claro es #325A6B, que en nocturno seria casi invisible
     sobre el fondo: el acento de un tema oscuro es la version CLARA del mismo
     tono, no el mismo numero. Es la misma inversion que estilo-13 ya escribio
     para las dos tintas. */
  html[data-paleta="pizarra"]:where(:not(.oh-dia)) body.ohm-opera{
    --o-fondo:#10161A; --o-super:#1B2328;
    --o-acento:#8FB4C4; --o-acento-t:#8FB4C4;
    --o-acento-suave:rgba(143,180,196,.16);
    background:#10161A}
  html.ohm-opera[data-paleta="pizarra"]:where(:not(.oh-dia)){background:#10161A}

  /* PAPEL · en claro es el tema sin tinte (pagina blanca, tarjeta crema). En
     nocturno su equivalente es el gris mas neutro de los cinco: sin azul y sin
     tierra. Su acento es el mismo teal porque el tema papel no cambia --teal. */
  html[data-paleta="papel"]:where(:not(.oh-dia)) body.ohm-opera{
    --o-fondo:#111316; --o-super:#1C1F22;
    --o-acento:#58C7D8; --o-acento-t:#58C7D8;
    --o-acento-suave:rgba(88,199,216,.14);
    background:#111316}
  html.ohm-opera[data-paleta="papel"]:where(:not(.oh-dia)){background:#111316}

  /* NAVY · el unico que se va de verdad al azul, que es lo que lo distingue de
     pizarra en claro y tiene que distinguirlo tambien en nocturno. Su acento
     sube un paso mas de luz que el de pizarra por la misma razon. */
  html[data-paleta="navy"]:where(:not(.oh-dia)) body.ohm-opera{
    --o-fondo:#0C1420; --o-super:#182435;
    --o-acento:#9FC2D6; --o-acento-t:#9FC2D6;
    --o-acento-suave:rgba(159,194,214,.16);
    background:#0C1420}
  html.ohm-opera[data-paleta="navy"]:where(:not(.oh-dia)){background:#0C1420}

  /* MALVA · fondo con el mismo matiz de ciruela que su version clara. */
  html[data-paleta="malva"]:where(:not(.oh-dia)) body.ohm-opera{
    --o-fondo:#150F13; --o-super:#221820;
    --o-acento:#E4A3B6; --o-acento-t:#E4A3B6;
    --o-acento-suave:rgba(228,163,182,.16);
    background:#150F13}
  html.ohm-opera[data-paleta="malva"]:where(:not(.oh-dia)){background:#150F13}

  /* LA TINTA SOBRE EL BOTON DE ACENTO SIGUE SIENDO EL FONDO DEL TEMA, no un
     numero. estilo-13 la fijo en #0D161D, que es el fondo del teal: sobre el
     acento de malva o de navy eso es otro color. Se declara con el token del
     propio tema para que no se pueda desfasar nunca mas. */
  html[data-paleta]:where(:not(.oh-dia)) body.ohm-opera .ohb-p,
html[data-paleta]:where(:not(.oh-dia)) body.ohm-opera .ohtelb,
html[data-paleta]:where(:not(.oh-dia)) body.ohm-opera .ohmu-g button.on,
html[data-paleta]:where(:not(.oh-dia)) body.ohm-opera .ohkseg button.on,
html[data-paleta]:where(:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.rec,
html[data-paleta]:where(:not(.oh-dia)) body.ohm-opera .ohpz button.on,
html[data-paleta]:where(:not(.oh-dia)) body.ohm-opera .ohb-p:hover,
html[data-paleta]:where(:not(.oh-dia)) body.ohm-opera .ohtelb:hover{color:var(--o-fondo)}
}
/* la misma, cuando se elige Noche en el menu */
  html:not([data-paleta]):where(.oh-noche) body.ohm-opera,
html[data-paleta="teal"]:where(.oh-noche) body.ohm-opera{
    --o-fondo:#0D161D; --o-super:#18262F;
    --o-acento:#58C7D8; --o-acento-t:#58C7D8;
    --o-acento-suave:rgba(88,199,216,.14);
    background:#0D161D}
  html.ohm-opera:not([data-paleta]):where(.oh-noche),
html.ohm-opera[data-paleta="teal"]:where(.oh-noche){background:#0D161D}
  html[data-paleta="pizarra"]:where(.oh-noche) body.ohm-opera{
    --o-fondo:#10161A; --o-super:#1B2328;
    --o-acento:#8FB4C4; --o-acento-t:#8FB4C4;
    --o-acento-suave:rgba(143,180,196,.16);
    background:#10161A}
  html.ohm-opera[data-paleta="pizarra"]:where(.oh-noche){background:#10161A}
  html[data-paleta="papel"]:where(.oh-noche) body.ohm-opera{
    --o-fondo:#111316; --o-super:#1C1F22;
    --o-acento:#58C7D8; --o-acento-t:#58C7D8;
    --o-acento-suave:rgba(88,199,216,.14);
    background:#111316}
  html.ohm-opera[data-paleta="papel"]:where(.oh-noche){background:#111316}
  html[data-paleta="navy"]:where(.oh-noche) body.ohm-opera{
    --o-fondo:#0C1420; --o-super:#182435;
    --o-acento:#9FC2D6; --o-acento-t:#9FC2D6;
    --o-acento-suave:rgba(159,194,214,.16);
    background:#0C1420}
  html.ohm-opera[data-paleta="navy"]:where(.oh-noche){background:#0C1420}
  html[data-paleta="malva"]:where(.oh-noche) body.ohm-opera{
    --o-fondo:#150F13; --o-super:#221820;
    --o-acento:#E4A3B6; --o-acento-t:#E4A3B6;
    --o-acento-suave:rgba(228,163,182,.16);
    background:#150F13}
  html.ohm-opera[data-paleta="malva"]:where(.oh-noche){background:#150F13}
  html[data-paleta]:where(.oh-noche) body.ohm-opera .ohb-p,
html[data-paleta]:where(.oh-noche) body.ohm-opera .ohtelb,
html[data-paleta]:where(.oh-noche) body.ohm-opera .ohmu-g button.on,
html[data-paleta]:where(.oh-noche) body.ohm-opera .ohkseg button.on,
html[data-paleta]:where(.oh-noche) body.ohm-opera .ohkg .ohkbar.rec,
html[data-paleta]:where(.oh-noche) body.ohm-opera .ohpz button.on,
html[data-paleta]:where(.oh-noche) body.ohm-opera .ohb-p:hover,
html[data-paleta]:where(.oh-noche) body.ohm-opera .ohtelb:hover{color:var(--o-fondo)}



/* ══ PUNTO 4 · UN COLOR POR ORIGEN, CON SU LEYENDA ════════════════════════
   TEXTUAL DE EDUARDO: «pense que pondrias de diferente color los bloques de las
   reservas de acuerdo a la fuente». Una paleta por canal con su leyenda:
   Booking, Expedia, Airbnb, sitio propio, telefono/mostrador (recepcion),
   agencias/otro, bloqueo.

   HASTA HOY ERAN DOS COLORES: .rec (el acento) y .canal (--pizarra para TODOS
   los canales). Booking, Expedia y Airbnb se veian iguales.

   LOS SIETE COLORES NO SON LOS DE LAS MARCAS, y es a proposito: el azul de
   Booking y el rojo de Airbnb de verdad no pasan AA con texto encima, y usar el
   logotipo de un canal como color de interfaz es pedirle un permiso que nadie
   dio. Son siete tonos del sistema, elegidos para que (a) se distingan entre si,
   (b) el texto encima pase AA, y (c) la barra se distinga de la pagina.

   CONTRASTE MEDIDO (WCAG 2.1):
   CLARO, texto blanco encima · barra contra la pagina clara
     booking #1C4E8A  8.38 · 7.67      expedia #5B3FA0  7.88 · 7.22
     airbnb  #A82A43  6.82 · 6.25      directo #0E6E5A  6.18 · 5.66
     agencia #7A5B2E  6.24 · 5.72
   NOCTURNO, tinta #0D161D encima · barra contra el fondo oscuro
     booking #7FB2EA  8.23 · 6.97      expedia #B6A0F0  8.07 · 6.83
     airbnb  #F59AA6  8.75 · 7.41      directo #5FD9B6 10.51 · 8.91
     agencia #DFB878  9.80 · 8.30
   El piso AA de texto son 4.5 y el de un elemento no textual 3. El mas bajo de
   los diez es 5.66.

   RECEPCION Y BLOQUEO NO SE TOCAN: telefono y mostrador siguen siendo el acento
   del tema (.ohkbar.rec) y el bloqueo su gris (.ohkbar.blo), que es lo que
   Eduardo ya aprobo y lo unico que ya se distinguia. Se nombran en la leyenda
   para que la leyenda sea completa. */
body.ohm-opera .ohkg .ohkbar.ohq64-booking{background:#1C4E8A;color:#fff}
body.ohm-opera .ohkg .ohkbar.ohq64-expedia{background:#5B3FA0;color:#fff}
body.ohm-opera .ohkg .ohkbar.ohq64-airbnb{background:#A82A43;color:#fff}
body.ohm-opera .ohkg .ohkbar.ohq64-directo{background:#0E6E5A;color:#fff}
body.ohm-opera .ohkg .ohkbar.ohq64-agencia{background:#7A5B2E;color:#fff}
/* El origen «recepcion» ya llega con la clase .rec de app-58 y su color es el
   acento del tema. La clase propia no le cambia el fondo: existe para que la
   leyenda y la barra salgan de la MISMA lista y no puedan discrepar. */

/* modo-dia-noche */
@media(prefers-color-scheme:dark){
  :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-booking{background:#7FB2EA;color:#0D161D}
  :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-expedia{background:#B6A0F0;color:#0D161D}
  :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-airbnb{background:#F59AA6;color:#0D161D}
  :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-directo{background:#5FD9B6;color:#0D161D}
  :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-agencia{background:#DFB878;color:#0D161D}
  /* El recuadro interior que estilo-13 le pone a .canal sobre fondo oscuro era
     para separar un gris de otro gris. Con color propio ya no hace falta y
     ensucia la orilla. */
  :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-booking,
:where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-expedia,
:where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-airbnb,
:where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-directo,
:where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-agencia{box-shadow:none}
}
/* la misma, cuando se elige Noche en el menu */
  :where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-booking{background:#7FB2EA;color:#0D161D}
  :where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-expedia{background:#B6A0F0;color:#0D161D}
  :where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-airbnb{background:#F59AA6;color:#0D161D}
  :where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-directo{background:#5FD9B6;color:#0D161D}
  :where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-agencia{background:#DFB878;color:#0D161D}
  :where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-booking,
:where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-expedia,
:where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-airbnb,
:where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-directo,
:where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-agencia{box-shadow:none}



/* LA LEYENDA. Va encima de la rejilla, en una sola linea que se envuelve, y
   DICE SOLO LO QUE HAY EN PANTALLA (app-64): una leyenda de siete renglones
   donde se ven dos canales le pide a la persona descartar cinco. */
.ohq64lg{display:flex;flex-wrap:wrap;gap:var(--o-e2) var(--o-e4);
  align-items:center;margin:0 0 var(--o-e3);
  font-size:var(--o-nota);color:var(--o-texto2)}
.ohq64lg-i{display:inline-flex;align-items:center;gap:var(--o-e1);white-space:nowrap}
.ohq64lg i{width:10px;height:10px;border-radius:3px;display:inline-block;
  border:1px solid var(--o-linea-f)}
.ohq64lg i.ohq64-booking{background:#1C4E8A}
.ohq64lg i.ohq64-expedia{background:#5B3FA0}
.ohq64lg i.ohq64-airbnb{background:#A82A43}
.ohq64lg i.ohq64-directo{background:#0E6E5A}
.ohq64lg i.ohq64-agencia{background:#7A5B2E}
.ohq64lg i.ohq64-recepcion{background:var(--o-acento)}
.ohq64lg i.ohq64-bloqueo{background:var(--sand,#C9C2B4)}
/* modo-dia-noche */
@media(prefers-color-scheme:dark){
  :where(html:not(.oh-dia)) .ohq64lg i.ohq64-booking{background:#7FB2EA}
  :where(html:not(.oh-dia)) .ohq64lg i.ohq64-expedia{background:#B6A0F0}
  :where(html:not(.oh-dia)) .ohq64lg i.ohq64-airbnb{background:#F59AA6}
  :where(html:not(.oh-dia)) .ohq64lg i.ohq64-directo{background:#5FD9B6}
  :where(html:not(.oh-dia)) .ohq64lg i.ohq64-agencia{background:#DFB878}
  :where(html:not(.oh-dia)) .ohq64lg i.ohq64-bloqueo{background:#B8C2C8}
}
/* la misma, cuando se elige Noche en el menu */
  :where(html.oh-noche) .ohq64lg i.ohq64-booking{background:#7FB2EA}
  :where(html.oh-noche) .ohq64lg i.ohq64-expedia{background:#B6A0F0}
  :where(html.oh-noche) .ohq64lg i.ohq64-airbnb{background:#F59AA6}
  :where(html.oh-noche) .ohq64lg i.ohq64-directo{background:#5FD9B6}
  :where(html.oh-noche) .ohq64lg i.ohq64-agencia{background:#DFB878}
  :where(html.oh-noche) .ohq64lg i.ohq64-bloqueo{background:#B8C2C8}



/* ══════════════════════════════════════════════════════════════════════════
   CIERRE DE LA RONDA 2.7 (encargo 816) · lo que se agrega a esta misma hoja:
   el color de «Central», la leyenda única que además filtra, y la pantalla de
   temas con el sistema nuevo.
   NI UN NÚMERO DE TIPOGRAFÍA A MANO: todo sale de los cinco tamaños y los dos
   pesos de estilo-10, que es justo lo que a la pantalla de temas le faltaba.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ A · «CENTRAL», EL SEXTO COLOR ═════════════════════════════════════════
   Es lo que entra por tripandhomes.com, y es un canal distinto de «Directa»
   (el sitio propio de la propiedad). Dos nombres piden dos colores: si
   compartieran uno, el nombre nuevo no serviría de nada en la rejilla.

   POR QUÉ CIRUELA Y NO NARANJA, Y ESTÁ MEDIDO EN LAS DOS ESCALAS QUE IMPORTAN:
   un color nuevo tiene que pasar AA Y tiene que distinguirse de los cinco que
   ya están, y lo segundo NO lo mide el contraste —que solo compara luminancia—
   sino la distancia de color (CIEDE2000) contra cada uno de los existentes y
   contra los cinco acentos de tema.
     naranja #9E4A16  · contraste 6.10 / 4.66 · dE2000 mínimo 14.1 (vs agencia)
     ciruela #7A1F5C  · contraste 9.64 / 7.38 · dE2000 mínimo 16.6 (vs malva)
   La ciruela gana en las dos. La naranja es prima del café de «Agencias u otro»
   (#7A5B2E) y en una barra de 60 px a 390 esa diferencia es la que no se ve.

   CONTRASTE MEDIDO (WCAG 2.1), con la misma forma que los cinco de arriba:
     CLARO    #7A1F5C · texto blanco 9.64 · contra la página clara 7.38
     NOCTURNO #EFA2E0 · tinta #0D161D 9.49 · contra el fondo oscuro 9.48
   El piso AA de texto son 4.5 y el de un elemento no textual 3. Con esto el
   más bajo de los doce sigue siendo 5.66, el de «directo»: Central no baja el
   piso de la matriz. */
body.ohm-opera .ohkg .ohkbar.ohq64-central{background:#7A1F5C;color:#fff}
/* modo-dia-noche */
@media(prefers-color-scheme:dark){
  :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-central{background:#EFA2E0;color:#0D161D}
  :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-central{box-shadow:none}
}
/* la misma, cuando se elige Noche en el menu */
  :where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-central{background:#EFA2E0;color:#0D161D}
  :where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-central{box-shadow:none}



/* ══ B · LA LEYENDA ÚNICA, QUE ADEMÁS FILTRA ═══════════════════════════════
   Hasta la ronda 2.7 había DOS leyendas que se contradecían: las cuatro
   pastillas de app-58 y esta. Se conserva esta y se le pasa el filtro de la
   otra, así que sus renglones dejaron de ser <span> y ahora son botones de
   verdad: 44 px de área de toque, foco visible y estado apretado.
   LA PASTILLA ENCENDIDA NO SE DISTINGUE SOLO POR COLOR (1.4.1): lleva su
   contorno de acento Y su fondo suave, y el aria-pressed lo dice en voz alta. */
.ohq64lg-i{font:inherit;font-size:var(--o-nota);font-weight:var(--o-normal);
  color:var(--o-texto2);background:none;border:1px solid transparent;
  border-radius:999px;padding:var(--o-e1) var(--o-e2);cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--o-e1);white-space:nowrap;
  min-height:28px;
  transition:background var(--o-mov) var(--o-curva),
             border-color var(--o-mov) var(--o-curva)}
.ohq64lg-i:hover{background:var(--o-acento-suave);border-color:var(--o-linea-f)}
.ohq64lg-i:focus-visible{outline:2px solid var(--o-acento);outline-offset:2px}
.ohq64lg-i.on{background:var(--o-acento-suave);border-color:var(--o-acento);
  color:var(--o-texto);font-weight:var(--o-fuerte)}
/* EL ÁREA DE TOQUE DE 44 PX EN EL TELÉFONO, y sin engordar la fila: el área
   crece por fuera con un pseudoelemento, que es lo que ya hace la columna de
   cuartos de estilo-15. Una pastilla de 44 px de alto en una fila de siete
   tapa dos días de calendario a 390. */
.ohq64lg-i{position:relative}
@media(max-width:699px){
  .ohq64lg-i::after{content:'';position:absolute;left:0;right:0;
    top:50%;transform:translateY(-50%);height:44px}
}
.ohq64lg-v{font:inherit;font-size:var(--o-nota);font-weight:var(--o-fuerte);
  color:var(--o-acento-t);background:none;border:0;padding:var(--o-e1) var(--o-e2);
  cursor:pointer;min-height:28px;text-decoration:underline}
.ohq64lg-v:focus-visible{outline:2px solid var(--o-acento);outline-offset:2px}
.ohq64lg i.ohq64-central{background:#7A1F5C}
/* «Sin cupo ese día» con el mismo rojo de la celda que nombra (estilo-12:
   .ohkg .ohkc.cero usa --o-alarma como tinta). */
.ohq64lg i.ohq64-cero{background:var(--o-alarma)}
/* modo-dia-noche */
@media(prefers-color-scheme:dark){
  :where(html:not(.oh-dia)) .ohq64lg i.ohq64-central{background:#EFA2E0}
}
/* la misma, cuando se elige Noche en el menu */
  :where(html.oh-noche) .ohq64lg i.ohq64-central{background:#EFA2E0}



/* EL APAGADO DEL FILTRO POR CANAL. Clase propia y no la .apagada de app-58,
   porque el buscador de app-41 ya es dueño de esa y dos dueños de una clase es
   como se pierde un apagado. El valor es el mismo .28 de estilo-12, para que
   filtrar por canal y filtrar por tipo se vean igual: dos opacidades distintas
   para la misma idea se leen como dos cosas distintas. */
body.ohm-opera .ohkg .ohkbar.ohq64-apaga{opacity:.28}

/* ══ C · LA PANTALLA DE TEMAS CON EL SISTEMA NUEVO ═════════════════════════
   Lo que tenía antes (estilo-01: .temas/.tema-t) traía 15.5px, 13px y 11px
   escritos a mano y los tokens viejos. Aquí no hay un solo número de
   tipografía: nombre en --o-cuerpo-f, descripción en --o-cuerpo, pastilla en
   --o-nota, dos pesos y nada más.
   LA TARJETA ES .ohc, la única forma de contenedor del estándar, y lo que esta
   hoja le agrega es lo que .ohc no sabe: que es un botón. */
.ohq64tc{display:block}
.ohq64-volver{margin:0 0 var(--o-e3);min-height:44px}
.ohq64-volver span{font-size:var(--o-cuerpo-f);line-height:1}
.ohq64tg{display:grid;grid-template-columns:1fr;gap:var(--o-e3);
  margin:0 0 var(--o-e5)}
@media(min-width:700px){
  .ohq64tg{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
.ohq64t{font:inherit;text-align:left;display:block;width:100%;cursor:pointer;
  color:var(--o-texto);
  transition:border-color var(--o-mov) var(--o-curva),
             box-shadow var(--o-mov) var(--o-curva)}
.ohq64t:hover{border-color:var(--o-acento)}
.ohq64t:focus-visible{outline:2px solid var(--o-acento);outline-offset:2px}
/* EL TEMA PUESTO NO SE MARCA SOLO CON COLOR: lleva el contorno de acento, la
   pastilla que dice «tu tema» con letra, y aria-pressed. */
.ohq64t.on{border-color:var(--o-acento);box-shadow:0 0 0 1px var(--o-acento) inset}
.ohq64t-n{display:flex;align-items:center;gap:var(--o-e2);flex-wrap:wrap;
  margin-top:var(--o-e3);font-size:var(--o-cuerpo-f);
  font-weight:var(--o-fuerte);color:var(--o-texto)}
.ohq64t-ya{font-size:var(--o-nota);font-weight:var(--o-fuerte);
  color:var(--o-acento-t);background:var(--o-acento-suave);
  border-radius:999px;padding:1px var(--o-e2)}
.ohq64t-d{display:block;margin-top:var(--o-e1);font-size:var(--o-cuerpo);
  font-weight:var(--o-normal);color:var(--o-texto3)}
.ohq64t-pie{display:flex;align-items:center;gap:var(--o-e4);flex-wrap:wrap}
@media(max-width:699px){
  .ohq64t-pie{display:block}
  .ohq64t-pie .ohb{width:100%;margin-bottom:var(--o-e3)}
}
/* LA MUESTRA SE QUEDA COMO ESTÁ EN SU FORMA Y SOLO SE LE QUITAN LOS NÚMEROS A
   MANO DEL BORDE: sus colores salen del tema (data-paleta en el propio <span>,
   app-31) y tocarlos aquí sería la segunda lista de colores que esa pieza
   nació para no tener. */
.ohq64t .tema-m{border-color:var(--o-linea-f);border-radius:var(--o-radio-ctl)}

/* ══ D · LOS CANALES NUEVOS REGISTRADOS (encargo 825, corrida 521, 4-oct-2026)
   TEXTUAL DE EDUARDO, y es lo que decide esta sección entera: «las agencias
   comparten el color de Agencias». Despegar, PriceTravel, Agoda, Trip.com y
   Hotelbeds reciben el MISMO café que «Agencias», y Google el MISMO verde que
   «Directa», porque Eduardo dijo que una reserva por Google cuenta como Directa.

   NI UN NÚMERO NUEVO EN ESTA HOJA, Y ESO ES EL PUNTO: los dos pares ya están
   medidos más arriba en este mismo archivo y se repiten tal cual, así que el
   contraste AA de los canales nuevos es el de los viejos, no una promesa.
     agencia  CLARO #7A5B2E texto blanco 6.24 · contra la página clara 5.72
              NOCT. #DFB878 tinta #0D161D 9.80 · contra el fondo oscuro 8.30
     directo  CLARO #0E6E5A texto blanco 6.18 · contra la página clara 5.66
              NOCT. #5FD9B6 tinta #0D161D 10.51 · contra el fondo oscuro 8.91
   El piso AA de texto son 4.5 y el de un elemento no textual 3. El más bajo de
   los ocho sigue siendo 5.66, el de «directo»: los canales nuevos NO bajan el
   piso de la matriz, porque no traen tonos nuevos.

   POR QUÉ NO SE LES INVENTÓ UN COLOR A CADA UNO, aparte de que Eduardo lo dijo:
   el sexto tono (Central) se eligió midiendo dE2000 contra los cinco que había
   y contra los cinco acentos de tema, y el margen que quedó fue de 16.6. Cinco
   tonos más, todos pasando AA y todos distinguibles entre sí en una barra de
   60 px a 390, no caben en esa matriz: lo que sale son primos del café y del
   ciruela, y un color que se confunde con el de al lado dice que la reserva es
   de otro canal. EL NOMBRE SÍ ES PROPIO de cada uno (app-64): la barra dice
   «Despegar» y la leyenda también, así que compartir el color no pierde el dato.

   SE ESCRIBEN COMO SELECTORES PROPIOS Y NO AGREGANDO LAS CLASES A LAS REGLAS DE
   ARRIBA, a propósito: agregar seis nombres a una lista de cinco reglas ya
   medidas obliga a releer esas cinco para comprobar que no se movió nada. Aquí
   el bloque nuevo se lee solo, y si alguna vez un canal nuevo necesita su propio
   tono, se le cambia aquí sin tocar los seis colores aprobados. */
body.ohm-opera .ohkg .ohkbar.ohq64-despegar,
body.ohm-opera .ohkg .ohkbar.ohq64-pricetravel,
body.ohm-opera .ohkg .ohkbar.ohq64-agoda,
body.ohm-opera .ohkg .ohkbar.ohq64-trip_com,
body.ohm-opera .ohkg .ohkbar.ohq64-hotelbeds{background:#7A5B2E;color:#fff}
body.ohm-opera .ohkg .ohkbar.ohq64-google{background:#0E6E5A;color:#fff}

.ohq64lg i.ohq64-despegar,
.ohq64lg i.ohq64-pricetravel,
.ohq64lg i.ohq64-agoda,
.ohq64lg i.ohq64-trip_com,
.ohq64lg i.ohq64-hotelbeds{background:#7A5B2E}
.ohq64lg i.ohq64-google{background:#0E6E5A}

/* modo-dia-noche */
@media(prefers-color-scheme:dark){
  :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-despegar,
:where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-pricetravel,
:where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-agoda,
:where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-trip_com,
:where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-hotelbeds{background:#DFB878;color:#0D161D}
  :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-google{background:#5FD9B6;color:#0D161D}
  /* El recuadro interior que estilo-13 le pone a .canal sobre fondo oscuro era
     para separar un gris de otro gris; con color propio ensucia la orilla. Es
     la misma línea que ya traen los seis de arriba. */
  :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-despegar,
:where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-pricetravel,
:where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-agoda,
:where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-trip_com,
:where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-hotelbeds,
:where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.ohq64-google{box-shadow:none}
  :where(html:not(.oh-dia)) .ohq64lg i.ohq64-despegar,
:where(html:not(.oh-dia)) .ohq64lg i.ohq64-pricetravel,
:where(html:not(.oh-dia)) .ohq64lg i.ohq64-agoda,
:where(html:not(.oh-dia)) .ohq64lg i.ohq64-trip_com,
:where(html:not(.oh-dia)) .ohq64lg i.ohq64-hotelbeds{background:#DFB878}
  :where(html:not(.oh-dia)) .ohq64lg i.ohq64-google{background:#5FD9B6}
}
/* la misma, cuando se elige Noche en el menu */
  :where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-despegar,
:where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-pricetravel,
:where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-agoda,
:where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-trip_com,
:where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-hotelbeds{background:#DFB878;color:#0D161D}
  :where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-google{background:#5FD9B6;color:#0D161D}
  :where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-despegar,
:where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-pricetravel,
:where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-agoda,
:where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-trip_com,
:where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-hotelbeds,
:where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.ohq64-google{box-shadow:none}
  :where(html.oh-noche) .ohq64lg i.ohq64-despegar,
:where(html.oh-noche) .ohq64lg i.ohq64-pricetravel,
:where(html.oh-noche) .ohq64lg i.ohq64-agoda,
:where(html.oh-noche) .ohq64lg i.ohq64-trip_com,
:where(html.oh-noche) .ohq64lg i.ohq64-hotelbeds{background:#DFB878}
  :where(html.oh-noche) .ohq64lg i.ohq64-google{background:#5FD9B6}