/* ============================================================================
   HOTEL AVENIDA — componentes
   v1 · 2026-09-07

   PORTABLE. Es la capa que se lleva al Sistema Interno junto con tokens.css
   y base.css. Todo lo de acá tiene que funcionar tanto en una portada como
   en una pantalla densa de datos.

   Si un componente solo sirve para el sitio público, no va acá: va en
   sitio.css.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   LA PLACA — contenedor base del sistema

   Es la construcción de un cartel de ruta: un bloque lleno con un filete
   interior separado del borde. Contiene una habitación en el sitio y un KPI
   en el panel. Es el único contenedor con "marco"; todo lo demás es plano.
   ------------------------------------------------------------------------ */

.placa {
  background: var(--azul);
  color: var(--blanco);
  padding: var(--s1);
  border-radius: var(--r-placa);
}

.placa__int {
  border: var(--filete) solid rgba(255, 255, 255, .5);
  border-radius: var(--r-control);
  padding: var(--s5);
}

.placa--claro {
  background: var(--blanco);
  color: var(--tinta);
  border: var(--borde) solid var(--linea);
}
.placa--claro > .placa__int { border-color: var(--azul-tenue); }

.placa--papel { background: var(--papel); }

/* Estira el contenido para que las placas de una grilla queden parejas. */
.placa--alto,
.placa--alto > .placa__int { height: 100%; }
.placa--alto > .placa__int { display: flex; flex-direction: column; gap: var(--s3); }


/* ---------------------------------------------------------------------------
   BOTÓN — acción principal, con peso de cartel
   ------------------------------------------------------------------------ */

.boton {
  display: inline-block;
  font-family: var(--marca);
  font-size: var(--t-md);
  letter-spacing: .01em;
  padding: 14px var(--s5);
  border: var(--filete) solid transparent;
  border-radius: var(--r-control);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease;
}
@media (prefers-reduced-motion: reduce) { .boton { transition: none; } }

.boton:active { transform: translateY(1px); }

.boton--rojo  { background: var(--rojo); color: var(--blanco); }
.boton--azul  { background: var(--azul); color: var(--blanco); }
.boton--linea { background: transparent; color: var(--blanco); border-color: rgba(255,255,255,.7); }
.boton--linea:hover { background: rgba(255, 255, 255, .12); }

.boton--chico { font-size: var(--t-sm); padding: 10px var(--s4); }
.boton--ancho { width: 100%; text-align: center; }


/* ---------------------------------------------------------------------------
   BTN — control de interfaz. Más discreto que .boton, para el panel.
   ------------------------------------------------------------------------ */

.btn {
  font-family: var(--texto);
  font-weight: 600;
  font-size: var(--t-sm);
  padding: 10px var(--s4);
  background: var(--blanco);
  color: var(--tinta);
  border: var(--borde) solid var(--linea);
  border-radius: var(--r-control);
  cursor: pointer;
}
.btn:hover { border-color: var(--azul-hondo); }

.btn--pri  { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.btn--pri:hover { background: var(--azul-hondo); border-color: var(--azul-hondo); }
.btn--peli { border-color: var(--rojo); color: var(--rojo); }

.btn[disabled] { opacity: .5; cursor: not-allowed; }

.botonera { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }


/* ---------------------------------------------------------------------------
   CAMPO — etiqueta + control. Etiqueta siempre visible, nunca placeholder
   haciendo de etiqueta.
   ------------------------------------------------------------------------ */

.campo { margin-bottom: var(--s4); }
.campo:last-child { margin-bottom: 0; }

.campo > label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  margin-bottom: 6px;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  font-size: var(--t-md);
  padding: 11px var(--s3);
  background: var(--blanco);
  border: var(--borde) solid var(--linea);
  border-radius: var(--r-control);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--azul);
  outline: none;
  box-shadow: 0 0 0 3px var(--azul-tenue);
}

/* Estado de error: el borde rojo y el mensaje aparecen juntos, nunca solos. */
.campo--mal input,
.campo--mal select { border-color: var(--rojo); }

.campo__error {
  display: none;
  font-size: var(--t-xs);
  color: var(--rojo);
  font-weight: 600;
  margin-top: 5px;
}
.campo--mal .campo__error { display: block; }

.campo__par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

.ayuda { font-size: var(--t-xs); color: var(--gris); margin-top: var(--s3); }


