/* Estética moderna PQRS */

:root{
    --pqrs-bg: #0b2a3a;
    --pqrs-bg2: #0f3b52;
    --pqrs-card: rgba(255,255,255,.10);
    --pqrs-border: rgba(255,255,255,.18);
    --pqrs-text: #0b1f2a;
    --pqrs-muted: rgba(255,255,255,.78);
}

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 16px;
    line-height: 1.55;
    color: var(--pqrs-text);
    background: #f6f8fb;
}

.pqrs-hero{
    background: radial-gradient(1200px 500px at 10% 10%, rgba(255,255,255,.18), transparent 60%),
                linear-gradient(135deg, var(--pqrs-bg), var(--pqrs-bg2));
    color: #fff;
}

.pqrs-logo{
    height: 60px;
    width: auto;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.22));
    background-color: #fff;
    border-radius: 5px;
    padding: 5px;
}

.pqrs-brand{
    font-weight: 700;
    letter-spacing: .3px;
}

.pqrs-subtitle{
    font-size: .95rem;
    opacity: .9;
}

.pqrs-title{
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}

.pqrs-lead{
    color: var(--pqrs-muted);
    max-width: 62ch;
}

.pqrs-card{
    border: 1px solid var(--pqrs-border);
    background: var(--pqrs-card);
    backdrop-filter: blur(8px);
    border-radius: 14px;
}

.pqrs-badge{
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.20);
}

.pqrs-kpis{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.pqrs-kpi{
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    padding: 12px 12px;
    background: rgba(0,0,0,.12);
}
.pqrs-kpi-label{ font-size: .8rem; opacity: .9; }
.pqrs-kpi-value{ font-weight: 700; }
.pqrs-kpi-help{ font-size: .8rem; opacity: .9; }

.pqrs-linkbtn{
    border-color: rgba(255,255,255,.35) !important;
    color: #fff !important;
}

.pqrs-accordion .accordion-item{
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: #fff;
}
.pqrs-accordion .accordion-button{
    background: rgba(255,255,255,.08);
    color: #fff;
}
.pqrs-accordion .accordion-button:not(.collapsed){
    background: rgba(255,255,255,.12);
    color: #fff;
}
.pqrs-accordion .accordion-button::after{
    filter: invert(1);
}
.pqrs-accordion .accordion-body{
    color: rgba(255,255,255,.92);
}
.pqrs-accordion a{
    color: #e7f4ff;
    text-decoration: underline;
}

.pqrs-list{
    padding-left: 1.1rem;
}
.pqrs-list li{ margin: .35rem 0; }

.pqrs-admin{
    max-width: 1100px;
}
.pqrs-admin-header{
    margin-bottom: 12px;
}
.pqrs-tablewrap{
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e7edf5;
    box-shadow: 0 10px 30px rgba(11,31,42,.06);
    padding: 12px;
}
/* Estilos para el formulario de Editor (ajusta si es necesario,
   pero en general, los estilos por defecto de Editor + Bootstrap 5 deberían ser suficientes) */

/*Data tables editor lightbos responsive*/

div.DTED_Lightbox_Wrapper {
                left: 0;          /*Ajuste en pantallas pequeñas*/
                margin-left: 0 !important;  /*Ajuste en pantallas pequeñas*/
                width: 100% !important;      /*Ajuste en pantallas pequeñas*/
            }
/*Inputs del formulario*/
div.DTE_Body div.DTE_Body_Content div.DTE_Field > div.DTE_Field_Input,
div.DTE_Body div.DTE_Body_Content div.DTE_Field > label
 {
    float: none;  /* Resetear floats en pantallas pequeñas */
    width: 100% !important; /* Ancho completo en móviles */
    text-align: left;
}

/* Media queries (ajusta según tus necesidades) */
@media (min-width: 768px) {
/*Estilos del formulario en pantallas grandes*/
    div.DTE_Body div.DTE_Body_Content div.DTE_Field > div.DTE_Field_Input {
        float: right;
        width: 75% !important;
    }

    div.DTE_Body div.DTE_Body_Content div.DTE_Field > label {
        float: left;
        width: 25% !important;
        padding-top: 6px;
    }

    /*Estilos del lightbos en pantallas grandes*/
     div.DTED_Lightbox_Wrapper {
        left: 50%;          /*Ajuste en pantallas pequeñas*/
        margin-left: -440px !important;  /*Ajuste en pantallas pequeñas*/
        width: 880px !important;      /*Ajuste en pantallas pequeñas*/
    }
    .pqrs-kpis{ grid-template-columns: 1fr 1fr; }
}

div.DTE_Body div.DTE_Body_Content div.DTE_Field {
	padding: 5px 5%;
	border: 1px solid transparent;
}

div.DTE_Field.DTE_Field_Type_textarea.full.block > div.DTE_Field_Input{
    width: 100%;
}

/* --- Formulario (Editor) con estilo consistente --- */
div.DTED_Lightbox_Wrapper{
    padding: 0 !important;
}

div.DTED_Lightbox_Container{
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,.25);
    border: 1px solid rgba(15, 59, 82, .22);
}

