/* Estilos visuales exclusivos del formulario de Denuncia Electoral
   Scope estricto: #form_new_queja_reclamo
   Nota: Ajusta los tokens (variables CSS) cuando recibamos el PDF de referencia. */

#form_new_queja_reclamo {
    /* Tokens iniciales (placeholder hasta recibir PDF) */
    --e-color-primary: #063853;
    --e-color-accent: #50bcb6;
    --e-color-text: #222;
    --e-color-muted: #666;
    --e-color-border: #cfd8dc;
    --e-color-danger: #c62828;
    --e-color-success: #2e7d32;
    --e-bg-field: #fff;
    --e-bg-legend: #f8fafc;
    --e-radius: 6px;
    --e-shadow: 0 1px 2px rgba(0,0,0,.06);
    --e-spacing: 8px;

    font-size: 16px;
    line-height: 1.5;
    color: var(--e-color-text);
}

/* Formulario de Login */

.div-logueo-usuario-entidad h1{
    text-align: center;
    color: #063853;
    font-size: 30px;
}

.div-logueo-usuario-entidad .form-logueo-usuario-entidad{
    width: 100%;
    max-width: 400px;
    margin: auto;
}

/* Anular estilos de la tabla para un diseño moderno */
.div-logueo-usuario-entidad .table-logueo-usuario-entidad,
.div-logueo-usuario-entidad .table-logueo-usuario-entidad tbody,
.div-logueo-usuario-entidad .table-logueo-usuario-entidad tr {
    display: block;
}

.div-logueo-usuario-entidad .table-logueo-usuario-entidad td {
    display: block;
    padding: 0;
    border: none;
}

/* Estilo para las etiquetas (Usuario, Contraseña) */
.div-logueo-usuario-entidad .table-logueo-usuario-entidad b {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
}

/* Contenedor para cada campo de entrada para posicionar íconos */
.div-logueo-usuario-entidad .table-logueo-usuario-entidad tr:nth-child(1) td:nth-child(2),
.div-logueo-usuario-entidad .table-logueo-usuario-entidad tr:nth-child(2) td:nth-child(2) {
    position: relative;
    margin-bottom: 20px;
}

/* Estilos para los campos de texto y contraseña */
.div-logueo-usuario-entidad #user,
.div-logueo-usuario-entidad input[name="password"] { /* Selector de contraseña actualizado */
    width: 100%;
    height: 32px;
    padding: 12px 15px 12px 40px; /* Espacio a la izquierda para el ícono */
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.div-logueo-usuario-entidad #user:focus,
.div-logueo-usuario-entidad input[name="password"]:focus { /* Selector de contraseña actualizado */
    outline: none;
    border-color: #063853;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* Añadir íconos de FontAwesome usando pseudo-elementos */
.div-logueo-usuario-entidad .table-logueo-usuario-entidad tr:nth-child(1) td:nth-child(2)::before,
.div-logueo-usuario-entidad .table-logueo-usuario-entidad tr:nth-child(2) td:nth-child(2)::before {
    font-family: "Font Awesome 5 Free";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    transition: color 0.3s;
    /* Asegura que el ícono esté por encima del campo de entrada si hay superposición */
    z-index: 2;
}

.div-logueo-usuario-entidad .table-logueo-usuario-entidad tr:nth-child(1) td:nth-child(2)::before {
    content: '\f007'; /* Icono de usuario */
}

.div-logueo-usuario-entidad .table-logueo-usuario-entidad tr:nth-child(2) td:nth-child(2)::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23aaa' d='M256 160L256 224L384 224L384 160C384 124.7 355.3 96 320 96C284.7 96 256 124.7 256 160zM192 224L192 160C192 89.3 249.3 32 320 32C390.7 32 448 89.3 448 160L448 224C483.3 224 512 252.7 512 288L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 288C128 252.7 156.7 224 192 224z'/%3E%3C/svg%3E");
    width: 22px;
    height: 22px;
    margin-left: -5px;
}

/* Cambiar color del ícono cuando el campo está en foco */
/* Se utiliza :focus-within en el TD padre para detectar el foco en el input hijo */
.div-logueo-usuario-entidad .table-logueo-usuario-entidad td:focus-within::before {
    color: #063853;
}

/* Celda que contiene el botón */
.div-logueo-usuario-entidad .table-logueo-usuario-entidad td[colspan="2"] {
    text-align: center;
    padding-top: 10px;
}

/* Estilo del botón de envío */
.div-logueo-usuario-entidad .autorizacion-content input[type="submit"] {
    width: unset;
    height: unset;
    color: #063853;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    background: rgb(255, 255, 255);
    border-width: 1px;
    border-style: solid;
    border-color: #063853;
    border-image: initial;
    padding: 10px 18px;
    border-radius: 15px;
    gap: 8px;
    text-decoration: none;
    transition: 0.3s;
}

.div-logueo-usuario-entidad .autorizacion-content input[type="submit"]:hover {
    background: #ffe605;
    color: #063853;
}

/* Final estilos de Login */

/* Tabla base del formulario */
#form_new_queja_reclamo table {
    width: 100%;
    border-collapse: separate;
    border-spacing: .5rem;
}
#form_new_queja_reclamo td,
#form_new_queja_reclamo th {
    vertical-align: top;
    padding: .25rem .5rem;
}

