/* ═══════════════════════════════════════════════════════════════════
   WIDGET DE RESERVA — FRANCHI CENTRO MÉDICO DEPORTIVO
   Cara pública embebible en WordPress vía iframe. Standalone, sin
   dependencias del CSS del panel. Mobile-first.

   Tipografía del manual de marca:
   - Oliviar Sans → display, títulos.
   - Srotone     → body, interfaces.
   Mientras los .woff2 oficiales no estén disponibles se usan los
   fallbacks indicados en el cascade. Cuando lleguen los archivos
   solo hay que agregar las declaraciones @font-face arriba de las
   variables y nada más.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

:root {
    /* Paleta Franchi */
    --navy:           #00203F;
    --teal:           #004262;
    --celeste:        #29B4E9;
    --menta:          #56EF9F;
    --fondo:          #F0F6F7;
    --blanco:         #ffffff;

    /* Derivados sutiles */
    --celeste-suave:  rgba(41, 180, 233, .10);
    --celeste-fuerte: rgba(41, 180, 233, .22);
    --menta-suave:    rgba(86, 239, 159, .18);
    --navy-suave:     rgba(0, 32, 63, .04);

    /* Texto */
    --texto:          #142a3d;
    --texto-suave:    #6b7e92;
    --texto-tenue:    #9aaabb;

    /* Bordes */
    --borde:          #e3ecf2;
    --borde-fuerte:   #cbd7e0;

    /* Estados */
    --rojo:           #d75555;
    --rojo-suave:     #fcf2f1;
    --aviso:          #d99738;
    --aviso-suave:    #fdf6ea;

    /* Espaciado rítmico */
    --esp-1: .25rem;
    --esp-2: .5rem;
    --esp-3: .75rem;
    --esp-4: 1rem;
    --esp-5: 1.5rem;
    --esp-6: 2rem;
    --esp-7: 2.5rem;
    --esp-8: 3.5rem;

    /* Forma */
    --radio-sm:  10px;
    --radio:     14px;
    --radio-lg:  22px;

    /* Tipografía */
    --font-display: 'Oliviar Sans', 'Hanken Grotesk', system-ui, sans-serif;
    --font-body:    'Srotone', 'DM Sans', system-ui, sans-serif;

    /* Movimiento */
    --t-rapido: .15s cubic-bezier(.4, 0, .2, 1);
    --t-medio:  .25s cubic-bezier(.4, 0, .2, 1);
    --t-suave:  .4s cubic-bezier(.4, 0, .2, 1);

    /* Sombras */
    --sombra-sm:    0 1px 2px rgba(0, 32, 63, .04);
    --sombra:       0 2px 6px rgba(0, 32, 63, .04), 0 12px 32px rgba(0, 32, 63, .06);
    --sombra-focus: 0 0 0 3px var(--celeste-fuerte);
}

/* ── Reset minimalista ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    /* Fondo blanco hardcodeado a propósito: en algunos contextos WordPress
       (themes que redefinen custom properties, iframes con CSS heredado, etc.)
       las variables CSS pueden no resolverse — el hex fijo blinda el render. */
    background: #ffffff;
    color: var(--texto);
    font-family: var(--font-body);
    font-size: 15.5px;
    line-height: 1.55;
    letter-spacing: -.002em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

[x-cloak] { display: none !important; }

::selection { background: var(--celeste-fuerte); color: var(--navy); }

/* ── Shell del widget ─────────────────────────────────────────────── */
/* Fondo blanco puro para que combine con cualquier página WordPress. La
   distinción visual del card viene de la sombra, no del color de fondo.
   Mismo razonamiento que en html/body: hex hardcodeado por defensa. */
.widget-shell {
    background: #ffffff;
    /* Sin max-width: el widget ocupa el 100% del ancho del contenedor padre
       (en WordPress, el iframe; standalone, el viewport). El "respiro" lateral
       lo da el padding. */
    width: 100%;
    margin: 0 auto;
    padding: var(--esp-5) var(--esp-4) var(--esp-7);
}

.widget-header {
    text-align: center;
    margin-bottom: var(--esp-6);
    padding-top: var(--esp-2);
}
.widget-marca {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -.01em;
    line-height: 1.1;
}
.widget-tagline {
    font-size: .82rem;
    color: var(--texto-suave);
    margin-top: var(--esp-2);
    letter-spacing: .015em;
}

