/* ==========================================================================
   estilo-19.css · COMPLEMENTOS (app-87). Arqui, 14-oct-2026.
   Todo con prefijo .cx- (colisiones medidas: ninguna en estilo-01 a 18) y
   sobre las variables del marco de recepcion (--o-*, estilo-10), asi que el
   modo nocturno y las paletas de estilo-13/16 lo alcanzan solos.
   Esquinas: --o-radio (12) en tarjetas, --o-radio-ctl (10) en controles,
   pastillas redondas en los filtros. La misma familia del resto del marco.
   ========================================================================== */

.cx-cab{margin-bottom:var(--o-e4)}
/* estilo-10 esconde el boton lleno de .ohcab debajo de 1180 porque en Hoy y
   Calendario su accion («Nueva reserva») vive en el encabezado del telefono.
   Aqui la accion es de esta seccion y no esta en ningun otro lado: se queda. */
body.ohm-opera .ohcab.cx-cab .ohb-p{display:inline-flex}
.cx-c{display:none}
@media(max-width:560px){.cx-l{display:none}.cx-c{display:inline}
  .cx-cab .ohcab-ac{width:100%;justify-content:stretch}
  .cx-cab .ohcab-ac .ohb{flex:1 1 0;padding:0 var(--o-e2)}}

/* La linea que explica la regla, una sola vez y arriba. */
.cx-intro{font-size:var(--o-cuerpo);color:var(--o-texto2);line-height:1.5;
  background:var(--o-acento-suave);border-radius:var(--o-radio);
  padding:var(--o-e3) var(--o-e4);margin:0 0 var(--o-e4)}
.cx-intro b{color:var(--o-texto);font-weight:var(--o-fuerte)}
.cx-intro-s{background:var(--o-super);border:1px solid var(--o-linea)}
.cx-intro-w{background:rgba(198,120,20,.10);color:var(--o-atencion-t)}
.cx-intro .ohb-t{min-height:0;padding:0 0 0 var(--o-e1);font-size:var(--o-cuerpo)}

/* La barra: servicios/proveedores y el buscador, al mismo nivel. */
.cx-barra{display:flex;align-items:center;gap:var(--o-e3);flex-wrap:wrap;
  margin:0 0 var(--o-e3)}
.cx-seg{flex:0 0 auto}
.cx-bus{flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:var(--o-e2);
  background:var(--o-super);border:1px solid var(--o-linea-f);
  border-radius:var(--o-radio-ctl);padding:0 var(--o-e3);min-height:44px;
  transition:border-color var(--o-mov) var(--o-curva)}
.cx-bus:focus-within{border-color:var(--o-acento)}
.cx-bus svg{width:18px;height:18px;flex:0 0 auto;color:var(--o-texto3)}
.cx-bus input{flex:1 1 auto;min-width:0;border:0;outline:0;background:none;
  font:inherit;font-size:var(--o-cuerpo-f);color:var(--o-texto);min-height:42px}

/* Los grupos: pastillas que se deslizan de lado en el telefono (nada crece
   hacia abajo), con su cuenta. */
.cx-chips{display:flex;gap:var(--o-e2);overflow-x:auto;scrollbar-width:none;
  margin:0 0 var(--o-e5);padding:2px 0 4px;-webkit-overflow-scrolling:touch}
.cx-chips::-webkit-scrollbar{display:none}
.cx-chips button{flex:0 0 auto;font:inherit;font-size:var(--o-nota);
  font-weight:var(--o-fuerte);color:var(--o-texto2);background:var(--o-super);
  border:1px solid var(--o-linea-f);border-radius:999px;min-height:36px;
  padding:0 var(--o-e3);display:inline-flex;align-items:center;gap:var(--o-e2);
  cursor:pointer;white-space:nowrap;
  transition:background var(--o-mov) var(--o-curva),border-color var(--o-mov) var(--o-curva),
             color var(--o-mov) var(--o-curva)}
.cx-chips button:hover{border-color:var(--o-acento);color:var(--o-acento-t)}
.cx-chips button em{font-style:normal;font-weight:var(--o-normal);color:var(--o-texto3)}
.cx-chips button.on{background:var(--o-texto);border-color:var(--o-texto);color:var(--o-super)}
.cx-chips button.on em{color:inherit;opacity:.75}

