/* =====================================================================
   SOMOS2026 · Registro de Personeros de Local de Votación
   Capa de diseño "Slate Minimalista" sobre Bootstrap 5.3
   ===================================================================== */

:root {
    --tinta:        #14387b;
    --tinta-suave:  #2c5aa0;
    --gris:         #64748b;
    --linea:        #e2e8f0;
    --fondo:        #f1f5f9;
    --papel:        #ffffff;
    --acento:       #e30613;
    --acento-claro: #fdecec;
    --exito:        #15803d;
    --aviso:        #b45309;
    --info:         #0369a1;
    --radio:        10px;
    --sombra:       0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px -12px rgba(15, 23, 42, .18);
}

* { -webkit-font-smoothing: antialiased; }

body {
    background: var(--fondo);
    color: var(--tinta);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: .95rem;
    line-height: 1.55;
}

h1, h2, h3, h4, h5 { font-weight: 650; letter-spacing: -.015em; color: var(--tinta); }

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

.numero-tabular { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Encabezado público
   --------------------------------------------------------------------- */
.barra-institucional {
    background: var(--tinta);
    color: #e2e8f0;
    font-size: .8rem;
    padding: .4rem 0;
    letter-spacing: .01em;
}

.cabecera {
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
}

.cabecera .marca {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 0;
}

.emblema {
    width: 46px; height: 46px;
    flex-shrink: 0;
    display: grid; place-items: center;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: 4px;
}

.emblema-logo { display: block; width: 100%; height: 100%; object-fit: contain; }

.cabecera .marca h1 { font-size: 1.05rem; margin: 0; line-height: 1.2; }
.cabecera .marca p  { font-size: .8rem; margin: 0; color: var(--gris); }

/* ---------------------------------------------------------------------
   Tarjetas y paneles
   --------------------------------------------------------------------- */
.panel {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.panel-cabecera {
    padding: .95rem 1.15rem;
    border-bottom: 1px solid var(--linea);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.panel-cabecera h2 { font-size: 1rem; margin: 0; }
.panel-cuerpo { padding: 1.15rem; }

/* Pasos del formulario: el registro sí es una secuencia */
.paso { border-left: 2px solid var(--linea); padding-left: 1.4rem; position: relative; padding-bottom: 1.6rem; }
.paso:last-child { border-left-color: transparent; padding-bottom: 0; }
.paso .marcador {
    position: absolute; left: -15px; top: 0;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--papel); border: 2px solid var(--linea);
    display: grid; place-items: center;
    font-size: .8rem; font-weight: 700; color: var(--gris);
}
.paso.completo .marcador { border-color: var(--exito); color: var(--exito); }
.paso.completo { border-left-color: var(--exito); }
.paso h3 { font-size: .95rem; margin: .15rem 0 .9rem; }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
.form-label { font-size: .82rem; font-weight: 600; color: var(--tinta-suave); margin-bottom: .3rem; }
.form-control, .form-select {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .92rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--tinta-suave);
    box-shadow: 0 0 0 3px rgba(51, 65, 85, .12);
}
.form-control:disabled, .form-select:disabled { background: #f8fafc; }
.form-text { font-size: .78rem; color: var(--gris); }

.btn { border-radius: 8px; font-weight: 600; font-size: .9rem; padding: .55rem 1.1rem; }
.btn-principal { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn-principal:hover { background: #991b1b; border-color: #991b1b; color: #fff; }
.btn-tinta { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.btn-tinta:hover { background: #1e293b; color: #fff; }
.btn-contorno { background: transparent; border: 1px solid #cbd5e1; color: var(--tinta-suave); }
.btn-contorno:hover { background: #f8fafc; color: var(--tinta); }

/* Resultado de validación de DNI */
.ficha-identidad {
    border: 1px solid var(--linea);
    border-left: 3px solid var(--exito);
    background: #f8fafc;
    border-radius: 8px;
    padding: .8rem 1rem;
}
.ficha-identidad .nombre { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.ficha-identidad.error { border-left-color: var(--acento); background: var(--acento-claro); }

/* Selector de local */
.lista-locales { max-height: 320px; overflow-y: auto; border: 1px solid var(--linea); border-radius: 8px; }
.opcion-local {
    display: block; width: 100%; text-align: left;
    padding: .7rem .9rem; border: 0; border-bottom: 1px solid var(--linea);
    background: var(--papel); cursor: pointer;
}
.opcion-local:last-child { border-bottom: 0; }
.opcion-local:hover { background: #f8fafc; }
.opcion-local.seleccionado { background: #eff6ff; box-shadow: inset 3px 0 0 var(--info); }
.opcion-local .nombre-local { font-weight: 600; font-size: .9rem; }
.opcion-local .detalle-local { font-size: .78rem; color: var(--gris); }
.opcion-local.ocupado { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------------
   Acceso / login
   --------------------------------------------------------------------- */
.fondo-acceso {
    min-height: 100vh;
    background: linear-gradient(160deg, var(--tinta) 0%, #0c2757 100%);
}

.emblema-acceso {
    width: 84px; height: 84px;
    margin: 0 auto;
    display: grid; place-items: center;
    background: #fff;
    border-radius: 16px;
    padding: 10px;
    box-shadow: var(--sombra);
}

/* ---------------------------------------------------------------------
   Panel administrativo
   --------------------------------------------------------------------- */
.admin-shell { display: flex; min-height: 100vh; }

.lateral {
    width: 250px; flex-shrink: 0;
    background: var(--tinta);
    color: #cbd5e1;
    padding: 1.1rem .85rem;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.lateral .titulo-sistema { color: #fff; font-size: .95rem; font-weight: 700; margin-bottom: .1rem; }
.lateral .subtitulo-sistema { font-size: .75rem; color: #94a3b8; margin-bottom: 1.4rem; }
.lateral .grupo { font-size: .7rem; color: #64748b; margin: 1.2rem .6rem .4rem; font-weight: 700; }
.lateral a.enlace {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .7rem; border-radius: 8px;
    color: #cbd5e1; font-size: .88rem; margin-bottom: .15rem;
}
.lateral a.enlace:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.lateral a.enlace.active { background: var(--acento); color: #fff; font-weight: 600; }
.lateral .pie-usuario { border-top: 1px solid rgba(255,255,255,.12); margin-top: 1.4rem; padding-top: .9rem; font-size: .8rem; }

.contenido { flex: 1; min-width: 0; }
.contenido-cabecera {
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
    padding: .9rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.contenido-cabecera h1 { font-size: 1.15rem; margin: 0; }
.contenido-cuerpo { padding: 1.5rem; }

/* Indicadores */
.indicador { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; height: 100%; }
.indicador .etiqueta { font-size: .78rem; color: var(--gris); margin-bottom: .2rem; }
.indicador .cifra { font-size: 1.85rem; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.indicador .nota { font-size: .76rem; color: var(--gris); margin-top: .25rem; }
.indicador.acento { border-top: 3px solid var(--acento); }
.indicador.exito  { border-top: 3px solid var(--exito); }
.indicador.aviso  { border-top: 3px solid var(--aviso); }
.indicador.info   { border-top: 3px solid var(--info); }

/* Tablas */
.tabla-datos { font-size: .86rem; margin: 0; }
.tabla-datos thead th {
    background: #f8fafc; color: var(--tinta-suave);
    font-size: .76rem; font-weight: 700;
    border-bottom: 1px solid var(--linea);
    padding: .6rem .75rem; white-space: nowrap;
}
.tabla-datos tbody td { padding: .6rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.tabla-datos tbody tr:hover { background: #f8fafc; }
.tabla-datos .dni { font-variant-numeric: tabular-nums; font-weight: 600; }
.tabla-datos .celda-observacion { min-width: 220px; max-width: 320px; white-space: normal; color: var(--aviso); }

.etiqueta-estado {
    display: inline-block; padding: .18rem .55rem;
    border-radius: 999px; font-size: .72rem; font-weight: 700;
    border: 1px solid transparent;
}
.estado-ACREDITADO { background: #dcfce7; color: #166534; }
.estado-PENDIENTE  { background: #fef3c7; color: #92400e; }
.estado-OBSERVADO  { background: #e0f2fe; color: #075985; }
.estado-ANULADO    { background: #e2e8f0; color: #475569; }

.barra-progreso { height: 8px; background: var(--linea); border-radius: 999px; overflow: hidden; }
.barra-progreso span { display: block; height: 100%; background: var(--exito); }

/* Gráfico de barras simple */
.barras { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.barras .columna { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.barras .columna i { display: block; width: 100%; background: var(--tinta-suave); border-radius: 3px 3px 0 0; min-height: 2px; }
.barras .columna small { font-size: .65rem; color: var(--gris); }

/* ---------------------------------------------------------------------
   Utilidades y responsive
   --------------------------------------------------------------------- */
.dato-mudo { color: var(--gris); }
.linea-superior { border-top: 1px solid var(--linea); }

@media (max-width: 992px) {
    .admin-shell { flex-direction: column; }
    .lateral { width: 100%; height: auto; position: static; }
    .lateral .pie-usuario { margin-top: .8rem; }
    .contenido-cuerpo { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

@media print {
    .lateral, .contenido-cabecera, .no-imprimir { display: none !important; }
    body { background: #fff; }
    .panel { box-shadow: none; border-color: #cbd5e1; }
}