/* =========================================================
   ICD-R™ — HOJA DE ESTILOS
   =========================================================

   Los colores y medidas viven en variables para poder
   ajustar la identidad desde un solo sitio.

   ---------------------------------------------------------
   SIN DEPENDENCIAS EXTERNAS

   Aquí había un @import de Inter desde Google Fonts. Se
   quitó por tres razones:

   1. Un @import es la peor forma de cargar una fuente. El
      navegador tiene que bajar ESTE archivo entero antes de
      enterarse de que existe la fuente, y solo entonces la
      pide. Son dos viajes en serie antes de pintar el primer
      texto.

   2. El sitio dependía de que respondiera un servidor de
      Google. Si tarda, la página se queda en blanco o baila.

   3. Google Fonts entrega la IP de quien visita a un tercero.
      En Europa eso ha costado sentencias.

   El resultado se ve prácticamente igual: las fuentes del
   sistema de hoy —Segoe UI Variable en Windows, SF Pro en
   Mac, Roboto en Android— son de la misma familia visual que
   Inter, geométricas y neutras. Y aparecen instantáneamente,
   sin el parpadeo del texto que cambia de tipografía a mitad
   de carga.

   ========================================================= */

:root {
    --tinta:        #1a1a2e;
    --tinta-suave:  #4b5563;
    --gris:         #6b7280;
    --gris-claro:   #9ca3af;

    --fondo:        #f5f7fb;
    --papel:        #ffffff;
    --papel-suave:  #fafbff;
    --linea:        #f0f2f5;
    --linea-fuerte: #e5e7eb;

    --marca:        #6366f1;
    --marca-2:      #8b5cf6;
    --degradado:    linear-gradient(135deg, #6366f1, #8b5cf6);

    --ambar:        #f59e0b;
    --ambar-2:      #f97316;
    --verde:        #10b981;
    --rojo:         #ef4444;

    /* -----------------------------------------------------
       GRAVEDAD

       En el ICD-R el color significa UNA sola cosa: qué tan
       bien o mal está algo. Son los mismos cuatro tramos que
       usa obtenerNivel() en PHP —80 / 60 / 40— y los mismos
       tonos del medidor.

       Por eso las tarjetas de cada área NO llevan color
       propio. Si "Confianza" fuera siempre morada, alguien
       con 90% leería el morado como un diagnóstico. El área
       la distingue el ícono; el color lo reserva la
       gravedad.
       ----------------------------------------------------- */

    --nivel-alto:      #10b981;
    --nivel-alto-bg:   #ecfdf5;
    --nivel-alto-bo:   #a7f3d0;

    --nivel-medio:     #6366f1;
    --nivel-medio-bg:  #eef2ff;
    --nivel-medio-bo:  #c7d2fe;

    --nivel-bajo:      #d97706;
    --nivel-bajo-bg:   #fffbeb;
    --nivel-bajo-bo:   #fde68a;

    --nivel-critico:   #dc2626;
    --nivel-critico-bg:#fef2f2;
    --nivel-critico-bo:#fecaca;

    --radio-xl:     32px;
    --radio-l:      24px;
    --radio-m:      16px;
    --radio-s:      12px;
    --pildora:      100px;

    --sombra:       0 20px 60px rgba(0, 0, 0, 0.08);
    --sombra-s:     0 2px 8px rgba(0, 0, 0, 0.04);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    min-height: 100vh;

    /* Cada sistema pone la suya y todas se parecen a Inter.
       El orden importa: 'Segoe UI Variable Text' es la de
       Windows 11 y afina mejor en tamaños de lectura que la
       Segoe UI clásica, que queda detrás como respaldo. */
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI Variable Text', 'Segoe UI', Roboto,
                 'Helvetica Neue', 'Noto Sans', Arial, sans-serif;

    background: var(--fondo);
    color: var(--tinta);
    line-height: 1.6;

    /* Sin esto, las fuentes del sistema se ven más gruesas
       que Inter en Mac y el texto pierde aire. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Los números de los porcentajes se alinean en columna
       en las barras y las tablas. Con cifras de ancho
       variable bailan al actualizarse. */
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   CONTENEDOR Y TARJETA
   ========================================================= */

.icdr-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 16px;
}

.icdr-card {
    width: 100%;
    max-width: 900px;
    background: var(--papel);
    border-radius: var(--radio-xl);
    padding: 48px 40px;
    box-shadow: var(--sombra);
}


/* =========================================================
   LOGO Y TÍTULOS
   ========================================================= */

.icdr-logo {
    display: inline-block;
    margin: 0 auto 22px;
    padding: 7px 18px;
    background: var(--degradado);
    color: #ffffff;
    border-radius: var(--pildora);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.icdr-card > .icdr-logo,
.icdr-results-header .icdr-logo,
.icdr-questionnaire-header .icdr-logo {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.icdr-card h1 {
    text-align: center;
    font-size: 2.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 14px;
}

.icdr-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.icdr-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
}

.icdr-subtitle {
    max-width: 540px;
    margin: 0 auto 35px;
    text-align: center;
    color: var(--gris);
    line-height: 1.6;
    font-size: 1.05rem;
}


/* =========================================================
   ALERTAS
   ========================================================= */

.icdr-alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: var(--radio-s);
    padding: 14px 18px;
    margin-bottom: 22px;
    line-height: 1.5;
    font-size: 0.95rem;
}


/* =========================================================
   FORMULARIO
   ========================================================= */

.icdr-form {
    width: 100%;
}

.icdr-form-group {
    margin-bottom: 20px;
}

.icdr-form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.icdr-form-group input {
    width: 100%;
    height: 54px;
    border: 1.5px solid var(--linea-fuerte);
    border-radius: var(--radio-s);
    padding: 0 16px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--tinta);
    background: var(--papel);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.icdr-form-group input:focus {
    border-color: var(--marca);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.icdr-form-group input::placeholder {
    color: var(--gris-claro);
}


/* =========================================================
   PRIVACIDAD
   ========================================================= */

.icdr-privacy {
    margin: 10px 0 30px;
}

.icdr-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    color: var(--tinta-suave);
    font-size: 0.9rem;
    line-height: 1.55;
}

.icdr-checkbox input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--marca);
}


/* =========================================================
   MODALIDAD
   ========================================================= */

.icdr-mode-title {
    text-align: center;
    margin-bottom: 20px;
}

.icdr-mode-title h2 {
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.icdr-mode-title p {
    color: var(--gris);
    font-size: 0.95rem;
}

.icdr-modes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 32px;
}

.icdr-mode-card {
    position: relative;
    cursor: pointer;
}

.icdr-mode-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.icdr-mode-content {
    height: 100%;
    border: 2px solid var(--linea);
    background: var(--papel-suave);
    border-radius: var(--radio-l);
    padding: 26px 22px;
    text-align: center;
    transition: all 0.2s ease;
}

.icdr-mode-content:hover {
    border-color: #c7d2fe;
    transform: translateY(-2px);
}

.icdr-mode-card input:checked + .icdr-mode-content {
    border-color: var(--marca);
    background: #f5f3ff;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
}

.icdr-mode-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

.icdr-mode-content h3 {
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.icdr-mode-content p {
    color: var(--gris);
    font-size: 0.9rem;
    line-height: 1.5;
}


/* =========================================================
   BOTONES
   ========================================================= */

.icdr-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    border: none;
    border-radius: var(--radio-m);
    background: var(--degradado);
    color: #ffffff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    padding: 14px 22px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.icdr-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.28);
}

.icdr-button:active {
    transform: translateY(0);
}

.icdr-button-secondary {
    background: var(--papel) !important;
    color: var(--tinta) !important;
    border: 1.5px solid var(--linea-fuerte) !important;
}

.icdr-button-secondary:hover {
    background: var(--papel-suave) !important;
    box-shadow: none !important;
    border-color: #c7d2fe !important;
}


/* =========================================================
   ACCESOS SECUNDARIOS
   ========================================================= */

.icdr-join-existing {
    text-align: center;
    margin: 0 0 20px;
    padding: 18px;
    background: var(--papel-suave);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
}

.icdr-join-existing p {
    margin-bottom: 10px;
    color: var(--gris);
    font-size: 0.9rem;
}

.icdr-back-link {
    display: block;
    margin-top: 26px;
    text-align: center;
    color: var(--gris);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.icdr-back-link:hover {
    color: var(--marca);
}


/* =========================================================
   CUESTIONARIO
   ========================================================= */

.icdr-questionnaire {
    max-width: 760px;
}

.icdr-questionnaire-header {
    text-align: center;
    margin-bottom: 32px;
}

.icdr-questionnaire-header h1 {
    margin-bottom: 12px;
}

.icdr-questionnaire-header p {
    color: var(--gris);
    line-height: 1.6;
}

.icdr-progress-container {
    margin-bottom: 38px;
}

.icdr-progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gris);
}

.icdr-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--linea-fuerte);
    border-radius: var(--pildora);
    overflow: hidden;
}

.icdr-progress-fill {
    height: 100%;
    background: var(--degradado);
    border-radius: var(--pildora);
    transition: width 0.35s ease;
}


/* =========================================================
   PREGUNTAS
   ========================================================= */

.icdr-question {
    display: none;
}

.icdr-question.active {
    display: block;
    animation: icdrFadeIn 0.35s ease;
}

@keyframes icdrFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.icdr-question-number {
    text-align: center;
    color: var(--gris-claro);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.icdr-question-dimension {
    display: table;
    margin: 0 auto 26px;
    padding: 5px 14px;
    background: #eef2ff;
    color: var(--marca);
    border-radius: var(--pildora);
    font-weight: 600;
    font-size: 0.8rem;
}

.icdr-question h2 {
    text-align: center;
    font-size: 1.45rem;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 30px;
}


/* =========================================================
   RESPUESTAS
   ========================================================= */

.icdr-answer-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.icdr-answer {
    cursor: pointer;
}

.icdr-answer input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.icdr-answer-content {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    min-height: 60px;
    padding: 10px 16px;
    border: 2px solid var(--linea);
    background: var(--papel-suave);
    border-radius: var(--radio-m);
    transition: all 0.2s ease;
}

.icdr-answer-content:hover {
    border-color: #c7d2fe;
}

.icdr-answer input:checked + .icdr-answer-content {
    border-color: var(--marca);
    background: #f5f3ff;
}

.icdr-answer-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--linea-fuerte);
    color: var(--tinta-suave);
    font-weight: 700;
    font-size: 0.9rem;
}

