/* =========================================================================
   idswift-ui.css — sistema de interfaz de la suite v2
   =========================================================================

   Qué es
   ------
   Los tokens y los componentes que hoy cada web se reinventa. Medido sobre
   develop-v2 el 1-sep-2026: 9.866 líneas de CSS repartidas por diez webs, 141
   colores hexadecimales distintos y 66 definiciones de botón. `brand.css` es
   marca —el lockup, la tipografía Croogla, el logo del hotel— y no define ni
   un botón ni un campo; por eso cada una se los ha hecho por su cuenta.

   Este fichero es la capa que faltaba. Sale de ScanDesk, que hace en 418
   líneas lo que el escáner (1.061) y la reg card (2.001) hacen por separado.

   LA REGLA QUE HACE ESTO SEGURO: enlazarlo no cambia NADA
   -------------------------------------------------------
   Trece de las veinte clases naturales (`.field`, `.page`, `.spinner`,
   `.header-bar`, `.form-grid`…) ya existen en otras webs con estilos
   distintos: `.field` sola aparece 29 veces en el escáner y 48 en el
   dashboard de precheckin. Un fichero común con esos nombres las repintaría
   en silencio al enlazarlo.

   Por eso:

     1. Todos los componentes van prefijados `idsw-`, que ya es la convención
        de v2 para interfaz compartida (`.idsw-user-widget`, `.idsw-auth-overlay`).
     2. La capa base —tipografía y fondo del documento— NO se aplica al `body`
        sin más: hace falta poner `class="idsw-app"`. Sin eso, enlazar el
        fichero es literalmente inerte.
     3. Los tokens se declaran en `:root`, que es inofensivo: una variable que
        nadie usa no pinta nada.

   Así la adopción es explícita y componente a componente. Una web puede tomar
   el botón sin tomar la rejilla, y ninguna cambia de aspecto hasta que alguien
   lo decide.

   Los dos verdes
   --------------
   `--brand` (#0e3d36) es el verde de INTERFAZ: tiene que sostener texto blanco
   pequeño en botones y cabeceras de tabla, y por eso es más oscuro que el
   corporativo. El de marca es `--idswift-forest` (#27524e), vive en brand.css
   y se queda para el lockup y la web pública. Son dos trabajos distintos y no
   tienen por qué usar el mismo tono (decisión de Victor, 1-sep-2026).

   ========================================================================= */

:root {
  /* --- Identidad ------------------------------------------------------- */
  --brand: #0e3d36;
  --brand-2: #0a2f2a;
  --accent: #f2c94c;
  --brand-text: #f1ece0;

  /* --- Texto ----------------------------------------------------------- */
  --ink: #0e3d36;
  --ink-soft: #2a4e47;
  --muted: #53706b;
  --muted-2: #8a9a96;

  /* --- Superficies y líneas -------------------------------------------- */
  --line: #d8d1c6;
  --line-soft: #ece7dc;
  --bg: #fdf9f1;
  --paper: #ffffff;

  /* --- Semánticos. Separados del acento a propósito: "correcto" y
         "peligro" no son decoración, y no deben moverse si cambia la marca. */
  --ok: #1b7f55;
  --ok-bg: #e7f2ec;
  --err: #c4473d;
  --err-bg: #fbeceb;
  --warn: #8a5a00;
  --warn-bg: #fdf1cd;

  /* --- Forma ----------------------------------------------------------- */
  --radius: 4px;
  --radius-2: 6px;

  /* --- Escala tipográfica. Cuatro tamaños, ni uno más: en cuanto hay seis,
         nadie recuerda cuál toca y vuelven los px sueltos. -------------- */
  --fs-h2: 15px;
  --fs-body: 14px;
  --fs-small: 12.5px;
  --fs-xs: 10.5px;

  /* --- Altura única de control. Es lo que de verdad ahorra líneas: con una
         altura común, botones, campos y desplegables se alinean solos en
         cualquier fila sin ajustes por pantalla. ------------------------- */
  --ctrl-h: 34px;

  --idsw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Inter, Arial, sans-serif;
}

