/*==========================================================
    PQR.CSS
    CANAL CIUDADANO QRESP
==========================================================*/

:root{
    --pqr-primary:#1769E0;
    --pqr-primary-dark:#1458BC;
    --pqr-primary-light:#EEF5FF;
    --pqr-text:#172033;
    --pqr-text-soft:#52627A;
    --pqr-muted:#7A8799;
    --pqr-border:#DCE5F0;
    --pqr-bg:#F4F7FB;
    --pqr-white:#FFFFFF;
    --pqr-success:#22B861;
    --pqr-warning:#F5A623;
    --pqr-danger:#E5484D;
    --pqr-shadow:0 8px 26px rgba(29,55,90,.08);
    --pqr-radius:18px;
}

/*==========================================================
    BASE
==========================================================*/

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    background:var(--pqr-bg);
    color:var(--pqr-text);
    font-family:"Montserrat",sans-serif;
}

button,
input,
select,
textarea{
    font-family:inherit;
}

/*==========================================================
    CONTENEDOR
==========================================================*/

.pqr-page{
    width:min(1080px,calc(100% - 48px));
    margin:0 auto;
    padding:20px 0 50px;
}

/*==========================================================
    HEADER
==========================================================*/

.pqr-header{
    position:fixed;
    top:14px;
    left:50%;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    width:min(1080px,calc(100% - 48px));
    min-height:102px;
    padding:18px 24px;
    border:1px solid var(--pqr-border);
    border-radius:18px;
    background:rgba(255,255,255,.97);
    box-shadow:var(--pqr-shadow);
    transform:translateX(-50%);
    backdrop-filter:blur(10px);
}

.pqr-brand{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.pqr-brand-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 52px;
    width:52px;
    height:52px;
    border-radius:14px;
    background:var(--pqr-primary);
    color:#FFFFFF;
    font-size:1.1rem;
    box-shadow:0 7px 18px rgba(23,105,224,.18);
}

.pqr-brand > div:last-child{
    min-width:0;
}

.pqr-brand span{
    display:block;
    margin-bottom:3px;
    color:var(--pqr-primary);
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.08em;
}

.pqr-brand h1{
    margin:0 0 3px;
    color:var(--pqr-text);
    font-size:1.15rem;
    line-height:1.2;
    font-weight:800;
}

.pqr-brand p{
    margin:0;
    color:var(--pqr-muted);
    font-size:.7rem;
    line-height:1.4;
}

.pqr-header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-shrink:0;
}

.pqr-back{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:40px;
    padding:0 15px;
    border:1px solid var(--pqr-border);
    border-radius:10px;
    background:#FFFFFF;
    color:var(--pqr-primary);
    font-size:.72rem;
    font-weight:700;
    text-decoration:none;
    transition:.25s ease;
}

.pqr-back:hover{
    border-color:var(--pqr-primary);
    background:var(--pqr-primary-light);
}

.pqr-public-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:38px;
    padding:0 12px;
    border:1px solid #D7E8FF;
    border-radius:50px;
    background:#F5F9FF;
    color:var(--pqr-primary);
    font-size:.65rem;
    font-weight:700;
    white-space:nowrap;
}

.pqr-public-status span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--pqr-success);
    box-shadow:0 0 0 4px rgba(34,184,97,.1);
}

/*==========================================================
    CONTENIDO
==========================================================*/

.pqr-content{
    padding-top:115px;
}

/*==========================================================
    INTRODUCCIÓN
==========================================================*/

.pqr-intro{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    margin-bottom:20px;
    padding:28px 30px;
    border:1px solid #CFE0F5;
    border-radius:var(--pqr-radius);
    background:linear-gradient(
        135deg,
        #FFFFFF,
        #F3F8FF
    );
    box-shadow:var(--pqr-shadow);
}

.pqr-intro-content{
    max-width:650px;
}

.section-tag{
    display:inline-block;
    margin-bottom:8px;
    color:var(--pqr-primary);
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.09em;
}