.icdr-answer input:checked + .icdr-answer-content .icdr-answer-number {
    background: var(--degradado);
    color: #ffffff;
}

.icdr-answer-text {
    font-size: 0.98rem;
    font-weight: 500;
}


/* =========================================================
   NAVEGACIÓN DEL CUESTIONARIO
   ========================================================= */

.icdr-question-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 32px;
}

.icdr-nav-button {
    min-height: 50px;
    padding: 12px 26px;
    border-radius: var(--radio-s);
    border: 1.5px solid var(--linea-fuerte);
    background: var(--papel);
    color: var(--tinta-suave);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.icdr-nav-button:hover {
    border-color: #c7d2fe;
    color: var(--marca);
}

.icdr-finish {
    width: auto;
    min-width: 220px;
}

.icdr-question-error {
    display: none;
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid #fecaca;
    border-radius: var(--radio-s);
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.9rem;
    text-align: center;
}

.icdr-question-error.visible {
    display: block;
}


/* =========================================================
   RESULTADOS
   ========================================================= */

.icdr-results {
    max-width: 900px;
}

.icdr-results-header {
    text-align: center;
    margin-bottom: 36px;
    padding-bottom: 26px;
    border-bottom: 2px solid var(--linea);
}

.icdr-results-header h1 {
    margin-bottom: 10px;
}

.icdr-results-header p {
    color: var(--gris);
    line-height: 1.6;
}

.icdr-main-result {
    text-align: center;
    background: linear-gradient(135deg, #fafbff, #f0f4ff);
    border: 1px solid #e5e9f0;
    border-radius: var(--radio-l);
    padding: 40px 28px;
    margin-bottom: 42px;
}

.icdr-result-label {
    display: block;
    color: var(--gris);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.icdr-score {
    font-size: 4.2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 16px 0;
    background: var(--degradado);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.icdr-score small {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gris-claro);
    -webkit-text-fill-color: var(--gris-claro);
}

/* =========================================================
   MEDIDOR CIRCULAR
   ========================================================= */

.icdr-gauge {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 10px auto 22px;
}

.icdr-gauge svg {
    transform: rotate(-90deg);
    display: block;
}

.icdr-gauge-bg {
    fill: none;
    stroke: var(--linea-fuerte);
    stroke-width: 12;
}

.icdr-gauge-fill {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.1s ease;
}

/* ---------------------------------------------------------
   TONO DEL MEDIDOR
   ---------------------------------------------------------
   Cuatro tramos, los mismos que los niveles del informe:
   80 verde · 60 azul · 40 ámbar · resto rojo.

   El tono lo lleva el contenedor, así que tiñe el aro Y el
   número. Se pintan los dos a la vez para que nunca se
   queden diciendo cosas distintas.

   El color no va solo: al lado siempre está el nombre del
   nivel escrito. Quien no distingue verde de rojo sigue
   entendiendo su resultado.
   --------------------------------------------------------- */

.icdr-gauge-alto .icdr-gauge-fill      { stroke: var(--verde); }
.icdr-gauge-alto .icdr-gauge-number    { color:  var(--verde); }

.icdr-gauge-medio .icdr-gauge-fill     { stroke: var(--marca); }
.icdr-gauge-medio .icdr-gauge-number   { color:  var(--marca); }

.icdr-gauge-bajo .icdr-gauge-fill      { stroke: var(--ambar); }
.icdr-gauge-bajo .icdr-gauge-number    { color:  var(--ambar); }

.icdr-gauge-critico .icdr-gauge-fill   { stroke: var(--rojo); }
.icdr-gauge-critico .icdr-gauge-number { color:  var(--rojo); }

.icdr-gauge-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.icdr-gauge-number {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--tinta);
}

.icdr-gauge-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gris);
    margin-top: 4px;
}

.icdr-main-result h2 {
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.icdr-main-result p {
    max-width: 560px;
    margin: auto;
    color: var(--tinta-suave);
    line-height: 1.6;
}


/* =========================================================
   SECCIONES
   ========================================================= */

.icdr-results-section {
    margin-bottom: 46px;
}

.icdr-results-section > h2 {
    text-align: center;
    margin-bottom: 8px;
}

.icdr-section-description {
    max-width: 620px;
    margin: 0 auto 26px;
    text-align: center;
    color: var(--gris);
    font-size: 0.95rem;
}


/* =========================================================
   TARJETAS DE DIMENSIÓN
   ========================================================= */

.icdr-dimensions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.icdr-dimension-card {
    background: var(--papel-suave);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    padding: 24px;
    transition: all 0.2s ease;
}

.icdr-dimension-card:hover {
    border-color: #d1d5db;
}

.icdr-dimension-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.icdr-dimension-header h3 {
    font-size: 1rem;
}

.icdr-dimension-header strong {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--marca);
}

.icdr-dimension-bar {
    height: 6px;
    background: var(--linea-fuerte);
    border-radius: var(--pildora);
    overflow: hidden;
    margin-bottom: 15px;
}

.icdr-dimension-fill {
    height: 100%;
    background: var(--degradado);
    border-radius: var(--pildora);
    transition: width 0.8s ease;
}

.icdr-dimension-card p {
    color: var(--gris);
    font-size: 0.88rem;
    line-height: 1.55;
}


/* =========================================================
   BLOQUE PREMIUM
   ========================================================= */

.icdr-premium {
    text-align: center;
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    color: #ffffff;
    border-radius: var(--radio-l);
    padding: 38px 32px;
}

.icdr-premium-icon {
    font-size: 2rem;
    margin-bottom: 15px;
}

.icdr-premium h2 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    line-height: 1.4;
}

.icdr-premium h3,
.icdr-premium h4 {
    color: #ffffff;
    margin-bottom: 10px;
}

.icdr-premium p {
    max-width: 620px;
    margin: 0 auto 12px;
    color: #c7d2fe;
    line-height: 1.65;
}

.icdr-premium strong {
    color: #ffffff;
}

.icdr-premium-features {
    max-width: 420px;
    margin: 26px auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 11px;
    color: #e0e7ff;
    font-size: 0.95rem;
}

.icdr-premium-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    max-width: 420px;
    margin: 24px auto;
    padding: 16px 22px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radio-m);
}

.icdr-premium-price strong {
    font-size: 1.5rem;
    font-weight: 800;
}


/* =========================================================
   PRECIO CON EQUIVALENTE LOCAL
   ========================================================= */

.icdr-precio-doble {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.icdr-precio-local {
    font-size: 0.8rem;
    font-weight: 500;
    color: #c7d2fe;
    white-space: nowrap;
}

.icdr-oculto {
    display: none;
}


/* =========================================================
   PAGO NO COMPLETADO
   ========================================================= */

.icdr-pago-detalle {
    margin-bottom: 22px;
    padding: 14px 18px;
    border-radius: var(--radio-s);
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 0.92rem;
    text-align: center;
}

.icdr-motivos {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 30px;
}

.icdr-motivo {
    padding: 20px 22px;
    border-radius: var(--radio-m);
    background: var(--papel-suave);
    border: 1px solid var(--linea);
}

.icdr-motivo h3 {
    margin-bottom: 8px;
    font-size: 1rem;
}

.icdr-motivo p {
    color: var(--gris);
    font-size: 0.9rem;
    line-height: 1.6;
}

.icdr-motivo strong {
    color: var(--tinta);
}

.icdr-card > .icdr-button + .icdr-button {
    margin-top: 12px;
}


/* =========================================================
   PANEL DE PRECIOS
   ========================================================= */

.icdr-ok {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
    border-radius: var(--radio-s);
    padding: 14px 18px;
    margin-bottom: 22px;
    line-height: 1.5;
    font-size: 0.95rem;
}

.icdr-precio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 16px;
    padding: 22px 24px;
    border-radius: var(--radio-m);
    background: var(--papel-suave);
    border: 1px solid var(--linea);
}

.icdr-precio-info {
    flex: 1;
    min-width: 240px;
}

.icdr-precio-info h3 {
    margin: 6px 0 4px;
}

.icdr-precio-info p {
    color: var(--gris);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 6px;
}

.icdr-precio-meta {
    font-size: 0.78rem;
    color: var(--gris-claro);
}

.icdr-precio-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icdr-precio-form label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gris);
}

.icdr-precio-form input {
    width: 110px;
    height: 48px;
    border: 1.5px solid var(--linea-fuerte);
    border-radius: var(--radio-s);
    padding: 0 14px;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: right;
    color: var(--tinta);
    outline: none;
}

.icdr-precio-form input:focus {
    border-color: var(--marca);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.icdr-precio-form .icdr-button {
    width: auto;
    min-height: 48px;
    padding: 12px 22px;
}

.icdr-precio-titulo {
    margin-top: 38px;
    margin-bottom: 14px;
    font-size: 1.1rem;
}

.icdr-historial-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--linea);
    font-size: 0.86rem;
    color: var(--gris);
}

.icdr-historial-fila strong {
    color: var(--tinta);
}


/* =========================================================
   AVISOS ANTES DE PAGAR
   ========================================================= */

.icdr-payment-notice {
    max-width: 460px;
    margin: 0 auto 22px;
    padding: 16px 20px;
    border-radius: var(--radio-m);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(199, 210, 254, 0.3);
    text-align: left;
}

.icdr-payment-notice p {
    margin: 0 0 10px;
    color: #c7d2fe;
    font-size: 0.85rem;
    line-height: 1.55;
}

