/* AIP Reservas — identidad de la I.E. N.° 0029 «Marco Puente Llanos».
   Colores de la insignia: azul #2f5fa0 (oscuro #17315c), rojo #d62b1f, oro #f0c227.
   Todo bajo .aip / .aip-ov para no chocar con el tema. */
.aip, .aip-ov, .aip-toast {
  --aip-azul: #2f5fa0;
  --aip-azul-osc: #17315c;
  --aip-rojo: #d62b1f;
  --aip-oro: #f0c227;
  --aip-ink: #14233d;
  --aip-mute: #56657c;
  --aip-line: #d4dce8;
  --aip-bg: #ffffff;
  --aip-soft: #f3f6fb;
  --aip-mine: #e1ebf8;
  --aip-busy: #eef1f6;
  --aip-recreo-1: #f7e7b0;
  --aip-recreo-2: #fbf1cb;
  --aip-bad: #b3261e;
  --aip-r: 5px;
  color: var(--aip-ink);
  font-size: 15px;
  line-height: 1.4;
}
.aip *, .aip-ov *, .aip-toast { box-sizing: border-box; }
.aip { max-width: 1100px; margin: 0 auto 2rem; }

.aip-aviso { padding: 14px 16px; border: 1px solid var(--aip-line); border-left: 4px solid var(--aip-azul); background: var(--aip-soft); border-radius: var(--aip-r); }
.aip-cargando { color: var(--aip-mute); padding: 24px 0; }
.aip-fallo { padding: 16px; border: 1px solid var(--aip-bad); border-radius: var(--aip-r); color: var(--aip-bad); margin-top: 12px; }

