/* Agenda de citas
 *
 * Referencia visual: el libro de citas de recepción, no un panel de SaaS.
 * Renglones, horas en cifras tabulares y una acción por fila. La única
 * nota de color intensa se reserva para las ausencias, que son la métrica
 * que justifica el producto: si algo grita en pantalla, es eso.
 */

:root {
  --papel: #FBFBF9;
  --papel-hundido: #F2F2EE;
  --tinta: #16202B;
  --tinta-tenue: #6A7480;
  --renglon: #DFE1DC;
  --verde: #1F6F5C;     /* acción principal */
  --verde-claro: #E7F0ED;
  --ladrillo: #A93E27;  /* solo ausencias */
  --ladrillo-claro: #F7E9E5;
  --ambar: #8A6A16;     /* pendiente de confirmar */
  --ambar-claro: #F7F0DC;

  --r: 3px;             /* radio mínimo: esto es papel, no plástico */
}

@font-face { font-family: 'Plex'; src: local('IBM Plex Sans'); }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

a { color: var(--verde); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}

/* --- Estructura ------------------------------------------------------- */

.envoltorio { max-width: 46rem; margin: 0 auto; padding: 0 1rem 5rem; }

.cabecera {
  position: sticky; top: 0; z-index: 10;
  background: var(--papel);
  border-bottom: 1px solid var(--renglon);
  padding: .9rem 0 .7rem;
}

.cabecera-fila { display: flex; align-items: baseline; gap: .75rem; }

.negocio {
  font-size: .8rem; letter-spacing: .01em; color: var(--tinta-tenue);
  margin: 0;
}

.fecha {
  font-size: 1.5rem; font-weight: 600; margin: 0; letter-spacing: -.02em;
}

.fecha small {
  font-size: .95rem; font-weight: 400; color: var(--tinta-tenue);
  margin-left: .4rem;
}

nav.dias { display: flex; gap: .25rem; margin-left: auto; }

nav.dias a {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--renglon); border-radius: var(--r);
  text-decoration: none; color: var(--tinta); font-size: 1rem;
  background: #fff;
}

nav.dias a:hover { background: var(--papel-hundido); }

.barras { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0 0; }

/* --- Cifras del día --------------------------------------------------- */

.resumen {
  display: flex; gap: 1.6rem;
  padding: .9rem 0; margin: 0;
  border-bottom: 1px solid var(--renglon);
}

.resumen div { display: flex; align-items: baseline; gap: .35rem; }

.resumen b { font-size: 1.2rem; font-weight: 600; }
.resumen span { font-size: .82rem; color: var(--tinta-tenue); }
.resumen .ausencias b { color: var(--ladrillo); }

/* --- El horario ------------------------------------------------------- */

ol.horario { list-style: none; margin: 0; padding: 0; }

.cita {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 0 .9rem;
  padding: .8rem 0 .8rem .6rem;
  border-bottom: 1px solid var(--renglon);
  border-left: 3px solid transparent;
  position: relative;
}

/* El estado se lee por el filo izquierdo antes que por el texto. */
.cita.confirmada { border-left-color: var(--verde); }
.cita.pendiente  { border-left-color: var(--ambar); }
.cita.no_asistio { border-left-color: var(--ladrillo); background: var(--ladrillo-claro); }
.cita.completada { border-left-color: var(--renglon); }
.cita.cancelada_cliente,
.cita.cancelada_negocio { border-left-color: var(--renglon); opacity: .5; }

.cita.cancelada_cliente .quien,
.cita.cancelada_negocio .quien { text-decoration: line-through; }

.hora {
  font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em;
  padding-top: .05rem;
}

.hora small { display: block; font-size: .75rem; font-weight: 400; color: var(--tinta-tenue); }

.quien { font-size: 1.02rem; font-weight: 500; margin: 0; }

.detalle { font-size: .85rem; color: var(--tinta-tenue); margin: .1rem 0 0; }