.icdr-payment-notice p:last-child {
    margin-bottom: 0;
}

.icdr-payment-notice strong {
    color: #ffffff;
}

.icdr-premium .icdr-button {
    background: #ffffff;
    color: #312e81;
    max-width: 420px;
    margin: 0 auto;
}

.icdr-premium .icdr-button:hover {
    background: #eef2ff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.icdr-premium .icdr-back-link {
    color: #c7d2fe;
}


/* =========================================================
   INVITACIÓN
   ========================================================= */

.icdr-invite {
    max-width: 640px;
    text-align: center;
}

.icdr-invite-code {
    width: 100%;
    margin: 30px auto 20px;
    padding: 26px;
    background: var(--papel-suave);
    border: 2px dashed #c7d2fe;
    border-radius: var(--radio-l);
}

.icdr-invite-code span {
    display: block;
    color: var(--gris);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
}

.icdr-code-display {
    display: block;
    width: 100%;
    padding: 18px 12px;
    color: var(--tinta) !important;
    background: var(--papel) !important;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-s);
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: 5px;
    line-height: 1.3;
    text-align: center;
    user-select: all;
    overflow-wrap: anywhere;
}

.icdr-invite-help {
    color: var(--gris);
    line-height: 1.6;
    margin-bottom: 25px;
    font-size: 0.95rem;
}

.icdr-invite-actions {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 15px;
    width: 100%;
    margin-top: 20px;
}

.icdr-invite-actions .icdr-button {
    width: auto;
    flex: 1;
    min-height: 52px;
}

.icdr-copy-message {
    min-height: 26px;
    margin-top: 15px;
    color: var(--marca);
    font-size: 0.9rem;
    font-weight: 500;
}


/* =========================================================
   ESTADO DE PAREJA / ESPERA
   ========================================================= */

.icdr-couple-ready,
.icdr-couple-waiting {
    width: 100%;
    margin-top: 30px;
    padding: 28px;
    border-radius: var(--radio-l);
    text-align: center;
}

.icdr-couple-ready {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.icdr-couple-waiting {
    background: var(--papel-suave);
    border: 1px solid var(--linea);
}

.icdr-couple-ready h2 {
    margin-bottom: 10px;
}

.icdr-couple-ready p,
.icdr-couple-waiting p {
    color: var(--tinta-suave);
    line-height: 1.6;
    margin-bottom: 20px;
}

.icdr-couple-ready .icdr-button {
    display: inline-flex;
    width: 100%;
    text-decoration: none;
}

.icdr-couple-waiting .icdr-button {
    max-width: 340px;
    margin: 0 auto;
}

.icdr-waiting {
    max-width: 620px;
    text-align: center;
}

.icdr-waiting-icon {
    font-size: 3rem;
    margin-bottom: 18px;
}

.icdr-waiting p {
    color: var(--gris);
    line-height: 1.7;
    margin-bottom: 18px;
}

.icdr-waiting .icdr-button {
    max-width: 360px;
    margin: 12px auto 0;
}


/* =========================================================
   RESULTADO COMPARATIVO DE PAREJA
   ========================================================= */

.icdr-couple-results {
    max-width: 900px;
}

.icdr-couple-dimensions {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.icdr-couple-dimension {
    background: var(--papel-suave);
    border: 1px solid var(--linea);
    border-radius: var(--radio-l);
    padding: 26px;
}

.icdr-couple-dimension-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}

.icdr-couple-dimension-header h3 {
    font-size: 1.05rem;
}

.icdr-couple-dimension-header strong {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--marca);
}

.icdr-couple-dimension > p {
    color: var(--gris);
    font-size: 0.92rem;
    line-height: 1.6;
}

.icdr-person-score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 7px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--tinta-suave);
}

.icdr-person-score span {
    font-weight: 700;
    color: var(--tinta);
}

.icdr-couple-bar {
    width: 100%;
    height: 6px;
    background: var(--linea-fuerte);
    border-radius: var(--pildora);
    overflow: hidden;
    margin-bottom: 16px;
}

.icdr-couple-bar-a,
.icdr-couple-bar-b {
    height: 100%;
    border-radius: var(--pildora);
    transition: width 0.8s ease;
}

.icdr-couple-bar-a {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

.icdr-couple-bar-b {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

.icdr-difference {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--linea);
    color: var(--gris);
    font-size: 0.86rem;
    line-height: 1.6;
}

.icdr-difference strong {
    color: var(--tinta);
}

.icdr-couple-dimension .icdr-premium {
    margin-top: 16px;
    padding: 22px 24px;
    border-radius: var(--radio-m);
}


/* =========================================================
   PLAN DE 21 DÍAS
   ========================================================= */

.icdr-plan-progress {
    margin: 30px 0;
    padding: 24px;
    border-radius: var(--radio-l);
    background: var(--papel-suave);
    border: 1px solid var(--linea);
}

.icdr-plan-progress-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
    font-size: 0.92rem;
    color: var(--tinta-suave);
}

.icdr-plan-progress-bar {
    width: 100%;
    height: 10px;
    background: var(--linea-fuerte);
    border-radius: var(--pildora);
    overflow: hidden;
}

.icdr-plan-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: var(--pildora);
    transition: width 0.5s ease;
}

.icdr-plan-phase {
    margin-top: 44px;
}

.icdr-plan-phase-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
}

.icdr-plan-phase-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--degradado);
    color: #ffffff;
    font-weight: 700;
}

.icdr-plan-phase-header h3 {
    margin: 0 0 5px;
    font-size: 1.1rem;
}

.icdr-plan-phase-header p {
    margin: 0;
    color: var(--gris);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* El día pasó de ser una fila con el número a la izquierda a
   una tarjeta con cabecera propia: ahora lleva también la
   fecha en la que se abre y su estado, y en un móvil eso no
   cabía en una columna de 62 píxeles. */

.icdr-plan-day {
    margin-bottom: 18px;
    padding: 24px;
    border-radius: var(--radio-l);
    background: var(--papel);
    border: 1px solid var(--linea);
    box-shadow: var(--sombra-s);
    transition: all 0.2s ease;
}

.icdr-plan-day-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.icdr-plan-day-number {
    font-weight: 700;
    color: var(--marca);
}

.icdr-plan-day-date {
    font-size: 0.85rem;
    color: var(--gris);
}

.icdr-plan-day-content {
    flex: 1;
}

.icdr-plan-dimension {
    display: inline-block;
    margin-bottom: 8px;
    padding: 5px 12px;
    border-radius: var(--pildora);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #eef2ff;
    color: var(--marca);
}

.icdr-plan-badge {
    display: inline-block;
    margin: 0 0 8px 6px;
    padding: 5px 12px;
    border-radius: var(--pildora);
    background: #ecfdf5;
    color: #047857;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.icdr-plan-day-content h4 {
    margin: 6px 0 10px;
    font-size: 1.08rem;
    font-weight: 600;
}

.icdr-plan-day-content > p {
    line-height: 1.65;
    color: var(--tinta-suave);
}

.icdr-plan-when {
    margin-top: 15px;
    padding: 13px 15px;
    border-radius: var(--radio-s);
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 0.9rem;
    line-height: 1.55;
}

.icdr-plan-when strong {
    color: #78350f;
}

.icdr-plan-objective {
    margin-top: 12px;
    padding: 13px 15px;
    border-radius: var(--radio-s);
    background: var(--papel-suave);
    border: 1px solid var(--linea);
    color: var(--gris);
    font-size: 0.9rem;
    line-height: 1.55;
}

.icdr-plan-objective strong {
    color: var(--tinta);
}

.icdr-plan-type {
    margin-top: 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #6d7f99;
}

.icdr-plan-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    cursor: pointer;
    color: var(--gris);
    font-size: 0.9rem;
    font-weight: 500;
}

.icdr-plan-check input {
    width: 19px;
    height: 19px;
    cursor: pointer;
    accent-color: var(--verde);
}

.icdr-plan-check input:disabled {
    cursor: wait;
    opacity: 0.5;
}

.icdr-plan-seed {
    border-style: dashed;
    border-color: #a7f3d0;
}

.icdr-plan-done {
    background: #f7fdfa;
    border-color: #a7f3d0;
}

.icdr-plan-done .icdr-plan-day-content > h4 {
    text-decoration: line-through;
    color: #6b7f74;
}

.icdr-plan-empty {
    margin-top: 20px;
    padding: 28px;
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--radio-m);
    text-align: center;
    color: var(--gris);
    line-height: 1.6;
}


/* =========================================================
   ANCLA DIARIA
   ========================================================= */

.icdr-anchor-block {
    margin: 32px 0;
}

.icdr-anchor-block > h3 {
    text-align: center;
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.icdr-anchor {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 12px;
    padding: 18px 22px;
    border-radius: var(--radio-m);
    background: var(--papel-suave);
    border: 1px solid var(--linea);
}

.icdr-anchor-days {
    min-width: 96px;
    padding-top: 2px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--marca);
}

.icdr-anchor-body strong {
    display: block;
    margin-bottom: 6px;
    line-height: 1.55;
    font-weight: 600;
}

.icdr-anchor-body span {
    color: var(--gris);
    font-size: 0.87rem;
    line-height: 1.55;
}


/* =========================================================
   GESTO DIARIO DENTRO DE CADA ETAPA
   ========================================================= */

.icdr-anchor-inline {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 20px;
    padding: 16px 20px;
    border-radius: var(--radio-m);
    background: #eef2ff;
    border: 1px solid #c7d2fe;
}