/* ── Card principal ────────────────────────────────────────────────── */
/* Fondo blanco plano, sin sombra ni borde — el widget se mimetiza con el
   fondo blanco de la página WordPress. Cualquier decoración visual del
   contenedor se elimina a propósito para evitar parches grises por
   variables no resueltas. */
.widget-card {
    background: #ffffff;
    border-radius: var(--radio-lg);
    padding: var(--esp-6) var(--esp-5);
    overflow: hidden;
}

.widget-paso-titulo {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -.018em;
    line-height: 1.2;
    margin-bottom: var(--esp-2);
}
.widget-paso-bajada {
    font-size: .92rem;
    color: var(--texto-suave);
    margin-bottom: var(--esp-6);
    line-height: 1.5;
}

/* ── Indicador de pasos ────────────────────────────────────────────── */
.widget-progreso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    margin-bottom: var(--esp-5);
    flex-wrap: wrap;
}
.widget-progreso-paso {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background: var(--borde);
    transition: background var(--t-medio);
}
.widget-progreso-paso.activo { background: var(--celeste); }
.widget-progreso-paso.completo { background: var(--menta); }
.widget-progreso-leyenda {
    width: 100%;
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-top: var(--esp-2);
}

/* ── Selección de servicios ──────────────────────────────────────── */
.widget-cat {
    margin-bottom: var(--esp-5);
}
.widget-cat:last-child { margin-bottom: 0; }
.widget-cat-titulo {
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--texto-suave);
    margin-bottom: var(--esp-3);
    padding-bottom: var(--esp-2);
    border-bottom: 1px solid var(--borde);
}
.widget-cat-lista {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
}
.widget-srv {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding: .95rem 1.1rem;
    border: 1.5px solid var(--borde);
    border-radius: var(--radio);
    background: var(--blanco);
    cursor: pointer;
    transition: border-color var(--t-rapido), background var(--t-rapido), box-shadow var(--t-medio), transform var(--t-rapido);
    position: relative;
}
.widget-srv:hover {
    border-color: var(--celeste);
    background: rgba(41, 180, 233, .04);
}
.widget-srv:active { transform: scale(.985); }
.widget-srv.activa {
    border-color: var(--celeste);
    background: var(--celeste-suave);
}
.widget-srv:focus-within {
    outline: none;
    box-shadow: var(--sombra-focus);
}
.widget-srv input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.widget-srv-check {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1.5px solid var(--borde-fuerte);
    background: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--t-rapido), border-color var(--t-rapido);
}
.widget-srv:hover .widget-srv-check { border-color: var(--celeste); }
.widget-srv.activa .widget-srv-check {
    background: var(--celeste);
    border-color: var(--celeste);
}
.widget-srv-check svg {
    width: 14px;
    height: 14px;
    color: #fff;
    opacity: 0;
    transition: opacity var(--t-rapido);
}
.widget-srv.activa .widget-srv-check svg { opacity: 1; }
.widget-srv-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.widget-srv-nombre {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
    letter-spacing: -.005em;
}
.widget-srv-meta {
    font-size: .8rem;
    color: var(--texto-suave);
    font-variant-numeric: tabular-nums;
}
.widget-srv-badge {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--celeste);
    background: var(--celeste-suave);
    padding: .15rem .5rem;
    border-radius: 99px;
    margin-top: .25rem;
    align-self: flex-start;
}

/* ── EMMAC: panel informativo ───────────────────────────────────── */
.widget-emmac-info {
    background: linear-gradient(135deg, var(--celeste-suave), var(--menta-suave));
    border-radius: var(--radio);
    padding: var(--esp-4) var(--esp-5);
    margin-bottom: var(--esp-5);
}
.widget-emmac-info-titulo {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: var(--esp-2);
}
.widget-emmac-info-detalle {
    font-size: .88rem;
    color: var(--texto);
    line-height: 1.55;
}
.widget-emmac-incluidos {
    list-style: none;
    margin-top: var(--esp-3);
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
}
.widget-emmac-incluidos li {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    font-size: .92rem;
    color: var(--navy);
}
.widget-emmac-incluidos li::before {
    content: "✓";
    font-weight: 700;
    color: var(--celeste);
    font-size: 1rem;
    line-height: 1;
}