.marca {
  font-size: .72rem; font-weight: 600;
  padding: .05rem .35rem; border-radius: var(--r);
  vertical-align: .08em; margin-left: .4rem;
}
.marca.ausencia { background: var(--ladrillo); color: #fff; }
.marca.pendiente { background: var(--ambar-claro); color: var(--ambar); }
.marca.canal { background: var(--papel-hundido); color: var(--tinta-tenue); font-weight: 500; }
/* Ámbar y no ladrillo: el rojo se reserva para las ausencias de pacientes. */
.marca.bloqueo { background: var(--ambar); color: #fff; }

.acciones {
  grid-column: 2; display: flex; gap: .4rem; flex-wrap: wrap;
  margin-top: .55rem;
}

/* --- Botones ---------------------------------------------------------- */

.btn {
  font: inherit; font-size: .85rem;
  padding: .32rem .7rem;
  border: 1px solid var(--renglon); border-radius: var(--r);
  background: #fff; color: var(--tinta);
  cursor: pointer; text-decoration: none; display: inline-block;
}

.btn:hover { background: var(--papel-hundido); }

.btn.principal { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn.principal:hover { background: #185A4A; }

.btn.ausencia { color: var(--ladrillo); border-color: #E4C9C1; }
.btn.ausencia:hover { background: var(--ladrillo); color: #fff; border-color: var(--ladrillo); }

.btn.grande { font-size: 1rem; padding: .6rem 1.1rem; }

.btn[disabled] { opacity: .4; cursor: default; }

/* --- Formularios ------------------------------------------------------ */

label { display: block; font-size: .85rem; color: var(--tinta-tenue); margin: .9rem 0 .25rem; }

input, select, textarea {
  font: inherit; width: 100%;
  padding: .55rem .6rem;
  border: 1px solid var(--renglon); border-radius: var(--r);
  background: #fff; color: var(--tinta);
}

input:focus, select:focus { border-color: var(--verde); }

fieldset { border: 0; margin: 0; padding: 0; }
legend { font-size: .85rem; color: var(--tinta-tenue); padding: 0; margin: .9rem 0 .25rem; }

/* Casillas y radios: sin esto heredan el ancho completo de los input. */
.casillas label {
  display: flex; align-items: center; gap: .55rem;
  color: var(--tinta); font-size: .95rem; margin: .35rem 0;
}
.casillas input { width: auto; margin: 0; }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.tres { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 .6rem; align-items: end; }

h2.seccion { font-size: 1rem; margin: 1.8rem 0 .4rem; }
.seccion-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

form.en-linea { display: inline; }

/* --- Estados vacíos y avisos ------------------------------------------ */

.vacio {
  padding: 3rem 1rem; text-align: center; color: var(--tinta-tenue);
}
.vacio p { margin: 0 0 1rem; }

.aviso {
  padding: .7rem .85rem; border-radius: var(--r);
  border: 1px solid var(--renglon); background: #fff;
  font-size: .9rem; margin: .9rem 0;
}
.aviso.problema { border-color: #E4C9C1; background: var(--ladrillo-claro); color: #7A2C1B; }
.aviso.bien { border-color: #C5DED6; background: var(--verde-claro); color: #14503F; }
.aviso.atencion { border-color: #E6D6A8; background: var(--ambar-claro); color: #5E4810; }

/* --- Reserva pública -------------------------------------------------- */

.publico { max-width: 30rem; margin: 0 auto; padding: 2rem 1rem 4rem; }

.publico h1 { font-size: 1.6rem; letter-spacing: -.02em; margin: 0 0 .2rem; }
.publico .sub { color: var(--tinta-tenue); margin: 0 0 1.8rem; font-size: .95rem; }

.paso { margin-bottom: 2rem; }
.paso h2 { font-size: .82rem; color: var(--tinta-tenue); font-weight: 500; margin: 0 0 .6rem; }

.opciones { display: grid; gap: .4rem; }

.opcion {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; width: 100%; text-align: left;
  padding: .7rem .8rem;
  border: 1px solid var(--renglon); border-radius: var(--r);
  background: #fff; font: inherit; cursor: pointer;
}
.opcion:hover { border-color: var(--verde); }
.opcion[aria-pressed="true"] { background: var(--verde-claro); border-color: var(--verde); }
.opcion b { font-weight: 500; }
.opcion span { font-size: .85rem; color: var(--tinta-tenue); white-space: nowrap; }

.dia-huecos { margin-bottom: 1.1rem; }
.dia-huecos h3 {
  font-size: .9rem; font-weight: 600; margin: 0 0 .45rem;
  padding-bottom: .3rem; border-bottom: 1px solid var(--renglon);
}

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .35rem; }

.hueco {
  padding: .5rem .2rem; text-align: center;
  border: 1px solid var(--renglon); border-radius: var(--r);
  background: #fff; font: inherit; font-size: .95rem; cursor: pointer;
}
.hueco:hover { border-color: var(--verde); background: var(--verde-claro); }
.hueco[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: #fff; }

.privacidad { font-size: .78rem; color: var(--tinta-tenue); margin-top: 1.2rem; line-height: 1.5; }

/* --- Ficha de la cita del paciente ------------------------------------ */

.ficha { border: 1px solid var(--renglon); border-radius: var(--r); background: #fff; padding: 1.2rem; }
.ficha .cuando { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; margin: 0 0 .1rem; }
.ficha dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 1.1rem 0 0; font-size: .92rem; }
.ficha dt { color: var(--tinta-tenue); }
.ficha dd { margin: 0; }

@media (max-width: 420px) {
  .cita { grid-template-columns: 3.6rem 1fr; }
  .resumen { gap: 1.1rem; }
  .fecha { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}