/* cabecera institucional */
.aip-banda { height: 6px; border-radius: var(--aip-r) var(--aip-r) 0 0; background: linear-gradient(90deg, var(--aip-rojo) 0 33.34%, #fff 33.34% 66.66%, var(--aip-rojo) 66.66% 100%); box-shadow: inset 0 0 0 1px var(--aip-line); }
.aip-head { display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin-bottom: 14px; background: var(--aip-azul-osc); color: #fff; border-bottom: 4px solid var(--aip-oro); border-radius: 0 0 var(--aip-r) var(--aip-r); }
.aip-logo { width: 54px; height: auto; flex: none; display: block; }
.aip-titulo { min-width: 0; }
.aip-inst { margin: 0; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: #c9d6ee; }
.aip-head h2 { margin: 2px 0 0; font-size: 1.35rem; line-height: 1.2; color: #fff; font-weight: 600; }
.aip-head .aip-btn { margin-left: auto; }

.aip-btn { display: inline-block; border: 1px solid var(--aip-azul); background: var(--aip-azul); color: #fff; padding: 8px 14px; border-radius: var(--aip-r); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2; }
.aip-btn:hover { background: var(--aip-azul-osc); border-color: var(--aip-azul-osc); color: #fff; }
.aip-btn:disabled { opacity: .55; cursor: default; }
.aip-btn.aip-sec { background: #fff; color: var(--aip-azul); }
.aip-btn.aip-sec:hover { background: var(--aip-mine); color: var(--aip-azul-osc); }
.aip-head .aip-btn.aip-sec { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.aip-head .aip-btn.aip-sec:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.aip-btn.aip-peligro { background: var(--aip-bad); border-color: var(--aip-bad); color: #fff; }
.aip button:focus-visible, .aip-ov button:focus-visible, .aip a:focus-visible, .aip-ov input:focus-visible, .aip-ov select:focus-visible, .aip-ov textarea:focus-visible, .aip-buscar input:focus-visible { outline: 3px solid var(--aip-oro); outline-offset: 2px; }

/* pestañas */
.aip-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--aip-line); margin-bottom: 14px; }
.aip-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 9px 14px; font: inherit; font-weight: 600; color: var(--aip-mute); cursor: pointer; }
.aip-tabs button.on { color: var(--aip-azul-osc); border-bottom-color: var(--aip-oro); }

/* navegación de semana */
.aip-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.aip-nav .aip-btn { padding: 6px 12px; }
.aip-semana { font-size: 1.05rem; min-width: 11ch; text-align: center; font-variant-numeric: tabular-nums; color: var(--aip-azul-osc); }
.aip-ocupado { opacity: .55; pointer-events: none; }

/* horario semanal: cuadrícula CSS (no depende de los estilos de tabla del tema) */
.aip-scroll { overflow-x: auto; border: 1px solid var(--aip-line); border-radius: var(--aip-r); background: var(--aip-line); }
.aip-tabla { display: grid; gap: 1px; min-width: 640px; background: var(--aip-line); }
.aip-row { display: contents; }
.aip-c { background: var(--aip-bg); padding: 6px; min-width: 0; }
.aip-th { background: var(--aip-azul-osc); color: #fff; text-align: center; padding: 8px 4px; }
.aip-th.aip-hoy { background: var(--aip-oro); color: var(--aip-azul-osc); }
.aip-dn { display: block; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: 12px; }
.aip-dd { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.aip-hora { background: var(--aip-soft); }
.aip-bn { display: block; font-weight: 700; font-size: 13px; color: var(--aip-azul-osc); }
.aip-bh { display: block; font-size: 12px; color: var(--aip-mute); font-variant-numeric: tabular-nums; }
.aip-rc-h, .aip-rc { background: repeating-linear-gradient(135deg, var(--aip-recreo-1) 0 8px, var(--aip-recreo-2) 8px 16px); color: #6b5314; font-weight: 700; font-size: 12px; padding: 5px 8px; }
.aip-rc-h { font-variant-numeric: tabular-nums; }
.aip-rc { text-align: center; letter-spacing: .14em; text-transform: uppercase; }

/* celdas */
.aip-slot { display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; min-height: 58px; padding: 6px 8px; border-radius: 4px; font: inherit; text-align: left; border: 1px solid transparent; }
.aip-slot strong { font-size: 13px; line-height: 1.2; }
.aip-slot span { font-size: 12px; color: var(--aip-mute); line-height: 1.25; }
button.aip-slot { cursor: pointer; }
.aip-libre { align-items: center; text-align: center; background: #fff; border: 1.5px dashed var(--aip-azul); color: var(--aip-azul); font-weight: 700; }
.aip-libre:hover { background: var(--aip-mine); }
.aip-ocupada { background: var(--aip-busy); border-color: #c5cddb; color: var(--aip-ink); }
.aip-ocupada:hover { border-color: var(--aip-mute); }
.aip-mia { background: var(--aip-mine); border-color: var(--aip-azul); }
.aip-mia strong { color: var(--aip-azul-osc); }
.aip-bloqueo { background: repeating-linear-gradient(135deg, #e6e9ef 0 7px, #f3f5f8 7px 14px); border-color: #b9c1cf; color: #36435a; }
.aip-nd { align-items: center; text-align: center; color: #8793a6; background: transparent; font-size: 12px; min-height: 58px; }
.aip-libre-wrap { display: flex; flex-direction: column; gap: 3px; }
.aip-mini { align-self: center; background: none; border: 0; color: var(--aip-mute); font-size: 11px; text-decoration: underline; cursor: pointer; padding: 0; }

/* leyenda */
.aip-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 12px; font-size: 13px; color: var(--aip-mute); }
.aip-leyenda .k { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; border: 1px solid #b9c1cf; }
.k.libre { background: #fff; border: 1.5px dashed var(--aip-azul); }
.k.mia { background: var(--aip-mine); border-color: var(--aip-azul); }
.k.ocup { background: var(--aip-busy); }
.k.bloq { background: repeating-linear-gradient(135deg, #e6e9ef 0 4px, #f3f5f8 4px 8px); }
.aip-regla { margin-left: auto; }
.aip-pie { margin: 14px 0 0; font-size: 12px; text-align: right; }
.aip-pie a { color: var(--aip-mute); }

/* vista por día (teléfono) */
.aip-pills { display: flex; gap: 6px; margin-bottom: 10px; }
.aip-pill { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 0; border: 1px solid var(--aip-line); border-radius: var(--aip-r); background: #fff; font: inherit; color: var(--aip-ink); cursor: pointer; }
.aip-pill span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--aip-mute); }
.aip-pill b { font-size: 16px; font-variant-numeric: tabular-nums; }
.aip-pill.on { background: var(--aip-azul-osc); border-color: var(--aip-azul-osc); color: #fff; }
.aip-pill.on span { color: #c9d6ee; }
.aip-pill.hoy:not(.on) { border-color: var(--aip-oro); border-width: 2px; }
.aip-diatxt { margin: 0 0 8px; font-weight: 700; color: var(--aip-azul-osc); }
.aip-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.aip-fila { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: stretch; }
.aip-fh { font-size: 12px; color: var(--aip-mute); font-variant-numeric: tabular-nums; padding-top: 6px; }
.aip-fh b { display: block; color: var(--aip-azul-osc); font-size: 13px; }
.aip-recreo-f { background: repeating-linear-gradient(135deg, var(--aip-recreo-1) 0 8px, var(--aip-recreo-2) 8px 16px); border-radius: 4px; padding: 5px 8px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #6b5314; }
.aip-recreo-f .aip-fh { padding-top: 0; color: #6b5314; letter-spacing: 0; text-transform: none; }

/* mis reservas */
.aip-mis h3 { margin: 18px 0 8px; font-size: 1.05rem; color: var(--aip-azul-osc); }
.aip-buscar { margin-bottom: 8px; }
.aip-buscar label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.aip-buscar-fila { display: flex; gap: 8px; }
.aip-buscar-fila input { flex: 1; min-width: 0; padding: 8px 9px; border: 1px solid #aebbd0; border-radius: 4px; font: inherit; color: var(--aip-ink); background: #fff; }
.aip-reslist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aip-res { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--aip-line); border-left: 4px solid var(--aip-oro); border-radius: var(--aip-r); background: #fff; }
.aip-res > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.aip-res-h { font-size: 13px; color: var(--aip-mute); font-variant-numeric: tabular-nums; }
.aip-res em { font-size: 13px; color: var(--aip-mute); }
.aip-pas .aip-res { border-left-color: var(--aip-line); opacity: .85; }
.aip-vacio { color: var(--aip-mute); }

/* ventanas */
.aip-ov { position: fixed; inset: 0; z-index: 99999; background: rgba(12, 24, 44, .58); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; font-size: 15px; line-height: 1.4; color: var(--aip-ink); }
.aip-modal { background: #fff; width: 100%; max-width: 480px; border-radius: 8px; border-top: 5px solid var(--aip-oro); padding: 16px 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); max-height: 100%; overflow-y: auto; }
.aip-mh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.aip-mh h3 { margin: 0; font-size: 1.15rem; color: var(--aip-azul-osc); }
.aip-x { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--aip-mute); padding: 0 4px; }
.aip-resumen { margin: 0 0 12px; padding: 8px 10px; background: var(--aip-soft); border-left: 3px solid var(--aip-azul); border-radius: 3px; font-weight: 600; font-size: 14px; }
.aip-form { display: flex; flex-direction: column; gap: 10px; }
.aip-fila3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.aip-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aip-campo label { font-size: 13px; font-weight: 600; }
.aip-ov input, .aip-ov select, .aip-ov textarea { width: 100%; padding: 8px 9px; border: 1px solid #aebbd0; border-radius: 4px; font: inherit; color: var(--aip-ink); background: #fff; }
.aip-err { color: var(--aip-bad); margin: 0; min-height: 1em; font-size: 14px; }
.aip-acciones { display: flex; gap: 8px; justify-content: flex-end; }
.aip-detalle dl { margin: 0 0 10px; display: grid; gap: 8px; }
.aip-dato dt { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--aip-mute); }
.aip-dato dd { margin: 0; white-space: pre-wrap; }
.aip-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.aip-claveBox { text-align: center; padding: 14px; border: 2px dashed var(--aip-azul); border-radius: 8px; margin-bottom: 12px; background: var(--aip-soft); }
.aip-claveBox p { margin: 0; }
.aip-clave { display: block; margin: 6px 0; font-size: 2.4rem; letter-spacing: .3em; padding-left: .3em; font-variant-numeric: tabular-nums; color: var(--aip-azul-osc); }
.aip-nota { font-size: 13px; color: var(--aip-mute); }

.aip-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100000; max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 6px; color: #fff; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.aip-toast.ok { background: #1b6b3a; }
.aip-toast.err { background: var(--aip-bad); }

/* pantalla de la puerta */
.aip-ahora { max-width: 560px; padding: 20px 22px; border: 1px solid var(--aip-line); border-top: 5px solid var(--aip-oro); border-radius: 6px; background: #fff; }
.aip-ahora .aip-inst { color: var(--aip-mute); }
.aip-ahora h2 { margin: 2px 0 12px; font-size: 1.3rem; color: var(--aip-azul-osc); }
.aip-ahora-hora { margin: 0; font-size: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--aip-azul); line-height: 1.1; }
.aip-ahora-estado { margin: 4px 0 12px; font-size: 1.2rem; font-weight: 600; }
.aip-ahora-sig { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--aip-line); color: var(--aip-mute); font-size: 14px; display: grid; gap: 4px; }
.aip-ahora-sig span { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--aip-azul-osc); margin-right: 6px; }

@media (max-width: 760px) {
  .aip-head { padding: 12px 14px; gap: 12px; flex-wrap: wrap; }
  .aip-logo { width: 44px; }
  .aip-head h2 { font-size: 1.15rem; }
  .aip-head .aip-btn { margin-left: 0; }
  .aip-regla { margin-left: 0; width: 100%; }
  .aip-fila3 { grid-template-columns: 1fr 1fr; }
  .aip-fila3 .aip-campo:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .aip-slot, .aip-btn { transition: background-color .12s ease, border-color .12s ease; }
}