/* Wizard: solo lo que Radzen no puede expresar (roadmap, tarjetas plegables, burbujas de vista previa,
   zona de subida y vista previa de fotos, animaciones). Los colores salen de las variables del tema,
   por eso siguen el modo oscuro sin clases propias (.wzb-dark se conserva y no cambia nada). */

.wzb-dropzone, .wzb-photo, .wzb-loader, .wzb-gen-icon, .wzb-icon-circle, .wzb-bubble {
    --wzb-primary: var(--rz-primary, #3cd926);
    --wzb-primary-10: color-mix(in srgb, var(--wzb-primary) 12%, transparent);
    --wzb-primary-20: color-mix(in srgb, var(--wzb-primary) 20%, transparent);
    --wzb-primary-40: color-mix(in srgb, var(--wzb-primary) 40%, transparent);
    --wzb-border: var(--rz-base-300, #dee2e6);
    --wzb-muted-fg: var(--rz-text-secondary-color, #6c757d);
    --wzb-muted-bg: var(--app-surface-muted, rgb(0 0 0 / .03));
}

/* Empuja el elemento al final de su fila flex */
.wzb-push-end { margin-inline-start: auto; }

/* Icono redondo de las opciones (Google Calendar, Meet) */
.wzb-icon-circle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background-color: var(--wzb-primary); color: var(--rz-on-primary, #fff); }
.wzb-icon-circle .rzi { font-size: 1.125rem; }

/* Tarjeta plegable: encabezado clicable y cuerpo con el mismo margen lateral */
.wzb-collapsible { overflow: hidden; }
.wzb-collapsible-head { display: flex; align-items: center; gap: .75rem; padding: 1rem; min-width: 0; cursor: pointer; user-select: none; }
.wzb-collapsible-head:focus-visible { outline: var(--rz-outline-normal); outline-offset: -2px; }
.wzb-collapsible-body { padding: 0 1rem 1rem; }

/* Separador superior de una sección dentro de la tarjeta */
.wzb-section-top { padding-top: 1rem; border-top: 1px solid var(--rz-base-300); }

/* Precio junto al nombre de la opción */
.wzb-price-input { width: 130px; flex-shrink: 0; }

/* Vistas previas de mensajes: burbuja alineada a la derecha y bloque con scroll; respetan los saltos de línea */
.wzb-bubble { margin-inline-start: auto; max-width: 85%; padding: .5rem .75rem; border-radius: var(--rz-border-radius, .375rem); background-color: var(--wzb-primary); color: var(--rz-on-primary, #fff); font-size: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.wzb-scroll-block { max-height: 18rem; overflow: auto; padding: 1rem; border: 1px solid var(--rz-base-300); border-radius: var(--rz-border-radius, .375rem); background-color: var(--app-surface-muted); font-size: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Zona de subida (label con InputFile) */
.wzb-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem; width: 100%; padding: 1.25rem 1rem; margin: 0; border: 2px dashed var(--wzb-border); border-radius: .5rem; color: var(--wzb-muted-fg); font-size: .875rem; text-align: center; cursor: pointer; transition: border-color .15s, color .15s; }
.wzb-dropzone:hover { border-color: var(--wzb-primary-40); color: var(--wzb-primary); }
.wzb-dropzone.is-disabled { cursor: not-allowed; background-color: var(--wzb-muted-bg); border-color: var(--wzb-border); color: var(--wzb-muted-fg); opacity: .7; }
/* El selector cubre todo el recuadro e invisible: así recibe los archivos que se sueltan encima */
.wzb-dropzone { position: relative; }
.wzb-dropzone input[type=file] { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wzb-dropzone.is-disabled input[type=file] { cursor: not-allowed; }
.wzb-dropzone-ico { font-size: 1.5rem; }

/* Vista previa de foto */
.wzb-photo { position: relative; width: 100px; height: 100px; border: 1px solid var(--wzb-border); border-radius: .5rem; overflow: hidden; }
.wzb-photo img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.wzb-photo .wzb-photo-x { position: absolute; top: 2px; right: 2px; display: flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; min-width: 0; padding: 0; border-radius: 9999px; font-size: .625rem; line-height: 1; }

/* Entrada de los dialogos superpuestos */
@keyframes wzb-zoom-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
.wzb-zoom-in { animation: wzb-zoom-in .2s ease-out; }

/* Icono animado de la generacion del asistente */
@keyframes wzb-pulse { 50% { opacity: .5; } }
@keyframes wzb-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.wzb-gen-icon { position: relative; }
.wzb-gen-circle { width: 5rem; height: 5rem; border-radius: 9999px; background-color: var(--wzb-primary-10); display: flex; align-items: center; justify-content: center; }
.wzb-gen-sparkles { font-size: 1.875rem; color: var(--wzb-primary); animation: wzb-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.wzb-gen-ring { position: absolute; inset: -.75rem; border-radius: 9999px; border: 2px solid var(--wzb-primary-20); animation: wzb-ping 1s cubic-bezier(0, 0, .2, 1) infinite; pointer-events: none; }

/* Loader de la extraccion con IA */
@keyframes wzb-spin { to { transform: rotate(360deg); } }
@keyframes wzb-breathe { 50% { transform: scale(1.12); opacity: .75; } }
@keyframes wzb-loader-fade { from { opacity: .1; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes wzb-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.wzb-loader { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1.5rem 1rem; text-align: center; }
.wzb-loader-orb { position: relative; width: 4.5rem; height: 4.5rem; margin-bottom: .25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background-color: var(--wzb-primary-10); }
.wzb-loader-arc { position: absolute; inset: -.375rem; border-radius: 9999px; background: conic-gradient(from 0deg, transparent 0 20%, var(--wzb-primary)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); animation: wzb-spin 1.1s linear infinite; }
.wzb-loader-ico { font-size: 1.625rem; color: var(--wzb-primary); animation: wzb-breathe 2s ease-in-out infinite; }
.wzb-loader-title { font-size: .9375rem; font-weight: 600; }
.wzb-loader-msg { min-height: 3em; font-size: .8125rem; line-height: 1.5; color: var(--wzb-muted-fg); animation: wzb-loader-fade .6s ease-out both; }
.wzb-loader-bar { position: relative; width: min(16rem, 80%); height: 4px; margin-top: .25rem; border-radius: 9999px; overflow: hidden; background-color: var(--wzb-primary-10); }
.wzb-loader-bar::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--wzb-primary), transparent); animation: wzb-slide 1.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .wzb-zoom-in, .wzb-gen-sparkles, .wzb-gen-ring, .wzb-loader-arc, .wzb-loader-ico, .wzb-loader-bar::after, .wzb-loader-msg { animation: none; }
    .wzb-loader-bar { display: none; }
}

/* Roadmap del wizard (RadzenSteps): círculos compactos, fila con scroll horizontal sin barra visible,
   check en los completados (.wzb-step-completed) y anillo en el actual (.rz-state-highlight). */
.wzb-steps {
    --wzb-step-primary: var(--rz-primary, #3cd926);
    --wzb-step-ring: color-mix(in srgb, var(--wzb-step-primary) 20%, transparent);
    --wzb-step-line: var(--rz-base-300);
    --wzb-step-muted: var(--rz-text-secondary-color);
    --wzb-step-bg: var(--rz-base-background-color);
}
.wzb-steps > ul, .wzb-steps .rz-steps-list { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: .375rem .25rem .25rem; margin: 0; }
.wzb-steps > ul::-webkit-scrollbar, .wzb-steps .rz-steps-list::-webkit-scrollbar { display: none; }
.wzb-steps .rz-steps-item { flex-shrink: 0; }
.wzb-steps .rz-steps-item:not(:last-child)::after { min-width: 1rem; height: 2px; border-radius: 9999px; background-color: var(--wzb-step-line); transition: background-color .2s; }
.wzb-steps .rz-steps-number { width: 1.75rem; height: 1.75rem; min-width: 1.75rem; font-size: .75rem; font-weight: 600; color: var(--wzb-step-muted); border: 2px solid var(--wzb-step-line); background: var(--wzb-step-bg); transition: background-color .2s, border-color .2s, box-shadow .2s, color .2s; }
.wzb-steps .rz-steps-title { font-size: .75rem; line-height: 1.25; color: var(--wzb-step-muted); transition: color .2s; }
.wzb-steps .wzb-step-completed .rz-steps-number,
.wzb-steps .rz-state-highlight .rz-steps-number { color: var(--rz-on-primary, #fff); background: var(--wzb-step-primary); border-color: var(--wzb-step-primary); }
.wzb-steps .wzb-step-completed:not(:last-child)::after { background-color: var(--wzb-step-primary); }
.wzb-steps .wzb-step-completed .rz-steps-title { color: var(--wzb-step-primary); }
.wzb-steps .rz-state-highlight .rz-steps-number { box-shadow: 0 0 0 4px var(--wzb-step-ring); }
.wzb-steps .rz-state-highlight .rz-steps-title { color: var(--wzb-step-primary); font-weight: 600; }
/* Pasos que aún no se pueden abrir: requieren completar los anteriores */
.wzb-steps .wzb-step-locked, .wzb-steps .wzb-step-locked * { cursor: not-allowed; }
.wzb-steps .wzb-step-locked .rz-steps-number, .wzb-steps .wzb-step-locked .rz-steps-title { opacity: .55; }
@media (max-width: 575px) {
    .wzb-steps .rz-steps-title { font-size: .6875rem; }
}
@media (prefers-reduced-motion: reduce) {
    .wzb-steps .rz-steps-number, .wzb-steps .rz-steps-title, .wzb-steps .rz-steps-item::after { transition: none; }
}

/* Encabezado del wizard: min-width 0 permite que el aviso se recorte dentro de los contenedores flex */
.wzb-setup-head, .wzb-setup-title, .wzb-setup-banner-text { min-width: 0; }
@media (max-width: 575px) {
    .wzb-setup-logo { width: 40px !important; height: 40px !important; }
    .wzb-setup-banner-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}