.icdr-anchor-inline-tag {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: var(--pildora);
    background: var(--degradado);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.icdr-anchor-inline p {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.55;
    color: #3730a3;
}

@media (max-width: 600px) {

    .icdr-anchor-inline {
        flex-direction: column;
        gap: 10px;
    }

}


/* =========================================================
   ACOMPAÑAMIENTO ESPIRITUAL
   ========================================================= */

.icdr-spiritual-toggle {
    margin: 26px 0;
    padding: 20px 22px;
    border: 1px dashed #ddd6fe;
    border-radius: var(--radio-m);
    background: #faf9ff;
}

.icdr-spiritual-toggle .icdr-checkbox span {
    font-size: 0.9rem;
    line-height: 1.6;
}

.icdr-faith {
    margin: 0 0 22px;
    padding: 20px 24px;
    border-left: 3px solid var(--marca-2);
    border-radius: 0 var(--radio-m) var(--radio-m) 0;
    background: #faf9ff;
}

.icdr-faith-ref {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--marca-2);
    margin-bottom: 8px;
}

.icdr-faith p {
    line-height: 1.65;
    margin-bottom: 10px;
    color: var(--tinta-suave);
}

.icdr-faith-prayer {
    color: #6d28d9;
    font-size: 0.88rem;
    font-style: italic;
    line-height: 1.6;
}


/* =========================================================
   ROLES ASIMÉTRICOS
   ========================================================= */

.icdr-roles {
    margin-top: 16px;
    padding: 18px;
    border-radius: var(--radio-m);
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.icdr-roles-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 14px;
}

.icdr-role {
    margin-bottom: 14px;
}

.icdr-role:last-child {
    margin-bottom: 0;
}

.icdr-role-tag {
    display: inline-block;
    margin-bottom: 6px;
    padding: 4px 12px;
    border-radius: var(--pildora);
    background: var(--degradado);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.icdr-role:nth-child(3) .icdr-role-tag {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.icdr-role p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--tinta-suave);
}


/* =========================================================
   PROTOCOLO DE REPARACIÓN
   ========================================================= */

.icdr-repair-block {
    margin-top: 44px;
}

.icdr-repair-block > h3 {
    text-align: center;
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.icdr-repair {
    margin-bottom: 16px;
    padding: 24px;
    border-radius: var(--radio-m);
    background: var(--papel);
    border: 1px solid #fed7aa;
}

.icdr-repair-week {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ambar-2);
    margin-bottom: 6px;
}

.icdr-repair h4 {
    margin-bottom: 14px;
    font-size: 1.05rem;
    font-weight: 600;
}

.icdr-repair ol {
    margin: 0 0 14px 20px;
}

.icdr-repair li {
    margin-bottom: 7px;
    line-height: 1.6;
    font-size: 0.92rem;
    color: var(--tinta-suave);
}

.icdr-repair > p {
    color: var(--gris);
    font-size: 0.88rem;
    line-height: 1.65;
}


/* =========================================================
   RE-MEDICIÓN
   ========================================================= */

.icdr-remedicion {
    margin-top: 40px;
    padding: 32px 28px;
    text-align: center;
    border-radius: var(--radio-l);
    background: linear-gradient(135deg, #f0f4ff, #fafbff);
    border: 1px solid #e5e9f0;
}

.icdr-remedicion h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.icdr-remedicion > p {
    max-width: 560px;
    margin: 0 auto 18px;
    color: var(--tinta-suave);
    line-height: 1.65;
}

.icdr-remedicion-dias {
    display: inline-block;
    margin-bottom: 20px;
    padding: 8px 18px;
    border-radius: var(--pildora);
    background: var(--papel);
    border: 1px solid var(--linea-fuerte);
    font-size: 0.9rem;
    color: var(--tinta-suave);
}

.icdr-remedicion .icdr-button {
    max-width: 360px;
    margin: 0 auto;
}


/* =========================================================
   COMPARATIVA DE PROGRESO
   ========================================================= */

.icdr-compare {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
    margin: 20px 0 14px;
}

.icdr-compare-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.icdr-compare-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gris-claro);
}

.icdr-compare-value {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--gris-claro);
}

.icdr-compare-now {
    background: var(--degradado);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.icdr-compare-arrow {
    font-size: 1.6rem;
    color: var(--gris-claro);
}

.icdr-delta {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: var(--pildora);
    font-size: 1rem;
    font-weight: 700;
}

.icdr-delta-mejora,
strong.icdr-delta-mejora {
    background: #ecfdf5;
    color: #047857;
}

.icdr-delta-retroceso,
strong.icdr-delta-retroceso {
    background: #fef2f2;
    color: #b91c1c;
}

.icdr-delta-igual,
strong.icdr-delta-igual {
    background: var(--linea);
    color: var(--gris);
}

.icdr-progress-table {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.icdr-progress-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border-radius: var(--radio-m);
    background: var(--papel-suave);
    border: 1px solid var(--linea);
}

.icdr-progress-name {
    min-width: 200px;
    font-weight: 600;
    font-size: 0.95rem;
}

.icdr-progress-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.icdr-progress-pair {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icdr-progress-tag {
    min-width: 46px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gris-claro);
}

.icdr-progress-pair .icdr-dimension-bar {
    flex: 1;
    margin-bottom: 0;
}

.icdr-progress-num {
    min-width: 42px;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tinta-suave);
}

.icdr-fill-antes {
    background: var(--linea-fuerte);
}


/* =========================================================
   DESCARGA Y ERROR
   ========================================================= */

.icdr-download {
    margin-top: 35px;
    text-align: center;
}

.icdr-download .icdr-button {
    max-width: 360px;
    margin: 0 auto;
}

.icdr-error {
    max-width: 540px;
    text-align: center;
}

.icdr-error-icon {
    font-size: 2.6rem;
    margin-bottom: 16px;
}

.icdr-error h1 {
    font-size: 1.55rem;
    margin-bottom: 15px;
}

.icdr-error p {
    color: var(--gris);
    line-height: 1.65;
    margin-bottom: 26px;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 760px) {

    .icdr-container {
        padding: 20px 12px;
        align-items: flex-start;
    }

    .icdr-card {
        margin-top: 10px;
        padding: 32px 24px;
        border-radius: var(--radio-l);
    }

    .icdr-card h1 {
        font-size: 1.8rem;
    }

    .icdr-progress-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .icdr-progress-name {
        min-width: 0;
    }

    .icdr-progress-row .icdr-delta {
        align-self: flex-start;
    }

}


/* =========================================================
   RESPONSIVE — CELULAR
   ========================================================= */

@media (max-width: 600px) {

    html {
        font-size: 15px;
    }

    .icdr-container {
        padding: 10px;
    }

    .icdr-card {
        padding: 26px 18px;
        border-radius: 20px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    }

    .icdr-card h1 {
        font-size: 1.6rem;
    }

    .icdr-subtitle {
        font-size: 0.98rem;
        margin-bottom: 28px;
    }

    .icdr-modes,
    .icdr-dimensions {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .icdr-question h2 {
        font-size: 1.2rem;
        line-height: 1.45;
    }

    .icdr-answer-content {
        min-height: 54px;
        padding: 8px 13px;
    }

    .icdr-answer-number {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .icdr-finish {
        min-width: 0;
        flex: 1;
    }

    .icdr-score {
        font-size: 3.4rem;
    }

    .icdr-compare-value {
        font-size: 2.2rem;
    }

    .icdr-premium {
        padding: 28px 20px;
    }

    .icdr-premium h2 {
        font-size: 1.25rem;
    }

    .icdr-code-display {
        font-size: 1.5rem;
        letter-spacing: 3px;
        padding: 15px 8px;
    }

    .icdr-invite-actions {
        flex-direction: column;
        gap: 12px;
    }

    .icdr-invite-actions .icdr-button {
        width: 100%;
        flex: none;
    }

    .icdr-couple-ready,
    .icdr-couple-waiting,
    .icdr-couple-dimension {
        padding: 22px 18px;
    }

    .icdr-plan-progress-header,
    .icdr-plan-day,
    .icdr-anchor {
        flex-direction: column;
        gap: 10px;
    }

    .icdr-plan-day-number,
    .icdr-anchor-days {
        text-align: left;
    }

}


/* =========================================================
   IMPRESIÓN Y PDF
   ========================================================= */

@media print {

    body {
        background: #ffffff;
    }

    .icdr-container {
        display: block;
        min-height: 0;
        padding: 0;
    }

    .icdr-card {
        max-width: none;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .icdr-spiritual-toggle,
    .icdr-download,
    .icdr-back-link,
    .icdr-plan-check,
    .icdr-remedicion {
        display: none !important;
    }

    .icdr-logo {
        background: none;
        color: #1a1a2e;
        padding: 0;
    }

    .icdr-score,
    .icdr-compare-now {
        -webkit-text-fill-color: #312e81;
        color: #312e81;
    }

    .icdr-premium {
        background: #ffffff;
        color: var(--tinta);
        border: 1px solid #cbd5e1;
    }

    .icdr-premium p,
    .icdr-premium-features,
    .icdr-premium h2,
    .icdr-premium h3,
    .icdr-premium h4 {
        color: var(--tinta);
    }

    .icdr-plan-day,
    .icdr-plan-phase,
    .icdr-couple-dimension,
    .icdr-repair,
    .icdr-anchor,
    .icdr-faith,
    .icdr-progress-row,
    .icdr-dimension-card {
        page-break-inside: avoid;
    }

    .icdr-results-section > h2 {
        page-break-after: avoid;
    }

}


/* =========================================================
   PANEL: ALTA Y PAUSA DE PRODUCTOS
   =========================================================

   Añadido para poder dar de alta productos desde el panel
   en lugar de meterlos a mano en la base de datos.

   ========================================================= */

.icdr-precio-inactivo {
    opacity: 0.62;
    border-style: dashed;
}

.icdr-etiqueta-pausa {
    color: var(--ambar-2);
    font-weight: 700;
}

.icdr-clave {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.76rem;
    background: var(--linea);
    border-radius: 6px;
    padding: 2px 7px;
    color: var(--tinta-suave);
}

.icdr-alta-producto {
    background: var(--papel-suave);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-m);
    padding: 24px;
    margin-bottom: 16px;
}

.icdr-alta-producto .icdr-button {
    width: 100%;
    margin-top: 4px;
}


/* =========================================================
   PANEL: INSTRUCTIVO PARA CONECTAR PRODUCTOS
   ========================================================= */

.icdr-instructivo {
    margin-top: 12px;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-s);
    background: var(--papel);
    padding: 0;
}

.icdr-instructivo summary {
    cursor: pointer;
    padding: 11px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--marca);
    list-style: none;
}