/* =========================================================================
   ESCALA TÁCTIL — opt-in, con `class="idsw-touch"` en el body.

   La escala de arriba es para recepción: un ratón, una pantalla grande y la
   reserva entera a la vista. Lo que lee un huésped en su móvil, o toca con el
   dedo en la tablet del mostrador, necesita más cuerpo y objetivos más
   grandes. Sale de precheckin-register, que ya usaba 15/17/13/11 y controles
   de 40-46 px; frontdesk y la reg card están en el mismo caso.

   AQUÍ NO VA NINGÚN COLOR, y no es un descuido. El branding por hotel se
   aplica poniendo los tokens de color EN LÍNEA sobre <html>; una clase en
   <body> es un ancestro más cercano y ganaría, así que definir colores aquí
   pisaría la marca del hotel en la página que ve su cliente.
   ========================================================================= */

.idsw-touch {
  --fs-h2: 17px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-xs: 11px;
  --ctrl-h: 44px;
}

/* =========================================================================
   BASE — opt-in. Hace falta <body class="idsw-app">.
   ========================================================================= */

.idsw-app {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: var(--idsw-font);
  font-size: var(--fs-body);
  color: var(--ink);
  line-height: 1.45;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.idsw-app *,
.idsw-app *::before,
.idsw-app *::after { box-sizing: border-box; }

.idsw-app a { color: inherit; }
.idsw-app button { font-family: inherit; }
.idsw-app [hidden] { display: none !important; }

/* =========================================================================
   ESTRUCTURA
   ========================================================================= */

.idsw-page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

/* --- Cabecera: marca a la izquierda, logo del hotel centrado, acciones a la
       derecha. Tres columnas para que el logo quede centrado respecto a la
       PÁGINA y no respecto a lo que mida la marca. ------------------------ */
.idsw-header-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.idsw-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  min-width: 0;
}
.idsw-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  position: relative;
}
.idsw-hotel-logo {
  height: 30px;
  max-width: 150px;
  object-fit: contain;
  justify-self: center;
}

/* Pastilla de entorno. Se OCULTA sola en producción: si estuviera visible
   siempre, dejaría de leerse y un "feature" pasaría desapercibido. */
.idsw-env-pill {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 2px 7px;
  border-radius: 2px;
  background: var(--accent);
  color: var(--brand);
  border: 1px solid var(--accent);
}
.idsw-env-pill[data-env="main"],
.idsw-env-pill[data-env="release"] { display: none; }

/* =========================================================================
   TARJETA COLAPSABLE
   ========================================================================= */

.idsw-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  overflow: hidden;
  margin-bottom: 10px;
}
.idsw-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
}
.idsw-card[data-collapsed="true"] .idsw-card-head { border-bottom: none; }
.idsw-card-body { padding: 14px 16px 16px; }
.idsw-card[data-collapsed="true"] .idsw-card-body { display: none; }

.idsw-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.idsw-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* El número de sección sólo se pone cuando el orden SIGNIFICA algo (1 antes
   que 2). Como adorno, sobra. */
.idsw-card-num {
  width: 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.idsw-card-title {
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.idsw-chevron {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink-soft);
}
.idsw-chevron svg { width: 12px; height: 12px; transition: transform .15s ease; }
.idsw-card[data-collapsed="false"] .idsw-chevron svg { transform: rotate(180deg); }

/* `hover: hover` excluye el táctil: en una tablet el estado hover se queda
   pegado tras tocar y parece que el control está activo cuando no lo está. */
@media (hover: hover) {
  .idsw-chevron:hover { border-color: var(--ink); color: var(--ink); }
}

/* =========================================================================
   PANEL
   La tarjeta plegable de arriba es para una pantalla en secciones. Un panel
   liso —un bloque de contenido con su titulo— es lo que piden los tableros:
   filtros, resumen, tabla. Sale de ses-dashboard, y folio y el dashboard de
   precheckin tienen la misma forma.
   ========================================================================= */

.idsw-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.idsw-panel > h2 {
  margin: 0 0 12px;
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--ink);
}

