/* ============================================================================
   Agendamiento web (/agendar) · propuesta «Clara + marca» del portal nuevo
   ----------------------------------------------------------------------------
   21-oct-2026, pedido del usuario: esta página se embebe en la web del ICB que
   se está construyendo con la propuesta 4 («Clara con mayor presencia de marca»,
   vista Servicios), así que debe verse como parte de ella. Va DESPUÉS de
   pqr-publico.css y todo cuelga de body.agenda-web: PQRSF no cambia.

   Colores de la guía de marca: Ocean 900 #042D7C (titulares), Ocean 700 #004EE0
   (botones y enlaces), Ocean 300 #98CAFF (bordes), Ocean 100 #E2F2FF (banda),
   Scarlet 700/800 #C00108/#9C000D (solo acentos y errores). Texto #1F2937/#4B5563.
   Embebida (html.embebido) no lleva cabecera ni pie: los pone la web.
   ============================================================================ */

@font-face { font-family: Poppins; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/poppins-400.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/poppins-500.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/poppins-600.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/poppins-700.woff2) format("woff2"); }

body.agenda-web {
    --ag-h: #042D7C;
    --ag-azul: #004EE0;
    --ag-azul-hover: #042D7C;
    --ag-borde: #98CAFF;
    --ag-banda: #E2F2FF;
    --ag-tenue: #F0FBFF;
    --ag-rojo: #C00108;
    --ag-rojo-texto: #9C000D;
    --ag-rojo-fondo: #FFE6E6;
    --ag-rojo-borde: #FFA4A4;
    --ag-texto: #1F2937;
    --ag-texto2: #4B5563;

    background: #fff;
    color: var(--ag-texto);
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
}

/* ---------------------------------------------------------------- cabecera */
.agenda-web .cab { background: #fff; border-bottom: 1px solid var(--ag-banda); }
.agenda-web .cab-in,
.agenda-web .ag-hero-in,
.agenda-web .cuerpo,
.agenda-web .pie-in { max-width: 960px; }

/* ------------------------------------------------- banda de título (phero) */
.agenda-web .ag-hero { background: var(--ag-banda); }
.agenda-web .ag-hero-in { margin: 0 auto; padding: 46px 20px 50px; }
.agenda-web .eyebrow {
    display: flex; align-items: center; gap: 10px;
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
    color: var(--ag-azul); margin: 0 0 .7rem;
}
.agenda-web .eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--ag-rojo); }
.agenda-web h1 {
    color: var(--ag-h); font-weight: 700; font-size: 2.2rem; line-height: 1.15; letter-spacing: -.01em; margin: 0;
}
.agenda-web h1 em { font-style: normal; color: var(--ag-azul); }
.agenda-web .ag-hero .intro { color: var(--ag-texto2); font-size: 1.05rem; line-height: 1.7; margin: 1rem 0 0; max-width: 660px; }
.agenda-web .ag-hero ol.intro { margin-top: .6rem; padding-left: 1.3rem; }
.agenda-web .ag-hero ol.intro li { margin: .15rem 0; }
.agenda-web .ag-hero b { color: var(--ag-h); }

/* ------------------------------------------------------------------ cuerpo */
.agenda-web .cuerpo { padding: 40px 20px 64px; }
.agenda-web .intro { color: var(--ag-texto2); }

.agenda-web .panel {
    background: #fff; border: 1px solid var(--ag-borde); border-radius: 16px;
    padding: 28px; margin-bottom: 20px; box-shadow: 0 6px 24px rgba(4, 45, 124, .06);
}

