#cont_sostenibilidad {
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

#cont_sostenibilidad *,
#cont_sostenibilidad *::before,
#cont_sostenibilidad *::after {
    box-sizing: inherit;
}

/* ---------------------------------------------------------
   Layout: container, row, columnas
   --------------------------------------------------------- */

#cont_sostenibilidad .container {
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    margin-right: auto;
    margin-left: auto;
}

/*
 * La hoja del portal (channels-...ps.css) declara:
 *     form div.row, app_svs form div.row { display: table !important; }
 *
 * EL .row  de este formulario vive dentro del <form>, asi que cae en ese selector y las columnas se apilan. Un !important solo se vence con otro !important, por eso
 * la excepcion aqui: no es preferencia de estilo, es la unica forma de ganar.
 */
#cont_sostenibilidad form div.row,
#cont_sostenibilidad div.row {
    display: flex !important;
    flex-wrap: wrap;
    min-width: 0;
    margin-right: -12px;
    margin-left: -12px;
}

#cont_sostenibilidad .row > .col-12,
#cont_sostenibilidad .row > .col-md-6 {
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
}

/* g-4: separacion vertical entre celdas de la grilla */
#cont_sostenibilidad .row.g-4 > .col-12,
#cont_sostenibilidad .row.g-4 > .col-md-6 {
    margin-top: 24px;
}

@media (min-width: 768px) {
    #cont_sostenibilidad .row > .col-md-6 {
        width: 50%;
    }
}

/* ---------------------------------------------------------
   Utilidades
   --------------------------------------------------------- */

#cont_sostenibilidad .d-flex { display: flex; }
#cont_sostenibilidad .justify-content-between { justify-content: space-between; }
#cont_sostenibilidad .text-end { text-align: right; }
#cont_sostenibilidad .text-muted { color: #6c757d; }
#cont_sostenibilidad .fw-semibold { font-weight: 600; }

#cont_sostenibilidad .mb-0 { margin-bottom: 0; }
#cont_sostenibilidad .mb-4 { margin-bottom: 24px; }
#cont_sostenibilidad .mb-5 { margin-bottom: 48px; }
#cont_sostenibilidad .mt-4 { margin-top: 24px; }
#cont_sostenibilidad .mt-5 { margin-top: 48px; }

/* ---------------------------------------------------------
   Formularios
   --------------------------------------------------------- */

#cont_sostenibilidad .form-label {
    display: inline-block;
    font-weight: 600;
    margin-bottom: 7px;
}

#cont_sostenibilidad .form-control {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #cfd4da;
    border-radius: 4px;
    appearance: none;
}

#cont_sostenibilidad .form-control:focus {
    outline: 0;
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

#cont_sostenibilidad .form-control::placeholder {
    color: #9aa3ab;
    opacity: 1;
}

#cont_sostenibilidad textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

#cont_sostenibilidad .form-control.is-invalid {
    border-color: #dc3545;
}

#cont_sostenibilidad .form-control.is-invalid:focus {
    box-shadow: 0 0 0 .25rem rgba(220,53,69,.25);
}

/* Radio buttons: apariencia propia, sin depender de Bootstrap */
#cont_sostenibilidad .form-check {
    display: block;
    position: relative;
    min-height: 1.5rem;
    padding-left: 1.75em;
    margin-bottom: 10px;
}

#cont_sostenibilidad .form-check:last-child {
    margin-bottom: 0;
}

#cont_sostenibilidad .form-check-input[type="radio"] {
    position: absolute;
    left: 0;
    top: .2em;
    width: 1em;
    height: 1em;
    margin: 0;
    vertical-align: top;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid rgba(0,0,0,.25);
    border-radius: 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

#cont_sostenibilidad .form-check-input[type="radio"]:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
    /* punto blanco central */
    background-image: radial-gradient(#fff 0, #fff 34%, transparent 38%);
}

#cont_sostenibilidad .form-check-input[type="radio"]:focus {
    outline: 0;
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

#cont_sostenibilidad .form-check-label {
    display: inline-block;
    cursor: pointer;
}

/* ---------------------------------------------------------
   Botones
   --------------------------------------------------------- */

#cont_sostenibilidad .btn {
    display: inline-block;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: 10px 25px;
    border: 1px solid transparent;
    border-radius: 4px;
}

#cont_sostenibilidad .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