/* Fieldsets y t�tulos */
#form_new_queja_reclamo fieldset {
    border: 1px solid var(--e-color-border);
    border-radius: var(--e-radius);
    background: #fff;
    padding: 6px 10px;
}
#form_new_queja_reclamo legend {
    background: var(--e-bg-legend);
    border: 1px solid var(--e-color-border);
    border-radius: var(--e-radius);
    padding: 6px 10px;
}
#form_new_queja_reclamo legend b {
    font-size: 1.05rem;
}

/* Etiquetas de requerido y textos gu�a */
#form_new_queja_reclamo .campo-obligatorio {
    color: var(--e-color-danger);
    font-weight: 600;
}
#form_new_queja_reclamo .texto-adjunto {
    font-size: .95rem;
    color: var(--e-color-muted);
}

/* Inputs, selects y textarea */
#form_new_queja_reclamo input[type="text"],
#form_new_queja_reclamo input[type="number"],
#form_new_queja_reclamo input[type="file"],
#form_new_queja_reclamo select,
#form_new_queja_reclamo textarea {
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--e-color-border);
    border-radius: var(--e-radius);
    background: var(--e-bg-field);
    box-shadow: var(--e-shadow);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#form_new_queja_reclamo input:focus,
#form_new_queja_reclamo select:focus,
#form_new_queja_reclamo textarea:focus {
    border-color: var(--e-color-primary);
    box-shadow: 0 0 0 2px rgba(10, 99, 184, .15);
}

/* Textarea de hechos */
#form_new_queja_reclamo textarea#rules {
    min-height: 180px;
    resize: vertical;
}
#form_new_queja_reclamo .char-counter {
    font-size: .85rem;
    color: var(--e-color-muted);
    margin-top: 4px;
}

/* Estados de validaci�n visual controlados por JS */
#form_new_queja_reclamo .is-error {
    border-color: var(--e-color-danger) !important;
    box-shadow: 0 0 0 2px rgba(198,40,40,.15) !important;
}
#form_new_queja_reclamo .is-ok {
    border-color: var(--e-color-success) !important;
}

/* Botones de apertura de modales */
#form_new_queja_reclamo #modal-implicado,
#form_new_queja_reclamo #modal-quejoso {
    display: inline-block;
    margin: 8px 0;
}

/* Ajustes de tabla en m�viles para mejorar visibilidad */
@media (max-width: 600px) {
    #form_new_queja_reclamo table { border-spacing: 0; }
    #form_new_queja_reclamo tr { display: block; margin-bottom: 12px; }
    #form_new_queja_reclamo td { display: block; width: 100% !important; padding: 6px 0; }
    #form_new_queja_reclamo td:first-child { font-weight: 600; margin-bottom: 4px; }
}

