/* ============================================================
   Estilos de las pantallas nuevas (avisos, mi registro, panel).
   Usa las variables definidas en style.css.
   ============================================================ */

.encabezado-pagina p {
    color: aliceblue;
}

.texto-centro {
    text-align: center;
}

.texto-centro a {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
}

.nota {
    margin: 0.75rem 0 0;
    color: var(--texto-suave);
    font-size: 0.9rem;
}

/* ---------- Avisos ---------- */
.aviso {
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--panel);
}

.aviso h2,
.aviso h3 {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    color: var(--azul);
}

.aviso p {
    margin: 0.25rem 0;
}

.aviso.error {
    background: #fdecee;
    border-color: #e5a3ab;
}

.aviso.ok {
    background: #e9f6ec;
    border-color: #9fd0aa;
}

.aviso.alerta {
    background: #fff6df;
    border-color: #e6c76b;
}

.caja-folio {
    text-align: center;
}

.folio-valor {
    margin: 0.25rem 0 0.5rem !important;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--guinda);
}

/* ---------- Botones y acciones ---------- */
.boton.peligro {
    background: #b3261e;
}

.boton.peligro:hover {
    background: #8c1d18;
}

.acciones-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.acciones .boton + .boton,
.acciones .boton.secundario {
    margin-left: 0.5rem;
}

.casilla {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-weight: 600;
}

.zona-peligro {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 2px solid var(--borde);
}

/* ---------- Mi registro / detalle ---------- */
.mi-registro {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.mi-registro img,
.foto-actual {
    width: 160px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 3px solid var(--azul);
    border-radius: 8px;
    background: #fff;
}

.datos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

.datos dt {
    font-weight: 700;
}

.datos dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.campo-solo-lectura input[readonly] {
    background: #eee !important;
    color: var(--texto-suave);
}

/* ---------- Pie provisional ---------- */
.pie-sitio {
    margin-top: 2rem;
    padding: 1rem;
    text-align: center;
    color: #fff;
    background: rgba(29, 59, 115, 0.9);
}

.pie-sitio p {
    margin: 0;
}

/* ---------- Panel de administración ---------- */
.admin-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: var(--azul);
    color: #fff;
}

.admin-barra a {
    margin-left: 1rem;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.admin-barra a:hover {
    text-decoration: underline;
}

.panel-chico {
    max-width: 420px;
    margin: 0 auto;
}

.estadisticas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.estadistica {
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 10px;
}

.estadistica strong {
    display: block;
    font-size: 1.7rem;
    color: var(--azul);
}

.buscador {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.buscador input,
.buscador select {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--campo-borde);
    border-radius: 6px;
    font: inherit;
}

.tabla-envoltura {
    overflow-x: auto;
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.9rem;
}

.tabla th,
.tabla td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--borde);
    text-align: left;
    white-space: nowrap;
}

.tabla th {
    background: var(--panel);
    color: var(--azul);
}

.paginas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.paginas a,
.paginas span {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--borde);
    border-radius: 6px;
    background: #fff;
    color: var(--azul);
    text-decoration: none;
}

.paginas .actual {
    background: var(--azul);
    color: #fff;
}

@media screen and (max-width: 700px) {
    .mi-registro {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .datos {
        width: 100%;
    }
}