/* ---------------------------------------------------------------------------
   TABLA — listados del panel
   ------------------------------------------------------------------------ */

.tabla-scroll { overflow-x: auto; }

.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }

.tabla th {
  text-align: left;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--gris);
  padding: var(--s2) var(--s3);
  border-bottom: var(--filete) solid var(--linea);
  white-space: nowrap;
}

.tabla td { padding: var(--s3); border-bottom: var(--borde) solid var(--linea); }

.tabla tbody tr:nth-child(even) { background: var(--fila-par); }

.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

.tabla tfoot td {
  font-weight: 700;
  border-top: var(--filete) solid var(--tinta);
  border-bottom: none;
}


/* ---------------------------------------------------------------------------
   CHIP — estado de una fila
   ------------------------------------------------------------------------ */

.chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border: var(--borde) solid;
  border-radius: var(--r-control);
  white-space: nowrap;
}
.chip--ok   { color: var(--ok);   border-color: var(--ok);   background: var(--ok-fondo); }
.chip--pend { color: var(--pend); border-color: var(--pend); background: var(--pend-fondo); }
.chip--mal  { color: var(--mal);  border-color: var(--mal);  background: var(--mal-fondo); }
.chip--info { color: var(--azul); border-color: var(--azul); background: var(--azul-tenue); }


/* ---------------------------------------------------------------------------
   KPI — cifra grande con su etiqueta. Es una placa sin filete.
   ------------------------------------------------------------------------ */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); }

.kpi {
  background: var(--blanco);
  border: var(--borde) solid var(--linea);
  border-radius: var(--r-placa);
  padding: var(--s4);
}
.kpi__et { font-size: var(--t-xs); color: var(--gris); margin-bottom: var(--s1); }
.kpi__v  { font-family: var(--marca); font-size: 28px; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; }

.kpi--foco { background: var(--azul); border-color: var(--azul); }
.kpi--foco .kpi__et { color: rgba(255, 255, 255, .75); }
.kpi--foco .kpi__v  { color: var(--blanco); }

.kpi--ok  { border-color: var(--ok);   border-width: var(--filete); }
.kpi--ok  .kpi__v { color: var(--ok); }
.kpi--mal { border-color: var(--rojo); border-width: var(--filete); }
.kpi--mal .kpi__v { color: var(--rojo); }


/* ---------------------------------------------------------------------------
   ALERTA — algo pasó y hay que hacer algo. Dice qué pasó y qué hacer.
   ------------------------------------------------------------------------ */

.alerta {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s4);
  border: var(--filete) solid;
  border-radius: var(--r-placa);
}
.alerta__ico { font-family: var(--marca); font-size: var(--t-lg); line-height: 1; flex: none; }
.alerta h4 { font-family: var(--texto); font-size: var(--t-md); font-weight: 700; margin: 0 0 2px; color: var(--tinta); }
.alerta p  { font-size: var(--t-sm); color: var(--tinta); margin: 0; }

.alerta--mal  { border-color: var(--rojo); background: var(--mal-fondo); }
.alerta--mal  .alerta__ico { color: var(--rojo); }
.alerta--ok   { border-color: var(--ok);   background: var(--ok-fondo); }
.alerta--ok   .alerta__ico { color: var(--ok); }
.alerta--pend { border-color: var(--pend); background: var(--pend-fondo); }
.alerta--pend .alerta__ico { color: var(--pend); }


/* ---------------------------------------------------------------------------
   FOTO — marcador de imagen pendiente

   A propósito el prototipo no lleva ni una foto. Después de encontrar
   habitaciones ilustradas con imágenes de banco en el sitio actual, poner
   fotos de stock acá sería contradecir el propio informe. El hueco rayado
   deja claro qué falta y obliga a que la estética se sostenga por estructura
   y tipografía.
   ------------------------------------------------------------------------ */

.foto {
  background:
    repeating-linear-gradient(135deg, var(--azul-tenue) 0 10px, transparent 10px 20px),
    var(--blanco);
  border: var(--borde) dashed var(--azul);
  border-radius: var(--r-control);
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: var(--s3);
  text-align: center;
  font-size: var(--t-xs);
  color: var(--azul);
}
.foto--baja { min-height: 120px; }
.foto--alta { min-height: 280px; }