/* ── Formulario de datos del paciente ────────────────────────────── */
.widget-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-4) var(--esp-5);
}
.widget-form .widget-campo-full { grid-column: 1 / -1; }
.widget-campo {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
}
.widget-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--texto);
    letter-spacing: -.002em;
}
.widget-input {
    appearance: none;
    width: 100%;
    padding: .75rem .95rem;
    font-family: inherit;
    font-size: .95rem;
    color: var(--texto);
    background: var(--blanco);
    border: 1.5px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.widget-input:hover:not(:focus):not(:disabled) { border-color: var(--texto-suave); }
.widget-input:focus {
    outline: none;
    border-color: var(--celeste);
    box-shadow: var(--sombra-focus);
}
.widget-input::placeholder { color: var(--texto-tenue); }
.widget-select { padding-right: 2.2rem; cursor: pointer; }

/* ── Botones ──────────────────────────────────────────────────────── */
.widget-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    margin-top: var(--esp-6);
}
.widget-acciones-derecha { margin-left: auto; }
.widget-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    min-height: 46px;
    padding: .75rem 1.4rem;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.002em;
    border-radius: var(--radio-sm);
    border: none;
    cursor: pointer;
    transition: background var(--t-rapido), color var(--t-rapido), border-color var(--t-rapido), box-shadow var(--t-medio), transform var(--t-rapido);
    text-decoration: none;
    white-space: nowrap;
}
.widget-btn:focus-visible { outline: none; box-shadow: var(--sombra-focus); }
.widget-btn:active:not(:disabled) { transform: translateY(1px); }
.widget-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.widget-btn-primario {
    background: var(--navy);
    color: #fff;
}
.widget-btn-primario:hover:not(:disabled) {
    background: var(--teal);
    box-shadow: var(--sombra);
}
.widget-btn-secundario {
    background: var(--blanco);
    color: var(--texto);
    border: 1.5px solid var(--borde-fuerte);
}
.widget-btn-secundario:hover:not(:disabled) {
    border-color: var(--texto-suave);
    background: var(--navy-suave);
}
.widget-btn-exito {
    background: var(--menta);
    color: var(--navy);
}
.widget-btn-exito:hover:not(:disabled) {
    background: #3edc8b;
    box-shadow: var(--sombra);
}

/* ── Opciones de modalidad ───────────────────────────────────────── */
.widget-modalidad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-3);
    margin-bottom: var(--esp-5);
}
.widget-mod-opcion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--esp-2);
    padding: var(--esp-4) var(--esp-5);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio);
    background: var(--blanco);
    cursor: pointer;
    transition: border-color var(--t-rapido), background var(--t-rapido), box-shadow var(--t-medio);
}
.widget-mod-opcion:hover {
    border-color: var(--celeste);
    background: rgba(41, 180, 233, .04);
}
.widget-mod-opcion.activa {
    border-color: var(--celeste);
    background: var(--celeste-suave);
    box-shadow: var(--sombra-focus);
}
.widget-mod-opcion input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.widget-mod-titulo {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--navy);
}
.widget-mod-detalle {
    font-size: .82rem;
    color: var(--texto-suave);
    line-height: 1.4;
}

/* ── Calendario ───────────────────────────────────────────────────── */
.widget-cal {
    background: var(--blanco);
    border: 1.5px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
}
.widget-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--esp-3) var(--esp-4);
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
}
.widget-cal-mes {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 600;
    color: var(--navy);
    text-transform: capitalize;
    letter-spacing: -.005em;
}
.widget-cal-nav {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: .4rem .7rem;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--texto-suave);
    border-radius: var(--radio-sm);
    transition: background var(--t-rapido), color var(--t-rapido);
}
.widget-cal-nav:hover { background: var(--navy-suave); color: var(--navy); }
.widget-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    padding: var(--esp-3);
}
.widget-cal-dow {
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--texto-suave);
    padding: var(--esp-2) 0;
}
.widget-cal-dia {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .88rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--texto-tenue);
    cursor: not-allowed;
    transition: background var(--t-rapido), color var(--t-rapido), transform var(--t-rapido);
    user-select: none;
}
.widget-cal-dia.disponible {
    color: var(--navy);
    cursor: pointer;
    font-weight: 600;
}
.widget-cal-dia.disponible:hover {
    background: var(--celeste-suave);
    transform: scale(1.06);
}
.widget-cal-dia.seleccionado {
    background: var(--navy);
    color: #fff;
    font-weight: 700;
}
.widget-cal-dia.seleccionado:hover { background: var(--navy); transform: none; }
.widget-cal-dia.hoy:not(.seleccionado) {
    box-shadow: inset 0 0 0 1.5px var(--celeste);
    color: var(--teal);
}
.widget-cal-vacio { pointer-events: none; }

