:root {
    --ricar-azul    : #004e90;
    --ricar-amarillo: #fee100;
}

/* ── Layout ────────────────────────────────────────────────── */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
/*    background: linear-gradient(135deg, #f0f4f8, #dce8f5);*/
    background:linear-gradient(135deg,#f8f9fa,#eef2f7);
    transition:.3s;
}

.full-height {
    height: calc(100dvh - 17px);
}

/* ── Card de la encuesta ───────────────────────────────────── */
.enc-card {
    border-radius: 18px;
    width: 100%;
    max-width: 540px;
}

/* ── Logo ──────────────────────────────────────────────────── */
.logo-enc {
    max-width: 180px;
    display: block;
    margin: 0 auto;
}

/* ── Texto de pregunta ─────────────────────────────────────── */
.pregunta-titulo {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
    color: #1a2a3a;
    margin-bottom: 4px;
}

/* ── Botones de icono — compartido dico y escala ───────────── */
.btn-icono-enc {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    justify-content: center;
    gap           : 6px;
    background    : var(--enc-bg, #ffffff);
    border        : 2px solid var(--enc-color, #ccc);
    border-radius : 16px;
    padding       : 14px 10px 10px;
    cursor        : pointer;
    transition    : transform 0.15s, box-shadow 0.15s, background 0.15s;
    min-width     : 90px;
    flex          : 1;
}
.btn-icono-enc:hover,
.btn-icono-enc:active {
    transform  : scale(1.08);
    box-shadow : 0 4px 16px rgba(0,0,0,0.13);
    background : var(--enc-color, #ccc);
}
.btn-icono-enc:hover .btn-icono-img,
.btn-icono-enc:active .btn-icono-img {
    filter: brightness(0) invert(1) !important; /* blanco al hacer hover */
}
.btn-icono-enc:hover .btn-icono-label,
.btn-icono-enc:active .btn-icono-label {
    color: #fff;
}

/* Versión compacta para escala 1-5 */
.btn-icono-enc--sm {
    min-width : 0;
    padding   : 10px 4px 8px;
    border-radius: 12px;
}

.btn-icono-img-wrap {
    width : 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-icono-enc--sm .btn-icono-img-wrap {
    width : 40px;
    height: 40px;
}

.btn-icono-img {
    width : 100%;
    height: 100%;
    object-fit: contain;
    transition: filter 0.15s;
}

.btn-icono-label {
    font-size  : 0.78rem;
    font-weight: 700;
    color      : var(--enc-color, #555);
    transition : color 0.15s;
    text-align : center;
    line-height: 1.2;
}
.btn-icono-enc--sm .btn-icono-label {
    font-size: 1rem;
}

/* ── Loader ────────────────────────────────────────────────── */
.loader {
    border        : 4px solid #f3f3f3;
    border-top    : 4px solid var(--ricar-azul);
    border-radius : 50%;
    width         : 44px;
    height        : 44px;
    animation     : spin 0.9s linear infinite;
    margin        : auto;
}
@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── Barra de progreso ─────────────────────────────────────── */
.progress {
    border-radius: 8px;
    background   : #dde3ea;
}
.progress-bar {
    border-radius: 8px;
}

/* ── Lista de regalos en pantalla final ────────────────────── */
.list-group-item {
    font-size: 0.92rem;
}

/* ── Textarea pregunta abierta ─────────────────────────────── */
.textarea-abierta {
    border-radius : 12px;
    border        : 2px solid #dee2e6;
    font-size     : 0.95rem;
    padding       : 12px 14px;
    resize        : none;
    transition    : border-color 0.2s;
    line-height   : 1.5;
}
.textarea-abierta:focus {
    border-color : var(--ricar-azul);
    box-shadow   : 0 0 0 3px rgba(0, 78, 144, 0.12);
    outline      : none;
}

/* ── Contador de caracteres ────────────────────────────────── */
.contador-chars {
    font-size   : 0.72rem;
    color       : #6c757d;
    transition  : color 0.2s;
    font-variant-numeric: tabular-nums;
}