.pqr-intro-content h2{
    margin:0 0 8px;
    color:var(--pqr-text);
    font-size:1.45rem;
    line-height:1.25;
    font-weight:800;
}

.pqr-intro-content p{
    margin:0;
    color:var(--pqr-text-soft);
    font-size:.76rem;
    line-height:1.7;
}

.pqr-intro-help{
    display:grid;
    gap:8px;
    min-width:210px;
}

.pqr-help-item{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 12px;
    border:1px solid var(--pqr-border);
    border-radius:10px;
    background:#FFFFFF;
}

.pqr-help-item i{
    color:var(--pqr-primary);
    font-size:.82rem;
}

.pqr-help-item span{
    color:var(--pqr-text-soft);
    font-size:.63rem;
    font-weight:700;
}

/*==========================================================
    TARJETAS
==========================================================*/

.pqr-card{
    margin-bottom:18px;
    padding:25px;
    border:1px solid var(--pqr-border);
    border-radius:var(--pqr-radius);
    background:var(--pqr-white);
    box-shadow:var(--pqr-shadow);
}

.pqr-section-heading{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

.pqr-section-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 43px;
    width:43px;
    height:43px;
    border-radius:12px;
    background:var(--pqr-primary-light);
    color:var(--pqr-primary);
}

.section-number{
    display:block;
    margin-bottom:2px;
    color:var(--pqr-muted);
    font-size:.59rem;
    font-weight:800;
    letter-spacing:.05em;
}

.pqr-section-heading h2{
    margin:0 0 4px;
    color:var(--pqr-text);
    font-size:.98rem;
    font-weight:800;
}

.pqr-section-heading p{
    margin:0;
    color:var(--pqr-muted);
    font-size:.67rem;
    line-height:1.5;
}

/*==========================================================
    TIPO DE PQR
==========================================================*/

.pqr-type-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:11px;
}

.pqr-type-option{
    position:relative;
    display:flex;
    align-items:flex-start;
    min-height:100px;
    padding:14px;
    border:1px solid var(--pqr-border);
    border-radius:12px;
    background:#F9FBFE;
    cursor:pointer;
    transition:.2s ease;
}

.pqr-type-option:hover{
    border-color:#BFD5F1;
    background:var(--pqr-primary-light);
}

.pqr-type-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.pqr-type-option > span{
    display:flex;
    flex-direction:column;
    gap:5px;
    width:100%;
}

.pqr-type-option i{
    margin-bottom:2px;
    color:var(--pqr-primary);
    font-size:1rem;
}

.pqr-type-option strong{
    color:var(--pqr-text);
    font-size:.72rem;
    font-weight:800;
}

.pqr-type-option small{
    color:var(--pqr-muted);
    font-size:.61rem;
    line-height:1.4;
}

.pqr-type-option:has(input:checked){
    border-color:var(--pqr-primary);
    background:var(--pqr-primary-light);
    box-shadow:0 0 0 3px rgba(23,105,224,.06);
}

/*==========================================================
    RADIO
==========================================================*/

.pqr-person-type,
.pqr-related-options,
.pqr-response-options{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:17px;
    flex-wrap:wrap;
}

.pqr-radio-option{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:39px;
    padding:0 12px;
    border:1px solid var(--pqr-border);
    border-radius:50px;
    background:#FFFFFF;
    color:var(--pqr-text-soft);
    font-size:.66rem;
    font-weight:700;
    cursor:pointer;
    transition:.2s ease;
}

.pqr-radio-option:hover{
    border-color:var(--pqr-primary);
    background:var(--pqr-primary-light);
}

.pqr-radio-option input{
    width:15px;
    height:15px;
    margin:0;
    accent-color:var(--pqr-primary);
}

/*==========================================================
    CAMPOS
==========================================================*/