/* ── Botones de hora ──────────────────────────────────────────────── */
.widget-horas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: var(--esp-2);
    margin-top: var(--esp-3);
}
.widget-hora {
    padding: .65rem .3rem;
    border: 1.5px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    background: var(--blanco);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--texto);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color var(--t-rapido), background var(--t-rapido), color var(--t-rapido), transform var(--t-rapido);
}
.widget-hora:hover:not(.activa) {
    border-color: var(--celeste);
    background: var(--celeste-suave);
    color: var(--navy);
}
.widget-hora.activa {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    box-shadow: var(--sombra);
}
.widget-hora.bloqueada {
    background: var(--fondo);
    color: var(--texto-tenue);
    cursor: not-allowed;
    text-decoration: line-through;
}

/* ── Layout 2 columnas (separados) ───────────────────────────────── */
.widget-srv-bloque {
    border: 1.5px solid var(--borde);
    border-radius: var(--radio);
    background: var(--blanco);
    margin-bottom: var(--esp-4);
    overflow: hidden;
}
.widget-srv-bloque-header {
    padding: var(--esp-4) var(--esp-5);
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    flex-wrap: wrap;
}
.widget-srv-bloque-titulo {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--navy);
}
.widget-srv-bloque-resumen {
    font-size: .82rem;
    color: var(--texto-suave);
}
.widget-srv-bloque-resumen.confirmado { color: var(--navy); font-weight: 600; }
.widget-cal-horas {
    display: grid;
    grid-template-columns: minmax(0, 320px) 1fr;
    gap: var(--esp-5);
    padding: var(--esp-5);
}
.widget-col-titulo {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--texto-suave);
    margin-bottom: var(--esp-3);
}

/* ── Aviso "elegí un día" ─────────────────────────────────────────── */
.widget-aviso-dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: var(--esp-5);
    color: var(--texto-suave);
    text-align: center;
    font-size: .9rem;
    gap: var(--esp-2);
}
.widget-aviso-dia svg { width: 34px; height: 34px; opacity: .4; }

