/* ==========================================================
   IDENTIDAD INSTITUCIONAL
   Universidad
   ========================================================== */
:root {
    --bs-primary: #195387;      /* Azul profundo */
    --bs-secondary: #89C4E2;    /* Azul celeste */
    --bs-danger: #BD1622;       /* Rojo institucional */
    --bs-success: #198754;      /* Solo mensajes de éxito */
    --bs-body-color: #444444;
    --bs-body-bg: #ffffff;
    --bs-border-color: #d9d9d9;

    --color-primary: #195387;
    --color-secondary: #89C4E2;
    --color-text: #444444;
}

/* ==========================================================
   TIPOGRAFÍA
   ========================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Evita que el navegador divida palabras automáticamente */
#outerframeContainer {
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Las palabras normales nunca deben romperse */
#outerframeContainer * {
    word-break: normal;
}

/* ==========================================================
   GENERAL
   ========================================================== */
body {
    background: var(--bs-body-bg);
    color: var(--color-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--color-primary);
}

a:hover {
    color: #2A6BAA; /* Variante hover de primary */
}

/* ==========================================================
   NAVBAR
   ========================================================== */
.navbar {
    background: #195387 !important;
}
.navbar,
.navbar-default,
.survey-header {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.navbar a,
.navbar-brand {
    color: #fff;
}

/* ==========================================================
   BOTONES
   ========================================================== */
.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background: #2A6BAA;
    border-color: #2A6BAA;
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover {
    background: var(--color-primary);
    color: #fff;
}

/* ==========================================================
   BARRA DE PROGRESO
   ========================================================== */
.progress {
    background: #e9ecef;
}

.progress-bar {
    background: var(--color-secondary);
}

/* ==========================================================
   INPUTS DE TEXTO
   ========================================================== */
body.fruity .form-control:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 .25rem rgba(25, 83, 135, .25) !important;
}

/* ==========================================================
   RADIO BUTTONS
   ========================================================== */
body.fruity .form-check-input[type="radio"] {
    border-color: #6c757d !important;
}

body.fruity .form-check-input[type="radio"]:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

body.fruity .form-check-input[type="radio"]:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 .25rem rgba(25, 83, 135, .25) !important;
}

body.fruity .form-check-input[type="radio"]:hover {
    border-color: var(--color-primary) !important;
}

/* ==========================================================
   CHECKBOXES
   ========================================================== */
body.fruity .form-check-input[type="checkbox"] {
    border-color: #6c757d !important;
}

body.fruity .form-check-input[type="checkbox"]:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

body.fruity .form-check-input[type="checkbox"]:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 .25rem rgba(25, 83, 135, .25) !important;
}

body.fruity .form-check-input[type="checkbox"]:hover {
    border-color: var(--color-primary) !important;
}

/* ==========================================================
   SWITCHES
   ========================================================== */
body.fruity .form-switch .form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ==========================================================
   PROGRESS BAR
   ========================================================== */
#progressbar-top {
    margin-top: 5px;
}

/* ==========================================================
   RANGE
   ========================================================== */
body.fruity .form-range::-webkit-slider-thumb {
    background: var(--color-primary) !important;
}

body.fruity .form-range::-moz-range-thumb {
    background: var(--color-primary) !important;
}

body.fruity .form-range::-webkit-slider-runnable-track {
    background: var(--color-secondary) !important;
}

/* ==========================================================
   SELECT / DROPDOWN
   ========================================================== */
body.fruity .form-select {
    border-color: #6c757d !important;
}

body.fruity .form-select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 .25rem rgba(25, 83, 135, .25) !important;
}

body.fruity .form-select:hover {
    border-color: var(--color-primary) !important;
}

.bootstrap-select {
    width: 100% !important;
    max-width: 100% !important;
}

.bootstrap-select > .dropdown-toggle {
    width: 100% !important;
}

/* ==========================================================
   PREGUNTAS
   ========================================================== */
.question-container,
.ls-question,
.panel {
    background: #fff;
    border: 1px solid #dddddd;
}

/* ==========================================================
   TABLAS
   ========================================================== */
.table thead {
    background: var(--color-primary);
    color: #fff;
}

.ls-answers .ls-heading th,
.ls-answers th[role="columnheader"] {
    color: #ffffff;
}

.radio-array {
    width: 100%;
    table-layout: fixed;
}

.radio-array th.answertext {
    width: 42%;
}

.radio-array td {
    text-align: center;
    vertical-align: middle;
}

/* ==========================================================
   PAGINACIÓN
   ========================================================== */
.page-link {
    color: var(--color-primary);
}

.page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* ==========================================================
   MENSAJES
   ========================================================== */
/* Éxito */
.alert-success {
    background: #d1e7dd;
    border-color: #badbcc;
    color: #0f5132;
}

/* Advertencia */
.alert-warning {
    background: #fff3cd;
    border-color: #ffecb5;
}