.icdr-instructivo summary::-webkit-details-marker { display: none; }

.icdr-instructivo summary::before {
    content: '+ ';
    font-weight: 700;
}

.icdr-instructivo[open] summary::before { content: '– '; }

.icdr-instructivo > p {
    padding: 0 14px;
    font-size: 0.85rem;
    color: var(--tinta-suave);
    line-height: 1.55;
}

.icdr-codigo {
    margin: 10px 14px;
    padding: 14px 16px;
    background: var(--tinta);
    color: #e8eaf6;
    border-radius: var(--radio-s);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.6;
    white-space: pre;
    overflow-x: auto;
}

.icdr-copiar {
    margin: 0 14px 12px;
    padding: 8px 18px;
    border: 1px solid var(--linea-fuerte);
    background: var(--papel-suave);
    border-radius: var(--pildora);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tinta-suave);
    cursor: pointer;
}

.icdr-copiar:hover {
    border-color: var(--marca);
    color: var(--marca);
}

.icdr-instructivo-nota {
    padding: 0 14px 14px !important;
    font-size: 0.8rem !important;
    color: var(--gris) !important;
}

.icdr-pasos {
    background: var(--papel-suave);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-m);
    padding: 22px 24px;
    margin-bottom: 16px;
}

.icdr-pasos-intro,
.icdr-pasos-nota {
    font-size: 0.9rem;
    color: var(--tinta-suave);
    line-height: 1.6;
}

.icdr-pasos ol {
    margin: 16px 0 16px 20px;
}

.icdr-pasos li {
    font-size: 0.9rem;
    color: var(--tinta-suave);
    line-height: 1.6;
    margin-bottom: 12px;
}

.icdr-pasos-nota {
    border-top: 1px solid var(--linea);
    padding-top: 14px;
    color: var(--gris);
}


/* =========================================================
   AVISO DE LA EXPERIENCIA EN PAREJA
   =========================================================

   Aparece al elegir "Para mí y mi pareja". Antes esa opción
   no daba ninguna señal visible y la persona llegaba al final
   sin saber que el informe conjunto se desbloquea.

   ========================================================= */

.icdr-aviso-pareja {
    background: var(--papel-suave);
    border: 1px solid var(--linea-fuerte);
    border-left: 4px solid var(--marca);
    border-radius: var(--radio-m);
    padding: 24px 26px;
    margin: 4px 0 26px;
    animation: icdrAvisoEntra .28s ease;
}

@keyframes icdrAvisoEntra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.icdr-aviso-pareja-cabecera {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.icdr-aviso-pareja-icono {
    font-size: 1.5rem;
    flex: none;
    line-height: 1.2;
}

.icdr-aviso-pareja-cabecera > div {
    flex: 1;
    min-width: 200px;
}

.icdr-aviso-pareja-cabecera h3 {
    font-size: 1.12rem;
    color: var(--tinta);
    margin-bottom: 6px;
}

.icdr-aviso-pareja-cabecera p {
    font-size: 0.92rem;
    color: var(--tinta-suave);
    line-height: 1.55;
    margin: 0;
}

.icdr-aviso-pareja-precio {
    flex: none;
    text-align: right;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--marca);
    line-height: 1.2;
}

.icdr-aviso-pareja-precio small {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--gris);
    margin-top: 2px;
}

.icdr-aviso-pareja-lista {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.icdr-aviso-pareja-lista li {
    position: relative;
    padding: 6px 0 6px 24px;
    font-size: 0.9rem;
    color: var(--tinta-suave);
    line-height: 1.5;
}

.icdr-aviso-pareja-lista li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--verde);
    font-weight: 700;
}

.icdr-aviso-pareja-pasos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.icdr-aviso-pareja-pasos span {
    background: #fff;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--pildora);
    padding: 7px 14px;
    font-size: 0.78rem;
    color: var(--tinta-suave);
}

.icdr-aviso-pareja-pasos b {
    color: var(--marca);
}

.icdr-aviso-pareja-nota {
    font-size: 0.84rem;
    color: var(--gris);
    line-height: 1.55;
    border-top: 1px solid var(--linea);
    padding-top: 14px;
    margin: 0;
}

@media (max-width: 600px) {
    .icdr-aviso-pareja-precio {
        text-align: left;
        width: 100%;
    }
}


/* =========================================================
   AVISO EMERGENTE DE LA EXPERIENCIA EN PAREJA
   ========================================================= */

.icdr-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.icdr-modal[hidden] { display: none; }

.icdr-modal-fondo {
    position: absolute;
    inset: 0;
    background: rgba(15, 12, 27, 0.62);
    backdrop-filter: blur(3px);
    animation: icdrFondoEntra .2s ease;
}

@keyframes icdrFondoEntra { from { opacity: 0; } to { opacity: 1; } }

.icdr-modal-caja {
    position: relative;
    background: var(--papel);
    border-radius: var(--radio-l);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 34px 32px 28px;
    animation: icdrCajaEntra .26s cubic-bezier(.2,.9,.3,1);
}

@keyframes icdrCajaEntra {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.icdr-modal-cerrar {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--gris-claro);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.icdr-modal-cerrar:hover {
    background: var(--linea);
    color: var(--tinta);
}

.icdr-modal-candado {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 12px;
}

.icdr-modal-titulo {
    font-size: 1.22rem;
    line-height: 1.35;
    color: var(--tinta);
    text-align: center;
    margin-bottom: 14px;
}

.icdr-modal-titulo strong { color: var(--marca); }

.icdr-modal-precio {
    display: inline-block;
    background: var(--marca);
    color: #fff;
    padding: 2px 12px;
    border-radius: var(--pildora);
    font-size: 1.05rem;
    white-space: nowrap;
}

.icdr-modal-intro {
    font-size: 0.92rem;
    color: var(--tinta-suave);
    line-height: 1.6;
    text-align: center;
    margin-bottom: 18px;
}

.icdr-modal-intro em {
    color: var(--gris);
    font-style: normal;
}

.icdr-modal-lista {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    border-top: 1px solid var(--linea);
}

.icdr-modal-lista li {
    position: relative;
    padding: 9px 0 9px 26px;
    font-size: 0.9rem;
    color: var(--tinta-suave);
    line-height: 1.45;
    border-bottom: 1px solid var(--linea);
}

.icdr-modal-lista li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 9px;
    color: var(--verde);
    font-weight: 700;
}

.icdr-modal-acciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.icdr-modal-pagar {
    width: 100%;
    font-size: 1rem;
}

.icdr-modal-gratis {
    background: transparent;
    border: 0;
    color: var(--gris);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 8px;
    cursor: pointer;
    text-decoration: underline;
}

.icdr-modal-gratis:hover { color: var(--tinta); }

.icdr-modal-nota {
    font-size: 0.8rem;
    color: var(--gris-claro);
    line-height: 1.5;
    text-align: center;
    margin-top: 16px;
    border-top: 1px solid var(--linea);
    padding-top: 14px;
}

.icdr-reabrir-aviso {
    text-align: center;
    font-size: 0.86rem;
    margin: 0 0 22px;
}

.icdr-reabrir-aviso a {
    color: var(--marca);
    font-weight: 600;
}

@media (max-width: 520px) {
    .icdr-modal-caja { padding: 30px 22px 24px; }
    .icdr-modal-titulo { font-size: 1.1rem; }
}


/* =========================================================
   INFORME PREMIUM EN SOLITARIO

   Cuando se ha pagado pero la otra persona todavía no ha
   respondido: se entrega todo lo calculable y se marca lo
   que falta, en lugar de bloquear el informe entero.
   ========================================================= */

.icdr-solo-aviso {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-left: 4px solid var(--ambar);
    border-radius: var(--radio-m);
    padding: 24px 26px;
    margin-bottom: 28px;
}

.icdr-solo-aviso-icono {
    font-size: 1.6rem;
    flex: none;
    line-height: 1.2;
}

.icdr-solo-aviso h3 {
    font-size: 1.1rem;
    color: #9a3412;
    margin-bottom: 10px;
}

.icdr-solo-aviso p {
    font-size: 0.92rem;
    color: #7c2d12;
    line-height: 1.6;
    margin-bottom: 10px;
}

.icdr-solo-aviso .icdr-button {
    margin-top: 6px;
    display: inline-block;
}

.icdr-premium-pendiente {
    opacity: 0.85;
    border-style: dashed;
}

.icdr-premium-pendiente h3 {
    color: var(--gris);
}

@media (max-width: 600px) {
    .icdr-solo-aviso {
        flex-direction: column;
        gap: 10px;
    }
}


/* =========================================================
   "LO MÁS IMPORTANTE DE SU RELACIÓN"

   Las tres tarjetas se tocaban (margen 0) y compartían el
   mismo degradado azul, así que se leían como un solo
   bloque. Ahora respiran y cada una lleva el color de lo
   que dice, dentro de la paleta del informe:

     fortaleza → verde   (lo que ya funciona)
     desafío   → ámbar   (lo que pide atención)
     brecha    → índigo  (el hallazgo, color de marca)

   ========================================================= */

.icdr-premium + .icdr-premium {
    margin-top: 22px;
}