#cont_sostenibilidad .btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}

#cont_sostenibilidad .btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

#cont_sostenibilidad .btn-primary:hover {
    background-color: #286090;
    border-color: #286090;
}

#cont_sostenibilidad .btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

#cont_sostenibilidad .btn-secondary:hover {
    background-color: #5c636a;
    border-color: #5c636a;
}

/* ---------------------------------------------------------
   Avisos
   --------------------------------------------------------- */

#cont_sostenibilidad .alert {
    position: relative;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid transparent;
    border-radius: 4px;
}

#cont_sostenibilidad .alert p:last-child {
    margin-bottom: 0;
}

#cont_sostenibilidad .alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

#cont_sostenibilidad .alert-secondary {
    color: #41464b;
    background-color: #e2e3e5;
    border-color: #d3d6d8;
}

#cont_sostenibilidad .alert-info-custom {
    background: #eef7fc;
    border: 1px solid #cfe7f5;
    color: #285b73;
}

/* ---------------------------------------------------------
   Pestanas
   Las clases active / show las conmuta el JS de Bootstrap.
   --------------------------------------------------------- */

#cont_sostenibilidad .nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

#cont_sostenibilidad .nav-tabs {
    align-items: flex-end;
    border-bottom: 1px solid #dee2e6;
}

#cont_sostenibilidad .nav-item {
    margin-bottom: 0;
}

#cont_sostenibilidad .nav-link {
    display: block;
    margin-bottom: -1px;
    padding: 13px 20px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: #075b96;
    background: none;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
}

#cont_sostenibilidad .nav-link:hover {
    background-color: #f1f4f7;
}

#cont_sostenibilidad .nav-link.active {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

#cont_sostenibilidad .tab-content > .tab-pane {
    display: none;
}

#cont_sostenibilidad .tab-content > .tab-pane.active {
    display: block;
}

#cont_sostenibilidad .tab-pane.fade {
    transition: opacity .15s linear;
    opacity: 0;
}

#cont_sostenibilidad .tab-pane.fade.show {
    opacity: 1;
}

/* ---------------------------------------------------------
   Indicador de carga
   --------------------------------------------------------- */

#cont_sostenibilidad .spinner-border {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    vertical-align: middle;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-sostenibilidad .75s linear infinite;
}

@keyframes spinner-sostenibilidad {
    to { transform: rotate(360deg); }
}

#loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

#loading-overlay .loading-content {
    color: #fff;
    text-align: center;
}

/* ---------------------------------------------------------
   Estilos propios del formulario
   --------------------------------------------------------- */

#cont_sostenibilidad .main-container {
    max-width: 1150px;
    margin: 40px auto;
}

#cont_sostenibilidad .form-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    overflow: hidden;
}

#cont_sostenibilidad .header-section {
    background: #fff;
    padding: 30px 35px 20px;
    border-bottom: 1px solid #e5e5e5;
}

#cont_sostenibilidad .header-section h1 {
    color: #005b96;
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 8px;
}

#cont_sostenibilidad .header-section p {
    color: #666;
    margin-bottom: 0;
}

#cont_sostenibilidad .navigation-wrapper {
    padding: 20px 25px 0;
    background: #fff;
}

/*
 * El portal aplica fondo, relleno y borde propios al elemento <form> y a sus contenedores. Sin esto se ve una banda gris alrededor del contenido blanco.
 * Se usa !important por el mismo motivo que en .row: la hoja del portal lo usa.
 */
#cont_sostenibilidad form,
#cont_sostenibilidad #frm_consulta_sostenibilidad,
#cont_sostenibilidad .tab-content,
#cont_sostenibilidad .tab-pane,
#cont_sostenibilidad .section-content {
    background-color: #fff !important;
}

#cont_sostenibilidad #frm_consulta_sostenibilidad {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

#cont_sostenibilidad .section-content {
    padding: 35px;
}

#cont_sostenibilidad .section-title {
    color: #075b96;
    font-size: 23px;
    font-weight: 600;
    margin: 0 0 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
}

#cont_sostenibilidad .subsection-title {
    color: #075b96;
    font-size: 18px;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 18px;
}

#cont_sostenibilidad .info-box {
    background: #f7f9fb;
    border-left: 4px solid #337ab7;
    padding: 18px 20px;
    margin-bottom: 25px;
    border-radius: 0 4px 4px 0;
}

