body {
}
/* ============================================================
   RegistrarDoc.css — Estilos del wizard de registro PQR
   Proyecto SBS / TMS
   Complementa Bootstrap 4.6 sin reemplazar variables globales.
   ============================================================ */

/* ============================================================
   ENCABEZADO – imagen institucional (base64)
   ============================================================ */
.pqr-web-header {
    --logo-alto: 100px;                    /* alto del logo (equivale a 2x) */
    width: 100%;
    box-sizing: border-box;
    padding: calc(var(--logo-alto) / 2);   /* área de protección = x en los 4 lados */
}

.pqr-web-header-img {
    height: var(--logo-alto);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Mensaje de bienvenida */
.pqr-web-bienvenida {
    color: var(--marca-madre);
    background: #eef2f8;
    border-color: var(--marca-madre);
    border-left: 4px solid var(--marca-madre);
}

.pqr-web-bienvenida .fa {
    margin-right: .4rem;
    color: var(--marca-madre);
}

/* ============================================================
   IDENTIDAD DE MARCA AVAL — V1 Institucional sobria
   Reglas scopeadas a #divFormRegistrar para no afectar al host
   ============================================================ */
#divFormRegistrar .card-header {
    background: var(--marca-profundo);
    border-bottom: none;
}

    #divFormRegistrar .card-header,
    #divFormRegistrar .card-header .font-weight-bold {
        color: #fff;
        letter-spacing: .03em;
    }

#divFormRegistrar .btn-primary {
    background: var(--marca-claro);
    border-color: var(--marca-claro);
}

    #divFormRegistrar .btn-primary:hover,
    #divFormRegistrar .btn-primary:focus {
        background: var(--marca-madre);
        border-color: var(--marca-madre);
    }

#divFormRegistrar .btn-outline-success {
    color: var(--marca-claro);
    border-color: var(--marca-claro);
}

    #divFormRegistrar .btn-outline-success:hover,
    #divFormRegistrar .btn-outline-success.active {
        color: #fff;
        background: var(--marca-claro);
        border-color: var(--marca-claro);
    }

/* ============================================================
   VARIABLES LOCALES
   Paleta coherente con el design system SBS
   ============================================================ */
:root {
    /* Paleta de marca AVAL (V1 Institucional sobria) */
    --marca-profundo: #121E37;
    --marca-madre: #1A356C;
    --marca-claro: #0275BB;
    --marca-rojo: #E0182A;
    --pqr-paso-activo: #0275BB;      /* era #0069d9 */
    --pqr-paso-completado: #1A356C;  /* era #28a745 */
    --pqr-paso-pendiente: #adb5bd;
    --pqr-header-bg: #f8f9fa;
    --pqr-header-hover: #e9ecef;
    --pqr-card-border: #dee2e6;
    --pqr-badge-size: 26px;
    --pqr-tipo-btn-ancho: 160px;
    --pqr-transition: 0.25s ease;
}

/* ============================================================
   INDICADOR DE PROGRESO (WIZARD)
   ============================================================ */
.pqr-wizard-progress {
    background: #fff;
    border: 1px solid var(--pqr-card-border);
    border-radius: .375rem;
    padding: .75rem 1rem;
}

.pqr-steps-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.pqr-step {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: default;
    opacity: .45;
    transition: opacity var(--pqr-transition);
    padding: 4px 8px;
    border-radius: .25rem;
}

    /* Separador entre pasos */
    .pqr-step:not(:last-child)::after {
        content: '\f054'; /* fa-chevron-right */
        font-family: 'FontAwesome';
        font-size: .65rem;
        color: var(--pqr-paso-pendiente);
        margin-left: 8px;
    }

    .pqr-step.active {
        opacity: 1;
        cursor: default;
    }

    .pqr-step.completado {
        opacity: 1;
        cursor: pointer;
    }

        .pqr-step.completado:hover {
            background: var(--pqr-header-hover);
        }

        /*
 * El <li> de pasos completados es interactivo (click navega al paso).
 * Sin tabindex no recibe foco; con tabindex="0" necesita un anillo visible.
 * El tabindex lo asigna RegistrarDocWizard.js en irAPaso() cuando marca
 * el paso como completado.
 */
        .pqr-step.completado:focus {
            outline: 3px solid transparent;
            box-shadow: 0 0 0 3px rgba(2, 117, 187, .40);
            border-radius: .25rem;
        }

            .pqr-step.completado:focus:not(:focus-visible) {
                box-shadow: none;
                outline: none;
            }

        .pqr-step.completado:focus-visible {
            outline: 3px solid transparent;
            box-shadow: 0 0 0 3px rgba(2, 117, 187, .40);
            border-radius: .25rem;
        }

.pqr-step-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pqr-badge-size);
    height: var(--pqr-badge-size);
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    background: var(--pqr-paso-pendiente);
    color: #fff;
    flex-shrink: 0;
    transition: background var(--pqr-transition);
}


