/* IMAGIM DISC — Frontend Styles
   BUILD: 2026-06-19 04:07 UTC — v2.1.0
   Si al inspeccionar el código fuente de la página (clic derecho > Ver código
   fuente, o F12 > pestaña Network > disc.css) esta fecha NO aparece o el
   archivo cargado tiene un "?ver=" distinto al de este build, significa que
   el navegador o el hosting está sirviendo una copia en caché, no el archivo
   nuevo. En ese caso: vacía la caché del plugin de caché de WordPress (si
   tienes uno instalado) y la caché de Hostinger/Cloudflare si aplica. */
#imagim-disc-app * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* IMPORTANTE: el reset de arriba usa el selector universal "*" (especificidad 0),
   así que CUALQUIER clase definida más abajo (.imd-title, .imd-subtitle, etc.)
   le gana automáticamente y sus márgenes sí se aplican.
   ANTES este reset usaba "#imagim-disc-app h1, #imagim-disc-app p..." que por
   tener un ID en el selector pesaba MÁS que las clases, anulando todos los
   márgenes reales del diseño. Ese era el bug de los textos amontonados. */
#imagim-disc-app { margin: 0; padding: 0; }

/* Wrapper exterior: el plugin debe usar TODO el ancho que le dé el contenedor
   padre de WordPress/page builder (Elementor, Gutenberg, etc), igual que
   cualquier otro bloque del sitio. NO limitamos aquí — limitar con max-width
   en este nivel es lo que causaba la columna angosta con espacio vacío a los
   lados en páginas anchas. Solo ponemos un tope gigante de seguridad para
   monitores ultra-anchos (4K+), donde una caja de 2400px sería absurda. */
.imd-outer-wrap {
    width: 100%;
    max-width: 1600px;
    margin: 24px auto;
    padding: 0 4px;
    box-sizing: border-box;
}

#imagim-disc-app {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    background: #0a0a14;
    border-radius: 18px;
    min-height: 520px;
    color: #fff;
    /* overflow:hidden ELIMINADO: si cualquier elemento interno se desborda
       por error de redondeo, herencia de white-space, o palabra larga sin
       wrap, este overflow lo recortaba visualmente en seco — eso era el
       texto "cortado a media palabra" reportado. border-radius sigue
       funcionando sin overflow:hidden porque ningún hijo tiene fondo propio
       que sobresalga de las esquinas redondeadas en este diseño. */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    line-height: 1.5;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}

/* Salvaguarda global: NINGÚN texto debe poder desbordar su contenedor y
   quedar cortado. word-break + overflow-wrap cubren tanto palabras largas
   como casos límite de redondeo de unos pocos píxeles. */
#imagim-disc-app, #imagim-disc-app * {
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

/* El padding ya NO depende de vw (eso causaba que se viera apretado en
   pantallas grandes, porque 5vw se mide sobre el viewport completo del
   navegador, no sobre el ancho real del plugin). Ahora es un valor fijo
   generoso que escala solo por breakpoints explícitos más abajo. */
.imd-screen {
    padding: 64px clamp(32px, 6vw, 96px);
    min-height: 520px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.imd-container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.imd-container-wide {
    width: 100%;
    max-width: 100%;
}

/* Contenedor de lectura: NO limita el ancho del bloque completo (eso dejaba
   espacio vacío a la derecha sin ningún propósito, ya que las tarjetas DISC
   de abajo sí usan el ancho total). En vez de eso, el límite de longitud de
   línea se aplica directamente a los textos largos (.imd-subtitle,
   .imd-info-box-texto) más abajo, así el bloque completo (eyebrow, título,
   botones) se alinea con el ancho real de .imd-screen sin dejar huecos. */
.imd-lectura {
    width: 100%;
}

/* El perfil completo (barras, secciones, grid 2 cols) necesita más espacio
   que un párrafo simple, pero tampoco debe estirarse sin límite en monitores
   ultra anchos — 760px es el punto donde un reporte de este tipo se sigue
   leyendo cómodo sin verse como una columna perdida ni una sábana de texto. */
.imd-reporte {
    max-width: 760px;
    margin: 0 auto;
}

/* Header */
.imd-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #D4A520;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.imd-title {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 14px;
}

.imd-subtitle {
    font-size: 14px;
    color: #888;
    line-height: 1.6;
    margin-bottom: 36px;
    max-width: 540px;
}