/* --- Overrides a�adidos para responsive, cabecera y colores de marca (aplican solo a #form_new_queja_reclamo) --- */

/* 0) Tokens de color basados en PDF (ajustables). Si nos entregan el PDF exacto, solo cambiamos estos valores. */
#form_new_queja_reclamo{
    /* Sugerencia actual (institucional): */
    --e-color-primary: #063853; /* Azul institucional (ajustable) */
    --e-color-accent: #50bcb6;  /* Verde-acento (ajustable) */
    --e-color-primary-900: #063853; /* tono m�s oscuro para cabeceras */
    --e-color-primary-100: #e6f0fb; /* tono claro de fondo */

    /* Contenedor responsive */
    box-sizing: border-box;
    width: 100%;
    max-width: 960px; /* desktop c�modo */
    margin-left: auto;
    margin-right: auto;
    padding: 12px;
}

/* 1) Cabecera/T�tulo (HtmlH1) mejorada visualmente */
#form_new_queja_reclamo h1 {
    color: #fff;
    background: linear-gradient(135deg, var(--e-color-primary), var(--e-color-primary-900));
    padding: 14px 16px;
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0,0,0,.08);
    font-size: clamp(1.25rem, 2.5vw, 1.8rem);
    line-height: 1.2;
    margin: 0 0 12px 0;
}

/* 2) Inputs fluidos y alturas razonables (evita hardcode de height) */
#form_new_queja_reclamo input[type="text"],
#form_new_queja_reclamo input[type="number"],
#form_new_queja_reclamo input[type="file"],
#form_new_queja_reclamo select,
#form_new_queja_reclamo textarea{
    min-height: 40px; /* altura c�moda sin fijar heights r�gidos */
}

/* Estilo de select con l�nea inferior y flecha personalizada */
#form_new_queja_reclamo select{
    border: none;
    border-bottom: 2px solid var(--e-color-border);
    border-radius: 0;
    background-color: var(--e-bg-field);
    padding: 8px 28px 8px 0; /* espacio para la flecha */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
      <path fill='%23084f91' d='M4 6l4 5 4-5z'/>\
    </svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px 14px;
    box-shadow: none; /* quitar sombra en select para estilo plano */
}
#form_new_queja_reclamo select:focus{
    outline: none;
    border-bottom-color: var(--e-color-primary);
    box-shadow: 0 1px 0 0 var(--e-color-primary);
}
/* Estados de validaci�n espec�ficos para select */
#form_new_queja_reclamo select.is-error{
    border-bottom-color: var(--e-color-danger) !important;
    box-shadow: none !important;
}
#form_new_queja_reclamo select.is-ok{
    border-bottom-color: var(--e-color-success) !important;
}

/* 3) Textarea: altura adaptable sin fijar height r�gido */
#form_new_queja_reclamo textarea#rules{
    height: auto;
    min-height: clamp(160px, 22vh, 300px);
}

/* 4) Fieldsets: realzar leyendas con colores de marca */
#form_new_queja_reclamo legend{
    background: linear-gradient(180deg, var(--e-bg-legend), #fff);
    border-color: var(--e-color-border);
}
#form_new_queja_reclamo legend b{ color: var(--e-color-primary-900); }

/* 5) Estados y elementos auxiliares con colores del PDF */
#form_new_queja_reclamo .char-counter{ color: var(--e-color-muted); }
#form_new_queja_reclamo .file-hint{ color: #444; }

/* 6) Botón de envío (sin cambiar lógica, solo estilos visuales genéricos) */
#form_new_queja_reclamo input[type="button"],
#form_new_queja_reclamo button[type="button"],
#form_new_queja_reclamo .btn-enviar,
#form_new_queja_reclamo .btn-continuar,
.content-electoral .btn-continuar,
.autorizacion-content .btn-continuar{
    width: unset;
    height: unset;
    background: #fff;
    color: #063853;
    border: 1px solid #063853;
    padding: 10px 18px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}