/* Un grupo: titulo con su cuenta, y la rejilla. */
.cx-sec{margin:0 0 var(--o-e6)}
.cx-sec h2{display:flex;align-items:baseline;gap:var(--o-e2);margin:0 0 var(--o-e3);
  font-size:var(--o-titulo);font-weight:var(--o-fuerte);color:var(--o-texto);
  letter-spacing:-.01em}
.cx-sec h2 span{font-size:var(--o-cuerpo);font-weight:var(--o-normal);color:var(--o-texto3)}
.cx-grid{display:grid;gap:var(--o-e3);grid-template-columns:1fr}
@media(min-width:700px){.cx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.cx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* La tarjeta. Columna flexible: el pie (lo de recepcion) se va al fondo, asi
   que en una fila de la rejilla todos los pies quedan al mismo nivel. */
.cx-card{background:var(--o-super);border:1px solid var(--o-linea);
  border-radius:var(--o-radio);box-shadow:var(--o-sombra);
  padding:var(--o-e4);min-width:0;display:flex;flex-direction:column;gap:var(--o-e2)}
.cx-card.cx-pend{border-color:rgba(198,120,20,.35)}
.cx-top{display:flex;align-items:center;justify-content:space-between;gap:var(--o-e2);
  flex-wrap:wrap;min-height:22px}
.cx-gr{font-size:var(--o-nota);font-weight:var(--o-fuerte);color:var(--o-texto3);
  letter-spacing:.04em;text-transform:uppercase}
.cx-badge{font-size:var(--o-nota);font-weight:var(--o-fuerte);color:var(--o-acento-t);
  background:var(--o-acento-suave);border-radius:999px;padding:3px 10px;white-space:nowrap}
.cx-n{margin:0;font-size:var(--o-cuerpo-f);font-weight:var(--o-fuerte);color:var(--o-texto);
  line-height:1.3;overflow-wrap:anywhere}
.cx-precio{display:flex;align-items:baseline;gap:var(--o-e2);flex-wrap:wrap}
.cx-precio b{font-size:24px;font-weight:var(--o-fuerte);color:var(--o-texto);
  letter-spacing:-.02em;line-height:1.1}
.cx-precio b.cx-cot{font-size:var(--o-cuerpo-f)}
.cx-precio span{font-size:var(--o-cuerpo);color:var(--o-texto3)}

.cx-dl{margin:var(--o-e1) 0 0;display:grid;gap:var(--o-e2)}
.cx-dl>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:var(--o-e2);
  align-items:baseline}
.cx-dl dt{font-size:var(--o-nota);color:var(--o-texto3)}
.cx-dl dd{margin:0;font-size:var(--o-cuerpo);color:var(--o-texto);min-width:0;
  display:flex;flex-wrap:wrap;gap:2px var(--o-e2);align-items:baseline}
.cx-dl dd b{font-weight:var(--o-fuerte)}
.cx-dl dd span{color:var(--o-texto3)}
.cx-tel{color:var(--o-acento-t);font-weight:var(--o-fuerte);text-decoration:none;
  white-space:nowrap}
.cx-tel:hover{text-decoration:underline}

.cx-cobro,.cx-nota,.cx-av,.cx-dir{margin:0;font-size:var(--o-cuerpo);line-height:1.45}
.cx-cobro{color:var(--o-texto2)}
.cx-cobro b{color:var(--o-texto)}
.cx-nota{color:var(--o-texto3)}
.cx-av{color:var(--o-atencion-t);background:rgba(198,120,20,.08);
  border-radius:var(--o-radio-ctl);padding:var(--o-e2) var(--o-e3)}
.cx-dir{font-size:var(--o-nota);color:var(--o-texto3)}

.cx-pie{margin-top:auto;padding-top:var(--o-e3);border-top:1px solid var(--o-linea);
  display:flex;align-items:center;justify-content:space-between;gap:var(--o-e3);flex-wrap:wrap}
.cx-rec,.cx-svc{display:flex;flex-wrap:wrap;align-items:baseline;
  column-gap:var(--o-e2);row-gap:2px}
.cx-rec span,.cx-svc span{font-size:var(--o-nota);font-weight:var(--o-fuerte);color:var(--o-texto3)}
.cx-rec b{font-size:var(--o-cuerpo-f);font-weight:var(--o-fuerte);color:var(--o-bien)}
.cx-rec.cx-rec-p b{color:var(--o-atencion-t)}
.cx-rec small,.cx-svc small{flex:1 0 100%;font-size:var(--o-nota);color:var(--o-texto3)}
.cx-svc span{color:var(--o-texto2)}
.cx-conf{min-height:38px}

