/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* ============================================ */
/* 1. LOGO Y CABECERA - Opciones avanzadas */
/* ============================================ */

/* Altura del Contenedor principal del logo */
/*para llegar a este seteo inspeccioné la página y observé que el max-height originario era 90px;*/
/*luego ingresé al theme.css heredado y ubiqué ese fragmento del script, lo copié y lo pegué en el custom.css con la modificación de tamaño*/

.logo-container>img {
  max-height: 190px;
  padding: 15px;
  width: auto;
}

/* Contenedor principal del logo */
.logo-container {
    width: 100% !important;
    text-align: center !important;
    background-color: #f8f9fa !important;  /* Fondo gris claro */
    padding: 20px 0 !important;             /* Espacio arriba/abajo */
    margin-bottom: 20px !important;         /* Espacio debajo del logo */
    border-bottom: 3px solid #ff6600 !important;  /* Línea decorativa abajo */
    border-top: 3px solid #ff6600 !important;     /* Línea decorativa arriba */
}

/* La imagen del logo */
.logo-container img.logo {
    width: 80% !important;
    max-width: 600px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 10px !important;         /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;  /* Sombra */
}

/* Efecto al pasar el mouse sobre el logo */
.logo-container img.logo:hover {
    opacity: 0.9 !important;
    transform: scale(1.02) !important;
    transition: all 0.3s ease !important;
}

/* ============================================ */
/* 2. BARRA DE NAVEGACIÓN */
/* ============================================ */

/* Barra superior completa */
.navbar-default {
    background-color: #2c3e50 !important;   /* Color de fondo */
    border-bottom: 2px solid #ff6600 !important;  /* Borde inferior */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;  /* Sombra */
}

/* Texto del título de la encuesta */
.navbar-brand {
    color: #ffffff !important;              /* Color del texto */
    font-size: 24px !important;             /* Tamaño de fuente */
    font-weight: bold !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
}

/* Enlaces de la barra (si los hay) */
.navbar-default .navbar-nav > li > a {
    color: #ffffff !important;
    font-size: 16px !important;
}

/* Efecto hover en enlaces */
.navbar-default .navbar-nav > li > a:hover {
    background-color: #ff6600 !important;
    color: #ffffff !important;
}

/* ============================================ */
/* 3. PREGUNTAS - Diseño completo */
/* ============================================ */

/* Contenedor de cada pregunta */
.question-container {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%) !important;
    border-radius: 12px !important;
    margin-bottom: 25px !important;
    padding: 5px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    transition: transform 0.2s ease !important;
}

/* Efecto al pasar mouse sobre pregunta */
.question-container:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
}

/* Título de la pregunta */
.question-title-container {
    background-color: #e8f4f8 !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 12px 15px !important;
    border-left: 5px solid #ff6600 !important;
}

/* Número de pregunta */
.question-number {
    background-color: #ff6600 !important;
    color: white !important;
    padding: 3px 8px !important;
    border-radius: 15px !important;
    font-size: 12px !important;
}

/* Texto de la pregunta */
.question-text {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333333 !important;
}

/* Área de respuestas */
.answer-container {
    background-color: #ffffff !important;
    padding: 20px !important;
    border-radius: 0 0 8px 8px !important;
}

/* Texto de ayuda (el que está debajo de la pregunta) */
.ls-question-help {
    background-color: #fff3cd !important;
    border-left: 4px solid #ffc107 !important;
    padding: 10px !important;
    margin-top: 10px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
}

/* ============================================ */
/* 5. TEXTOS Y TIPOGRAFÍA */
/* ============================================ */

/* Cambiar la fuente de toda la encuesta */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    color: #333333 !important;
    line-height: 1.6 !important;
}

/* Títulos de grupos */
.group-title {
    font-size: 28px !important;
    color: #ff6600 !important;
    border-bottom: 2px solid #ff6600 !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
}

/* Descripción de grupos */
.group-description {
    font-size: 16px !important;
    color: #666666 !important;
    font-style: italic !important;
    margin-bottom: 25px !important;
}

/* Texto de opciones de respuesta */
.radio-item label, .checkbox-item label {
    font-size: 15px !important;
    font-weight: normal !important;
}

/* Mensajes de error */
.text-danger {
    color: #dc3545 !important;
    font-weight: bold !important;
    background-color: #ffe6e6 !important;
    padding: 8px !important;
    border-radius: 5px !important;
}