.pqr-fields-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.pqr-field{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.pqr-field + .pqr-field{
    margin-top:0;
}

.pqr-field label{
    color:var(--pqr-text);
    font-size:.68rem;
    font-weight:700;
}

.pqr-field input,
.pqr-field select,
.pqr-field textarea{
    width:100%;
    border:1px solid var(--pqr-border);
    border-radius:10px;
    outline:0;
    background:#FFFFFF;
    color:var(--pqr-text);
    font-size:.74rem;
    transition:.25s ease;
}

.pqr-field input,
.pqr-field select{
    height:46px;
    padding:0 12px;
}

.pqr-field textarea{
    min-height:115px;
    padding:12px;
    resize:vertical;
    line-height:1.55;
}

.pqr-field input:focus,
.pqr-field select:focus,
.pqr-field textarea:focus{
    border-color:var(--pqr-primary);
    box-shadow:0 0 0 4px rgba(23,105,224,.07);
}

.pqr-field input::placeholder,
.pqr-field textarea::placeholder{
    color:#9AA7B8;
}

/*==========================================================
    SITUACIÓN
==========================================================*/

.pqr-card > .pqr-field{
    margin-bottom:14px;
}

.pqr-card > .pqr-field:last-child{
    margin-bottom:0;
}

/*==========================================================
    UBICACIÓN
==========================================================*/

.pqr-location-actions{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:15px;
    flex-wrap:wrap;
}

.pqr-location-actions > span{
    color:var(--pqr-muted);
    font-size:.63rem;
}

.pqr-mini-map{
    width:100%;
    height:260px;
    margin-top:16px;
    overflow:hidden;
    border:1px solid var(--pqr-border);
    border-radius:13px;
    background:#EEF3F8;
}

.pqr-map-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:7px;
    width:100%;
    height:100%;
    color:var(--pqr-muted);
    text-align:center;
}

.pqr-map-placeholder i{
    color:#AAB6C5;
    font-size:2rem;
}

.pqr-map-placeholder strong{
    color:var(--pqr-text-soft);
    font-size:.76rem;
}

.pqr-map-placeholder span{
    font-size:.64rem;
}

/*==========================================================
    BÚSQUEDA RELACIONADA
==========================================================*/

.inline-search-box{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:9px;
}

.pqr-related-search{
    margin-bottom:12px;
}

.pqr-related-result{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:50px;
    padding:10px 12px;
    border:1px dashed #C9D8EA;
    border-radius:10px;
    background:#F9FBFE;
    color:var(--pqr-muted);
    font-size:.66rem;
}

.pqr-related-result i{
    color:var(--pqr-primary);
}

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

.primary-button,
.secondary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:0 18px;
    border-radius:11px;
    font-size:.76rem;
    font-weight:700;
    cursor:pointer;
    transition:.25s ease;
    white-space:nowrap;
}

.primary-button{
    border:1px solid var(--pqr-primary);
    background:var(--pqr-primary);
    color:#FFFFFF;
}

.primary-button:hover{
    border-color:var(--pqr-primary-dark);
    background:var(--pqr-primary-dark);
    transform:translateY(-1px);
}

.secondary-button{
    border:1px solid var(--pqr-border);
    background:#FFFFFF;
    color:var(--pqr-text-soft);
}

.secondary-button:hover{
    border-color:var(--pqr-primary);
    background:var(--pqr-primary-light);
    color:var(--pqr-primary);
}

/*==========================================================
    EVIDENCIAS
==========================================================*/

.pqr-upload-box{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:7px;
    min-height:150px;
    padding:20px;
    border:1.5px dashed #C9D8EA;
    border-radius:13px;
    background:#F9FBFE;
    color:var(--pqr-text-soft);
    text-align:center;
    cursor:pointer;
    transition:.2s ease;
}

.pqr-upload-box:hover{
    border-color:var(--pqr-primary);
    background:var(--pqr-primary-light);
}

.pqr-upload-box i{
    color:var(--pqr-primary);
    font-size:1.5rem;
}

.pqr-upload-box strong{
    color:var(--pqr-text);
    font-size:.75rem;
}

.pqr-upload-box span{
    color:var(--pqr-muted);
    font-size:.63rem;
}

.pqr-upload-box input{
    display:none;
}

.pqr-evidence-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:12px 0;
}