#form_new_queja_reclamo input[type="button"]:hover,
#form_new_queja_reclamo button[type="button"]:hover,
#form_new_queja_reclamo .btn-continuar:hover,
.content-electoral  .autorizacion-content .btn-continuar:hover{
    background: #ffe601;
}
.btn-continuar img{
    max-width: 30px;
}
#form_new_queja_reclamo .btn-continuar img,
.content-electoral .autorizacion-content .btn-continuar img {
    width: 50px;
    height: 50px;
    margin-left: 5px;
}

/* 7) Tabla responsiva ya definida: refinamos para tablet */
@media (max-width: 900px){
    #form_new_queja_reclamo{ max-width: 720px; }
    #form_new_queja_reclamo th {display: flex;}
}
@media (max-width: 600px){
    #form_new_queja_reclamo{ max-width: 100%; padding: 12px; }
    #form_new_queja_reclamo table{ border-spacing: 0; }
    #form_new_queja_reclamo tr{ display: block; margin-bottom: 12px; }
    #form_new_queja_reclamo td{ display: block; width: 100% !important; padding: 6px 0; }
    #form_new_queja_reclamo td:first-child{ font-weight: 600; margin-bottom: 4px; }
    /* #form_new_queja_reclamo {margin-top: 35px;} */
}
@media (min-width: 1200px){
    #form_new_queja_reclamo{ max-width: 1100px; }
}

/* 8) Accesibilidad de foco con colores de marca */
#form_new_queja_reclamo input:focus,
#form_new_queja_reclamo select:focus,
#form_new_queja_reclamo textarea:focus{
    border-color: var(--e-color-primary);
    box-shadow: 0 0 0 3px rgba(10, 99, 184, .15);
}

/* 9) Estados de validaci�n respetando la paleta */
#form_new_queja_reclamo .is-error{
    border-color: var(--e-color-danger) !important;
    box-shadow: 0 0 0 2px rgba(198,40,40,.18) !important;
}
#form_new_queja_reclamo .is-ok{
    border-color: var(--e-color-success) !important;
}




.bodyBg {
    background-image: url('/portal/images/elec_bg_paz_electoral.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
    background-color: #fff;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.headerElect{
    margin-top: 30px !important;
}

.logoPGNElec{
    float: right;
    width: 100%;
    min-height: 70px;
    max-width: 300px;
    margin-right: 20px;
    display: flex;
    align-items: flex-end;
}

.logoPGNElec img{
    width: 100%;
}

.tagHeader{
    position: absolute;
    background-color: #063853;
    color: #fff;
    text-align: center;
    padding: 15px 0 0 0;
    line-height: 1em;
    border-radius: 50px 50px 0 0;
    width: calc(100% - 30px);
    max-width: 300px;
    height: 135px;
}

#form_new_queja_reclamo{
    background-color: #fff;
    border: 6px solid #d8d8d8;
    border-radius: 50px;
    padding: 30px;
    margin-bottom: 50px;
}

.content-electoral{
    width: calc(100% - 60px);
    margin: 0 0 0 30px;
    background: #fff;
    border: 6px solid #d8d8d8;
    border-radius: 50px;
    padding: 30px !important;
}

.content-electoral h1{
    color: #063853;
}

.autorizacion-content{
    width: calc(100% - 60px);
    margin: 0 0 0 30px;
    background: #fff;
    border: 6px solid #d8d8d8;
    border-radius: 50px;
    padding: 30px !important;
}
.autorizacion-content h1{
    color: #063853;
}
.div-logueo-usuario-entidad{
    width: calc(100% - 60px);
    margin: 0 0 0 30px;
    background: #fff;
    border: 6px solid #d8d8d8;
    border-radius: 50px;
    padding: 30px !important;
}