/* ── Resumen ──────────────────────────────────────────────────────── */
.widget-resumen-bloque {
    background: var(--fondo);
    border-radius: var(--radio);
    padding: var(--esp-4) var(--esp-5);
    margin-bottom: var(--esp-4);
}
.widget-resumen-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--esp-3);
    padding: .55rem 0;
    border-bottom: 1px solid var(--borde);
}
.widget-resumen-item:last-child { border-bottom: none; }
.widget-resumen-nombre {
    font-family: var(--font-display);
    font-size: .98rem;
    font-weight: 600;
    color: var(--navy);
}
.widget-resumen-meta {
    font-size: .78rem;
    color: var(--texto-suave);
    margin-top: .15rem;
}
.widget-resumen-cuando {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.widget-resumen-hora {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy);
}
.widget-resumen-fecha {
    font-size: .76rem;
    color: var(--texto-suave);
}
.widget-resumen-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--esp-4) var(--esp-5);
    background: var(--navy);
    color: #fff;
    border-radius: var(--radio);
    margin-bottom: var(--esp-4);
}
.widget-resumen-total-label {
    font-size: .9rem;
    opacity: .85;
}
.widget-resumen-total-valor {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.widget-resumen-total-nota {
    width: 100%;
    text-align: right;
    font-size: .72rem;
    opacity: .75;
    margin-top: .25rem;
}

/* ── Alertas e info ───────────────────────────────────────────────── */
.widget-alerta {
    padding: var(--esp-3) var(--esp-4);
    border-radius: var(--radio-sm);
    font-size: .9rem;
    margin-bottom: var(--esp-4);
    line-height: 1.5;
    border: 1px solid;
}
.widget-alerta.error  { background: var(--rojo-suave);   color: #962d24; border-color: rgba(215, 85, 85, .25); }
.widget-alerta.info   { background: var(--celeste-suave); color: var(--teal); border-color: rgba(41, 180, 233, .25); }
.widget-alerta.aviso  { background: var(--aviso-suave);   color: #8a5400; border-color: rgba(217, 151, 56, .25); }
.widget-alerta strong { font-weight: 700; }

/* ── Indicaciones previas (paso resumen) ──────────────────────────── */
.widget-indicaciones {
    border-left: 3px solid var(--aviso);
    background: var(--aviso-suave);
    padding: var(--esp-3) var(--esp-4);
    border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
    margin-bottom: var(--esp-4);
}
.widget-indicaciones-titulo {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #8a5400;
    margin-bottom: var(--esp-2);
}
.widget-indicaciones-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.widget-indicaciones-lista li {
    font-size: .88rem;
    color: var(--texto);
    line-height: 1.5;
}
.widget-indicaciones-lista strong { color: var(--navy); font-weight: 600; }

/* ── Pantalla final de confirmación ──────────────────────────────── */
.widget-confirmado {
    text-align: center;
    padding: var(--esp-7) var(--esp-4);
}
.widget-confirmado-tick {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--menta);
    color: var(--navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--esp-5);
    box-shadow: 0 8px 24px rgba(86, 239, 159, .35);
    animation: tick-pop .45s cubic-bezier(.34, 1.56, .64, 1);
}
.widget-confirmado-tick svg { width: 38px; height: 38px; }
@keyframes tick-pop {
    from { opacity: 0; transform: scale(.5); }
    to   { opacity: 1; transform: scale(1); }
}
.widget-confirmado h2 {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: var(--esp-2);
    letter-spacing: -.018em;
}
.widget-confirmado p {
    color: var(--texto-suave);
    font-size: 1rem;
    margin-bottom: var(--esp-5);
    line-height: 1.55;
}
.widget-confirmado p strong { color: var(--navy); font-weight: 700; }

/* ── Spinner ──────────────────────────────────────────────────────── */
.widget-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--borde);
    border-top-color: var(--celeste);
    border-radius: 50%;
    animation: widget-spin .65s linear infinite;
}
@keyframes widget-spin { to { transform: rotate(360deg); } }
.widget-cargando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-3);
    padding: var(--esp-7);
    color: var(--texto-suave);
}

/* ── Transición entre pasos ──────────────────────────────────────── */
.widget-paso-enter {
    animation: paso-fade .35s cubic-bezier(.4, 0, .2, 1);
}
@keyframes paso-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── EMMAC: card bloqueado en paso intermedio ──────────────────── */
.widget-srv-bloqueado {
    cursor: not-allowed;
    opacity: .85;
}
.widget-srv-bloqueado .widget-srv-check {
    background: var(--celeste);
    border-color: var(--celeste);
    color: white;
}

/* ── Resumen: bloque por agrupador (genérico) ─────────────────── */
.widget-resumen-grupo {
    border-left: 3px solid var(--celeste);
}
.widget-resumen-grupo-titulo {
    font-family: var(--font-display);
    font-size: .76rem;
    font-weight: 700;
    color: var(--celeste);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: var(--esp-2);
}