.pqr-step.active .pqr-step-numero {
    background: var(--pqr-paso-activo);
}

.pqr-step.completado .pqr-step-numero {
    background: var(--pqr-paso-completado);
    font-size: 0;
}

    .pqr-step.completado .pqr-step-numero::before {
        /* Reemplaza el número con un check en pasos completados */
        content: '\f00c';
        font-family: 'FontAwesome';
        font-size: .75rem;
    }

.pqr-step-label {
    font-size: .8rem;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}

.pqr-step.active .pqr-step-label {
    color: var(--pqr-paso-activo);
}

.pqr-step.completado .pqr-step-label {
    color: var(--pqr-paso-completado);
}

/* ============================================================
   TARJETAS WIZARD
   ============================================================ */
.pqr-wizard-card {
    border: 1px solid var(--pqr-card-border);
    border-radius: .375rem;
    margin-bottom: .75rem;
    overflow: hidden;
    transition: box-shadow var(--pqr-transition);
}

    .pqr-wizard-card.pqr-paso-activo {
        border-color: var(--pqr-paso-activo);
        box-shadow: 0 0 0 1px var(--pqr-paso-activo);
        /* La tarjeta activa es la única que puede tener un desplegable abierto
           (MagicSuggest anexa su menú dentro del contenedor). Se permite overflow
           visible para que el menú no quede recortado por el borde de la tarjeta;
           las inactivas conservan overflow:hidden por las esquinas redondeadas. */
        overflow: visible;
    }

    .pqr-wizard-card.pqr-paso-completado {
        border-color: var(--pqr-paso-completado);
    }

/* Cabecera de la tarjeta */
.pqr-card-header {
    background: var(--pqr-header-bg);
    border-bottom: 1px solid var(--pqr-card-border);
    padding: .6rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: background var(--pqr-transition);
    /* Esquinas superiores propias: la tarjeta activa usa overflow:visible
       (para no recortar los desplegables), por lo que el fondo de la cabecera
       debe respetar el border-radius por sí mismo. */
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
}

    .pqr-card-header:hover {
        background: var(--pqr-header-hover);
    }

.pqr-paso-badge {
    display: inline-block;
    background: var(--pqr-paso-pendiente);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: .25rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    transition: background var(--pqr-transition);
}

.pqr-wizard-card.pqr-paso-activo .pqr-paso-badge {
    background: var(--pqr-paso-activo);
}

.pqr-wizard-card.pqr-paso-completado .pqr-paso-badge {
    background: var(--pqr-paso-completado);
}

/* Chevron animado */
.pqr-chevron {
    color: #6c757d;
    transition: transform var(--pqr-transition);
    font-size: .85rem;
}

.pqr-wizard-card.pqr-colapsado .pqr-chevron {
    transform: rotate(180deg);
}

/* Resumen en header (visible cuando colapsado) */
.pqr-resumen-header {
    font-size: .8rem;
    color: #6c757d;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: .5rem;
}

/* Cuerpo de la tarjeta (colapsable) */
.pqr-card-body {
    padding: 1rem 1.25rem;
    transition: none;
}

.pqr-wizard-card.pqr-colapsado .pqr-card-body {
    display: none;
}

/* Campo readonly (solo lectura — auto-llenado) */
.pqr-readonly-field {
    background: #f8f9fa !important;
    color: #6c757d !important;
    font-style: italic;
}

/* ============================================================
   SELECTOR DE TIPO DE PERSONA (botones grandes)
   Reemplaza el <select> por botones visuales más rápidos
   ============================================================ */
.pqr-tipo-persona-selector {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pqr-tipo-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--pqr-tipo-btn-ancho);
    min-height: 100px;
    padding: .75rem 1rem;
    border: 2px solid #dee2e6;
    border-radius: .5rem;
    background: #fff;
    color: #495057;
    cursor: pointer;
    transition: border-color var(--pqr-transition), background var(--pqr-transition), color var(--pqr-transition), transform .15s ease;
    text-align: center;
}


    /*
 * :focus-visible -> el anillo aparece con teclado/Tab pero NO con click de ratón.
 * :focus          -> fallback para navegadores sin soporte a :focus-visible
 *                   (IE 11, Edge Legacy). Ambas reglas son necesarias.
 */
    .pqr-tipo-btn:focus {
        outline: 3px solid transparent; /* reserva espacio, evita salto de layout */
        box-shadow: 0 0 0 3px rgba(2, 117, 187, .40); /* anillo azul coherente con Bootstrap */
    }

    /*
 * :focus-visible -> el anillo aparece con teclado/Tab pero NO con click de ratón.
 * :focus          -> fallback para navegadores sin soporte a :focus-visible
 *                   (IE 11, Edge Legacy). Ambas reglas son necesarias.
 */
    .pqr-tipo-btn:focus {
        outline: 3px solid transparent; /* reserva espacio, evita salto de layout */
        box-shadow: 0 0 0 3px rgba(2, 117, 187, .40); /* anillo azul coherente con Bootstrap */
    }

        /* Quitar el anillo cuando el foco llega por ratón/toque, no por teclado */
        .pqr-tipo-btn:focus:not(:focus-visible) {
            box-shadow: none;
            outline: none;
        }

    /* Anillo definitivo para teclado — sobreescribe el fallback con mayor especificidad */
    .pqr-tipo-btn:focus-visible {
        outline: 3px solid transparent;
        box-shadow: 0 0 0 3px rgba(2, 117, 187, .40);
    }

    /*.pqr-tipo-btn:hover {
        border-color: #adb5bd;
        background: #f8f9fa;
        transform: translateY(-1px);
    }

    .pqr-tipo-btn:focus {
        outline: none;
    }*/

    .pqr-tipo-btn.pqr-seleccionado {
        border-color: var(--pqr-paso-activo);
        background: #e7f0f9;
        color: var(--pqr-paso-activo);
    }

        .pqr-tipo-btn.pqr-seleccionado .fa {
            color: var(--pqr-paso-activo);
        }

