/* ODML Agenda LAB — estilos de la página de reserva (pública) y del panel. */
:root {
  --tinta: #1b2430; --tinta-2: #4d5a67; --tinta-3: #7d8995;
  --papel: #ffffff; --superficie: #f4f7fa; --linea: #dfe6ec;
  --acento: #009cde; --peligro: #c0392b; --ok: #1e8a4c;
  --radio: 12px; --radio-chico: 6px;
  --letra: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.5 var(--letra); color: var(--tinta); background: var(--superficie); }
a { color: var(--acento); }
h1 { font-size: 1.75rem; line-height: 1.2; font-weight: 600; margin: 0 0 .5rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 2rem 0 .6rem; }
h3 { font-size: 1rem; font-weight: 600; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 55%, transparent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- botones y formularios ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 44px; padding: 0 1.2rem;
  border: 0; border-radius: var(--radio-chico); background: var(--acento); color: #fff; font: 600 1rem var(--letra);
  text-decoration: none; cursor: pointer; }
.boton:hover { filter: brightness(.93); }
.boton.secundario { background: var(--papel); color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linea); }
.boton.secundario:hover { box-shadow: inset 0 0 0 1.5px var(--acento); filter: none; }
.boton.peligro { background: var(--peligro); }
.boton.chico { min-height: 34px; padding: 0 .8rem; font-size: .9rem; }
.boton[disabled] { opacity: .55; cursor: progress; }
.formulario { display: grid; gap: 1rem; max-width: 640px; }
.formulario.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; column-gap: 1.5rem; }
.formulario.dos > fieldset, .formulario.dos > .fila-botones, .formulario.dos > .completo, .formulario.dos > .aviso { grid-column: 1 / -1; }
fieldset { border: 0; margin: 0; padding: 1.2rem; background: var(--papel); border-radius: var(--radio); display: grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
fieldset > textarea, fieldset > label:has(textarea), fieldset > .check, fieldset > .nota, fieldset > .pregunta { grid-column: 1 / -1; }
legend { font-weight: 600; font-size: 1.05rem; padding: 0; margin-bottom: .2rem; float: left; width: 100%; grid-column: 1 / -1; }
label { display: grid; gap: .3rem; font-size: .92rem; font-weight: 500; color: var(--tinta-2); }
input, select, textarea { width: 100%; min-height: 44px; padding: .55rem .75rem; border: 1.5px solid var(--linea); border-radius: var(--radio-chico);
  font: 400 1rem var(--letra); color: var(--tinta); background: var(--papel); }
textarea { min-height: 0; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--acento); outline: none; }
input[type=color] { padding: 4px; width: 80px; }
.check { display: flex; align-items: center; gap: .55rem; font-weight: 400; color: var(--tinta); }
.check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--acento); }
.fila-botones { display: flex; gap: .7rem; flex-wrap: wrap; }
.pregunta { display: grid; grid-template-columns: 1fr 150px auto; gap: 1rem; align-items: end; }
.copiable { font: 400 .88rem/1.45 ui-monospace, Consolas, monospace; background: var(--superficie); }
.error { color: var(--peligro); font-weight: 500; margin: 0; }
.nota { color: var(--tinta-2); font-size: .94rem; }
.aviso { padding: .8rem 1rem; border-radius: var(--radio-chico); background: #e8f6ee; color: #145c33; margin: 0 0 1rem; }
.aviso.error { background: #fbeaea; color: #8a2318; }

/* ---------- página pública ---------- */
.marca { background: var(--papel); border-top: 4px solid var(--acento); }
.marca-in { max-width: 1040px; margin: 0 auto; padding: 1rem 16px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.marca-nombre { font-weight: 600; font-size: 1.05rem; }
.marca-sitio { font-size: .92rem; }
.lienzo { max-width: 1040px; margin: 0 auto; padding: 24px 16px 40px; }
.hoja { background: var(--papel); border-radius: var(--radio); padding: clamp(20px, 4vw, 40px); }
.pie { text-align: center; color: var(--tinta-3); font-size: .82rem; padding: 0 16px 28px; }
.pie a { color: inherit; }
.bienvenida { color: var(--tinta-2); max-width: 62ch; }
.portada { max-width: 640px; }

.tipos { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; }
.tipo { display: grid; gap: .15rem; padding: 1.1rem 1.25rem; border-radius: var(--radio); background: var(--superficie);
  text-decoration: none; color: var(--tinta); border-left: 4px solid var(--acento); }
.tipo:hover { background: color-mix(in srgb, var(--acento) 8%, var(--superficie)); }
.tipo.inactivo { border-left-color: var(--linea); opacity: .75; }
.tipo-nombre { font-weight: 600; font-size: 1.1rem; }
.tipo-meta { color: var(--tinta-2); font-size: .92rem; font-variant-numeric: tabular-nums; }
.tipo-desc { color: var(--tinta-2); font-size: .92rem; margin-top: .3rem; }

.reservar { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: clamp(20px, 4vw, 48px); align-items: start; }
.ficha { position: sticky; top: 20px; }
.volver { display: inline-block; font-size: .92rem; margin-bottom: .8rem; }
.datos { margin: 1rem 0; display: grid; gap: .6rem; }
.datos div { display: grid; gap: 0; }
.datos dt { font-size: .82rem; color: var(--tinta-3); }
.datos dd { margin: 0; font-weight: 500; }
.datos.ancho { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); background: var(--papel); padding: 1.2rem; border-radius: var(--radio); }
.descripcion { color: var(--tinta-2); font-size: .95rem; }

/* calendario + horas */
.paso-titulo { font-size: 1.15rem; font-weight: 600; margin: 0 0 1rem; }
.agenda { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 28px; }
.mes-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.mes-nombre { font-weight: 600; text-transform: capitalize; }
.mes-nav { display: flex; gap: .3rem; }
.mes-nav button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--superficie); color: var(--tinta); font-size: 1.15rem; cursor: pointer; }
.mes-nav button:disabled { opacity: .3; cursor: default; }
.grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.grilla .sem { font-size: .78rem; color: var(--tinta-3); padding: .3rem 0; }
.grilla button { aspect-ratio: 1; width: 100%; max-width: 48px; margin: 0 auto; border: 0; border-radius: 50%; background: none; color: var(--tinta-3);
  font: 500 .98rem var(--letra); font-variant-numeric: tabular-nums; position: relative; }