/* ============================================ */
/* 6. FONDO GENERAL DE LA ENCUESTA */
/* ============================================ */

/* Fondo de toda la página */
body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    /* Gradiente morado-azul */
}

/* Alternativa: imagen de fondo */
body {
    background-image: url('/upload/themes/survey/pip/images/fondo.jpg') !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center !important;
}

/* Alternativa: color sólido */
body {
    background-color: #f0f2f5 !important;
}

/* Fondo del contenedor principal */
#outerframeContainer {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-radius: 15px !important;
    margin: 20px auto !important;
    padding: 20px !important;
    max-width: 1200px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
}

/* ============================================ */
/* 7. EFECTOS Y ANIMACIONES */
/* ============================================ */

/* Animación de entrada para las preguntas */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.question-container {
    animation: fadeInUp 0.5s ease-out !important;
}

/* Campos de entrada al recibir foco */
input:focus, select:focus, textarea:focus {
    border-color: #ff6600 !important;
    box-shadow: 0 0 8px rgba(255, 102, 0, 0.5) !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

/* Barra de progreso personalizada */
.progress {
    height: 25px !important;
    border-radius: 15px !important;
    background-color: #e0e0e0 !important;
}

.progress-bar {
    background: linear-gradient(to right, #ff6600, #ffaa00) !important;
    border-radius: 15px !important;
    line-height: 25px !important;
    font-weight: bold !important;
}

/* ============================================ */
/* 8. PANTALLAS PEQUEÑAS (móviles) */
/* ============================================ */

@media (max-width: 768px) {
    
    /* Logo más pequeño en móvil */
    .logo-container img.logo {
        width: 95% !important;
    }
    
    /* Títulos más pequeños */
    .group-title {
        font-size: 22px !important;
    }
    
    .question-text {
        font-size: 16px !important;
    }
    
    /* Botones a ancho completo */
    .btn-primary, .btn-default {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    /* Menos espacio entre preguntas */
    .question-container {
        margin-bottom: 15px !important;
    }
    
    /* Padding reducido */
    .answer-container {
        padding: 12px !important;
    }
}

/*PRUEBA PARA REDUCIR ESPACIO ENTRE PROGRESS BAR Y BARRA DE NAVEGACIÓN*/

/* ============================================ */
/* ELIMINAR ESPACIO EXTRA ENTRE PROGRESS BAR Y NAVEGACIÓN */
/* ============================================ */

/* 1. Eliminar padding-top excesivo del body (lo causa el JS pero lo forzamos) */
body {
    padding-top: 0 !important;  /* Elimina el padding que LimeSurvey añade automáticamente */
}

/* 2. Reducir espacio superior del contenedor principal */
.top-container .top-content {
    padding-top: 150px !important; /*con esta medida de 150px quedó bien la distancia entre el progress bar y la barra de navegación*/
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 3. Ajustar el contenedor del logo - eliminar márgenes inferiores */
.logo-container {
    padding: 10px 0 !important;  /* Reducido de 20px a 10px */
    margin-bottom: 0 !important;  /* Eliminamos el margin-bottom que tenías */
    border-bottom: 2px solid #ff6600 !important;  /* Mantenemos borde pero más fino */
    border-top: 2px solid #ff6600 !important;
}

/* 4. Reducir espacio del grupo título (si existe) */
.group-title-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* 5. Ajustar el contenedor de la barra de progreso */
.top-container .progress {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    height: 20px !important;  /* Un poco más fino para ahorrar espacio */
}

/* 6. Reducir espacio del contenedor del navegador (botones siguiente/anterior) */
#navigator-container {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

#navigator-container > div {
    padding: 0 !important;
}

/* 7. Eliminar márgenes del hr (separador) dentro del navegador */
#navigator-container > hr {
    margin: 0 !important;
    display: none !important;  /* Opcional: oculta la línea separadora */
}

/* 8. Ajuste específico para pantallas grandes */
@media (min-width: 768px) {
    body {
        padding-top: 0 !important;
    }
    
    .logo-container {
        padding: 5px 0 !important;
    }
}

/*APLICAR NEGRITA A TODAS LAS PREGUNTAS EN UNA SOLA ACCIÓN*/
.question-title-container .question-text,
.ls-label-question,
.question-text h1,
.question-text h2,
.question-text h3,
.question-text h4,
.question-text p {
    font-weight: 700 !important;
}


/*############################################################*/
/*AJUSTE DE COLOR CON EL NUEVO LOGO INSTITUCIONAL DEL PIP 2026*/
/*############################################################*/


/* ============================================ */
/* 🎨 PALETA INSTITUCIONAL URUGUAY */
/* ============================================ */

:root {
    --color-azul: #0038A8;      /* Azul bandera */
    --color-verde: #2E8B57;     /* Verde institucional */
    --color-amarillo: #FFD100;  /* Amarillo sol */
    --color-blanco: #FFFFFF;
    --color-gris-claro: #f5f7fa;
    --color-texto: #2c3e50;
}

/* ============================================ */
/* 🌐 FONDO GENERAL */
/* ============================================ */

body {
    background: var(--color-gris-claro) !important;
    color: var(--color-texto) !important;
}

/* Contenedor principal */
#outerframeContainer {
    background-color: var(--color-blanco) !important;
}

/* ============================================ */
/* 🧭 NAVBAR */
/* ============================================ */

.navbar-default {
    background-color: var(--color-azul) !important;
    border-bottom: 4px solid var(--color-amarillo) !important;
}

.navbar-brand {
    color: var(--color-blanco) !important;
}

.navbar-default .navbar-nav > li > a {
    color: var(--color-blanco) !important;
}

.navbar-default .navbar-nav > li > a:hover {
    background-color: var(--color-verde) !important;
}

/* ============================================ */
/* 🖼️ LOGO */
/* ============================================ */

.logo-container {
    background-color: var(--color-blanco) !important;
    border-top: 4px solid var(--color-azul) !important;
    border-bottom: 4px solid var(--color-verde) !important;
}

/* ============================================ */
/* 📊 PROGRESS BAR */
/* ============================================ */

.progress {
    background-color: #e6ecf5 !important;
}

.progress-bar {
    background: linear-gradient(
        to right,
        var(--color-azul),
        var(--color-verde),
        var(--color-amarillo)
    ) !important;
    color: #000 !important;
}

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

.question-container {
    background: var(--color-blanco) !important;
    border-left: 6px solid var(--color-azul) !important;
}

.question-title-container {
    background-color: #eef3fb !important;
    border-left: 6px solid var(--color-azul) !important;
}

.question-number {
    background-color: var(--color-azul) !important;
}

/* Texto de preguntas */
.question-text {
    color: var(--color-texto) !important;
}

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

.answer-container {
    background-color: var(--color-blanco) !important;
}

/* Hover en opciones */
.radio-item label:hover,
.checkbox-item label:hover {
    background-color: #eef7f1 !important;
    border-radius: 5px !important;
}

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

.btn-primary {
    background-color: var(--color-azul) !important;
    border-color: var(--color-azul) !important;
}

.btn-primary:hover {
    background-color: var(--color-verde) !important;
    border-color: var(--color-verde) !important;
}

.btn-default {
    background-color: var(--color-amarillo) !important;
    border-color: var(--color-amarillo) !important;
    color: #000 !important;
}

.btn-default:hover {
    background-color: #e6bc00 !important;
}

/* ============================================ */
/* ⚠️ MENSAJES */
/* ============================================ */

.text-danger {
    background-color: #ffe5e5 !important;
    border-left: 4px solid #cc0000 !important;
}

/* ============================================ */
/* ℹ️ AYUDA */
/* ============================================ */

.ls-question-help {
    background-color: #fff9db !important;
    border-left: 4px solid var(--color-amarillo) !important;
}

/* ============================================ */
/* 🧩 DETALLES */
/* ============================================ */

/* Links */
a {
    color: var(--color-verde);
}


a:hover {
    color: var(--color-azul);
}

/* Separadores */
hr {
    border-top: 1px solid #dbe3ec !important;
}

/*##############################################*/
/* ============================================ */
/* 🧩 TÍTULOS DE GRUPO / SECCIÓN */
/* ============================================ */
/*##############################################*/


.group-title {
    color: var(--color-azul) !important;
    border-bottom: 3px solid var(--color-azul) !important;
    font-weight: 700 !important;
}

/* Contenedor del título (fondo suave institucional) */
.group-title-container {
    background-color: #eef3fb !important; /* azul muy claro */
    border-left: 6px solid var(--color-verde) !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
}

/* Descripción del grupo (si la usás) */
.group-description {
    color: #4a4a4a !important;
    border-left: 4px solid var(--color-amarillo) !important;
    padding-left: 10px !important;
}


/*########################################################*/
/*########################################################*/
/*########################################################*/

/* ============================================ */
/* 📱 RESPONSIVE - FIX LOGO EN MOBILE */
/* ============================================ */

/* Asegurar que la navbar tenga altura automática en mobile */
.navbar-default {
    min-height: 60px !important;
    height: auto !important;
}

/* El navbar-brand debe ser visible siempre */
.navbar-brand {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    padding: 5px 15px !important;
    line-height: normal !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
}

/* La imagen dentro del navbar-brand */
.navbar-brand img,
.logo-container img,
.logo-container img.logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 190px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
}

