/* =====================================================================
   Panel de Grupos · Magic Travel
   ESTILOS DE LA FASE 10 (clientes y presupuestos a medida)

   Va en assets/, al lado de estilo.css, y la cabecera lo enlaza justo
   detrás. Está aparte a propósito: así no hay que tocar estilo.css, que
   es el archivo del que depende el panel entero.

   Aquí solo está lo que NO existía ya. Todo lo demás (botones, tarjetas,
   campos, tablas, etiquetas) se pinta con las clases de siempre, y los
   colores salen de las variables de estilo.css, así que si algún día se
   cambia la paleta de la marca, esto cambia con ella.
   ===================================================================== */

/* --- Bloques de la pestaña Cliente -----------------------------------
   La pestaña es larga y tiene seis apartados: sin una raya entre ellos
   se lee como una lista interminable. */
.cli-bloque {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.cli-bloque:first-child { padding-top: 0; }
.cli-bloque:last-child  { border-bottom: 0; padding-bottom: 0; }

.cli-bloque .ptitulo { margin-bottom: 14px; }

/* Los apartados llevan su formulario dentro, con su propio margen: el
   de .acciones ya trae la raya de arriba, así que aquí sobra. */
.cli-bloque .acciones { border-top: 0; padding-top: 0; justify-content: flex-start; }

/* --- Un encargo dentro de la ficha del cliente ------------------------ */
.cli-sub {
  margin: 18px 20px 6px;
  color: var(--navy);
  font-size: 13.5px;
}

/* --- Etiquetas de estado del presupuesto -----------------------------
   Se montan encima de .badge, igual que las de fase, y con los mismos
   colores: ámbar lo que espera, verde lo cerrado, rojo lo que se ha
   caído. */
.badge.est-borrador  { background: var(--navy-soft);  color: var(--muted); }
.badge.est-enviado   { background: var(--amber-soft); color: var(--amber); }
.badge.est-aceptado  { background: var(--green-soft); color: var(--green); }
.badge.est-cambios   { background: var(--blue-soft);  color: var(--blue); }
.badge.est-rechazado { background: var(--red-soft);   color: var(--red); }

/* --- Números a la derecha en las tablas de la pestaña ----------------
   .ctabla no tenía columnas de importe alineadas a la derecha porque
   hasta ahora no le hacían falta. */
.ctabla th.num,
.ctabla td.num { text-align: right; }
.ctabla td.num b { color: var(--navy); font-size: 15px; }

/* Lo que falta y hace falta, en rojo pero sin cursiva. */
.cli-bloque em.vencido { font-style: normal; color: var(--red); font-weight: 600; }

/* --- Los datos de acceso recién puestos ------------------------------
   Se enseñan una sola vez y hay que poder copiarlos de un vistazo. */
.cli-llave {
  border: 2px solid var(--pink);
}
.cli-llave pre {
  background: var(--pink-soft);
  color: var(--navy);
  padding: 14px 16px;
  border-radius: 10px;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.7;
  margin: 12px 0 0;
  user-select: all;
}

@media (max-width: 560px) {
  .cli-bloque .acciones { flex-direction: column; align-items: stretch; }
  .cli-bloque .acciones .btn { width: 100%; }
  .cli-sub { margin-left: 14px; margin-right: 14px; }
}