.icdr-premium-fortaleza {
    background: linear-gradient(135deg, #065f46, #0f766e);
}

.icdr-premium-desafio {
    background: linear-gradient(135deg, #9a3412, #b45309);
}

.icdr-premium-brecha {
    background: linear-gradient(135deg, #3730a3, #6d28d9);
}

/* El bloque pendiente del modo en solitario ocupa el lugar
   de la brecha: se mantiene apagado a propósito. */
.icdr-premium-pendiente {
    background: linear-gradient(135deg, #334155, #475569);
}

@media (max-width: 600px) {
    .icdr-premium + .icdr-premium {
        margin-top: 16px;
    }
}

.icdr-premium-nota {
    margin-top: 14px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
}

/* =========================================================
   INFORME GRATUITO — DIAGNÓSTICO
   =========================================================
   Añadido tras una prueba con una persona real: veía el
   número y el nombre del nivel, y dijo "esto no me dice
   nada". Estos bloques dan significado sin dar estrategias.
   ========================================================= */

.icdr-que-mide {
    max-width: 46ch;
    margin: 18px auto 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

.icdr-diagnostico {
    margin: 26px 0;
    padding: 24px 26px;
    border-radius: 14px;
    border-left: 4px solid #6C4BF4;
    background: rgba(108, 75, 244, 0.08);
}

.icdr-diagnostico h2 {
    margin: 0 0 14px;
    font-size: 1.12rem;
}

.icdr-diagnostico p {
    margin: 0 0 12px;
    line-height: 1.7;
}

.icdr-diagnostico p:last-child {
    margin-bottom: 0;
}

/* El aviso de borde y el de forma se distinguen del texto
   del nivel: son lecturas de SUS datos, no de su franja. */
.icdr-diagnostico-borde,
.icdr-diagnostico-forma {
    padding-left: 14px;
    border-left: 2px solid rgba(255, 255, 255, 0.18);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.82);
}

/* ---------------------------------------------------------
   ETIQUETA DE CADA ÁREA
   --------------------------------------------------------- */

.icdr-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.icdr-etiqueta-fortaleza {
    background: rgba(34, 160, 110, 0.18);
    color: #6EE7B7;
}

.icdr-etiqueta-atencion {
    background: rgba(212, 150, 40, 0.18);
    color: #FCD34D;
}

.icdr-etiqueta-prioridad {
    background: rgba(214, 70, 90, 0.18);
    color: #FCA5A5;
}

/* ---------------------------------------------------------
   CANDADO
   ---------------------------------------------------------
   No es un enlace a propósito: ocho botones repetidos
   cansan y ensucian la lectura. El botón va una sola vez,
   al final. Esto solo señala que ahí falta algo.
   --------------------------------------------------------- */

.icdr-candado {
    display: block;
    margin-top: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.45);
}

/* ---------------------------------------------------------
   BLOQUE DE DESBLOQUEO
   --------------------------------------------------------- */

.icdr-premium-destacado {
    font-size: 1.05rem;
    line-height: 1.6;
}

.icdr-premium-destacado strong {
    color: #C4B5FD;
}

.icdr-premium-cierre {
    margin-top: 18px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 600px) {

    .icdr-diagnostico {
        padding: 18px 18px;
    }

}

/* =========================================================
   AVISO DE COOKIES
   =========================================================
   Es informativo, no un muro de consentimiento: la única
   cookie del sitio es la de sesión, que es imprescindible.
   Por eso hay un solo botón, "Entendido", y no un
   aceptar/rechazar que no podría rechazar nada.
   ========================================================= */

.icdr-cookies {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 760px;
    margin: 0 auto;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid var(--linea-fuerte);
    background: #14243d;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
}

.icdr-cookies[hidden] {
    display: none;
}

.icdr-cookies p {
    flex: 1;
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}

.icdr-cookies a {
    color: #C4B5FD;
    text-decoration: underline;
}

.icdr-cookies button {
    flex-shrink: 0;
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--marca);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}

.icdr-cookies button:hover {
    filter: brightness(1.12);
}

@media (max-width: 600px) {

    .icdr-cookies {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        text-align: center;
    }

}

/* =========================================================
   PÁGINA LEGAL
   ========================================================= */

.icdr-legal h2 {
    margin: 34px 0 14px;
    padding-top: 26px;
    border-top: 1px solid var(--linea-fuerte);
    font-size: 1.32rem;
    /* Para que el ancla no quede tapada al saltar. */
    scroll-margin-top: 20px;
}

.icdr-legal h3 {
    margin: 26px 0 10px;
    font-size: 1.03rem;
    color: #C4B5FD;
}

.icdr-legal p,
.icdr-legal li {
    line-height: 1.72;
}

.icdr-legal ul {
    margin: 12px 0 18px;
    padding-left: 20px;
}

.icdr-legal li {
    margin-bottom: 10px;
}

.icdr-legal-indice {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 8px;
}

.icdr-legal-indice a {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--linea-fuerte);
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
}

.icdr-legal-indice a:hover {
    border-color: var(--marca);
    color: #fff;
}

/* Lo esencial, arriba y en tres líneas: casi nadie lee una
   política entera, y lo que más preguntan es lo de las
   tarjetas. */
.icdr-legal-resumen {
    margin: 24px 0 6px;
    padding: 22px 24px;
    border-radius: 14px;
    border-left: 4px solid var(--verde);
    background: rgba(16, 185, 129, 0.08);
}

.icdr-legal-resumen h2 {
    margin: 0 0 12px;
    padding-top: 0;
    border-top: 0;
    font-size: 1.05rem;
}

.icdr-legal-resumen ul {
    margin-bottom: 0;
}

.icdr-legal-tabla {
    width: 100%;
    margin: 16px 0 20px;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.icdr-legal-tabla th,
.icdr-legal-tabla td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--linea-fuerte);
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
}

.icdr-legal-tabla th {
    width: 34%;
    color: rgba(255, 255, 255, 0.62);
    font-weight: 600;
}

.icdr-legal-volver {
    margin-top: 36px;
    text-align: center;
}

/* =========================================================
   OFERTA DE PAREJA EN EL INFORME GRATUITO
   =========================================================
   Sustituye a lo que antes salía aquí: el código de pareja,
   "compartir invitación" y "comprobar estado". Eso aparecía
   antes de pagar, no le servía de nada a la persona, y le
   tapaba su propio informe cuando volvía a recuperarlo.
   ========================================================= */

.icdr-couple-oferta {
    margin: 26px 0;
    padding: 30px 28px;
    border-radius: 16px;
    border: 1px solid rgba(196, 181, 253, 0.28);
    background: linear-gradient(
        160deg,
        rgba(108, 75, 244, 0.14),
        rgba(108, 75, 244, 0.05)
    );
    text-align: center;
}

.icdr-couple-oferta h2 {
    margin: 14px 0 16px;
    font-size: 1.28rem;
}

.icdr-couple-oferta p {
    max-width: 52ch;
    margin: 0 auto 14px;
    line-height: 1.7;
}

.icdr-couple-oferta strong {
    color: #C4B5FD;
}

.icdr-couple-oferta .icdr-button {
    margin-top: 10px;
}

@media (max-width: 600px) {

    .icdr-couple-oferta {
        padding: 24px 18px;
    }

}


/* =========================================================
   PLAN DIARIO
   =========================================================

   El plan pasó de entregarse entero a abrirse día por día.
   Lo que manda en la pantalla es el día de hoy; el resto
   —lo pendiente, lo hecho y el mapa completo— va plegado
   debajo, en gris, para que no compita.
   ========================================================= */


/* ---------- EL DÍA DE HOY ---------- */

.icdr-hoy-bloque {
    margin: 26px 0 30px;
}

.icdr-hoy-cabecera {
    margin-bottom: 16px;
}

.icdr-hoy-etiqueta {
    display: inline-block;
    margin-bottom: 8px;
    padding: 5px 14px;
    border-radius: var(--pildora);
    background: var(--degradado);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.icdr-hoy-cabecera h3 {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 800;
}

.icdr-hoy-cabecera p {
    margin: 4px 0 0;
    color: var(--gris);
    font-size: 0.92rem;
}

/* La tarjeta de hoy se distingue del resto sin gritar: un
   borde de marca y algo más de sombra bastan. */

.icdr-hoy-bloque .icdr-plan-day {
    border-color: #c7d2fe;
    box-shadow: var(--sombra);
}


/* ---------- EMPEZAR Y CERRAR ---------- */

.icdr-hoy-arranque {
    padding: 30px 26px;
    border-radius: var(--radio-l);
    background: var(--papel-suave);
    border: 1px solid var(--linea-fuerte);
    text-align: center;
}

.icdr-hoy-arranque h3 {
    margin: 0 0 12px;
    font-size: 1.35rem;
}

.icdr-hoy-arranque p {
    max-width: 48ch;
    margin: 0 auto 14px;
    line-height: 1.7;
    color: var(--tinta-suave);
}

.icdr-hoy-nota {
    font-size: 0.9rem;
    color: var(--gris);
}

.icdr-hoy-arranque form {
    margin-top: 6px;
}


/* ---------- ESTADO DE CADA DÍA ---------- */

.icdr-plan-pill {
    margin-left: auto;
    padding: 4px 12px;
    border-radius: var(--pildora);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.icdr-pill-hoy {
    background: #eef2ff;
    color: var(--marca);
}

.icdr-pill-pendiente {
    background: #fffbeb;
    color: #92400e;
}

.icdr-pill-hecho {
    background: #ecfdf5;
    color: #047857;
}

.icdr-pill-futuro {
    background: var(--linea);
    color: var(--gris);
}


/* Un día que todavía no se abre: se ve el título y la fecha,
   no el contenido. Enseña el mapa sin entregar el terreno. */

.icdr-plan-futuro {
    padding: 16px 20px;
    margin-bottom: 10px;
    background: var(--papel-suave);
    box-shadow: none;
    opacity: 0.75;
}

.icdr-plan-futuro .icdr-plan-day-content h4 {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--tinta-suave);
}

.icdr-plan-locked {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--gris-claro);
}


/* ---------- CÓMO VA CADA UNO ---------- */

.icdr-plan-couple {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--linea);
    font-size: 0.85rem;
    font-weight: 600;
}

.icdr-plan-couple .icdr-si {
    color: #047857;
}

.icdr-plan-couple .icdr-no {
    color: var(--gris-claro);
}