/* Error */
.alert-danger,
.text-danger,
.invalid-feedback {
    color: var(--bs-danger);
}

/* ==========================================================
   VALIDACIÓN
   ========================================================== */
body.fruity .is-invalid {
    border-color: var(--bs-danger) !important;
}

body.fruity .is-invalid:focus {
    border-color: var(--bs-danger) !important;
    box-shadow: 0 0 0 .25rem rgba(189, 22, 34, .25) !important;
}

body.fruity .is-valid {
    border-color: var(--bs-success) !important;
}

/* ==========================================================
   LINKS / UTILIDADES
   ========================================================== */
.text-primary {
    color: var(--color-primary);
}

.bg-primary {
    background: var(--color-primary);
}

.border-primary {
    border-color: var(--color-primary);
}

/* ==========================================================
   CALLOUT INSTITUCIONAL
   ========================================================== */
.callout {
    position: relative;
    margin: 2rem 0;
    padding: 1.5rem 1.75rem;
    border-left: .35rem solid transparent;
    border-radius: .5rem;
    background: #f8fbfe;
}

.callout h2,
.callout h3,
.callout h4,
.callout h5 {
    margin: 0 0 .75rem;
    font-weight: 600;
}

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

/* ==========================================================
   VARIANTES
   ========================================================== */
.callout-primary {
    border-left-color: var(--color-primary);
    background: rgba(137, 196, 226, .12);
}

.callout-primary h2,
.callout-primary h3,
.callout-primary h4,
.callout-primary h5 {
    color: var(--color-primary);
}

.callout-secondary {
    border-left-color: var(--color-secondary);
    background: rgba(137, 196, 226, .20);
}

.callout-success {
    border-left-color: var(--bs-success);
    background: #eefaf3;
}

.callout-warning {
    border-left-color: #ffc107;
    background: #fff8e5;
}

.callout-danger {
    border-left-color: var(--bs-danger);
    background: #fff3f4;
}

/* ==========================================================
   ICONO (opcional)
   ========================================================== */
.callout-icon {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.callout-icon i {
    color: var(--color-primary);
    font-size: 1.5rem;
    line-height: 1.2;
    flex-shrink: 0;
}

/* ==========================================================
   IDENTIDAD VISUAL - LOGOS
   ========================================================== */
.logo-container {
    display: flex;
    align-items: center;
}

.logo-container .logo {
    height: 100px;
    width: auto;
    max-width: 100%;
}

.site-title {
    display: block;
    margin: 0.5rem 4rem;  /* reducido de 1rem a 0.5rem */
    color: var(--color-primary);
    font-size: clamp(1.25rem, 2.5vw, 2.5rem); /* reducido */
    line-height: 1.15;
    font-weight: 600;
    text-align: center;
    min-height: 0;
}

/* Si el span queda vacío (sin texto), que no ocupe espacio */
.site-title:empty {
    display: none;
    margin: 0;
}

/* Cabecera de la lista de encuestas */
.institution-header {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;      /* margen pequeño a los lados */
    text-align: center;
    margin: 0 0 1rem;     /* menos espacio abajo */
}

.institution-logo {
    max-width: 100%;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 3px;
}

.institution-header h1 {
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.institution-header p {
    color: #666;
    margin: 0;
}

.survey-list-heading h2 {
    color: var(--color-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--color-secondary);
    padding-bottom: .5rem;
    margin-bottom: 1.5rem;
}

#surveys-list-container {
    flex: 1;
    min-height: auto !important;
}

/* Contacto institucional */
.survey-contact {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #dee2e6;
    color: #495057;
}

.survey-contact h5 {
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: .5rem;
}

.survey-contact a {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
}

.survey-contact a:hover {
    text-decoration: underline;
}

.array-swap-info {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border-left: 4px solid var(--color-primary);
    background: #eef5fb;
    color: var(--color-primary);
    border-radius: .25rem;
    font-size: .9rem;
}

/* Pequeña animación cuando una fila cambia automáticamente */
.array-swapped {
    animation: arraySwap .35s ease;
}

@keyframes arraySwap {
    0% {
        background: #fff3cd;
    }
    100% {
        background: transparent;
    }
}

/* Footer */
#surveyListFooter {
    border-top: 1px solid #dee2e6;
    margin-top: 30px;
    padding: 2rem 0 3rem;
    text-align: center;
}

.footer-logo {
    margin-bottom: 1rem;
}

.footer-logo img {
    max-width: 260px;
    width: 100%;
    height: auto;
}

.footer-powered {
    font-size: .9rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.footer-powered a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.footer-powered a:hover {
    text-decoration: underline;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 768px) {
    .site-title {
        margin: 1rem;
        font-size: 2rem;
    }

    .logo-container .logo {
        height: 60px;
    }

    .callout {
        padding: 1rem;
    }
}