/* Estilo común del PMS para recepción y admin (fase 2, 29-oct-2026). Es el de SABO (app.sabo.gg, copia en
   amor-hq/docs/marca/sabo-marca.css): negro puro, texto blanco, cian de acento, bordes de 2 px, sombra dura en el
   botón principal y en las tarjetas; nada de degradados ni sombras difuminadas. Una sola letra: la del sistema.
   Dos partes:
     - base de página: solo en <body class="rx"> (las pantallas nuevas); el index.html del PMS no la lleva;
     - piezas rx-*: las que pintan recepcion-sesion.js, lista-negra.js y buscador.js; valen en cualquier página
       (lista-negra.js carga esta hoja en el PMS principal para sus avisos) y no tocan nada que no sea rx-*. */
:root {
  --rx-bg: #000;
  --rx-card: #0a0b0c;
  --rx-line: #1b1d1f;
  --rx-line2: #2c3339;
  --rx-txt: #f2f2f2;
  --rx-dim: #a6abae;
  --rx-muted: #7b8389;
  --rx-brand: #40f2fe;
  --rx-brand-osc: #0b6a70;
  --rx-ok: #3fb950;
  --rx-mal: #f85149;
  --rx-aviso: #f0b232;
  --rx-letra: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --rx-sh: 6px 6px 0 rgba(64, 242, 254, .14);
}

/* --- base de página (body.rx) ------------------------------------------------------------------- */
body.rx { margin: 0 auto; padding: 16px; max-width: 560px; background: var(--rx-bg); color: var(--rx-txt);
  font: 16px/1.5 var(--rx-letra); -webkit-font-smoothing: antialiased; }
