/* Pantallas del portal (sobre estilos.css, el estilo de la casa). */
.centro { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.acceso { width: 100%; max-width: 400px; padding: 32px 28px; display: grid; gap: 18px; }
.acceso header { display: grid; gap: 10px; }
.acceso .marca { width: 40px; height: 40px; }
.acceso form { display: grid; gap: 14px; }
.aviso { padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.aviso.ok { background: var(--ok-wash); color: var(--ok); }
.aviso.info { background: var(--primario-wash); color: var(--ink-soft); }

.barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--papel); border-bottom: 1px solid var(--line); }
.barra .marca { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.barra .marca img { width: 28px; height: 28px; }
.barra .quien { display: flex; align-items: center; gap: 10px; min-width: 0; }
.barra .quien span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main.contenido { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; display: grid; gap: 18px; }
.seccion { padding: 22px; display: grid; gap: 14px; }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; flex-wrap: wrap; }
.lista .titulo { font-weight: 600; }
.fila-form { display: grid; grid-template-columns: 1fr 180px auto; gap: 10px; align-items: end; }
@media (max-width: 640px) { .fila-form { grid-template-columns: 1fr; } }