/* ============================================ */
/* 📱 MOBILE (hasta 767px) */
/* ============================================ */

@media (max-width: 767px) {

    /* Fix principal: navbar muestra el logo */
    .navbar-default {
        padding: 5px 0 !important;
    }

    .navbar-brand {
        float: none !important;
        display: block !important;
        text-align: center !important;
        padding: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .navbar-brand img,
    .logo-container img,
    .logo-container img.logo {
        max-height: 190px !important;
        max-width: 95% !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Evitar que el botón hamburguesa solape el logo */
    .navbar-toggle {
        position: relative !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    /* Logo container en mobile */
    .logo-container {
        width: 100% !important;
        text-align: center !important;
        padding: 8px 0 !important;
    }

    /* Top content con padding ajustado para mobile */
    .top-container .top-content {
        padding-top: 10px !important;
    }

    /* Botones a ancho completo */
    .btn-primary,
    .btn-default {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* Preguntas más compactas */
    .question-container {
        margin-bottom: 15px !important;
        padding: 3px !important;
    }

    .answer-container {
        padding: 12px !important;
    }

    .group-title {
        font-size: 20px !important;
    }
}

/* ============================================ */
/* 📱 MOBILE PEQUEÑO (hasta 480px) */
/* ============================================ */

@media (max-width: 480px) {

    .navbar-brand img,
    .logo-container img.logo {
        max-height: 160px !important;
        max-width: 95% !important;
    }

    .group-title {
        font-size: 18px !important;
    }

    .question-text {
        font-size: 15px !important;
    }
}

/* ============================================ */
/* 💡 ÍCONO DE AYUDA - Reemplazo del "?" */
/* ============================================ */

.ls-questionhelp:before {
    content: "\f05a" !important; /* fa-info-circle → ícono "i" de información */
}

/* ============================================ */
/* 💡 */
/* ============================================ */
.survey-completed .submitwrapper,
div[class*="submitwrapper"] {
    margin-top: 0;
    padding-top: 120px !important;
}


/* ============================================ */
/* PÁGINA FINAL - MENSAJE Y LINK DE IMPRESIÓN */
/* ============================================ */

/*el contenido se estaba generando pero quedaba oculto detrás de la barra de navegación fija, lo que se resolvió con los estilos de .completed-wrapper en custom.css.*/

.completed-wrapper {
    margin-top: 120px !important;
    padding: 30px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.completed-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 20px !important;
    color: var(--color-texto) !important;
}

.url-wrapper-survey-print {
    margin-top: 20px !important;
    display: block !important;
    visibility: visible !important;
}

/* ============================================ */
/* ♿ ACCESIBILIDAD - WCAG AA / AAA */
/* ============================================ */

/* ------------------------------------------
   1. ENFOQUE VISIBLE EN TECLADO (Nivel AA)
   Reemplaza el outline:none que tenías antes
   ------------------------------------------ */

input:focus,
select:focus,
textarea:focus,
button:focus,
a:focus,
.btn:focus,
.btn:active:focus,
[tabindex]:focus {
    outline: 3px solid #0038A8 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 56, 168, 0.25) !important;
}

/* Enfoque específico para radio y checkbox */
input[type="radio"]:focus + label::before,
input[type="checkbox"]:focus + label::before {
    outline: 3px solid #0038A8 !important;
    outline-offset: 2px !important;
}

/* ------------------------------------------
   2. CONTRASTE DE COLOR (Nivel AA)
   Corrige el amarillo sobre blanco
   ------------------------------------------ */

/* Texto sobre fondo amarillo → usar negro para contraste */
.btn-default {
    color: #1a1a1a !important;          /* Negro casi puro sobre amarillo */
    font-weight: 600 !important;
}

/* Progress bar: texto negro sobre gradiente claro */
.progress-bar {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* Texto de ayuda sobre fondo amarillo claro */
.ls-question-help,
.questionhelp {
    color: #1a1a1a !important;          /* Garantiza contraste sobre #fff9db */
}

/* Descripción de grupo sobre fondo blanco */
.group-description {
    color: #3a3a3a !important;          /* Más oscuro que el #666666 anterior */
}

/* ------------------------------------------
   3. TAMAÑO MÍNIMO DE ELEMENTOS TÁCTILES (Nivel AA)
   Mínimo 44x44px para touch/click
   ------------------------------------------ */

.radio-item label,
.checkbox-item label {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
}

.btn-primary,
.btn-default,
.btn {
    min-height: 44px !important;
    padding: 10px 20px !important;
    font-size: 16px !important;         /* Mínimo recomendado para legibilidad */
}

/* ------------------------------------------
   4. MENSAJES DE ERROR CLAROS (Nivel A)
   ------------------------------------------ */

.text-danger,
.has-error .help-block,
.ls-em-error {
    font-size: 15px !important;
    padding: 10px 12px !important;
    border-radius: 5px !important;
    border-left: 5px solid #cc0000 !important;
    background-color: #ffe5e5 !important;
    color: #7a0000 !important;          /* Rojo oscuro para mejor contraste */
    font-weight: 600 !important;
}

/* ------------------------------------------
   5. ETIQUETAS VISIBLES Y CLARAS (Nivel A)
   ------------------------------------------ */

label {
    font-size: 15px !important;
    color: #1a1a1a ;
    margin-bottom: 4px !important;
}

/* Asterisco de campo obligatorio más visible */
.asterisk,
.mandatory-asterisk {
    color: #cc0000 !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
    margin-left: 3px !important;
}

/* ------------------------------------------
   6. JERARQUÍA VISUAL LEGIBLE (Nivel AAA)
   ------------------------------------------ */

/* Espaciado entre líneas mínimo recomendado */
p, li, label, .question-text {
    line-height: 1.6 !important;
}

/* Espaciado entre letras */
body {
    letter-spacing: 0.01em !important;
}

/* Ancho máximo de línea para legibilidad (75 caracteres aprox) */
.question-text,
.group-description,
.ls-questionhelp {
    max-width: 75ch !important;
}

/* ------------------------------------------
   7. SKIP LINK - SALTAR AL CONTENIDO (Nivel A)
   Permite a usuarios de teclado saltar la navbar
   ------------------------------------------ */

.skip-link {
    position: absolute !important;
    top: -100px !important;
    left: 0 !important;
    background-color: #0038A8 !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    z-index: 9999 !important;
    border-radius: 0 0 8px 0 !important;
    text-decoration: none !important;
    transition: top 0.2s ease !important;
}

.skip-link:focus {
    top: 0 !important;              /* Aparece solo cuando recibe foco por teclado */
    outline: 3px solid #FFD100 !important;
}

/* ------------------------------------------
   8. ANIMACIONES REDUCIDAS (Nivel AAA)
   Respeta preferencia del sistema operativo
   ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ------------------------------------------
   9. MODO ALTO CONTRASTE (Nivel AAA)
   ------------------------------------------ */

@media (prefers-contrast: high) {
    .question-container {
        border: 2px solid #000000 !important;
    }

    .btn-primary {
        background-color: #000080 !important;
        border: 2px solid #000000 !important;
    }

    .btn-default {
        background-color: #FFD100 !important;
        border: 2px solid #000000 !important;
        color: #000000 !important;
    }

    .progress-bar {
        background: #0038A8 !important;
        color: #ffffff !important;
    }
}

/* ------------------------------------------
   10. RESPONSIVE ACCESIBILIDAD MOBILE (Nivel AA)
   ------------------------------------------ */

@media (max-width: 767px) {

    /* Área táctil mínima en mobile */
    .radio-item label,
    .checkbox-item label {
        min-height: 48px !important;    /* Más generoso en touch */
        padding: 10px 8px !important;
    }

    .btn-primary,
    .btn-default,
    .btn {
        min-height: 48px !important;
        font-size: 17px !important;
    }

    /* Mensajes de error más grandes en mobile */
    .text-danger,
    .ls-em-error {
        font-size: 16px !important;
        padding: 12px !important;
    }
}

/* ==================================================== */
/* Alinear a la izquierda todas las entradas numéricas */
/* ================================================== */

/* Alinear a la izquierda todas las entradas numéricas */
.numeric input[type="text"],
.numeric-item input[type="text"] {
    text-align: left !important;
}