.pqr-evidence-item{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:42px;
    padding:8px 11px;
    border:1px solid var(--pqr-border);
    border-radius:9px;
    background:#F9FBFE;
}

.pqr-evidence-item i{
    color:var(--pqr-primary);
}

.pqr-evidence-item span{
    color:var(--pqr-text-soft);
    font-size:.65rem;
}

/*==========================================================
    CONFIRMACIONES
==========================================================*/

.pqr-confirmations{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.pqr-confirmation-option{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px;
    border:1px solid var(--pqr-border);
    border-radius:10px;
    background:#F9FBFE;
    color:var(--pqr-text-soft);
    font-size:.67rem;
    line-height:1.5;
    cursor:pointer;
}

.pqr-confirmation-option input{
    flex:0 0 auto;
    width:16px;
    height:16px;
    margin:2px 0 0;
    accent-color:var(--pqr-primary);
}

/*==========================================================
    ENVÍO
==========================================================*/

.pqr-submit-section{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
    padding:21px 24px;
    border:1px solid #CFE0F5;
    border-radius:15px;
    background:#F3F8FF;
}

.pqr-submit-info{
    display:flex;
    align-items:flex-start;
    gap:10px;
    max-width:650px;
}

.pqr-submit-info i{
    margin-top:3px;
    color:var(--pqr-primary);
    font-size:.9rem;
}

.pqr-submit-info p{
    margin:0;
    color:var(--pqr-text-soft);
    font-size:.67rem;
    line-height:1.55;
}

.pqr-submit-button{
    min-width:170px;
}

/*==========================================================
    MODALES
==========================================================*/

.pqr-modal{
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.pqr-modal[hidden]{
    display:none;
}

.pqr-modal-overlay{
    position:absolute;
    inset:0;
    background:rgba(16,28,48,.62);
    backdrop-filter:blur(4px);
}

.pqr-modal-window{
    position:relative;
    z-index:1;
    width:min(520px,100%);
    max-height:92vh;
    overflow-y:auto;
    padding:30px;
    border-radius:20px;
    background:#FFFFFF;
    box-shadow:0 30px 70px rgba(12,31,58,.25);
    text-align:center;
}

.pqr-confirmation-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    margin:0 auto 16px;
    border-radius:50%;
    background:#EAF9F0;
    color:var(--pqr-success);
    font-size:1.45rem;
}

.pqr-modal-window h2{
    margin:0 0 8px;
    color:var(--pqr-text);
    font-size:1.25rem;
    line-height:1.3;
    font-weight:800;
}

.pqr-modal-window > p{
    margin:0 auto 18px;
    max-width:410px;
    color:var(--pqr-muted);
    font-size:.7rem;
    line-height:1.6;
}

.pqr-tracking-code{
    margin:16px 0 10px;
    padding:16px;
    border:1px solid #CFE0F5;
    border-radius:12px;
    background:var(--pqr-primary-light);
}

.pqr-tracking-code span,
.pqr-confirmation-date span{
    display:block;
    margin-bottom:6px;
    color:var(--pqr-muted);
    font-size:.61rem;
}

.pqr-tracking-code strong{
    display:block;
    color:var(--pqr-primary);
    font-size:1rem;
    letter-spacing:.04em;
}

.pqr-confirmation-date{
    margin-bottom:20px;
}

.pqr-confirmation-date strong{
    color:var(--pqr-text);
    font-size:.72rem;
}

.pqr-confirmation-actions{
    display:flex;
    justify-content:center;
    gap:9px;
    flex-wrap:wrap;
}

.modal-close{
    position:absolute;
    top:15px;
    right:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:0;
    border:0;
    border-radius:9px;
    background:#F6F8FB;
    color:#66758A;
    cursor:pointer;
}

.modal-close:hover{
    background:var(--pqr-primary-light);
    color:var(--pqr-primary);
}

/*==========================================================
    ESTADO PQR
==========================================================*/

.pqr-status-window{
    text-align:left;
}

.pqr-status-window > .section-tag,
.pqr-status-window > h2,
.pqr-status-window > p{
    display:block;
}

.pqr-status-window > .primary-button{
    width:100%;
    margin-top:14px;
}

.pqr-status-result{
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid var(--pqr-border);
}

.pqr-status-result[hidden]{
    display:none;
}

.pqr-status-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:18px;
    padding:13px;
    border-radius:10px;
    background:#F9FBFE;
}