div.DTE_Header{
    background: linear-gradient(135deg, var(--pqrs-bg), var(--pqrs-bg2));
    color: #fff;
    padding: 16px 18px !important;
}

div.DTE_Header_Content{
    font-weight: 800;
    letter-spacing: -0.01em;
}

div.DTE_Body{
    background: #fff;
}

div.DTE_Body div.DTE_Body_Content{
    padding: 2px 0;
}

div.DTE_Body div.DTE_Body_Content div.DTE_Field{
    padding: 6px 5%;
    border: 0;
}

div.DTE_Body div.DTE_Body_Content div.DTE_Field:hover{
    background: #f7fafc;
    border-radius: 12px;
}

div.DTE_Body div.DTE_Body_Content div.DTE_Field > label{
    font-weight: 700;
    color: #173445;
    margin-bottom: 4px;
}

div.DTE_Field_InputControl input,
div.DTE_Field_InputControl textarea,
div.DTE_Field_InputControl select{
    border-radius: 12px !important;
    border: 1px solid #d8e3ee !important;
    padding: 8px 10px !important;
    outline: none;
    box-shadow: none !important;
}

div.DTE_Field_InputControl textarea{
    min-height: 96px;
    resize: vertical;
}

/* Hacer "full block" real (sin columnas) */
div.DTE_Body div.DTE_Body_Content div.DTE_Field.full.block > label,
div.DTE_Body div.DTE_Body_Content div.DTE_Field.full.block > div.DTE_Field_Input,
div.DTE_Body div.DTE_Body_Content div.DTE_Field.full > label,
div.DTE_Body div.DTE_Body_Content div.DTE_Field.full > div.DTE_Field_Input{
    float: none !important;
    width: 100% !important;
}

div.DTE_Field_InputControl input:focus,
div.DTE_Field_InputControl textarea:focus,
div.DTE_Field_InputControl select:focus{
    border-color: rgba(15, 59, 82, .55) !important;
    box-shadow: 0 0 0 4px rgba(15, 59, 82, .12) !important;
}

div.DTE_Field_StateError div.DTE_Field_InputControl input,
div.DTE_Field_StateError div.DTE_Field_InputControl textarea,
div.DTE_Field_StateError div.DTE_Field_InputControl select{
    border-color: rgba(220, 53, 69, .65) !important;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, .10) !important;
}

div.DTE_Footer{
    background: #f7fafc;
    border-top: 1px solid #e6eef6;
    padding: 10px 14px !important;
}

div.DTE_Form_Buttons button{
    border-radius: 12px !important;
    padding: 9px 14px !important;
    font-weight: 700;
}

div.DTE_Form_Buttons button.btn-success{
    background: #0f3b52 !important;
    border-color: #0f3b52 !important;
    color: #ffffff !important;
}

div.DTE_Form_Buttons button.btn-success:hover{
    filter: brightness(.95);
}

div.DTE_Form_Buttons button.btn-secondary{
    color: #0b1f2a !important;
    background: #e9f1f7 !important;
    border-color: #d7e6f2 !important;
}

/* Compactar el mensaje superior del Editor */
div.DTE_Form_Info{
    margin: 10px 14px 0 14px !important;
}

div.DTE div.DTE_Footer {
    height: 60px !important;
}