:root {
  --marca: #1a6dd4;
  --marca-oscura: color-mix(in srgb, var(--marca) 78%, black);
  --marca-suave: color-mix(in srgb, var(--marca) 10%, white);
  --marca-borde: color-mix(in srgb, var(--marca) 30%, white);
  --acento: #36b4f0;               /* celeste */
  --acento-suave: #e6f6fe;
  --degrade: linear-gradient(120deg, color-mix(in srgb, var(--marca) 80%, #06183a) 0%, var(--marca) 50%, var(--acento) 100%);
  --fondo: #f1f6fc;
  --superficie: #ffffff;
  --texto: #0f2138;
  --texto-2: #4a5f78;
  --texto-3: #7b8da3;
  --borde: #d9e4f0;
  --borde-fuerte: #c2d1e3;
  --peligro: #c2410c;
  --peligro-suave: #fff1ea;
  --ok: #15803d;
  --ok-suave: #ecfaf0;
  --aviso: #a16207;
  --aviso-suave: #fef8e6;
  --info: #1d4ed8;
  --info-suave: #eef3ff;
  --radio: 12px;
  --radio-chico: 8px;
  --sombra: 0 1px 2px rgba(16, 40, 50, .06), 0 4px 16px rgba(16, 40, 50, .06);
  --sombra-alta: 0 12px 40px rgba(16, 40, 50, .18);
  --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); font-size: 15px; line-height: 1.5; color: var(--texto); background: var(--fondo); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; text-wrap: balance; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
a { color: var(--marca-oscura); }
[hidden] { display: none !important; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tenue { color: var(--texto-2); }
.chico { font-size: .85rem; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- controles ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 40px; padding: .5rem 1rem; border-radius: var(--radio-chico);
  border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { background: #eef4fb; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .chip:focus-visible, .dia:focus-visible, .slot:focus-visible, .tarjeta-prof:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--marca) 40%, transparent); outline-offset: 1px;
}
.btn-primario { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn-primario:hover { background: var(--marca-oscura); }
.btn-peligro { color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 35%, white); }
.btn-peligro:hover { background: var(--peligro-suave); }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-ok:hover { background: color-mix(in srgb, var(--ok) 85%, black); }
.btn-chico { min-height: 32px; padding: .25rem .65rem; font-size: .85rem; }
.btn-bloque { width: 100%; }
.btn-texto { border-color: transparent; background: transparent; color: var(--marca-oscura); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-wa { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.btn-wa:hover { background: #17824a; }

label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
.campo { margin-bottom: .9rem; min-width: 0; }
.campo small { display: block; color: var(--texto-3); font-size: .8rem; margin-top: .25rem; font-weight: 400; }
input[type=text], input[type=tel], input[type=email], input[type=date], input[type=time], input[type=number], input[type=password], input[type=search], select, textarea {
  width: 100%; min-height: 42px; padding: .5rem .7rem; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico);
  background: #fff; color: var(--texto); font: inherit; font-size: 16px;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--marca); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent); }
.check { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; font-size: .9rem; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--marca); flex: none; }
.fila { display: grid; gap: 0 .9rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.acciones.fin { justify-content: flex-end; }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.25rem; }
.aviso { border-radius: var(--radio-chico); padding: .75rem .9rem; font-size: .9rem; margin-bottom: 1rem; background: var(--info-suave); color: #1e3a8a; }
.aviso.error { background: var(--peligro-suave); color: #9a3412; }
.aviso.ok { background: var(--ok-suave); color: #166534; }
.aviso.alerta { background: var(--aviso-suave); color: #854d0e; }

.chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid var(--borde-fuerte); background: #fff; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; color: var(--texto-2);
}
.chip[aria-pressed=true] { background: var(--marca); border-color: var(--marca); color: #fff; }

.estado { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.estado-reservado { background: #eef2f6; color: #3f4f5a; }
.estado-confirmado { background: var(--info-suave); color: var(--info); }
.estado-presente { background: var(--aviso-suave); color: var(--aviso); }
.estado-atendido { background: var(--ok-suave); color: var(--ok); }
.estado-ausente { background: var(--peligro-suave); color: var(--peligro); }
.estado-cancelado { background: #f3f4f6; color: #6b7280; text-decoration: line-through; }

.cargando { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--marca-borde); border-top-color: var(--marca); border-radius: 50%; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.vacio { text-align: center; color: var(--texto-3); padding: 2rem 1rem; }

/* ---------- toast y modal ---------- */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 100; background: #0f2138; color: #fff; padding: .7rem 1.1rem; border-radius: 10px; box-shadow: var(--sombra-alta); max-width: calc(100vw - 32px); font-size: .92rem; }
.toast.error { background: #9a3412; }
dialog.modal { border: none; border-radius: 16px; padding: 0; width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: var(--sombra-alta); color: var(--texto); }
dialog.modal::backdrop { background: rgba(10, 25, 32, .45); }
.modal-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: #fff; z-index: 1; }
.modal-cab h2 { margin: 0; }
.modal-cuerpo { padding: 1.1rem 1.25rem; }
.modal-pie { padding: .9rem 1.25rem; border-top: 1px solid var(--borde); display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; position: sticky; bottom: 0; background: #fff; }
.cerrar { border: none; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--texto-2); padding: .25rem .5rem; border-radius: 6px; }
.cerrar:hover { background: #eef4fb; }

.datos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 1rem; font-size: .92rem; }
.datos dt { color: var(--texto-2); }
.datos dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }