/* Demo de citas — mismos colores y tipografias que pontisnexus.com */
@font-face { font-family: "Baloo 2"; src: url("/fonts/Baloo2.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/Nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  --crema: #f3f1eb; --crema-hondo: #e9e5db; --tinta: #14110e; --tinta-suave: #6b6459;
  --azul: #3b5ba0; --azul-claro: #6d8ac9; --noche: #16283c; --oro: #f2b134;
  --verde: #2f7d5b; --rojo: #b3402f;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--crema); color: var(--tinta); font-family: "Nunito", system-ui, sans-serif; font-size: 16px; line-height: 1.5; }
h1, h2, h3 { font-family: "Baloo 2", system-ui, sans-serif; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
button, input { font: inherit; }
.contenedor { width: min(1100px, 100% - 32px); margin-inline: auto; }
.suave { color: var(--tinta-suave); }
.eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-claro); }

/* Franja de aviso */
.aviso { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; align-items: center;
  padding: 8px 16px; background: var(--oro); color: var(--tinta); font-size: 13px; }
.aviso a { color: var(--tinta); font-weight: 800; text-decoration: none; }

/* Cabecera */
.cabecera { background: var(--noche); color: var(--crema); padding: 28px 0; }
.cabecera__fila { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: end; }
.cabecera h1 { font-size: clamp(2rem, 5vw, 3rem); }
.pestanas { display: flex; gap: 6px; background: rgb(243 241 235 / .1); padding: 5px; border-radius: 999px; }
.pestanas button { border: 0; border-radius: 999px; padding: 9px 18px; background: transparent; color: var(--crema); font-weight: 800; cursor: pointer; }
.pestanas button[aria-selected="true"] { background: var(--crema); color: var(--tinta); }

main { padding: 32px 0 48px; }

/* Pasos del cliente */
/* Una sola columna: los pasos se leen en orden, igual en celular y computadora */
.pasos { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 18px; max-width: 760px; }
/* min-width:0 evita que la fila de dias (que hace scroll) ensanche la pagina */
.paso { min-width: 0; background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 1px 0 rgb(20 17 14 / .06); }
.paso h2 { font-size: 1.3rem; margin-bottom: 16px; display: flex; gap: 10px; align-items: center; }
.paso h2 span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--azul); color: var(--crema); font-size: 15px; }

.opciones { display: grid; gap: 10px; }
@media (min-width: 640px) { .opciones { grid-template-columns: 1fr 1fr; } }
.opcion { display: flex; justify-content: space-between; gap: 12px; align-items: center; text-align: left; width: 100%;
  border: 2px solid var(--crema-hondo); background: var(--crema); border-radius: 14px; padding: 12px 16px; cursor: pointer; }
.opcion strong { display: block; font-family: "Baloo 2"; font-size: 1.1rem; }
.opcion small { color: var(--tinta-suave); }
.opcion .precio { font-weight: 800; color: var(--azul); white-space: nowrap; }
.opcion[aria-pressed="true"] { border-color: var(--azul); background: rgb(59 91 160 / .08); }

.dias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.dia { flex: 0 0 auto; min-width: 66px; border: 2px solid var(--crema-hondo); background: var(--crema); border-radius: 14px;
  padding: 8px 10px; text-align: center; cursor: pointer; }
.dia small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); font-weight: 800; }
.dia strong { font-family: "Baloo 2"; font-size: 1.3rem; }
.dia[aria-pressed="true"] { border-color: var(--azul); background: var(--azul); color: var(--crema); }
.dia[aria-pressed="true"] small { color: var(--crema); }
.dia:disabled { opacity: .4; cursor: not-allowed; }

.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.hora { border: 2px solid var(--crema-hondo); background: var(--crema); border-radius: 12px; padding: 9px 0; font-weight: 800; cursor: pointer; }
.hora[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--crema); }

.datos { display: grid; gap: 14px; }
.datos label { display: grid; gap: 4px; font-size: 13px; font-weight: 800; color: var(--tinta-suave); }
.datos input { border: 0; border-bottom: 2px solid var(--crema-hondo); padding: 8px 2px; font-size: 1.05rem; color: var(--tinta); background: transparent; outline: none; }
.datos input:focus { border-color: var(--azul); }
.resumen { background: var(--crema); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.boton { border: 0; border-radius: 999px; padding: 14px 22px; background: var(--azul); color: var(--crema); font-weight: 800; cursor: pointer; }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.estado { margin: 0; min-height: 1.5em; font-size: 14px; font-weight: 700; }
.estado.ok { color: var(--verde); } .estado.error { color: var(--rojo); }

/* Panel del negocio */
.panel__barra { margin-bottom: 18px; min-width: 0; }
.etiqueta { align-self: center; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tarjeta { background: var(--noche); color: var(--crema); border-radius: 16px; padding: 16px 18px; }
.tarjeta small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--azul-claro); font-weight: 800; }
.tarjeta strong { font-family: "Baloo 2"; font-size: 1.8rem; }
.agenda { display: grid; gap: 10px; }
.cita { display: grid; grid-template-columns: 70px 1fr auto; gap: 14px; align-items: center; background: #fff; border-radius: 14px; padding: 14px 16px; border-left: 5px solid var(--azul); }
.cita--atendida { border-left-color: var(--verde); }
.cita--cancelada { border-left-color: var(--crema-hondo); opacity: .55; }
.cita__hora { font-family: "Baloo 2"; font-size: 1.3rem; font-weight: 700; }
.cita__info strong { display: block; }
.cita__info small { color: var(--tinta-suave); }
.cita__acciones { display: flex; flex-wrap: wrap; gap: 6px; justify-content: end; }
.cita__acciones button { border: 1.5px solid var(--crema-hondo); background: var(--crema); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 800; cursor: pointer; }
.etiqueta { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: var(--crema-hondo); }
.nota { font-size: 13px; margin-top: 18px; }
@media (max-width: 560px) { .cita { grid-template-columns: 56px 1fr; } .cita__acciones { grid-column: 1 / -1; justify-content: start; } }

.pie { padding: 28px 0 40px; border-top: 1px solid var(--crema-hondo); font-weight: 700; display: flex; gap: 10px; flex-wrap: wrap; }
.pie a { color: var(--azul); font-weight: 800; text-decoration: none; }