html:has(body.rx) { background: var(--rx-bg); }
body.rx * { box-sizing: border-box; }
body.rx a { color: var(--rx-brand); }
body.rx h1 { font-size: 24px; font-weight: 800; letter-spacing: -.3px; margin: 10px 0 6px; }
body.rx h1 .b { color: var(--rx-brand); }
body.rx h2 { font-size: 17px; font-weight: 800; margin: 24px 0 10px; }
body.rx .sub { color: var(--rx-dim); font-size: 14px; margin: 0 0 16px; line-height: 1.45; }
body.rx .nota, body.rx .aviso { color: var(--rx-dim); font-size: 14px; }
body.rx label { display: block; font-size: 14px; color: var(--rx-dim); margin-top: 12px; }
body.rx input, body.rx select, body.rx textarea { display: block; width: 100%; margin-top: 4px; padding: 13px 12px;
  background: #000; color: var(--rx-txt); border: 2px solid var(--rx-line2); border-radius: 6px; font: 17px var(--rx-letra); }
body.rx input[type=checkbox] { display: inline-block; width: auto; margin: 0; accent-color: var(--rx-brand); }
body.rx input:focus, body.rx select:focus, body.rx textarea:focus { outline: none; border-color: var(--rx-brand); }
body.rx textarea { min-height: 70px; resize: vertical; }
body.rx .tarjeta, body.rx .tool { display: block; background: var(--rx-card); border: 2px solid var(--rx-line2); border-radius: 8px;
  padding: 14px; margin: 0 0 14px; box-shadow: var(--rx-sh); color: var(--rx-txt); text-decoration: none; }

/* --- botones (piezas rx-; también dentro de body.rx) ----------------------------------------------- */
.rx-btn { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 44px; margin: 0;
  padding: 10px 16px; border-radius: 6px; border: 2px solid #04110f; background: var(--rx-brand); color: #04110f;
  font: 800 16px var(--rx-letra); text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 var(--rx-brand-osc); }
.rx-btn:active { transform: translate(4px, 4px); box-shadow: none; }
.rx-btn.grande { display: flex; width: 100%; min-height: 54px; font-size: 18px; margin-top: 14px; }
.rx-btn.sec { background: transparent; color: var(--rx-txt); border-color: var(--rx-line2); box-shadow: none; font-weight: 700; }
.rx-btn.peligro { background: var(--rx-mal); color: #000; border-color: #000; box-shadow: 4px 4px 0 #5c1512; }
.rx-btn.chico { min-height: 36px; padding: 6px 12px; font-size: 14px; box-shadow: none; }
.rx-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.rx-btn:focus-visible { outline: 2px solid var(--rx-brand); outline-offset: 2px; }
/* Un enlace con forma de botón: que el color de los enlaces de la página no le gane al del botón. */
a.rx-btn, body.rx a.rx-btn { color: #04110f; text-decoration: none; }
a.rx-btn.sec, body.rx a.rx-btn.sec { color: var(--rx-txt); }
a.rx-btn.peligro, body.rx a.rx-btn.peligro { color: #000; }

/* --- avisos discretos: fondo negro, color en el borde y en la primera línea ------------------------------ */
.rx-aviso { background: var(--rx-card); border: 2px solid var(--rx-line2); border-left-width: 6px; border-radius: 6px;
  padding: 10px 12px; color: var(--rx-txt); font: 15px/1.4 var(--rx-letra); }
.rx-aviso.rojo { border-color: var(--rx-mal); } .rx-aviso.rojo .t { color: var(--rx-mal); }
.rx-aviso.naranja { border-color: var(--rx-aviso); } .rx-aviso.naranja .t { color: var(--rx-aviso); }
.rx-aviso.verde { border-color: var(--rx-ok); } .rx-aviso.verde .t { color: var(--rx-ok); }
.rx-aviso .t { font-weight: 800; }
.rx-aviso .d { color: var(--rx-dim); font-size: 14px; }

/* --- barra de sesión de la mini-app (recepcion-sesion.js) ------------------------------------------ */
.rx-barra { position: sticky; top: 0; z-index: 9980; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 0 0 12px; padding: 10px 60px 10px 0; background: #000; border-bottom: 2px solid var(--rx-line);
  color: var(--rx-txt); font: 600 15px var(--rx-letra); }
.rx-barra .rx-quien { color: var(--rx-dim); }
.rx-barra .rx-quien b { color: var(--rx-txt); }
.rx-barra.gracia { border-bottom-color: var(--rx-aviso); }
.rx-barra.gracia .rx-quien { color: var(--rx-aviso); font-weight: 600; line-height: 1.35; flex-basis: 100%; }

/* --- caja de entrada (recepcion-sesion.js) ---------------------------------------------------------- */
.rx-entrada { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-start; justify-content: center;
  overflow: auto; padding: 32px 16px; background: #000; font-family: var(--rx-letra); color: var(--rx-txt); }
.rx-entrada .caja { width: 100%; max-width: 420px; }
.rx-entrada .marca { color: var(--rx-brand); font-weight: 900; font-size: 15px; letter-spacing: .08em; }
.rx-entrada h1 { font-size: 26px; font-weight: 800; margin: 6px 0 4px; }
.rx-entrada p { color: var(--rx-dim); margin: 0 0 14px; font-size: 16px; }
.rx-entrada label { display: block; margin-top: 12px; font-size: 15px; color: var(--rx-dim); }
.rx-entrada input { display: block; width: 100%; margin-top: 4px; padding: 14px; background: #000; color: var(--rx-txt);
  border: 2px solid var(--rx-line2); border-radius: 6px; font: 18px var(--rx-letra); }
.rx-entrada input:focus { outline: none; border-color: var(--rx-brand); }
.rx-entrada .msg { min-height: 22px; margin: 12px 0 0; font-size: 16px; color: var(--rx-mal); }
.rx-entrada .msg.info { color: var(--rx-aviso); }

/* --- caja de decisión y franja de la lista de bloqueados (lista-negra.js) --------------------------- */
.rx-capa { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-start; justify-content: center;
  overflow: auto; padding: 20px 14px; background: rgba(0, 0, 0, .86); font-family: var(--rx-letra); }
.rx-decide { width: 100%; max-width: 480px; background: #000; color: var(--rx-txt); border: 2px solid var(--rx-mal);
  border-radius: 8px; padding: 18px; box-shadow: 6px 6px 0 rgba(248, 81, 73, .22); }
.rx-decide.naranja { border-color: var(--rx-aviso); box-shadow: 6px 6px 0 rgba(240, 178, 50, .2); }
.rx-decide .titulo { font-size: 22px; font-weight: 900; color: var(--rx-mal); }
.rx-decide.naranja .titulo { color: var(--rx-aviso); }
.rx-decide .explica { margin-top: 6px; font-size: 16px; }
.rx-decide .ficha { margin-top: 10px; padding: 10px 12px; background: var(--rx-card); border: 2px solid var(--rx-line2); border-radius: 6px; font-size: 16px; line-height: 1.4; }
.rx-decide .ficha .n { font-weight: 800; }
.rx-decide .ficha .d { color: var(--rx-dim); font-size: 14px; }
.rx-decide label { display: block; margin-top: 12px; font-size: 15px; color: var(--rx-dim); }
.rx-decide textarea { display: block; width: 100%; min-height: 64px; margin-top: 4px; padding: 10px; background: #000; color: var(--rx-txt);
  border: 2px solid var(--rx-line2); border-radius: 6px; font: 16px var(--rx-letra); }
.rx-decide .msg { min-height: 20px; margin-top: 6px; font-weight: 700; color: var(--rx-mal); }
.rx-decide .pie { margin-top: 10px; font-size: 13px; color: var(--rx-dim); }
.rx-franja { position: fixed; left: 8px; right: 8px; top: 8px; z-index: 9999; padding: 12px 46px 12px 14px;
  background: #000; color: var(--rx-txt); border: 2px solid var(--rx-mal); border-left-width: 6px; border-radius: 6px;
  font: 600 16px/1.35 var(--rx-letra); box-shadow: 6px 6px 0 rgba(248, 81, 73, .22); }
.rx-franja.naranja { border-color: var(--rx-aviso); box-shadow: 6px 6px 0 rgba(240, 178, 50, .2); }
.rx-franja .t { font-weight: 800; color: var(--rx-mal); }
.rx-franja.naranja .t { color: var(--rx-aviso); }
.rx-franja .d { color: var(--rx-dim); font-weight: 500; font-size: 14px; }
.rx-franja .cerrar { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; padding: 0; border: 2px solid var(--rx-line2);
  border-radius: 6px; background: #000; color: var(--rx-txt); font-size: 16px; cursor: pointer; }

/* --- buscador único (buscador.js) ------------------------------------------------------------------- */
.rx-busca { display: flex; gap: 8px; margin: 0 0 12px; }
.rx-busca input { flex: 1; min-width: 0; margin: 0; padding: 15px 14px; background: #000; color: var(--rx-txt);
  border: 2px solid var(--rx-brand); border-radius: 6px; font: 18px var(--rx-letra); }
.rx-busca input:focus { outline: none; box-shadow: 4px 4px 0 var(--rx-brand-osc); }
.rx-res { background: var(--rx-card); border: 2px solid var(--rx-line2); border-radius: 8px; padding: 14px; margin-bottom: 12px;
  box-shadow: var(--rx-sh); font-family: var(--rx-letra); color: var(--rx-txt); }
.rx-res.bloqueado { border-color: var(--rx-mal); box-shadow: 6px 6px 0 rgba(248, 81, 73, .18); }
.rx-res.parecido { border-color: var(--rx-aviso); }
.rx-res .nombre { font-size: 19px; font-weight: 800; }
.rx-res .estado { font-weight: 700; margin-top: 2px; }
.rx-res .estado.confirmed, .rx-res .estado.not_confirmed { color: var(--rx-aviso); }
.rx-res .estado.checked_in { color: var(--rx-ok); }
.rx-res .estado.checked_out { color: var(--rx-dim); }
.rx-res .estado.cancelled, .rx-res .estado.no_show { color: var(--rx-mal); }
.rx-res .linea { color: var(--rx-dim); font-size: 15px; margin-top: 3px; }
.rx-res .linea b { color: var(--rx-txt); font-weight: 600; }
.rx-res .coincide { color: var(--rx-brand); font-size: 13px; margin-top: 4px; }
.rx-res .botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rx-res .rx-aviso { margin-bottom: 10px; }
.rx-cuenta { color: var(--rx-dim); margin-bottom: 8px; font-size: 14px; }
.rx-pie { color: var(--rx-muted); font-size: 12px; margin-top: 6px; }
.rx-error { color: var(--rx-mal); font-size: 16px; }