/* Sección que aparece al elegir tipo de persona */
.pqr-seccion-persona {
    animation: pqr-fadeIn .2s ease;
}

@keyframes pqr-fadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   SELECTOR DE MEDIO DE NOTIFICACIÓN
   ============================================================ */
.pqr-medio-selector {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

    .pqr-medio-selector .medio-notificacion.active {
        font-weight: 700;
    }

/* ============================================================
   SELECTOR ¿MISMO PETICIONARIO?
   ============================================================ */
.pqr-mismo-peticionario-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pqr-mismo-btn.active {
    font-weight: 700;
}

/* ============================================================
   PIE DE NAVEGACIÓN (botones Anterior / Continuar)
   ============================================================ */
.pqr-nav-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 1.25rem;
    padding-top: .75rem;
    border-top: 1px solid var(--pqr-card-border);
}

.btn-pqr-siguiente {
    min-width: 130px;
}

/* ============================================================
   ANIMACIÓN DE TRANSICIÓN ENTRE PASOS
   ============================================================ */
.pqr-wizard-card.pqr-entering {
    animation: pqr-slideDown .2s ease forwards;
}

@keyframes pqr-slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   CONTADOR DE CARACTERES (textarea)
   ============================================================ */
#countDescripcion,
#countDescripcionAct {
    font-size: .78rem;
    transition: color .2s;
}

    #countDescripcion.pqr-casi-lleno,
    #countDescripcionAct.pqr-casi-lleno {
        color: #dc3545;
        font-weight: 700;
    }

/* ============================================================
   SEPARADOR CON TEXTO (reutiliza clase existente del proyecto)
   ============================================================ */
.hr-with-text {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #6c757d;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

    .hr-with-text::before,
    .hr-with-text::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #dee2e6;
    }

/* ============================================================
   RESPONSIVE
   En pantallas pequeñas el wizard se adapta a una columna
   ============================================================ */
@media (max-width: 576px) {
    .pqr-tipo-persona-selector {
        flex-direction: column;
    }

    .pqr-tipo-btn {
        width: 100%;
        flex-direction: row;
        gap: 12px;
        min-height: auto;
        text-align: left;
    }

        .pqr-tipo-btn .fa {
            font-size: 1.4rem !important;
            margin-bottom: 0 !important;
        }

    .pqr-step-label {
        display: none;
    }

    .pqr-nav-footer {
        flex-direction: column-reverse;
    }

    .btn-pqr-siguiente,
    .btn-pqr-anterior {
        width: 100%;
        justify-content: center;
    }
}

/* -- Wrapper (label que actúa como input-group-append) -------------------- */
.notif-check-wrap {
    cursor: pointer;
    background: #f8f9fa;
    border-color: #ced4da;
    padding: .375rem .65rem;
    user-select: none;
    transition: background var(--pqr-transition, .25s ease), border-color var(--pqr-transition, .25s ease);
}

    .notif-check-wrap:hover {
        background: #e9ecef;
        border-color: #adb5bd;
    }

    /* Ocultar el checkbox nativo visualmente; el label es el control.
   Se mantiene en el DOM para accesibilidad (Tab + Space funciona). */
    .notif-check-wrap .notif-medio-check {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

/* Ícono en estado inactivo */
.notif-icon {
    color: #adb5bd;
    font-size: .85rem;
    transition: color var(--pqr-transition, .25s ease), transform .15s ease;
}

/* -- Estado activo (checkbox marcado) ------------------------------------- */
.notif-check-wrap.notif-activo {
    background: #e2f1fb;
    border-color: var(--marca-claro);
}

    .notif-check-wrap.notif-activo .notif-icon {
        color: var(--marca-claro);
        transform: rotate(-20deg); /* inclinación leve para dar feedback visual */
    }

/* -- Focus ring accesible (navegación por teclado) ------------------------ */
.notif-check-wrap:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 117, 187, .30);
    border-color: #66b2e0;
    z-index: 3;
}