/* ── Overlay de guardado (post-confirmar) ──────────────────────────── */
.widget-overlay-guardando {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: widget-overlay-fade .2s ease-out;
}
.widget-overlay-caja {
    text-align: center;
    padding: var(--esp-7) var(--esp-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--esp-4);
    max-width: 320px;
}
.widget-spinner-lg {
    width: 56px;
    height: 56px;
    border-width: 4px;
}
.widget-overlay-titulo {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -.01em;
}
.widget-overlay-bajada {
    font-size: .88rem;
    color: var(--texto-suave);
}
@keyframes widget-overlay-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Footer del widget ────────────────────────────────────────────── */
.widget-footer {
    text-align: center;
    margin-top: var(--esp-6);
    font-size: .76rem;
    color: var(--texto-suave);
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .widget-shell { padding: var(--esp-4) var(--esp-3) var(--esp-6); }
    .widget-card  { padding: var(--esp-5) var(--esp-4); border-radius: var(--radio); }
    .widget-paso-titulo { font-size: 1.25rem; }
    .widget-form { grid-template-columns: 1fr; gap: var(--esp-4); }
    .widget-modalidad { grid-template-columns: 1fr; }
    .widget-cal-horas { grid-template-columns: 1fr; gap: var(--esp-4); padding: var(--esp-4); }
    .widget-progreso-paso { width: 22px; }
    .widget-resumen-cuando { text-align: left; }
    .widget-resumen-item { flex-direction: column; gap: var(--esp-1); }
}

/* ════════════════════════════════════════════════════════════════════
   PASO 1 — Categorías, búsqueda, dock inferior persistente
   Identidad: Fraunces display + Manrope body, paleta navy/celeste/menta.
   Mobile-first: 1 col en mobile, 2 cols en >=560px.
   ════════════════════════════════════════════════════════════════════ */

/* ── Search bar global ───────────────────────────────────────────── */
.widget-search {
  position: relative;
  margin-bottom: var(--esp-5);
}
.widget-search-icon {
  position: absolute;
  left: var(--esp-4);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--texto-suave);
  pointer-events: none;
}
.widget-search-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--esp-6) 0 calc(var(--esp-4) + 22px + var(--esp-3));
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--blanco);
  font-family: 'Manrope', sans-serif;
  font-size: .95rem;
  color: var(--navy);
  transition: border-color var(--t-rapido), box-shadow var(--t-rapido);
}
.widget-search-input::placeholder { color: var(--texto-suave); }
.widget-search-input:focus {
  outline: none;
  border-color: var(--celeste);
  box-shadow: 0 0 0 4px rgba(109, 208, 255, .15);
}
.widget-search-input::-webkit-search-cancel-button { display: none; }
.widget-search-clear {
  position: absolute;
  right: var(--esp-3);
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  background: var(--fondo);
  border-radius: 50%;
  color: var(--navy);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-rapido);
}
.widget-search-clear:hover { background: var(--borde); }

/* ── Grid de cards de categoría ──────────────────────────────────── */
/* Auto-fit con minmax(280px, 1fr): el navegador acomoda tantas columnas
   como entren respetando el mínimo. Resulta en:
     • iPhone 393px → 1 columna (forzada por el min)
     • iPad 820px  → 2 columnas (740px útiles / 280 = 2)
     • Desktop ≥1100px → 3+ columnas
   Sin breakpoints duros: escala con el ancho real disponible. */
.widget-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--esp-3);
}
@media (min-width: 720px) {
  .widget-cat-grid { gap: var(--esp-4); }
}

.widget-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-5);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-family: 'Manrope', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-medio), transform var(--t-medio), box-shadow var(--t-medio);
  overflow: hidden;
  min-height: 140px;
  /* Reveal escalonado al entrar al paso */
  opacity: 0;
  animation: widget-card-in .42s cubic-bezier(.2,.7,.2,1) forwards;
}
.widget-cat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(109, 208, 255, .08));
  opacity: 0;
  transition: opacity var(--t-medio);
  pointer-events: none;
}
.widget-cat-card:hover {
  border-color: var(--celeste);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 32, 63, .07);
}
.widget-cat-card:hover::before { opacity: 1; }
.widget-cat-card:active { transform: translateY(0); }

/* Stagger: cada card entra 60ms después de la anterior */
.widget-cat-grid .widget-cat-card:nth-child(1) { animation-delay: 0ms; }
.widget-cat-grid .widget-cat-card:nth-child(2) { animation-delay: 60ms; }
.widget-cat-grid .widget-cat-card:nth-child(3) { animation-delay: 120ms; }
.widget-cat-grid .widget-cat-card:nth-child(4) { animation-delay: 180ms; }
.widget-cat-grid .widget-cat-card:nth-child(5) { animation-delay: 240ms; }
@keyframes widget-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.widget-cat-icono {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--celeste-suave, rgba(109, 208, 255, .15));
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Card destacada EMMAC (acceso rápido) ──────────────────────────
   Misma forma/tamaño que las otras cards (hereda de .widget-cat-card),
   pero con paleta invertida: fondo navy, contenido menta. Al quedar
   seleccionada invierte la paleta otra vez (fondo menta, contenido navy)
   para que el estado activo sea inequívoco. */