@media (min-width: 1200px) {
    .tagHeader{
        margin: 10px 0 0 20px;
        font-size: 25px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .tagHeader{
        margin: 10px 0 0 -10px;
        font-size: 25px;
    }
    .content-electoral{
        margin: 0;
        width: 100%;
    }
    .div-logueo-usuario-entidad{
        margin: 0;
        width: 100%;
    }
    .autorizacion-content{
        margin: 0;
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .tagHeader{
        margin: 10px 0 0 -15px;
        font-size: 25px;
    }
    .content-electoral{
        margin: 0;
        width: 100%;
    }
    .div-logueo-usuario-entidad{
        margin: 0;
        width: 100%;
    }
    .autorizacion-content{
        margin: 0;
        width: 100%;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .tagHeader{
        margin: 10px 0 0 -15px;
        font-size: 18px;
    }
    .content-electoral{
        margin: 0;
        width: 100%;
    }
    .div-logueo-usuario-entidad{
        margin: 0;
        width: 100%;
    }
    .autorizacion-content{
        margin: 0;
        width: 100%;
    }

}
.content{
    top: 60px;
}
@media (max-width: 575px) {
    .tagHeader{
        margin: 10px 0 0 -15px;
        font-size: 18px;
        height: 60px;
    }
    .logoPGNElec{
        padding-bottom: 5px;
    }
    #divbox{
        max-width: 95% !important;
    }
    #divbox .drag-handle{
        padding: 5px;
        background-color: #063853;
    }
    #divbox .drag-contentarea{
        border-top: 1px solid #063853;
    }
    #divbox table b{
        font-weight: 400;
        color: #063853;
    }
    #divbox input, #divbox select{
        max-width: 200px !important;
        border: unset;
        border-bottom: 1px solid #cfd8dc;
    }
    #divbox input[type="button"]{
        margin-top: 5px;
        color: #063853;
        border: 2px solid #063853;
        border-radius: 12px;
        background: #fff;
    }
    .content-electoral{
        margin: 0;
        width: 100%;
    }
    .div-logueo-usuario-entidad{
        margin: 0;
        width: 100%;
    }
    .autorizacion-content{
        margin: 0;
        width: 100%;
    }
}

@media (max-width: 400px) {
    .tagHeader{
        font-size: 15px !important;
    }
    .logoPGNElec{
        padding-bottom: 8px;
    }
}

/* Contenedor para botón con imagen */
#form_new_queja_reclamo .btn-container,
.div-logueo-usuario-entidad .content-electoral .autorizacion-content .btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

/* Responsive para el botón continuar */
@media (max-width: 600px) {
    #form_new_queja_reclamo .btn-container,
    .div-logueo-usuario-entidad.content-electoral .autorizacion-content .btn-container {
        flex-direction: column;
        gap: 8px;
    }

    #form_new_queja_reclamo .btn-continuar,
    .div-logueo-usuario-entidad .content-electoral .autorizacion-content .btn-continuar {
        width: 100%;
        justify-content: center;
        padding: 14px 16px;
        font-size: 14px;
    }

    #form_new_queja_reclamo .btn-continuar img,
    .div-logueo-usuario-entidad .content-electoral .autorizacion-content .btn-continuar img {
        width: 30px;
        height: 30px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    #form_new_queja_reclamo .btn-continuar,
    .div-logueo-usuario-entidad .content-electoral .autorizacion-content .btn-continuar {
        font-size: 17px;
        padding: 13px 22px;
    }

    #form_new_queja_reclamo .btn-continuar img,
    .div-logueo-usuario-entidad .content-electoral .autorizacion-content .btn-continuar img {
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 1200px) {
    #form_new_queja_reclamo .btn-continuar,
    .div-logueo-usuario-entidad .content-electoral .autorizacion-content .btn-continuar {
        font-size: 18px;
        padding: 14px 24px;
    }
}