/* ------------------------------------------------------------------- campos */
.agenda-web .campo > label, .agenda-web .campo-tit { color: var(--ag-h); font-weight: 600; font-size: .92rem; }
.agenda-web .ayuda { color: var(--ag-texto2); font-size: .82rem; }
.agenda-web input[type=text], .agenda-web input:not([type]), .agenda-web input[type=email], .agenda-web input[type=tel],
.agenda-web input[type=number], .agenda-web input[type=date], .agenda-web select {
    font-family: inherit; font-size: 1rem; color: var(--ag-texto);
    border: 1.5px solid var(--ag-azul); border-radius: 10px; padding: .8rem .9rem; background: #fff;
}
.agenda-web input::placeholder { color: var(--ag-texto2); opacity: .75; }
.agenda-web input:focus, .agenda-web select:focus { outline: 3px solid var(--ag-borde); outline-offset: 1px; border-color: var(--ag-azul); }
.agenda-web .chk input { accent-color: var(--ag-azul); }
.agenda-web .chk b { color: var(--ag-h); }

/* ------------------------------------------------------------------ botones */
.agenda-web .btn {
    background: var(--ag-azul); color: #fff; font-family: inherit; font-weight: 600; font-size: 1rem;
    border-radius: 10px; padding: .9rem 1.6rem; border: 1.5px solid var(--ag-azul);
}
.agenda-web .btn:hover { background: var(--ag-azul-hover); border-color: var(--ag-azul-hover); }
.agenda-web .btn:disabled { opacity: .7; cursor: wait; }
.agenda-web .btn:focus-visible { outline: 3px solid var(--ag-borde); outline-offset: 2px; }
.agenda-web a, .agenda-web .btn-enlace { color: var(--ag-azul); font-weight: 600; }

/* ------------------------------------------------------------------ avisos */
.agenda-web .aviso { border-radius: 12px; font-size: .92rem; padding: 14px 18px; }
.agenda-web .aviso-info { background: var(--ag-tenue); border: 1px solid var(--ag-borde); color: var(--ag-h); }
.agenda-web .aviso-error { background: var(--ag-rojo-fondo); border: 1px solid var(--ag-rojo-borde); color: var(--ag-rojo-texto); font-weight: 500; }

/* ------------------------------------------------- WhatsApp con código QR */
.agenda-web .ag-whatsapp { display: flex; align-items: center; gap: 20px; padding: 18px 20px; }
.agenda-web .ag-whatsapp-texto { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.agenda-web .ag-whatsapp-texto b { color: var(--ag-h); font-size: 1rem; }
.agenda-web .ag-whatsapp-escanee { color: var(--ag-texto2); font-size: .82rem; }
.agenda-web .ag-qr { flex: none; display: block; background: #fff; border-radius: 12px; line-height: 0; }
.agenda-web .ag-qr img { width: 140px; height: 140px; display: block; border-radius: 12px; }

/* -------------------------------------------------------------------- pie */
.agenda-web .pie { background: var(--ag-h); color: #E2F2FF; border-top: 0; }
.agenda-web .pie .pie-nom { color: #fff; font-weight: 600; }
.agenda-web .pie p { color: #E2F2FF; }

/* --------------------------------------------------- embebida en la web ICB */
html.embebido .agenda-web .cab,
html.embebido .agenda-web .pie { display: none; }
html.embebido .agenda-web .ag-hero-in { padding: 32px 20px 36px; }
html.embebido .agenda-web .cuerpo { padding: 28px 20px 32px; }

/* ------------------------------------------------------------------ móvil */
@media (max-width: 600px) {
    .agenda-web .ag-hero-in { padding: 30px 16px 34px; }
    .agenda-web h1 { font-size: 1.7rem; }
    .agenda-web .ag-hero .intro { font-size: .98rem; }
    .agenda-web .cuerpo { padding: 24px 16px 44px; }
    .agenda-web .panel { padding: 20px 18px; border-radius: 14px; }
    .agenda-web .acciones .btn { width: 100%; text-align: center; }
    /* 21-oct-2026, pedido del usuario: el QR también se ve en el celular, debajo del texto y centrado. */
    .agenda-web .ag-whatsapp { flex-direction: column; align-items: stretch; text-align: left; }
    .agenda-web .ag-qr { align-self: center; }
}
@media (min-width: 900px) {
    .agenda-web h1 { font-size: 2.6rem; }
}