.widget-cat-card-emmac {
  background: #004262;
  border-color: #004262;
}
.widget-cat-card-emmac::before { display: none; }
.widget-cat-card-emmac:hover {
  background: #004262;
  border-color: #56ef9f;
  box-shadow: 0 10px 28px rgba(0, 32, 63, .22);
}
.widget-cat-card-emmac .widget-cat-icono {
  background: rgba(86, 239, 159, .14);
  color: #56ef9f;
}
.widget-cat-card-emmac .widget-cat-nombre { color: #56ef9f; }
.widget-cat-card-emmac .widget-cat-contador { color: rgba(86, 239, 159, .78); }

/* Estado seleccionado: paleta invertida + check visual */
.widget-cat-card-emmac.activa {
  background: #56ef9f;
  border-color: #56ef9f;
  box-shadow: 0 0 0 3px rgba(86, 239, 159, .25);
}
.widget-cat-card-emmac.activa:hover {
  background: #56ef9f;
  box-shadow: 0 0 0 3px rgba(86, 239, 159, .25), 0 10px 28px rgba(0, 32, 63, .12);
}
.widget-cat-card-emmac.activa .widget-cat-icono {
  background: rgba(0, 66, 98, .14);
  color: #004262;
}
.widget-cat-card-emmac.activa .widget-cat-nombre { color: #004262; }
.widget-cat-card-emmac.activa .widget-cat-contador {
  color: #004262;
  font-weight: 600;
}
.widget-cat-icono svg { width: 24px; height: 24px; }
.widget-cat-nombre {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -.005em;
}
.widget-cat-contador {
  font-size: .78rem;
  color: var(--texto-suave);
  margin-top: auto;
  letter-spacing: .01em;
}

/* ── Vista 1B: header de categoría activa + botón volver ─────────── */
.widget-back {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  background: none;
  border: none;
  padding: var(--esp-2) 0;
  margin-bottom: var(--esp-3);
  font-family: 'Manrope', sans-serif;
  font-size: .88rem;
  font-weight: 500;
  color: var(--texto-suave);
  cursor: pointer;
  transition: color var(--t-rapido);
}
.widget-back:hover { color: var(--navy); }
.widget-back svg { width: 16px; height: 16px; }

.widget-cat-header {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-4) var(--esp-4) 0;
  border-bottom: 1px solid var(--borde);
  margin-bottom: var(--esp-4);
}
.widget-cat-header-icono {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(109, 208, 255, .15);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.widget-cat-header-icono svg { width: 22px; height: 22px; }
.widget-cat-header-nombre {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
}
.widget-cat-header-meta {
  font-size: .78rem;
  color: var(--texto-suave);
  margin-top: 2px;
}

/* ── Vista 1C: búsqueda — resumen + tag de categoría ─────────────── */
.widget-search-resumen {
  font-size: .82rem;
  color: var(--texto-suave);
  margin-bottom: var(--esp-3);
  padding: var(--esp-2) 0;
}
.widget-empty {
  text-align: center;
  padding: var(--esp-7) var(--esp-4);
  font-size: .9rem;
  color: var(--texto-suave);
  background: var(--fondo);
  border-radius: var(--radio);
}
.widget-srv-tag {
  display: inline-block;
  margin-top: .35rem;
  padding: .15rem .55rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--menta-suave, rgba(86, 239, 159, .2));
  border-radius: 99px;
  align-self: flex-start;
}

/* ── Crossfade entre vistas internas del paso 1 ──────────────────── */
.widget-fade-in {
  animation: widget-fade .2s ease-out;
}
@keyframes widget-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Dock inferior persistente ───────────────────────────────────── */
.widget-con-dock {
  padding-bottom: 96px; /* reserva espacio para el dock fixed */
}
.widget-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--navy);
  color: rgba(255, 255, 255, .9);
  box-shadow: 0 -12px 32px rgba(0, 32, 63, .18);
  animation: widget-dock-in .28s cubic-bezier(.2,.8,.2,1);
  max-height: 70vh;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