/* ---------- PENDIENTES Y RETOMAR ---------- */

.icdr-plan-pendientes {
    margin: 24px 0;
    padding: 22px;
    border-radius: var(--radio-l);
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.icdr-plan-pendientes h3 {
    margin: 0 0 6px;
    font-size: 1.08rem;
    color: #92400e;
}

.icdr-plan-retomar {
    margin: 16px 0;
    padding: 16px 18px;
    border-radius: var(--radio-m);
    background: var(--papel);
    border: 1px solid #fde68a;
}

.icdr-plan-retomar p {
    margin: 0 0 12px;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--tinta-suave);
}


/* ---------- BLOQUES PLEGABLES ---------- */

.icdr-plan-plegable,
.icdr-plan-mapa {
    margin: 20px 0;
}

.icdr-plan-plegable > summary,
.icdr-plan-mapa > summary {
    cursor: pointer;
    list-style: none;
    padding: 15px 20px;
    border-radius: var(--radio-m);
    background: var(--papel-suave);
    border: 1px solid var(--linea-fuerte);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--tinta-suave);
    user-select: none;
}

.icdr-plan-plegable > summary::-webkit-details-marker,
.icdr-plan-mapa > summary::-webkit-details-marker {
    display: none;
}

.icdr-plan-plegable > summary::before,
.icdr-plan-mapa > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 10px;
    color: var(--marca);
    transition: transform 0.2s ease;
}

.icdr-plan-plegable[open] > summary::before,
.icdr-plan-mapa[open] > summary::before {
    transform: rotate(90deg);
}

.icdr-plan-plegable > summary:hover,
.icdr-plan-mapa > summary:hover {
    border-color: var(--marca);
}

.icdr-plan-mapa[open] > summary {
    margin-bottom: 20px;
}


/* ---------- AVISOS ---------- */

.icdr-plan-avisos-cta {
    margin: 24px 0;
    padding: 22px;
    border-radius: var(--radio-l);
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    text-align: center;
}

.icdr-plan-avisos-cta p {
    max-width: 46ch;
    margin: 0 auto 14px;
    line-height: 1.65;
    color: var(--tinta-suave);
}


/* ---------- FORMULARIO DE AVISOS ---------- */

.icdr-form-avisos h3 {
    margin: 28px 0 10px;
    font-size: 1.05rem;
}

.icdr-campo {
    margin: 16px 0;
}

.icdr-campo label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--tinta-suave);
}

.icdr-campo input,
.icdr-campo select {
    width: 100%;
    padding: 13px 15px;
    border-radius: var(--radio-s);
    border: 1px solid var(--linea-fuerte);
    background: var(--papel);
    font: inherit;
    font-size: 1rem;
    color: var(--tinta);
}

.icdr-campo input:focus,
.icdr-campo select:focus {
    outline: none;
    border-color: var(--marca);
}

.icdr-campo-ayuda {
    margin: 8px 0 0;
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--gris);
}

.icdr-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.icdr-acciones .icdr-button {
    flex: 1 1 auto;
    margin: 0;
}

.icdr-nota {
    margin: 18px 0;
    padding: 14px 18px;
    border-radius: var(--radio-m);
    font-size: 0.92rem;
    line-height: 1.6;
}

.icdr-nota-ok {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

.icdr-nota-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}


/* ---------- IMPRESIÓN ----------

   Al imprimir se abren todos los <details> desde JavaScript,
   pero los controles que no significan nada en papel —las
   casillas, los botones— sobran. */

@media print {

    .icdr-plan-plegable > summary,
    .icdr-plan-mapa > summary,
    .icdr-plan-avisos-cta,
    .icdr-plan-retomar,
    .icdr-plan-check {
        display: none;
    }

    .icdr-plan-day {
        break-inside: avoid;
        box-shadow: none;
    }

}


@media (max-width: 600px) {

    .icdr-hoy-cabecera h3 {
        font-size: 1.32rem;
    }

    .icdr-plan-pill {
        margin-left: 0;
    }

    .icdr-acciones .icdr-button {
        flex: 1 1 100%;
    }

}


/* Desglose por persona en la tarjeta de acciones del plan.
   El número grande es de la pareja (días distintos); esta
   línea dice cuánto puso cada uno. */

.icdr-progress-split {
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--gris);
}


/* =========================================================
   MODO EN SOLITARIO: EL HUECO DE LA OTRA PERSONA
   =========================================================

   Mientras falte una de las dos evaluaciones, el análisis se
   calcula contra uno mismo y los valores de la otra persona
   son una copia de los propios. No se pintan: se enseña el
   hueco. Una barra vacía dice la verdad; una barra idéntica
   a la tuya dice dos mentiras.
   ========================================================= */

.icdr-person-pendiente span {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--gris-claro);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.icdr-person-pendiente > div {
    color: var(--gris);
}

.icdr-couple-bar-vacia {
    position: relative;
    background: repeating-linear-gradient(
        135deg,
        var(--linea) 0 6px,
        var(--papel-suave) 6px 12px
    );
}

.icdr-difference-pendiente {
    background: var(--papel-suave);
    border: 1px dashed var(--linea-fuerte);
    color: var(--gris);
}

.icdr-difference-pendiente strong {
    color: var(--tinta-suave);
}


/* =========================================================
   ============  CAPA DE COMPONENTES DEL INFORME  ==========
   =========================================================

   Piezas reutilizables para que un area del informe se lea
   de un vistazo: que es, como esta, que significa y que
   hacer con ello.

   REGLA DE COLOR: el color lo manda la GRAVEDAD, nunca el
   tema. La clase de tramo -- icdr-tramo-alto, -medio, -bajo,
   -critico -- se pone en la tarjeta y de ahi bajan el icono,
   la barra y la cifra. El area la distingue su icono, que
   hereda currentColor.

   Los cortes (80/60/40) viven en tonoNivelICDR() en PHP.
   ========================================================= */


/* ---------------------------------------------------------
   ICONOS
   --------------------------------------------------------- */

.icdr-icono {
    /* En em para que acompanie al texto y no se descuelgue. */
    flex: none;
    vertical-align: -0.125em;
}


/* ---------------------------------------------------------
   TRAMOS DE GRAVEDAD

   Cada tramo define tres variables locales y todo lo de
   dentro tira de ellas. Anadir un tramo nuevo es anadir un
   bloque; no hay que tocar ni un componente.
   --------------------------------------------------------- */

.icdr-tramo-alto {
    --tono:    var(--nivel-alto);
    --tono-bg: var(--nivel-alto-bg);
    --tono-bo: var(--nivel-alto-bo);
}

.icdr-tramo-medio {
    --tono:    var(--nivel-medio);
    --tono-bg: var(--nivel-medio-bg);
    --tono-bo: var(--nivel-medio-bo);
}

.icdr-tramo-bajo {
    --tono:    var(--nivel-bajo);
    --tono-bg: var(--nivel-bajo-bg);
    --tono-bo: var(--nivel-bajo-bo);
}

.icdr-tramo-critico {
    --tono:    var(--nivel-critico);
    --tono-bg: var(--nivel-critico-bg);
    --tono-bo: var(--nivel-critico-bo);
}


/* ---------------------------------------------------------
   TARJETA DE AREA
   --------------------------------------------------------- */

.icdr-area {
    margin-bottom: 26px;
    padding: 26px 28px;
    border-radius: var(--radio-l);
    background: var(--papel);
    border: 1px solid var(--linea-fuerte);
    box-shadow: var(--sombra-s);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.icdr-area:hover {
    border-color: var(--tono, var(--gris-claro));
    box-shadow: var(--sombra);
}

.icdr-area-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}

/* El icono va en su propio disco tenido con el tramo: es lo
   primero que se mira y lo que dice "aqui hay algo" antes de
   leer una palabra. */
.icdr-area-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 14px;
    background: var(--tono-bg, var(--linea));
    color: var(--tono, var(--gris));
    font-size: 1.45rem;
}

.icdr-area-head h3 {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.icdr-area-orden {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gris-claro);
    margin-bottom: 2px;
}


/* ---------------------------------------------------------
   EL DATO: etiqueta, barra y cifra en una linea
   --------------------------------------------------------- */

.icdr-dato {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 16px 0 18px;
}

.icdr-dato-etiqueta {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--tinta-suave);
}

.icdr-dato-barra {
    flex: 1;
    min-width: 110px;
    height: 9px;
    border-radius: var(--pildora);
    background: var(--linea);
    overflow: hidden;
}

.icdr-dato-relleno {
    height: 100%;
    border-radius: var(--pildora);
    background: var(--tono, var(--gris-claro));
    transition: width 0.4s ease;
}

.icdr-dato-cifra {
    min-width: 46px;
    text-align: right;
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--tono, var(--tinta));
}


/* ---------------------------------------------------------
   LO QUE SIGNIFICA

   En gris a proposito. Es una lectura, no una orden: si
   compitiera en color con la accion, la persona no sabria
   por donde empezar.
   --------------------------------------------------------- */

.icdr-lectura {
    padding: 16px 20px;
    border-radius: var(--radio-m);
    background: var(--papel-suave);
    border-left: 4px solid var(--linea-fuerte);
    color: var(--tinta-suave);
    font-size: 0.97rem;
    line-height: 1.7;
}

.icdr-lectura-titulo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gris);
}

.icdr-lectura p {
    margin: 0 0 10px;
}

.icdr-lectura p:last-child {
    margin-bottom: 0;
}

.icdr-lectura strong {
    color: var(--tinta);
}


/* ---------------------------------------------------------
   QUE HACER

   Esta si lleva color fuerte, y siempre el mismo ambar sea
   cual sea la gravedad: es la unica parte de la tarjeta
   sobre la que se puede actuar hoy, y tiene que encontrarse
   sin buscarla. Que no cambie con el tramo es deliberado:
   la accion no es mas urgente por estar en rojo, es lo que
   toca igual.
   --------------------------------------------------------- */

