/* Estilos del módulo de credenciales INE.
   Archivo aparte porque el proyecto prohíbe estilos inline en Blade. */

/* El acento tiñe la franja lateral y el icono de cada indicador. */
.ine-card-total  { --acento: #7b1e3a; }
.ine-card-hoy    { --acento: #246257; }
.ine-card-semana { --acento: #403e68; }
.ine-card-alerta { --acento: #f3aa2d; }

/* Resalta el renglón cuando CURP y clave de elector no son coherentes. */
.ine-fila-advertencia > td {
    background-color: #fff8e6;
    box-shadow: inset 3px 0 0 var(--naranja);
}

.ine-badge-modelo {
    background-color: #eaf1fb;
    color: #2f5aa8;
}

/* Campo que el OCR marcó como no validado: el revisor debe verificarlo. */
.ine-campo-error {
    background-color: #ffe9e9;
    border-left: 3px solid var(--rojo);
    border-radius: 0 6px 6px 0;
    padding-left: 6px;
}

.ine-detalle dt {
    font-size: 0.78rem;
    font-weight: 600;
    padding-top: 6px;
}

.ine-detalle dd {
    font-size: 0.88rem;
    padding-top: 6px;
    margin-bottom: 4px;
    word-break: break-word;
}

.ine-imagen {
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    max-height: 220px;
    width: 100%;
    object-fit: contain;
    background-color: #fafafa;
}

/* Marcador cuando el registro llegó sin fotografías adjuntas. */
.ine-sin-imagen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 160px;
    border: 1px dashed var(--linea);
    border-radius: var(--radio-sm);
    color: #9aa1ad;
    background-color: #fbfbfc;
}

.ine-sin-imagen i {
    font-size: 1.6rem;
}

.ine-meta {
    background-color: #fbfbfc;
    border: 1px solid var(--linea);
    border-radius: var(--radio-sm);
    padding: 10px 12px;
    line-height: 1.7;
    word-break: break-all;
}

.ine-panel code {
    font-size: 0.82rem;
    color: var(--azul);
    background-color: #f4f4f8;
    border-radius: 5px;
    padding: 1px 5px;
}

/* ---------------------------------------------------------------------------
   Editor de credencial: la imagen enderezada a un lado y los campos al otro.
   El recuadro sigue al campo enfocado (ver public/js/ine-editor.js).
   --------------------------------------------------------------------------- */

.ine-editor-modal .modal-body {
    background-color: var(--gris-fondo);
}

.ine-lienzo-caja {
    position: sticky;
    top: 0;
}

.ine-lienzo {
    position: relative;
    line-height: 0;
    border-radius: var(--radio-sm);
    overflow: hidden;
    box-shadow: var(--sombra);
    background-color: #fff;
}

.ine-lienzo-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Los recuadros existen todos a la vez; solo el activo se ve.
   Mantenerlos en el DOM evita repintar la imagen al saltar de campo. */
.ine-caja {
    position: absolute;
    border: 2px solid transparent;
    border-radius: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transicion), box-shadow var(--transicion);
}

.ine-caja.esta-activa {
    opacity: 1;
    border-color: var(--dorado);
    background-color: rgba(199, 155, 102, 0.18);
    /* La sombra exterior oscurece el resto de la credencial y deja el dato
       recortado ópticamente, sin tener que recortar la imagen de verdad. */
    box-shadow: 0 0 0 9999px rgba(23, 12, 17, 0.45);
}

.ine-lienzo-pie {
    margin: 8px 2px 0;
    font-size: 0.76rem;
    color: var(--tinta-suave);
}

.ine-lienzo-aviso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 180px;
    padding: 20px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--tinta-suave);
    background-color: var(--superficie);
    border: 1px dashed var(--linea);
    border-radius: var(--radio-sm);
}

.ine-editor-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

/* Los campos largos ocupan el renglón completo. */
.ine-editor-campo:has(textarea) {
    grid-column: 1 / -1;
}

@media (max-width: 575.98px) {
    .ine-editor-campos {
        grid-template-columns: 1fr;
    }
}

.ine-editor-campo .form-label {
    margin-bottom: 2px;
}

/* Quien corrige debe saber, antes de tocar, cuáles se le van a señalar. */
.ine-editor-campo.es-senalable .form-label i {
    color: var(--dorado);
    font-size: 0.72rem;
}

.ine-editor-campo:focus-within .form-label {
    color: var(--guinda);
    font-weight: 600;
}