#cont_sostenibilidad .info-box strong {
    color: #075b96;
}

#cont_sostenibilidad .cutoff-date {
    display: inline-block;
    background: #eaf3f9;
    color: #075b96;
    border: 1px solid #c9e0ef;
    border-radius: 4px;
    padding: 10px 15px;
    margin: 8px 0 20px;
    font-weight: 600;
}

#cont_sostenibilidad .help-opcional {
    font-weight: 400;
    font-size: .88rem;
    color: #6c757d;
}

#cont_sostenibilidad .required {
    color: #dc3545;
}

#cont_sostenibilidad .radio-group {
    background: #fafafa;
    border: 1px solid #e1e4e8;
    border-radius: 5px;
    padding: 16px 18px;
}

#cont_sostenibilidad .sub-options {
    margin: 10px 0 10px 25px;
    padding-left: 15px;
    border-left: 2px solid #e5e5e5;
}

/*
 * Pie de la pestana 3: "Anterior" a la izquierda, y a la derecha una columna con el captcha sobre el boton de envio.
 *
 * align-items: flex-end alinea "Anterior" con el borde inferior de esa columna, o sea a la altura del boton de enviar y no del captcha.
 */
#cont_sostenibilidad .acciones-pie {
    align-items: flex-end;
    margin-top: 24px !important;
}

#cont_sostenibilidad .acciones-envio {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;   /* separacion entre el captcha y el boton de envio */
}

#cont_sostenibilidad .acciones-envio .error-msg {
    text-align: right;
    margin-top: 0;
}

/* El iframe del captcha mide 304px: en pantallas angostas todo se apila */
@media (max-width: 560px) {
    #cont_sostenibilidad .acciones-pie {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    #cont_sostenibilidad .acciones-envio {
        align-items: stretch;
    }

    #cont_sostenibilidad .acciones-envio .error-msg {
        text-align: left;
    }
}

#cont_sostenibilidad .character-counter {
    text-align: right;
    font-size: .82rem;
    color: #777;
    margin-top: 5px;
}

#cont_sostenibilidad .footer-actions {
    border-top: 1px solid #e5e5e5;
    padding: 25px 35px;
    background: #fafafa;
    text-align: right;
}

#cont_sostenibilidad .asterisk-note {
    margin-bottom: 25px;
    font-size: .9rem;
    color: #666;
}

#cont_sostenibilidad .otro-texto {
    display: none;
    margin-top: 12px;
}

#cont_sostenibilidad .otro-texto.mostrar {
    display: block;
}

/* ---------------------------------------------------------
   Estados de validacion
   --------------------------------------------------------- */

#cont_sostenibilidad .error-msg {
    display: none;
    color: #dc3545;
    font-size: .85rem;
    font-weight: 600;
    margin-top: 6px;
}

#cont_sostenibilidad .error-msg.mostrar {
    display: block;
}

#cont_sostenibilidad .radio-group.grupo-invalido {
    border-color: #dc3545;
    background: #fdf3f4;
}

#cont_sostenibilidad .resumen-errores {
    display: none;
    margin-bottom: 25px;
}

#cont_sostenibilidad .resumen-errores.mostrar {
    display: block;
}

/* ---------------------------------------------------------
   Pantallas angostas
   --------------------------------------------------------- */

@media (max-width: 768px) {
    #cont_sostenibilidad .main-container {
        margin: 15px auto;
    }

    #cont_sostenibilidad .header-section,
    #cont_sostenibilidad .section-content {
        padding: 22px;
    }

    #cont_sostenibilidad .header-section h1 {
        font-size: 22px;
    }

    #cont_sostenibilidad .navigation-wrapper {
        padding: 15px 15px 0;
    }

    #cont_sostenibilidad .nav-tabs {
        flex-direction: column;
    }

    #cont_sostenibilidad .nav-link {
        width: 100%;
        text-align: left;
        border-bottom: 1px solid #dee2e6;
    }

    #cont_sostenibilidad .nav-link.active {
        border-radius: 4px;
    }

    #cont_sostenibilidad .footer-actions {
        padding: 20px;
    }

    #cont_sostenibilidad .footer-actions .btn {
        width: 100%;
        margin-bottom: 8px;
    }

    #cont_sostenibilidad .footer-actions .btn:last-child {
        margin-bottom: 0;
    }
}