.icdr-sugerencia {
    margin-top: 16px;
    padding: 18px 22px;
    border-radius: var(--radio-m);
    background: #fffbeb;
    border-left: 5px solid var(--ambar);
    color: #78350f;
    font-size: 0.99rem;
    line-height: 1.7;
}

.icdr-sugerencia-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    padding: 4px 14px;
    border-radius: var(--pildora);
    background: var(--ambar);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.icdr-sugerencia strong {
    color: #5c2a06;
}


/* ---------------------------------------------------------
   GUIA RAPIDA
   --------------------------------------------------------- */

.icdr-guia {
    margin: 30px 0 22px;
    padding: 20px 24px;
    border-radius: var(--radio-l);
    background: var(--papel-suave);
    border: 1px solid var(--linea-fuerte);
}

.icdr-guia h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    font-size: 1.04rem;
    font-weight: 700;
}

.icdr-guia h3 .icdr-icono {
    color: var(--ambar);
    font-size: 1.2rem;
}

.icdr-guia table {
    width: 100%;
    border-collapse: collapse;
}

.icdr-guia td {
    padding: 11px 6px;
    border-bottom: 1px solid var(--linea-fuerte);
    font-size: 0.93rem;
    color: var(--tinta-suave);
    line-height: 1.5;
}

.icdr-guia tr:last-child td {
    border-bottom: none;
}

.icdr-guia td:last-child {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    color: var(--tinta);
}

.icdr-guia .icdr-icono {
    vertical-align: -0.18em;
    margin-right: 6px;
    font-size: 1.05rem;
    color: var(--tono, var(--gris));
}


/* ---------------------------------------------------------
   NOTA DE CIERRE
   --------------------------------------------------------- */

.icdr-cierre {
    margin-top: 18px;
    padding: 18px 24px;
    border-radius: var(--radio-m);
    background: var(--linea);
    border-left: 6px solid var(--gris);
    color: var(--tinta-suave);
    font-size: 0.99rem;
    line-height: 1.7;
}

.icdr-cierre strong {
    color: var(--tinta);
}

.icdr-cierre .icdr-icono {
    color: var(--ambar);
    margin-right: 7px;
    font-size: 1.1rem;
}


@media (max-width: 600px) {

    .icdr-area {
        padding: 20px 18px;
    }

    .icdr-area-icono {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .icdr-area-head h3 {
        font-size: 1.08rem;
    }

    /* En movil la barra necesita la linea entera; si comparte
       fila con la etiqueta se queda en un munon de 40px. */
    .icdr-dato {
        gap: 10px;
    }

    .icdr-dato-etiqueta {
        flex: 1 1 100%;
    }

    .icdr-guia td {
        font-size: 0.88rem;
    }

}


/* =========================================================
   VARIANTE COMPACTA DE LA TARJETA DE AREA
   =========================================================

   Para las 8 dimensiones. Las 3 prioritarias van arriba en
   grande; si estas ocho pesaran lo mismo, el mensaje
   "empiecen por la primera" se perderia y la pagina, que ya
   pasa de 13.000 pixeles, se volveria un muro.
   ========================================================= */

.icdr-area-compacta {
    margin-bottom: 16px;
    padding: 20px 22px;
    background: var(--papel-suave);
}

.icdr-area-compacta .icdr-area-icono {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.2rem;
}

.icdr-area-compacta .icdr-area-head {
    margin-bottom: 10px;
}

/* Empuja la cifra al extremo derecho sin necesidad de un
   contenedor extra. */
.icdr-area-titulo {
    flex: 1;
    min-width: 0;
}

.icdr-area-compacta .icdr-area-head h3 {
    font-size: 1.06rem;
}

.icdr-area-compacta .icdr-dato-cifra {
    font-size: 1.3rem;
}

.icdr-area-descripcion {
    margin: 0 0 14px;
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--tinta-suave);
}


/* ---------------------------------------------------------
   COMO LO VE CADA UNO

   Los dos numeros al lado y la diferencia en medio. Antes
   iban en barras apiladas y habia que restar de cabeza; la
   brecha es de lo que trata un informe de pareja.
   --------------------------------------------------------- */

.icdr-comparativa {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 0 0 14px;
}

.icdr-comparativa-bloque {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border-radius: var(--radio-m);
    background: var(--papel);
    border: 1px solid var(--linea-fuerte);
    text-align: center;
}

.icdr-comparativa-quien {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gris);
    /* Un nombre largo no debe romper la caja en dos lineas
       y descuadrar la fila. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icdr-comparativa-valor {
    display: block;
    margin-top: 3px;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--tinta);
    line-height: 1.2;
}

/* El bloque del medio es el dato que de verdad importa, y
   por eso se tine con el tramo: una brecha grande en un area
   critica tiene que verse critica. */
.icdr-comparativa-brecha {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 8px 14px;
    border-radius: var(--radio-m);
    background: var(--tono-bg, var(--linea));
    color: var(--tono, var(--gris));
}

.icdr-comparativa-brecha .icdr-icono {
    font-size: 1.1rem;
    opacity: 0.85;
}

.icdr-comparativa-brecha-cifra {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.1;
}

.icdr-comparativa-brecha-texto {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* Sin la otra evaluacion. */
.icdr-comparativa-pendiente {
    background: repeating-linear-gradient(
        135deg,
        var(--papel) 0 7px,
        var(--papel-suave) 7px 14px
    );
    border-style: dashed;
}

.icdr-comparativa-pendiente .icdr-comparativa-valor {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gris-claro);
    margin-top: 7px;
}

.icdr-lectura-pendiente {
    border-left-color: var(--linea-fuerte);
    border-left-style: dashed;
}


/* ---------------------------------------------------------
   EL DESPLEGABLE

   Tiene que PARECER UN BOTON, no un titulo. Un <details>
   "limpio" -- texto y triangulito -- pasa desapercibido, y
   entonces la mitad del informe que ya esta pagada no la ve
   nadie.
   --------------------------------------------------------- */

.icdr-mas {
    margin-top: 4px;
}

.icdr-mas > summary {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    border-radius: var(--pildora);
    background: var(--papel);

    /* Borde en el color de marca, no gris: con gris claro
       este control se lee como una linea decorativa y la
       mitad del informe que ya esta pagada se queda sin
       abrir. Tiene que cantar que se puede pulsar. */
    border: 2px solid var(--nivel-medio-bo);

    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--marca);
    list-style: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

/* El triangulo por defecto de cada navegador sobra: ya hay
   una flecha propia que ademas gira. */
.icdr-mas > summary::-webkit-details-marker { display: none; }
.icdr-mas > summary::marker { content: ''; }

.icdr-mas > summary:hover {
    border-color: var(--marca);
    background: var(--nivel-medio-bg);
}

/* El foco visible no es un adorno: sin el, quien navega con
   el teclado no sabe donde esta. */
.icdr-mas > summary:focus-visible {
    outline: 3px solid var(--marca);
    outline-offset: 2px;
}

/* Los dos iconos de lo que hay dentro: se sabe que se abre
   antes de abrirlo. */
.icdr-mas-iconos {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 1.02rem;
    color: var(--gris);
    flex: none;
}

.icdr-mas-texto {
    flex: 1;
}

.icdr-mas-flecha {
    flex: none;
    display: inline-flex;
    align-items: center;
    font-size: 1.05rem;
}

/* Las dos puntas comparten hueco; solo una se muestra. */
.icdr-mas-flecha > span {
    display: inline-flex;
    align-items: center;
}

.icdr-mas[open] > summary {
    border-color: var(--marca);
    background: var(--nivel-medio-bg);
    border-bottom-left-radius: var(--radio-s);
    border-bottom-right-radius: var(--radio-s);
}

/* Un solo texto y una sola flecha visibles cada vez, sin
   JavaScript. Este intercambio por `display` es el mecanismo
   comprobado: se usa igual para el texto del resumen y para
   la punta de flecha. */
.icdr-mas .icdr-mas-cerrar { display: none; }
.icdr-mas[open] .icdr-mas-abrir { display: none; }
.icdr-mas[open] .icdr-mas-cerrar { display: inline-flex; }

.icdr-mas-cuerpo {
    padding: 16px 4px 4px;
}

.icdr-mas-cuerpo .icdr-lectura {
    background: var(--papel);
}

@media (prefers-reduced-motion: reduce) {
    .icdr-mas-flecha { transition: none; }
    .icdr-dato-relleno { transition: none; }
}


@media (max-width: 600px) {

    .icdr-area-compacta {
        padding: 16px 15px;
    }

    /* En movil la fila de tres no cabe: los dos nombres
       arriba y la brecha debajo, a lo ancho. */
    .icdr-comparativa {
        flex-wrap: wrap;
        gap: 8px;
    }

    .icdr-comparativa-bloque {
        flex: 1 1 40%;
        padding: 10px 12px;
    }

    .icdr-comparativa-brecha {
        flex: 1 1 100%;
        flex-direction: row;
        gap: 7px;
        padding: 7px 12px;
        order: 3;
    }

    .icdr-comparativa-valor {
        font-size: 1.25rem;
    }

    .icdr-mas > summary {
        font-size: 0.85rem;
        padding: 10px 14px;
    }

}


/* Al imprimir, todo abierto: en papel no hay nada que
   desplegar y el resumen no aporta. */
@media print {

    .icdr-mas > summary { display: none; }

    .icdr-mas-cuerpo { padding: 10px 0 0; }

    .icdr-area,
    .icdr-area-compacta { break-inside: avoid; }

}

/* =========================================================
   MEDIOS DE PAGO BAJO EL BOTÓN
   =========================================================
   "Sin necesidad de cuenta de PayPal" quita el motivo de
   abandono más común: mucha gente cree que necesita una
   y se va antes de llegar a la pantalla de pago.
   ========================================================= */

.icdr-medios-pago {
    margin-top: 14px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}

.icdr-medios-pago strong {
    color: #fff;
}