/* =========================================================================
   PASTILLAS DE ESTADO
   El punto de color va antes del texto, no en lugar del texto: el estado se
   lee igual sin distinguir colores.
   ========================================================================= */

.idsw-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}
.idsw-pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.idsw-pill.is-idle { color: #7d7d7d; background: #eceae4; }
.idsw-pill.is-ok   { color: var(--ok);   background: var(--ok-bg); }
.idsw-pill.is-warn { color: var(--warn); background: var(--warn-bg); }
.idsw-pill.is-err  { color: var(--err);  background: var(--err-bg); }
.idsw-pill.is-live { color: var(--brand); background: var(--accent); }

/* Información de fondo (quién más tiene esto abierto): discreta a propósito,
   no es una alarma. Con data-warn sube a aviso. */
.idsw-pill.is-info {
  color: var(--muted);
  background: var(--line-soft);
  border: 1px solid var(--line);
}
.idsw-pill.is-info[data-warn="true"] {
  color: var(--warn);
  background: var(--warn-bg);
  border-color: var(--warn);
}

/* =========================================================================
   BOTONES
   Dos, no cinco: el que ejecuta la acción de la pantalla y el resto. Un
   tercer nivel de énfasis significa que ninguno destaca.
   ========================================================================= */

.idsw-btn {
  padding: 0 18px;
  height: var(--ctrl-h);
  background: var(--ink);
  color: var(--brand-text);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease;
  white-space: nowrap;
}
.idsw-btn:disabled {
  background: #c5c3bd;
  color: #fff;
  border-color: #c5c3bd;
  cursor: not-allowed;
}
@media (hover: hover) {
  .idsw-btn:hover:not(:disabled) { background: #000; }
}

.idsw-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  height: var(--ctrl-h);
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
  white-space: nowrap;
}
.idsw-btn-ghost:disabled { color: var(--muted-2); cursor: not-allowed; }
.idsw-btn-ghost.is-dashed { border-style: dashed; }
.idsw-btn-ghost.is-danger { color: var(--err); }
.idsw-btn-ghost.is-danger:disabled { color: var(--muted-2); }
/* Accion que conviene mirar dos veces sin llegar a destructiva (reenviar un
   parte que ya salio, por ejemplo). */
.idsw-btn-ghost.is-warn { color: var(--warn); }
.idsw-btn-ghost.is-warn:disabled { color: var(--muted-2); }
/* Variante baja, para acciones dentro de una fila de tabla o de una tarjeta:
   con la altura normal, cuatro seguidas dominan la fila que acompanan. */
.idsw-btn.is-sm,
.idsw-btn-ghost.is-sm {
  height: 26px;
  padding: 0 10px;
  font-size: var(--fs-xs);
}
@media (hover: hover) {
  .idsw-btn-ghost:hover:not(:disabled) { border-color: var(--ink); }
  .idsw-btn-ghost.is-danger:hover:not(:disabled) {
    background: var(--err-bg);
    border-color: var(--err);
  }
  .idsw-btn-ghost.is-warn:hover:not(:disabled) {
    background: var(--warn-bg);
    border-color: var(--warn);
  }
}

/* =========================================================================
   FORMULARIOS
   ========================================================================= */

.idsw-form-section { padding-top: 12px; }
.idsw-form-section:not(:first-child) {
  margin-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.idsw-form-label {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 700;
  margin-bottom: 9px;
}

/* auto-fit en vez de un número fijo de columnas: aprovecha el ancho que haya
   sin tener que declarar un breakpoint por cada pantalla de recepción. */
.idsw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 9px 12px;
}
/* Para bloques con muchas celdas cortas (contacto): columna más estrecha, y
   caben en una sola fila. */
.idsw-grid.is-dense { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }

.idsw-field.is-wide { grid-column: span 2; }

/* Dos controles que son UN dato para quien mira (fecha + hora de entrada). */
.idsw-field .idsw-combo { display: flex; gap: 6px; }
.idsw-field .idsw-combo input[type="date"] { flex: 1 1 60%; min-width: 0; }
.idsw-field .idsw-combo input[type="time"] { flex: 0 1 40%; min-width: 0; }

.idsw-field label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.idsw-field input,
.idsw-field select {
  width: 100%;
  padding: 0 9px;
  height: var(--ctrl-h);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: var(--fs-small);
  font-family: inherit;
  color: var(--ink);
  transition: border-color .12s ease, box-shadow .3s ease;
}
.idsw-field input:focus,
.idsw-field select:focus { outline: none; border-color: var(--ink); }
.idsw-field input:disabled,
.idsw-field select:disabled {
  background: var(--line-soft);
  color: var(--muted-2);
  cursor: not-allowed;
}

/* Campo que falta o no vale. Se marca el CONTROL y también su etiqueta: el
   borde solo no basta para quien no distingue bien el rojo, y la lista de
   faltas que estas pantallas enseñan aparte dice qué pasa, pero no dónde. */
.idsw-field.is-invalid label { color: var(--err); }
.idsw-field.is-invalid input,
.idsw-field.is-invalid select,
.idsw-field input.is-invalid,
.idsw-field select.is-invalid {
  border-color: var(--err);
  box-shadow: 0 0 0 1px var(--err-bg);
}

/* Destello para un valor que cambió SOLO (llegó de otro puesto). Sin esto,
   quien está delante no se entera de que le han movido un campo. */
.idsw-field input.is-flash,
.idsw-field select.is-flash {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.35);
}