/* Botones */
.imd-btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    border: 2px solid #D4A520;
    transition: opacity 0.15s, transform 0.1s;
    font-family: inherit;
    letter-spacing: 0.3px;
}
.imd-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.imd-btn:active { transform: translateY(0); }
.imd-btn-primary { background: #D4A520; color: #0a0a14; }
.imd-btn-secondary { background: transparent; color: #D4A520; }
.imd-btn-ghost { background: transparent; color: #555; border-color: #2a2a3e; }
.imd-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

.imd-btn-group { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }

/* Input */
.imd-input {
    width: 100%;
    background: #12121e;
    border: 1px solid #2a2a3e;
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 14px;
    color: #fff;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
}
.imd-input:focus { border-color: #D4A520; }
.imd-input::placeholder { color: #444; }

/* Cuestionario */
.imd-progress-bar-wrap {
    background: #1a1a2e;
    border-radius: 6px;
    height: 5px;
    margin-bottom: 28px;
    overflow: hidden;
}
.imd-progress-bar {
    height: 100%;
    background: #D4A520;
    border-radius: 6px;
    transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
}

.imd-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #444;
    margin-bottom: 6px;
}
.imd-progress-label span:last-child { color: #D4A520; font-weight: 700; }

.imd-categoria {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: #D4A520;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.imd-pregunta {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    line-height: 1.45;
    margin-bottom: 26px;
}

.imd-opciones { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }

.imd-opcion {
    background: #12121e;
    border: 1px solid #1e1e30;
    border-radius: 12px;
    padding: 15px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    font-size: 13px;
    color: #999;
    transition: all 0.15s;
    font-family: inherit;
    width: 100%;
}
.imd-opcion:hover { border-color: #333; color: #ddd; }
.imd-opcion.seleccionada { background: #D4A52015; border-color: #D4A520; color: #fff; }
.imd-opcion.seleccionada .imd-opcion-letra { background: #D4A520; color: #0a0a14; }

.imd-opcion-letra {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #1e1e30;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #555;
    flex-shrink: 0;
    transition: all 0.15s;
}

.imd-nav { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }

/* Loading */
.imd-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    gap: 20px;
}
.imd-loading-icon {
    width: 68px; height: 68px; border-radius: 18px;
    background: #D4A52020; border: 2px solid #D4A520;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
}
.imd-loading-msg { font-size: 13px; color: #D4A520; min-height: 18px; }
.imd-dots { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.imd-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #D4A520;
    animation: imdPulse 1.2s ease-in-out infinite alternate;
}
.imd-dot:nth-child(2) { animation-delay: 0.3s; }
.imd-dot:nth-child(3) { animation-delay: 0.6s; }
@keyframes imdPulse { from { opacity: 0.3; transform: scale(0.8); } to { opacity: 1; transform: scale(1.2); } }

/* Perfil resultado */
.imd-perfil-header {
    background: linear-gradient(135deg, rgba(212,165,32,0.1), #12121e);
    border: 1px solid rgba(212,165,32,0.3);
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 20px;
}
.imd-perfil-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.imd-perfil-nombre { font-size: 22px; font-weight: 900; margin-bottom: 3px; }
.imd-perfil-cargo { font-size: 13px; color: #888; }
.imd-perfil-letra { font-size: 40px; font-weight: 900; line-height: 1; }
.imd-perfil-codigo { font-size: 10px; color: #666; letter-spacing: 1px; text-align: right; margin-top: 2px; }

.imd-barra-wrap { margin-bottom: 10px; }
.imd-barra-labels { display: flex; justify-content: space-between; margin-bottom: 3px; }
.imd-barra-nombre { font-size: 11px; font-weight: 700; }
.imd-barra-pct { font-size: 12px; font-weight: 800; color: #fff; }
.imd-barra-bg { background: #1a1a2e; border-radius: 6px; height: 8px; overflow: hidden; }
.imd-barra-fill { height: 100%; border-radius: 6px; transition: width 0.8s cubic-bezier(0.16,1,0.3,1); }

.imd-resumen {
    background: #0d0d1a;
    border-left: 3px solid #D4A520;
    padding: 13px 16px;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: #ccc;
    line-height: 1.6;
}

.imd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.imd-card {
    background: #12121e;
    border: 1px solid #1e1e30;
    border-radius: 10px;
    padding: 14px 16px;
}
.imd-card-label {
    font-size: 9px; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; margin-bottom: 6px;
}
.imd-card-text { font-size: 12px; color: #ccc; line-height: 1.5; }

.imd-seccion { margin-bottom: 20px; }
.imd-seccion-titulo {
    font-size: 9px; font-weight: 800; letter-spacing: 2.5px;
    text-transform: uppercase; margin-bottom: 8px;
    padding-bottom: 5px; border-bottom: 1px solid rgba(212,165,32,0.2);
}
.imd-lista { list-style: none; }
.imd-lista li {
    display: flex; gap: 8px; align-items: flex-start;
    margin-bottom: 7px; font-size: 12px; color: #ccc; line-height: 1.5;
}
.imd-lista li span:first-child { flex-shrink: 0; margin-top: 2px; }

.imd-veredicto {
    border-radius: 12px;
    padding: 20px 22px;
    margin-top: 4px;
}
.imd-veredicto-titulo {
    font-size: 9px; font-weight: 800; letter-spacing: 2.5px;
    text-transform: uppercase; margin-bottom: 8px;
}
.imd-veredicto-texto {
    font-size: 13px; color: #e0e0e0; line-height: 1.7; font-style: italic;
}

/* Dashboard admin */
.imd-dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.imd-stat-card { border-radius: 12px; padding: 24px 16px; text-align: center; border: 1px solid; }
.imd-stat-num { font-size: 28px; font-weight: 900; }
.imd-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; margin-top: 6px; }

.imd-perfil-card {
    background: #12121e;
    border-radius: 12px;
    padding: 18px;
    cursor: pointer;
    border: 1px solid #1e1e30;
    transition: border-color 0.2s, transform 0.15s;
}
.imd-perfil-card:hover { transform: translateY(-2px); }

.imd-badge {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    font-size: 10px; font-weight: 700; letter-spacing: 1px; border: 1px solid;
}

/* Scrollable perfil */
.imd-perfil-scroll { max-height: 70vh; overflow-y: auto; padding-right: 4px; }

/* Volver */
.imd-back-btn {
    background: transparent; border: 1px solid #2a2a3e; border-radius: 8px;
    color: #666; cursor: pointer; padding: 8px 14px; font-size: 12px;
    font-family: inherit; margin-bottom: 24px; display: inline-flex; align-items: center; gap: 6px;
    transition: color 0.15s, border-color 0.15s;
}
.imd-back-btn:hover { color: #D4A520; border-color: #D4A520; }

/* Caja explicativa "¿Qué es DISC?" */
.imd-info-box {
    background: #D4A52010;
    border: 1px solid #D4A52035;
    border-left: 3px solid #D4A520;
    border-radius: 0 10px 10px 0;
    padding: 18px 24px;
    margin-bottom: 24px;
    width: 100%;
}
.imd-info-box-titulo {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #D4A520;
    margin-bottom: 8px;
}
.imd-info-box-texto {
    font-size: 13px;
    color: #999;
    line-height: 1.7;
    max-width: 720px;
}

/* Notificación */
.imd-notice {
    background: #E6394620; border: 1px solid #E6394644;
    border-radius: 10px; padding: 16px 20px; font-size: 13px;
    color: #ff8888; margin-bottom: 28px; line-height: 1.5;
}

/* Botón descarga PDF */
.imd-download-bar {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.imd-btn-download {
    background: transparent;
    border: 2px solid #2A9D8F;
    color: #2A9D8F;
}
.imd-btn-download:hover { background: #2A9D8F12; }
.imd-btn-download svg { vertical-align: middle; margin-right: 6px; }

/* Selector de proveedor (admin frontend, opcional) */
.imd-provider-select {
    background: #12121e;
    border: 1px solid #2a2a3e;
    border-radius: 10px;
    padding: 12px 16px;
    color: #ccc;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    width: 100%;
}

/* Print styles — usados al exportar a PDF */
.imd-print-only { display: none; }

/* Responsive — el padding base de .imd-screen es 56px/64px (desktop).
   Bajamos progresivamente, nunca de golpe, para que nunca se sienta apretado. */
@media (max-width: 900px) {
    .imd-screen { padding: 48px 48px; }
}

@media (max-width: 700px) {
    .imd-outer-wrap { padding: 0 14px; margin: 16px auto; }
    #imagim-disc-app { border-radius: 14px; }
    .imd-screen { padding: 40px 32px; }
}

@media (max-width: 600px) {
    #imagim-disc-app { border-radius: 12px; }
    .imd-screen { padding: 36px 24px; }
    .imd-grid-2 { grid-template-columns: 1fr; }
    .imd-dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .imd-perfil-top { flex-direction: column; gap: 14px; }
    .imd-perfil-letra { font-size: 32px; }
    .imd-btn-group { flex-direction: column; align-items: stretch; }
    .imd-btn-group .imd-btn { text-align: center; }
    .imd-nav { flex-wrap: wrap; gap: 10px; }
}

@media (max-width: 420px) {
    .imd-outer-wrap { padding: 0 10px; }
    .imd-screen { padding: 32px 20px; }
    .imd-title { font-size: 24px; }
    .imd-pregunta { font-size: 15px; }
    .imd-stat-card { padding: 16px 10px; }
    .imd-stat-num { font-size: 22px; }
}