.pqr-status-header span{
    color:var(--pqr-muted);
    font-size:.65rem;
}

.pqr-status-header strong{
    color:var(--pqr-success);
    font-size:.72rem;
}

.pqr-timeline{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:16px;
    padding-left:8px;
}

.pqr-timeline::before{
    position:absolute;
    top:9px;
    bottom:9px;
    left:17px;
    width:1px;
    background:#DCE5F0;
    content:"";
}

.pqr-timeline-item{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.pqr-timeline-item > i{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 20px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#EEF1F5;
    color:#8A97A8;
    font-size:.58rem;
}

.pqr-timeline-item.active > i{
    background:var(--pqr-primary-light);
    color:var(--pqr-primary);
}

.pqr-timeline-item > div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.pqr-timeline-item strong{
    color:var(--pqr-text);
    font-size:.69rem;
}

.pqr-timeline-item span{
    color:var(--pqr-muted);
    font-size:.62rem;
    line-height:1.4;
}

/*==========================================================
    RESPONSIVE | 950
==========================================================*/

@media (max-width:950px){

    .pqr-intro{
        align-items:flex-start;
        flex-direction:column;
    }

    .pqr-intro-help{
        grid-template-columns:repeat(3,1fr);
        width:100%;
    }

}

/*==========================================================
    RESPONSIVE | 800
==========================================================*/

@media (max-width:800px){

    .pqr-page,
    .pqr-header{
        width:calc(100% - 36px);
    }

    .pqr-type-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .pqr-intro-help{
        grid-template-columns:1fr;
    }

}

/*==========================================================
    RESPONSIVE | 700
==========================================================*/

@media (max-width:700px){

    .pqr-page{
        width:calc(100% - 24px);
        padding-top:12px;
    }

    .pqr-header{
        top:10px;
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
        width:calc(100% - 24px);
        padding:16px 18px;
        border-radius:16px;
    }

    .pqr-header-actions{
        width:100%;
        justify-content:space-between;
    }

    .pqr-content{
        padding-top:166px;
    }

    .pqr-intro{
        padding:23px;
    }

    .pqr-card{
        padding:21px;
    }

    .pqr-fields-grid{
        grid-template-columns:1fr;
    }

    .pqr-submit-section{
        align-items:stretch;
        flex-direction:column;
    }

    .pqr-submit-button{
        width:100%;
    }

}

/*==========================================================
    RESPONSIVE | 520
==========================================================*/

@media (max-width:520px){

    .pqr-brand-icon{
        width:46px;
        height:46px;
        flex-basis:46px;
        border-radius:12px;
    }

    .pqr-brand h1{
        font-size:.98rem;
    }

    .pqr-brand p{
        display:none;
    }

    .pqr-header-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .pqr-back,
    .pqr-public-status{
        width:100%;
    }

    .pqr-content{
        padding-top:184px;
    }

    .pqr-type-grid{
        grid-template-columns:1fr;
    }

    .pqr-mini-map{
        height:220px;
    }

    .inline-search-box{
        grid-template-columns:1fr;
    }

    .pqr-location-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .pqr-location-actions .secondary-button{
        width:100%;
    }

    .pqr-confirmation-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .pqr-confirmation-actions .primary-button,
    .pqr-confirmation-actions .secondary-button{
        width:100%;
    }

    .pqr-modal{
        padding:10px;
    }

    .pqr-modal-window{
        padding:25px 19px;
        border-radius:17px;
    }

}

/*==========================================================
    RESPONSIVE | 400
==========================================================*/

@media (max-width:400px){

    .pqr-page{
        width:calc(100% - 16px);
    }

    .pqr-content{
        padding-top:190px;
    }

    .pqr-card{
        padding:18px;
    }

}