/* Flecha propia: la nativa cambia de forma y de tamaño en cada navegador y
   rompe la altura común de control. */
.idsw-field select,
.idsw-select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 26px;
}
.idsw-select:disabled {
  background-color: var(--line-soft);
  color: var(--muted-2);
  cursor: not-allowed;
}

/* =========================================================================
   DIÁLOGO
   ========================================================================= */

/* Abierto/cerrado: el componente NO decide. Cada pantalla lo gobierna a su
   manera y las dos conviven:
     - con el atributo `hidden` (ScanDesk, documentos firmados), que la capa
       base ya oculta;
     - con `data-open` (panel de precheckin), para lo que se da la regla de
       abajo. Quien use `data-open` debe partir de "false" o anadir su propio
       `:not([data-open="true"])`, o el dialogo aparecera al cargar la pagina
       — que es exactamente lo que paso al migrar el panel de precheckin. */
.idsw-dialog[data-open="false"] { display: none; }

.idsw-dialog {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 61, 54, .45);
  padding: 24px;
}
.idsw-dialog-card {
  background: #fff;
  border-radius: var(--radius-2);
  max-width: 420px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(14, 61, 54, .35);
  padding: 18px 20px 14px;
  animation: idsw-pop .22s ease-out;
}
@keyframes idsw-pop {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.idsw-dialog h3 { font-size: var(--fs-h2); color: var(--ink); margin: 0 0 6px; }
.idsw-dialog p {
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  white-space: pre-line;
}
.idsw-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.idsw-dialog-actions button {
  border-radius: var(--radius);
  padding: 0 16px;
  height: var(--ctrl-h);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-small);
}
.idsw-dialog-cancel {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.idsw-dialog-ok {
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .idsw-dialog-card { animation: none; }
}

/* =========================================================================
   ESPERA
   ========================================================================= */

.idsw-spinner-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(253, 249, 241, .82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.idsw-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--ink);
  animation: idsw-spin .9s linear infinite;
}
@keyframes idsw-spin { to { transform: rotate(360deg); } }
.idsw-spinner-msg { font-size: var(--fs-small); color: var(--muted); }

/* =========================================================================
   DEPURACIÓN
   A qué backend habla la pantalla. Se oculta en producción desde la propia
   app; aquí sólo se le da forma de nota al pie, no de aviso.
   ========================================================================= */

.idsw-api-debug {
  position: fixed;
  left: 8px;
  bottom: 6px;
  z-index: 40;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  color: var(--muted-2);
  pointer-events: none;
}