@keyframes widget-dock-in { from { transform: translateY(100%); } to { transform: translateY(0); } }

.widget-dock-handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--esp-4) var(--esp-5);
  background: none;
  border: none;
  color: inherit;
  font-family: 'Manrope', sans-serif;
  cursor: pointer;
  transition: background var(--t-rapido);
}
.widget-dock-handle:hover { background: rgba(255, 255, 255, .04); }
.widget-dock-contador {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  font-size: .92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
}
.widget-dock-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--menta, #56EF9F);
  font-style: italic;
}
.widget-dock-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  transition: transform var(--t-medio);
}
.widget-dock-toggle svg { width: 16px; height: 16px; }
.widget-dock-toggle.abierto { transform: rotate(180deg); }

.widget-dock-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  padding: 0 var(--esp-5) var(--esp-4);
  animation: widget-fade .2s ease-out;
}
.widget-dock-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: .4rem .65rem .4rem .85rem;
  background: rgba(255, 255, 255, .08);
  border-radius: 99px;
  font-size: .8rem;
  color: rgba(255, 255, 255, .92);
  max-width: 100%;
}
.widget-dock-chip-nombre {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.widget-dock-chip-quitar {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .8);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-rapido), color var(--t-rapido);
}
.widget-dock-chip-quitar:hover { background: rgba(215, 85, 85, .9); color: #fff; }

/* Botón "Continuar" del dock: mismo estilo que el del paso 2 (ancho de
   contenido, no block) y alineado a la derecha. */
.widget-dock-accion {
  display: flex;
  justify-content: flex-end;
  padding: var(--esp-3) var(--esp-5) calc(var(--esp-4) + env(safe-area-inset-bottom, 0px));
  background: var(--navy);
  position: sticky;
  bottom: 0;
}

/* En mobile compacto, el handle reduce un poco su padding */
@media (max-width: 480px) {
  .widget-dock-handle { padding: var(--esp-3) var(--esp-4); }
  .widget-dock-lista { padding: 0 var(--esp-4) var(--esp-3); }
  .widget-dock-accion { padding: 0 var(--esp-4) calc(var(--esp-3) + env(safe-area-inset-bottom, 0px)); }
  .widget-cat-card { padding: var(--esp-4); min-height: 120px; }
  .widget-search-input { height: 44px; font-size: .92rem; }
}

/* ── Nota destacada en paso 1 (multi-selección permitida) ─────────── */
.widget-nota-multi {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: .85rem 1rem;
  margin-bottom: var(--esp-5);
  background: var(--menta-suave);
  border: 1px solid rgba(86, 239, 159, .35);
  border-left: 3px solid var(--menta);
  border-radius: var(--radio);
  font-size: .88rem;
  line-height: 1.45;
  color: var(--navy);
}
.widget-nota-multi svg {
  width: 20px;
  height: 20px;
  color: #1a7a4a;
  flex-shrink: 0;
}
.widget-nota-multi strong { font-weight: 700; }

/* ── Embebido en iframe (modo WordPress) ──────────────────────────────
   Cuando el widget vive dentro de un iframe que se auto-ajusta por
   postMessage, NO debe usarse dock fixed: el iframe se redimensiona al
   scrollHeight del documento, así que un dock con position:fixed quedaría
   anclado al final con un gap igual al padding-bottom de reserva. La
   clase `.en-iframe` la setea el JS del widget cuando window.parent !== window. */

/* En iframe NO debe haber min-height: 100vh ni en html ni en body. Si
   queda, el scrollHeight reportado al parent siempre será ≥ 100vh aunque
   el contenido sea más chico → aparece un gran espacio en blanco abajo. */
html.en-iframe,
html.en-iframe body {
    min-height: 0;
}

.en-iframe .widget-con-dock { padding-bottom: 0; }
.en-iframe .widget-dock {
    position: static;
    animation: none;
    box-shadow: 0 -2px 12px rgba(0, 32, 63, .08);
    margin-top: var(--esp-5);
    border-radius: var(--radio);
    max-height: none;
}