.grilla button.libre { background: color-mix(in srgb, var(--acento) 11%, var(--papel)); color: var(--acento); font-weight: 600; cursor: pointer; }
.grilla button.libre:hover { background: color-mix(in srgb, var(--acento) 20%, var(--papel)); }
.grilla button.elegido, .grilla button.libre.elegido:hover { background: var(--acento); color: #fff; }
.grilla button.hoy::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.zona { font-size: .85rem; color: var(--tinta-3); margin-top: .8rem; }

.horas { display: flex; flex-direction: column; gap: 8px; max-height: 440px; overflow-y: auto; padding-right: 4px; }
.horas-dia { font-weight: 600; margin: 0 0 .7rem; font-size: .98rem; }
.horas-dia::first-letter { text-transform: uppercase; }
.hora-btn { display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 52px; border: 1.5px solid color-mix(in srgb, var(--acento) 45%, var(--linea));
  border-radius: var(--radio-chico); background: var(--papel); color: var(--acento); cursor: pointer; font-family: var(--letra); }
.hora-btn .h { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hora-btn:hover { border-color: var(--acento); }
.hora-btn.elegida { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.hora-elegida { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hora-elegida .hora-btn { min-height: 52px; }
.vacio-horas { color: var(--tinta-2); font-size: .94rem; }

/* resumen grande de la hora (paso datos, confirmación, gestión) */
.cuando-grande { display: flex; align-items: center; gap: 1rem; margin: .5rem 0 1.2rem; }
.cuando-grande .hora { font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--tinta); }
.cuando-grande .fecha { color: var(--tinta-2); font-size: .95rem; line-height: 1.35; border-left: 3px solid var(--acento); padding-left: .9rem; }
.cuando-grande .fecha::first-letter { text-transform: uppercase; }
.cambiar-hora { background: none; border: 0; color: var(--acento); font: 500 .95rem var(--letra); cursor: pointer; padding: 0; text-decoration: underline; }
.listo { text-align: left; }
.listo .marca-ok { width: 48px; height: 48px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 1rem; }
.acciones { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }
.estado { display: inline-block; font-size: .85rem; font-weight: 600; padding: .2rem .7rem; border-radius: 999px; background: #e8f6ee; color: #145c33; margin: 0 0 .8rem; }
.estado-cancelada { background: #fbeaea; color: #8a2318; }
.estado-pendiente_pago { background: #fff4dc; color: #7a5200; }
.gestion { max-width: 760px; }
.cambiar { margin-top: 2rem; border-top: 1px solid var(--linea); padding-top: .5rem; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cargando { color: var(--tinta-3); font-size: .94rem; }

/* incrustado (iframe en WordPress u otro sitio) */
body.incrustado { background: transparent; }
body.incrustado .lienzo { padding: 0; max-width: none; }
body.incrustado .hoja { border-radius: var(--radio); }

@media (max-width: 860px) {
  .reservar { grid-template-columns: 1fr; }
  .ficha { position: static; border-bottom: 1px solid var(--linea); padding-bottom: 1rem; }
  .agenda { grid-template-columns: 1fr; }
  .horas { max-height: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .formulario.dos, fieldset { grid-template-columns: 1fr; }
  .pregunta { grid-template-columns: 1fr; }
}

/* ---------- panel ---------- */
body.panel { background: var(--superficie); }
.encabezado { background: #fff; border-bottom: 3px solid #009cde; display: flex; align-items: center; gap: 14px; padding: 10px 16px; flex-wrap: wrap; }
.encabezado .logo img { height: 38px; display: block; }
.titulos { display: grid; line-height: 1.2; margin-right: auto; }
.titulo { color: #009cde; font-weight: 700; font-size: 1.1rem; }
.subtitulo { color: #0a6e9c; font-size: .9rem; }
.cuenta-nav { display: flex; gap: 1rem; font-size: .92rem; }
.cuenta-nav a { color: #0a6e9c; text-decoration: none; }
.cuenta-nav a:hover { text-decoration: underline; }
.pestanas { display: flex; gap: 0; background: #fff; border-bottom: 1px solid var(--linea); padding: 0 16px; overflow-x: auto; }
.pestanas a { padding: .8rem 1rem; color: var(--tinta-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; font-size: .95rem; }
.pestanas a.activa { color: #009cde; border-bottom-color: #009cde; font-weight: 600; }
.pestanas .ver-publica { margin-left: auto; color: #009cde; }
.panel .contenido { max-width: 1040px; margin: 0 auto; padding: 24px 16px 60px; }
.panel a { color: #0a6e9c; }
.panel .boton { background: #009cde; color: #fff; }
.panel .boton.secundario { background: #fff; color: var(--tinta); }
.panel .boton.peligro { background: var(--peligro); }
.panel .tipo { border-left-color: #009cde; background: #fff; }
.barra-estado { position: fixed; bottom: 0; left: 0; right: 0; background: #1b2430; color: #c9d3dc; font-size: .8rem; padding: 4px 16px; }
.cabeza { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cabeza h1 { margin: 0; }
.filtro { display: flex; background: #fff; border-radius: var(--radio-chico); padding: 3px; }
.filtro a { padding: .45rem .9rem; border-radius: 4px; text-decoration: none; color: var(--tinta-2); font-size: .92rem; }
.filtro a.activo { background: #009cde; color: #fff; }
h3.dia { margin: 1.6rem 0 .5rem; color: var(--tinta-2); font-weight: 500; font-size: .95rem; }
.citas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.citas a { display: flex; align-items: center; gap: 1.2rem; padding: .8rem 1.1rem; background: #fff; border-radius: var(--radio); text-decoration: none; color: var(--tinta); }
.citas a:hover { box-shadow: inset 0 0 0 1.5px #009cde; }
.cita-hora { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 4.2ch; }
.cita-quien { display: grid; font-weight: 500; }
.cita-quien small { color: var(--tinta-2); font-weight: 400; font-size: .88rem; }
.vacio { background: #fff; padding: 1.5rem; border-radius: var(--radio); color: var(--tinta-2); }
.tabla { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radio); overflow: hidden; font-size: .94rem; }
.tabla th, .tabla td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--linea); }
.tabla th { color: var(--tinta-2); font-weight: 500; }
.semana { background: #fff; padding: 1.2rem; border-radius: var(--radio); max-width: 820px; }
.dia-semana { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--linea); }
.tramos { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.tramo { display: flex; align-items: center; gap: .4rem; }
.tramo input { width: 118px; }
.tramo span { color: var(--tinta-3); }
.excepciones { list-style: none; padding: 0; display: grid; gap: 6px; max-width: 820px; }
.excepciones li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fff; padding: .6rem 1rem; border-radius: var(--radio-chico); }
.enlaces { list-style: none; padding: 0; display: grid; gap: .7rem; max-width: 820px; }
.enlaces li { display: grid; gap: .3rem; }
.borrar { margin-top: 2rem; }
@media (max-width: 640px) { .dia-semana { grid-template-columns: 1fr; } .cuenta-nav { width: 100%; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }