/* Trámites v2 · 10h · AGENDAR LA CAPACITACIÓN (admin-capacitacion.jsx), tanda c2b, 30-sep-2026.
   Archivo aparte a propósito, como admin-alta.css: el <style> del index es lo que lo hace crecer (tope 12a).
   Solo variables que ya existen en el panel. El panel no tiene modo oscuro. */

/* ── Paso 7 de «Cerrar el alta»: el botón o la capacitación agendada ── */
.ag-p7 { display: flex; flex-direction: column; gap: 8px; }
.ag-p7 .d-aviso { margin: 0; }
.ag-p7__acc { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ag-p7__motivo { font-size: 13px; color: var(--ink-500); }
.ag-p7-cargando { margin: 2px 0 0; }
.ag-cap { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--hair); border-radius: 12px; background: #FCFBF8;
  padding: 12px 14px; }
.ag-cap .d-aviso { margin: 0; }
.ag-cap__linea { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.ag-cap__linea > svg { color: var(--dinamic-green); }
.ag-cap__linea strong { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--dinamic-green-dark); }
.ag-cap__sub { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--ink-500); }
.ag-cap__envios { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-envio { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; background: #ECE9E0; color: var(--ink-500); text-decoration: none; }
.ag-envio.green { background: var(--green-soft); color: var(--btn); }
.ag-envio.amber { background: #F5EBD3; color: #7A5A08; }
.ag-envio.red { background: #F6E3E1; color: var(--red); }
.ag-reenvio { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 10px; }
.ag-reenvio label > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--dinamic-green-dark); margin-bottom: 4px; }

/* ── 07 · Agendar la capacitación (zip #5 · tanda 5a, 6-oct-2026): igual a `07_agendar-capacitacion_web.png` y `_movil.png` ──
   Medidas y colores literales de `Tramites v2.dc.html` (#t07). Web: ventana de 900 px en dos columnas (la agenda · «Así le
   llega», 320 px) sobre el expediente del alta (06). Teléfono: la hoja entera, barra verde y el botón fijo abajo. */
.ag-velo { position: fixed; inset: 0; z-index: 80; background: rgba(20, 32, 28, 0.5); display: grid; place-items: center;
  padding: 24px; overflow-y: auto; }
.ag-ventana { display: grid; grid-template-columns: minmax(0, 1fr) 320px; width: min(900px, 100%); background: #fff;
  border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.ag-izq { padding: 22px 24px; min-width: 0; display: flex; flex-direction: column; gap: 16px; border-right: 1px solid #EAE5D9; }
.ag-izq > .ag-sup + .ag-tit { margin-top: -16px; }
.ag-der { background: #F7F5EF; padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.ag-sup { margin: 0; font-size: 12px; color: #8A8574; }
.ag-tit { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #304D45; }
.ag-tel { display: none; }

.ag-mods { display: flex; gap: 8px; }
.ag-mod { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; background: #fff;
  border: 1px solid #DDD9CC; border-radius: 10px; font: inherit; font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: #304D45; cursor: pointer; }
.ag-mod svg { width: 15px; height: 15px; color: #3C7E67; }
.ag-mod.on { background: #304D45; border-color: #304D45; color: #fff; }
.ag-mod.on svg { color: #fff; }

.ag-dias { display: flex; align-items: center; gap: 6px; }
.ag-dia { flex: 1; min-width: 0; background: #fff; border: 1px solid #DDD9CC; border-radius: 8px; padding: 7px 4px;
  font: inherit; font-size: 12px; color: #55605B; cursor: pointer; white-space: nowrap; }
.ag-dia.lleno { color: #A8B2AE; }
.ag-dia.on { background: #304D45; border-color: #304D45; color: #fff; font-weight: 700; }
.ag-flecha { flex: none; width: 30px; height: 30px; box-sizing: border-box; display: grid; place-items: center; background: #fff;
  border: 1px solid #DDD9CC; border-radius: 8px; color: #8A8574; cursor: pointer; padding: 0; }
.ag-flecha svg { width: 14px; height: 14px; }
.ag-flecha--atras svg { transform: rotate(180deg); }
.ag-flecha:disabled { cursor: default; }

.ag-horas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ag-hora { background: #fff; border: 1px solid #DDD9CC; border-radius: 8px; padding: 9px 4px; font: inherit; font-size: 12.5px;
  color: #304D45; cursor: pointer; }
.ag-hora:hover:not(:disabled) { border-color: #3C7E67; }
.ag-hora.on { background: #304D45; border-color: #304D45; color: #fff; font-weight: 700; }
.ag-hora.ocupada { background: #EFEBE0; border-color: #EFEBE0; color: #A8B2AE; text-decoration: line-through; cursor: not-allowed; }
.ag-nota { margin: 0; font-size: 12px; line-height: 1.45; color: #8A8574; }

.ag-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ag-campo { display: flex; flex-direction: column; gap: 5px; }
.ag-campo > span { font-size: 11.5px; font-weight: 600; color: #55605B; }
.ag-campo .c-input { width: 100%; box-sizing: border-box; height: 40px; border: 1px solid #DDD9CC; border-radius: 9px; padding: 0 12px;
  font-size: 13px; color: #27282A; background: #fff; }
.c-input.ag-mal { border-color: var(--red); }

.ag-acc { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: auto; }
.ag-cancelar { border: 0; background: transparent; font: inherit; font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  color: #55605B; padding: 11px 16px; cursor: pointer; }
.ag-velo .a-btn.primary.ag-agendar { background: #3C7E67; border-color: #3C7E67; color: #fff; border-radius: 10px; padding: 11px 18px; font-size: 13.5px; font-weight: 700; min-height: 0; }
.ag-velo .a-btn.primary.ag-agendar:disabled { background: #ECE9E0; border-color: #ECE9E0; color: #8A8574; opacity: 1; }

.ag-der__h { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8A8574; }
.ag-wa { background: #fff; border: 1px solid #EAE5D9; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ag-wa__cuerpo p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; color: #27282A; text-wrap: pretty; }
.ag-wa__cuerpo p:last-child { margin-bottom: 0; }
.ag-wa__cuerpo b { font-weight: 700; }
.ag-wa__botones { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid #EFEBE0; padding-top: 8px; }
.ag-wa__botones span { text-align: center; padding: 5px; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: #3C7E67; }
.ag-wa__botones span + span { border-top: 1px solid #EFEBE0; }
.ag-der__nota { margin: 0; font-size: 12px; line-height: 1.45; color: #55605B; text-wrap: pretty; }

@media (max-width: 980px) {
  .ag-ventana { grid-template-columns: 1fr; }
  .ag-izq { border-right: 0; border-bottom: 1px solid #EAE5D9; }
}
@media (max-width: 860px) {
  /* el teléfono (#t07, la columna de 375): la hoja entera con la barra verde (CsBarraPropia) y «Agendar · …» fijo abajo;
     sin «Así le llega», sin el correo y sin «Cancelar» (la barra trae volver) */
  .ag-velo { padding: 0; place-items: stretch; background: #F7F5EF; }
  .ag-ventana { display: block; width: 100%; min-height: 100%; border-radius: 0; box-shadow: none; background: #F7F5EF; }
  .ag-barra { position: sticky; top: 0; }
  .ag-izq { padding: 14px 16px 110px; gap: 12px; border: 0; }
  .ag-sup, .ag-tit, .ag-der, .ag-web, .ag-cancelar, .ag-flecha--atras { display: none; }
  .ag-tel { display: inline; }
  .ag-mods { gap: 6px; }
  .ag-mod { padding: 11px; }
  .ag-mod svg { display: none; }
  .ag-dias { gap: 5px; overflow: hidden; }
  .ag-dia, .ag-flecha { flex: none; width: auto; height: auto; padding: 8px 10px; font-size: 12px; }
  .ag-dias .ag-dia:nth-child(7) { display: none; }
  .ag-horas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ag-hora { padding: 11px 4px; font-size: 13px; }
  .ag-nota { font-size: 11.5px; }
  .ag-campos { grid-template-columns: 1fr; }
  .ag-campo .c-input { height: 44px; border-radius: 10px; font-size: 14px; }
  .ag-acc.cs-pie-fijo { justify-content: stretch; margin: 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: #F7F5EF; border-top: 0; }
  .ag-velo .ag-acc .a-btn.primary.ag-agendar { width: 100%; height: 48px; border-radius: 12px; font-size: 14px; justify-content: center; }
}