/* Mientras carga: barra que avanza y tarjetas fantasma. Nada se espera quieto. */
.cx-carga{display:flex;align-items:center;gap:var(--o-e3);font-size:var(--o-cuerpo);
  color:var(--o-texto3);margin:0 0 var(--o-e4)}
.cx-carga-b{width:120px;height:4px;border-radius:999px;background:var(--o-linea);
  overflow:hidden;flex:0 0 auto}
.cx-carga-b i{display:block;width:40%;height:100%;border-radius:999px;
  background:var(--o-acento);animation:cxva 1.1s var(--o-curva) infinite}
@keyframes cxva{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.cx-esq{min-height:190px}
.cx-esq i{display:block;height:12px;border-radius:6px;background:var(--o-linea);
  animation:cxlate 1.4s ease-in-out infinite}
.cx-esq i:nth-child(1){width:35%}
.cx-esq i:nth-child(2){width:80%;height:16px}
.cx-esq i:nth-child(3){width:45%;height:22px}
.cx-esq i:nth-child(4){width:60%;margin-top:auto}
@keyframes cxlate{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.cx-carga-b i,.cx-esq i{animation:none}}

.cx-vacio{background:var(--o-super);border:1px dashed var(--o-linea-f);
  border-radius:var(--o-radio);padding:var(--o-e5) var(--o-e4);text-align:center;
  display:grid;gap:var(--o-e2);justify-items:center;font-size:var(--o-cuerpo);color:var(--o-texto2)}

/* El aire debajo de la ultima tarjeta: nada termina pegado a la orilla. */
.cx-fin{height:var(--o-e7)}

/* Los formularios de alta. */
.cx-form{display:grid;gap:var(--o-e4);max-width:640px;background:var(--o-super);
  border:1px solid var(--o-linea);border-radius:var(--o-radio);box-shadow:var(--o-sombra);
  padding:var(--o-e5) var(--o-e4)}
@media(min-width:700px){.cx-form{padding:var(--o-e5)}}
.cx-form textarea{resize:vertical;min-height:72px;line-height:1.4}
.cx-form .ohf>label .ohf-n{font-weight:var(--o-normal)}
@media(max-width:480px){.cx-form .ohf2{grid-template-columns:1fr}}
.cx-link{font:inherit;background:none;border:0;padding:0;color:var(--o-acento-t);
  font-weight:var(--o-fuerte);cursor:pointer;text-decoration:underline}
.cx-radio{border:0;margin:0;padding:0;display:grid;gap:var(--o-e2);min-width:0}
.cx-radio legend{font-size:var(--o-nota);font-weight:var(--o-fuerte);color:var(--o-texto2);
  margin-bottom:var(--o-e1);padding:0}
.cx-radio label{display:flex;gap:var(--o-e3);align-items:flex-start;cursor:pointer;
  border:1px solid var(--o-linea-f);border-radius:var(--o-radio-ctl);
  padding:var(--o-e3);font-size:var(--o-cuerpo);color:var(--o-texto2);line-height:1.4}
.cx-radio label:has(input:checked){border-color:var(--o-acento);background:var(--o-acento-suave)}
.cx-radio input{margin:3px 0 0;accent-color:var(--o-acento);flex:0 0 auto}
.cx-radio b{color:var(--o-texto)}
.cx-cuenta{display:grid;gap:var(--o-e2);background:var(--o-fondo);
  border-radius:var(--o-radio-ctl);padding:var(--o-e3) var(--o-e4);font-size:var(--o-cuerpo);
  color:var(--o-texto3)}
.cx-cuenta>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--o-e3)}
.cx-cuenta>div b{color:var(--o-texto);font-weight:var(--o-fuerte)}
.cx-cuenta .cx-cta{border-top:1px solid var(--o-linea);padding-top:var(--o-e2)}
.cx-cuenta .cx-mal{color:var(--o-alarma);font-weight:var(--o-fuerte)}
.cx-acc{display:flex;justify-content:flex-end;align-items:center;gap:var(--o-e2);flex-wrap:wrap;
  padding-top:var(--o-e2)}
@media(max-width:480px){.cx-acc .ohb{flex:1 1 auto}}