/* Diseño de Transparencia (admin-home-modern.css y admin-layout-modern.css) adaptado a Bastion.
   Sin CDN ni estilos en línea: la CSP es default-src 'self', así que la fuente y los iconos se sirven desde aquí. */
@font-face { font-family: "Open Sans"; src: url(/fonts/open-sans.woff2) format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
    --teal: #175f6c; --teal-hover: #1a7080; --teal-claro: #1d8090; --teal-oscuro: #134952; --teal-fondo: #e8f4f5;
    --lateral: #2c3e50; --lateral-2: #34495e; --fondo: #f5f7fa;
    --texto: #2c3e50; --texto-2: #5f6b73; --borde: #e0e6ed; --linea: #ecf0f1;
    --error: #a12b20; --error-fondo: #f8d7da; --error-borde: #f5c6cb;
    --ok: #155724; --ok-fondo: #d4edda; --ok-borde: #c3e6cb;
    --suave: all .3s cubic-bezier(.4, 0, .2, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--fondo); color: var(--texto);
       font: 400 15px/1.6 "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--teal); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--teal-hover); text-decoration: underline; }
:focus-visible { outline: 3px solid rgba(23,95,108,.4); outline-offset: 2px; }

/* ---------- Pantalla partida (entrar, segundo factor, altas, recuperación) ---------- */
.acceso { display: flex; }
.lateral { position: fixed; inset: 0 auto 0 0; width: 45%; padding: 3rem; display: flex; flex-direction: column;
           align-items: center; justify-content: center; overflow-y: auto; color: #fff; z-index: 10;
           background: linear-gradient(135deg, var(--lateral) 0%, var(--lateral-2) 100%); box-shadow: 4px 0 20px rgba(0,0,0,.15); }
.lateral-texto { max-width: 500px; width: 100%; padding: 2rem; text-align: center; }
.lateral-texto::after { content: ""; display: block; width: 80px; height: 3px; margin: 2rem auto 0; border-radius: 2px;
                        background: linear-gradient(90deg, var(--teal), var(--teal-claro)); animation: aparecer .6s ease-out .4s both; }
.logo { margin-bottom: 2.5rem; color: #5fc4d1; animation: bajar .6s ease-out; }
.logo svg { filter: drop-shadow(0 4px 12px rgba(0,0,0,.2)); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.logo svg:hover { transform: scale(1.05); }
.lateral-texto p { margin: 0 0 1rem; font-size: 1rem; color: rgba(255,255,255,.85); animation: subir .6s ease-out .3s both; }
.lateral-texto .lateral-titulo { margin-bottom: .75rem; font-size: 2rem; font-weight: 600; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.2);
                                 animation-delay: .1s; }
.lateral-texto .lateral-subtitulo { margin-bottom: 1.5rem; font-size: 1.5rem; color: rgba(255,255,255,.9); animation-delay: .2s; }
.lateral-texto .ens { display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem; padding: .4rem .9rem; border-radius: 999px;
                      font-size: .8rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); }
.lateral-texto .ens svg { color: #5fc4d1; }
.lateral-texto .version { margin: .75rem 0 0; }
.lateral-texto small { font-size: .85rem; color: rgba(255,255,255,.7); }
.lateral-pie { position: absolute; bottom: 1.25rem; left: 0; right: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .75rem; }
.lateral-pie a { color: rgba(255,255,255,.6); }
.lateral-pie a:hover { color: rgba(255,255,255,.9); }

.principal { margin-left: 45%; width: 55%; min-height: 100vh; padding: 3rem; display: flex; align-items: center; justify-content: center; }
.acceso main { width: 100%; max-width: 550px; padding: 3rem; background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.08);
               animation: entrar .6s ease-out .2s both; }
.acceso main:has(#codigos-recuperacion, .qr) { max-width: 620px; }
.acceso main::before { content: ""; display: block; width: 52px; height: 52px; margin: 0 auto 1.25rem; background: var(--teal);
                       -webkit-mask: url(/img/icono-escudo-usuario.svg) center / contain no-repeat; mask: url(/img/icono-escudo-usuario.svg) center / contain no-repeat; }
.acceso h1 { margin: 0 0 1.25rem; text-align: center; font-size: 1.75rem; font-weight: 600; line-height: 1.25; }

/* ---------- Panel (cuenta, consola, páginas legales) ---------- */
.panel { display: flex; flex-direction: column; }
.barra { position: sticky; top: 0; z-index: 10; height: 70px; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
         background: linear-gradient(135deg, var(--teal), var(--teal-hover)); box-shadow: 0 2px 8px rgba(23,95,108,.15); }
.marca { display: flex; align-items: center; gap: .6rem; color: #fff; font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.marca:hover { color: #fff; text-decoration: none; opacity: .9; }
.opciones { display: flex; align-items: center; gap: .5rem; }
.opciones a, .opciones button { display: inline-flex; align-items: center; height: auto; width: auto; margin: 0; padding: .5rem 1rem; border: 0; border-radius: 6px;
    background: rgba(255,255,255,.1); color: #fff; font: 600 .85rem "Open Sans", sans-serif; text-transform: none; letter-spacing: 0; box-shadow: none;
    backdrop-filter: blur(10px); cursor: pointer; transition: var(--suave); }
.opciones a:hover, .opciones button:hover { background: rgba(255,255,255,.2); color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.opciones form { margin: 0; }
.usuario { display: flex; align-items: center; gap: .6rem; padding: .35rem .9rem .35rem .4rem; margin-right: .5rem; border-radius: 8px; background: rgba(255,255,255,.1);
           color: #fff; font-size: .85rem; font-weight: 600; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700;
          background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.1)); border: 2px solid rgba(255,255,255,.3); }
.contenido { flex: 1; padding: 2rem 1.5rem; }
.panel main { max-width: 1100px; margin: 0 auto; padding: 2rem 2.25rem; background: #fff; border: 1px solid var(--linea); border-radius: 12px;
              box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04); animation: subir .4s ease-out both; }
.panel main:not(:has(table)) { max-width: 820px; }
.panel h1 { margin: 0 0 1rem; font-size: 1.6rem; font-weight: 700; }
.panel h2 { margin: 2rem 0 .75rem; padding-bottom: .5rem; font-size: 1.15rem; font-weight: 600; border-bottom: 1px solid var(--linea); }
.pie { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem 1.5rem; padding: 1.25rem 1rem 1.75rem; font-size: .8rem; }
.pie a { color: var(--texto-2); }

/* ---------- Formularios ---------- */
p { margin: .75rem 0; }
main li { margin: .25rem 0; }
label { display: block; margin: 1.25rem 0 .5rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--texto); }
label[for]::before { content: ""; display: inline-block; width: 15px; height: 15px; margin: 0 .45rem -2px 0; background: var(--teal); }
label[for="email"]::before, label[for="nombre"]::before, label[for="apellidos"]::before { -webkit-mask: url(/img/icono-usuario.svg) center / contain no-repeat; mask: url(/img/icono-usuario.svg) center / contain no-repeat; }
label[for="contrasena"]::before, label[for="actual"]::before, label[for="nueva"]::before, label[for="repetir"]::before { -webkit-mask: url(/img/icono-candado.svg) center / contain no-repeat; mask: url(/img/icono-candado.svg) center / contain no-repeat; }
label[for="codigo"]::before { -webkit-mask: url(/img/icono-escudo.svg) center / contain no-repeat; mask: url(/img/icono-escudo.svg) center / contain no-repeat; }
label:not([for="email"], [for="nombre"], [for="apellidos"], [for="contrasena"], [for="actual"], [for="nueva"], [for="repetir"], [for="codigo"])::before { display: none; }

input, select, textarea { width: 100%; padding: .875rem 1rem; border: 2px solid var(--borde); border-radius: 8px; background: #fff; color: var(--texto);
                          font: inherit; font-size: 1rem; transition: var(--suave); }
input::placeholder { color: #95a5a6; }
input:hover, select:hover, textarea:hover { border-color: #cfd8e1; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(23,95,108,.1); }
textarea { min-height: 6rem; }
input#codigo { padding: .75rem; text-align: center; font: 700 1.75rem/1.2 "SF Mono", Menlo, Consolas, "Courier New", monospace; letter-spacing: .45rem; }
input#codigo::placeholder { letter-spacing: .45rem; }

.campo-contrasena { position: relative; }
.campo-contrasena input { padding-right: 3rem; }
.ver-contrasena { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); width: 36px !important; height: 36px; margin: 0 !important; padding: 0 !important;
                  display: flex; align-items: center; justify-content: center; border-radius: 6px; background: none !important; box-shadow: none !important; color: #7f8c8d; }
.ver-contrasena:hover { color: var(--texto); background: var(--fondo) !important; transform: translateY(-50%) !important; }

button { display: block; width: 100%; margin-top: 1.75rem; padding: .875rem 1.5rem; border: 0; border-radius: 8px; cursor: pointer;
         background: linear-gradient(135deg, var(--teal) 0%, var(--teal-hover) 100%); color: #fff;
         font: 600 .95rem "Open Sans", sans-serif; text-transform: uppercase; letter-spacing: .5px;
         box-shadow: 0 4px 12px rgba(23,95,108,.25); transition: var(--suave); }
button:hover { background: linear-gradient(135deg, var(--teal-hover) 0%, var(--teal-claro) 100%); box-shadow: 0 6px 16px rgba(23,95,108,.35); transform: translateY(-2px); }
button:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(23,95,108,.3); }
button.secundario { background: #fff; color: var(--teal); border: 2px solid var(--teal); box-shadow: none; }
button.secundario:hover { background: var(--teal-fondo); }
.separador { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 0; color: #95a5a6; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
.separador + button { margin-top: 1.5rem; }
.nota { font-size: .875rem; color: var(--texto-2); }
.acceso main > p:has(> a:only-child) { text-align: center; font-size: .9rem; }

.error, [role=status] { padding: .85rem 1.1rem; border-radius: 8px; font-size: .9rem; font-weight: 600; border: 1px solid; }
.error { color: var(--error); background: var(--error-fondo); border-color: var(--error-borde); }
[role=status] { color: var(--ok); background: var(--ok-fondo); border-color: var(--ok-borde); font-weight: 400; }
.error:empty, [role=status]:empty { display: none; }

.casilla { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.1rem; border: 2px solid var(--teal-fondo); border-radius: 10px; background: #f6fbfb;
           text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 400; line-height: 1.55; }
.casilla input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--teal); box-shadow: none; }

/* ---------- Alta MFA ---------- */
.qr { display: flex; justify-content: center; margin: 1rem 0; padding: 1rem; border: 2px solid var(--borde); border-radius: 12px; background: #fff; }
.qr svg { width: 240px; max-width: 100%; height: auto; }
code, pre { font-family: "SF Mono", Menlo, Consolas, "Courier New", monospace; font-size: .85rem; word-break: break-all; }
#clave { font-size: 1rem; font-weight: 600; letter-spacing: .08em; color: var(--teal-oscuro); }
pre { white-space: pre-wrap; padding: 1rem 1.25rem; background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; }
#codigos-recuperacion { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
#codigos-recuperacion code { display: block; padding: .6rem; text-align: center; font-size: 1rem; font-weight: 600; background: var(--fondo);
                             border: 2px dashed var(--borde); border-radius: 8px; }

/* ---------- Selector de entidad ---------- */
.entidades { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: .75rem; }
.entidades button { margin: 0; padding: 1rem 1.25rem; text-align: left; text-transform: none; letter-spacing: 0; font-size: 1rem;
                    background: #fff; color: var(--texto); border: 2px solid var(--borde); border-radius: 10px; box-shadow: none; }
.entidades button:hover { background: var(--teal-fondo); border-color: var(--teal); color: var(--teal-oscuro); }

/* ---------- Tablas y botones del panel ---------- */
table { border-collapse: collapse; width: 100%; margin-top: 1rem; font-size: .9rem; }
th { text-align: left; font-size: .75rem; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: .5px; background: #fafbfc; }
th, td { padding: .8rem .9rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
tbody tr:hover { background: #fafcfd; }
td form { display: inline-block; margin: .2rem .4rem .2rem 0; }
td label { display: inline; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; }
td input, td select { width: auto; padding: .4rem .6rem; font-size: .85rem; }
.panel main button { display: inline-block; width: auto; margin-top: 1rem; padding: .6rem 1.2rem; font-size: .8rem; }
.panel main td button { margin: 0; padding: .4rem .8rem; font-size: .75rem; box-shadow: none; }

/* ---------- Animaciones ---------- */
@keyframes bajar { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes entrar { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Tableta y móvil: el formulario primero ---------- */
@media (max-width: 992px) {
    .acceso { flex-direction: column; }
    .lateral { position: relative; width: 100%; order: 2; padding: 2rem 1.5rem 1.5rem; }
    .lateral-texto { padding: 1rem; }
    .logo { margin-bottom: 1.25rem; }
    .logo svg { width: 72px; height: 72px; }
    .lateral-texto .lateral-titulo { font-size: 1.6rem; }
    .lateral-texto .lateral-subtitulo { font-size: 1.2rem; }
    .lateral-pie { position: relative; bottom: auto; margin-top: 1.5rem; }
    .principal { order: 1; margin: 0; width: 100%; min-height: auto; padding: 2rem 1.25rem; align-items: flex-start; }
    .usuario-nombre { display: none; }
}
@media (max-width: 600px) {
    .acceso main { padding: 1.75rem 1.25rem; border-radius: 10px; }
    .acceso h1 { font-size: 1.45rem; }
    .panel main { padding: 1.5rem 1.1rem; }
    .contenido { padding: 1rem .75rem; }
    .barra { padding: 0 1rem; }
    .usuario { display: none; }
    #codigos-recuperacion { grid-template-columns: 1fr; }
    input#codigo { font-size: 1.4rem; letter-spacing: .3rem; }
}

/* Detalles: enlace otpauth en segundo plano y títulos de tabla discretos. */
p:has(> #otpauth) { font-size: .75rem; color: var(--texto-2); }
caption { padding-bottom: .5rem; text-align: left; font-size: .8rem; color: var(--texto-2); }

/* ---------- Selector de idioma (como el de Transparencia) ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.idiomas { position: relative; }
.idiomas summary { list-style: none; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border-radius: 8px; cursor: pointer;
                   font-size: .8rem; font-weight: 600; user-select: none; transition: var(--suave); }
.idiomas summary::-webkit-details-marker { display: none; }
.idiomas[open] .flecha { transform: rotate(180deg); }
.idiomas form { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; min-width: 170px; margin: 0; padding: .35rem; background: #fff;
                border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); animation: bajar .15s ease-out; }
.idiomas form button { display: block; width: 100%; margin: 0; padding: .55rem .8rem; border: 0; border-radius: 6px; text-align: left; background: none;
                       color: var(--texto); font: 400 .9rem "Open Sans", sans-serif; text-transform: none; letter-spacing: 0; box-shadow: none; }
.idiomas form button:hover { background: var(--teal-fondo); color: var(--teal-oscuro); transform: none; box-shadow: none; }
.idiomas form button[aria-current="true"] { font-weight: 700; color: var(--teal); }
.idiomas-fijo { position: fixed; top: 1rem; right: 1.5rem; z-index: 40; }
.idiomas-fijo summary { background: rgba(23,95,108,.08); border: 1px solid rgba(23,95,108,.25); color: var(--texto); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.idiomas-fijo summary:hover { background: rgba(23,95,108,.15); }
.barra .idiomas summary { background: rgba(255,255,255,.1); color: #fff; }
.barra .idiomas summary:hover { background: rgba(255,255,255,.2); }
@media (max-width: 992px) {
    .idiomas-fijo { position: absolute; top: .75rem; right: 1rem; }
}

/* ---------- Código de un solo uso en 6 casillas ---------- */
.otp { display: flex; align-items: center; justify-content: center; gap: clamp(.35rem, 1.5vw, .6rem); margin: .25rem 0 .5rem; }
.otp-casilla { width: clamp(40px, 11vw, 54px); height: clamp(52px, 14vw, 64px); padding: 0; text-align: center; border-radius: 12px; background: #f8fafc;
               font: 700 clamp(1.25rem, 4vw, 1.65rem) "SF Mono", Menlo, Consolas, "Courier New", monospace; caret-color: transparent; }
.otp-casilla:focus { background: #fff; transform: scale(1.06); }
.otp-casilla.lleno { border-color: var(--teal); background: rgba(23,95,108,.05); color: var(--teal); }
.otp-separador { color: #bdc3c7; font-size: 1.5rem; font-weight: 300; }

/* ---------- Icono de la tarjeta según la pantalla ---------- */
.acceso main:has(input[autocomplete="one-time-code"])::before { -webkit-mask-image: url(/img/icono-movil.svg); mask-image: url(/img/icono-movil.svg); }
.acceso main:has(#email):not(:has(#contrasena))::before { -webkit-mask-image: url(/img/icono-correo.svg); mask-image: url(/img/icono-correo.svg); }
.acceso main:has(#nueva)::before, .acceso main:has(#codigos-recuperacion)::before { -webkit-mask-image: url(/img/icono-llave.svg); mask-image: url(/img/icono-llave.svg); }
.acceso main:has(.entidades)::before { -webkit-mask-image: url(/img/icono-edificio.svg); mask-image: url(/img/icono-edificio.svg); }

/* ---------- Mi cuenta: panel con menú lateral y tarjetas ---------- */
.panel main:has(> .cuenta) { max-width: 1240px; padding: 0; background: none; border: 0; box-shadow: none; }
.cuenta { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.cuenta-nav { position: sticky; top: 94px; display: flex; flex-direction: column; gap: 2px; }
.cuenta-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: #3d4852; font-size: .9rem; font-weight: 500; }
.cuenta-nav a:hover { background: #fff; color: var(--teal-oscuro); text-decoration: none; }
.cuenta-nav a[aria-current="true"] { background: var(--teal-fondo); color: var(--teal-oscuro); font-weight: 600; }
.cuenta-nav a.destacado { color: var(--teal); font-weight: 600; }
.cuenta-nav-sep { height: 1px; margin: 10px 4px; background: #e6eaef; }
.cuenta-contenido { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.cuenta-contenido > [role=status], .cuenta-contenido > .error { margin: 0; }
.cuenta-columnas { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: start; }
.cuenta-lateral { display: flex; flex-direction: column; gap: 22px; }
.cuenta p { margin: 0; }

.tarjeta { background: #fff; border: 1px solid #e6eaef; border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.08);
           scroll-margin-top: 94px; animation: subir .4s ease-out both; }
.tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #eef1f4; }
.cuenta .tarjeta-cab h2 { margin: 0; padding: 0; border: 0; font-size: 1.05rem; font-weight: 700; color: #1f2d3d; }
.tarjeta-cab p { margin-top: 2px; font-size: .82rem; color: var(--texto-2); }
.tarjeta-cuerpo { padding: 6px 24px 22px; }
.tarjeta-cuerpo label:first-child { margin-top: 12px; }
.tarjeta-cuerpo .acciones { display: flex; justify-content: flex-end; margin-top: 16px; }
.tarjeta-vacia { padding: 18px 24px; font-size: .9rem; color: var(--texto-2); }

.perfil { display: flex; align-items: center; gap: 22px; padding: 26px 28px; background: linear-gradient(120deg, #fff 55%, #eaf5f6); }
.perfil-avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                 background: linear-gradient(135deg, var(--teal), var(--teal-claro)); color: #fff; font-size: 1.6rem; font-weight: 700;
                 box-shadow: 0 6px 16px -6px rgba(23,95,108,.6); }
.perfil-texto { flex: 1; min-width: 0; }
.perfil-nombre { font-size: 1.5rem; font-weight: 700; color: #1f2d3d; overflow-wrap: anywhere; }
.perfil-correo { margin-top: 4px !important; display: flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--texto-2); overflow-wrap: anywhere; }
.candado { display: inline-flex; color: #8a97a3; cursor: help; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.chip.ok { background: #e3f4ea; color: #1e6b3c; }
.chip.aviso { background: #fff4de; color: #7a4b00; }
.chip.neutro { background: #eef1f4; color: #3d4852; }
.chip.rol-admin { background: var(--teal-fondo); color: var(--teal-oscuro); }

.fila { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-top: 1px solid #f1f3f6; }
.tarjeta-cab + .fila { border-top: 0; }
.fila-arriba { align-items: flex-start; }
.fila-texto { flex: 1; min-width: 0; }
.ico { flex: none; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--teal-fondo); color: var(--teal); }
.ico-letras { font-size: .8rem; font-weight: 700; }
.tit { font-size: .9rem; font-weight: 600; color: #1f2d3d; overflow-wrap: anywhere; }
.sub { margin-top: 2px !important; font-size: .82rem; color: var(--texto-2); }
.sub.vacio { margin-top: 10px !important; font-style: italic; }
.barra-progreso { display: block; max-width: 220px; height: 6px; margin-top: 8px; border-radius: 3px; background: #eef1f4; overflow: hidden; }
.barra-progreso > span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--teal-claro)); }
.p0 { width: 0 } .p1 { width: 10% } .p2 { width: 20% } .p3 { width: 30% } .p4 { width: 40% } .p5 { width: 50% }
.p6 { width: 60% } .p7 { width: 70% } .p8 { width: 80% } .p9 { width: 90% } .p10 { width: 100% }
.barra-progreso > .p0, .barra-progreso > .p1, .barra-progreso > .p2 { background: #c0392b; }
.codigos-nuevos { padding: 4px 24px 18px; }
.codigos-nuevos [role=status] { margin-bottom: 12px; }

.passkeys { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.passkeys li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #eef1f4; border-radius: 10px; font-size: .82rem; color: var(--texto-2); }
.passkeys li svg { flex: none; color: #5f6b73; }
.passkeys li span { flex: 1; min-width: 0; }
.passkeys strong { color: #1f2d3d; font-weight: 600; }
.passkeys form { margin: 0; }

/* Botones de la cuenta: discretos, sin mayúsculas (los de formulario general siguen como en Transparencia). */
.cuenta form { margin: 0; }
.cuenta .btn, .cuenta .sesion form button, .cuenta .enlace-peligro {
    display: inline-flex; align-items: center; justify-content: center; width: auto; height: 36px; margin: 0; padding: 0 14px; border-radius: 8px;
    border: 1px solid #ced6de; background: #fff; color: #1f2d3d; box-shadow: none; transform: none;
    font: 600 .82rem "Open Sans", sans-serif; text-transform: none; letter-spacing: 0; white-space: nowrap; text-decoration: none; cursor: pointer; }
.cuenta .btn:hover, .cuenta .sesion form button:hover { background: var(--fondo); border-color: #b8c2cc; color: #1f2d3d; text-decoration: none; transform: none; box-shadow: none; }
.cuenta .btn-p { border: 0; color: #fff; background: linear-gradient(135deg, var(--teal), var(--teal-hover)); box-shadow: 0 4px 10px -4px rgba(23,95,108,.5); }
.cuenta .btn-p:hover { color: #fff; background: linear-gradient(135deg, var(--teal-hover), var(--teal-claro)); }
.cuenta .btn-peligro { color: #a12b20; border-color: #f0c2bd; }
.cuenta .btn-peligro:hover { background: #fdf0ef; color: #8a1c1c; border-color: #e8a29a; }
.cuenta .enlace-peligro { height: auto; padding: 4px 6px; border: 0; background: none; color: #a12b20; }
.cuenta .enlace-peligro:hover { background: #fdf0ef; }

.entidades-rejilla { list-style: none; margin: 0; padding: 20px 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.entidades-rejilla li { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid #e6eaef; border-radius: 12px; transition: var(--suave); }
.entidades-rejilla li:hover { border-color: #c9dfe2; box-shadow: 0 6px 18px -10px rgba(23,95,108,.35); }
.entidad-cab { display: flex; align-items: center; gap: 12px; }
.entidad-cab .chip { margin-top: 6px; }
.entidad-enlaces { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; font-weight: 600; }
.entidad-enlaces .secundario { color: var(--texto-2); }

@media (max-width: 1100px) {
    .cuenta-columnas { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .cuenta { grid-template-columns: 1fr; gap: 16px; }
    .cuenta-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
    .cuenta-nav a { flex: none; padding: 8px 12px; background: #fff; border: 1px solid #e6eaef; font-size: .82rem; }
    .cuenta-nav-sep { display: none; }
    .perfil { flex-wrap: wrap; padding: 20px; }
    .perfil-avatar { width: 56px; height: 56px; font-size: 1.25rem; }
    .fila { flex-wrap: wrap; padding: 14px 18px; }
    .tarjeta-cab { padding: 16px 18px; flex-wrap: wrap; }
}

/* Ajustes de móvil: perfil en columna y barra superior sin saltos de línea. */
.opciones a, .opciones button { white-space: nowrap; }
.perfil-texto { flex: 1 1 220px; }
@media (max-width: 860px) {
    .perfil .btn { flex: 1 1 100%; }
}
@media (max-width: 600px) {
    .opciones { gap: .35rem; }
    .opciones a, .opciones button { padding: .45rem .65rem; font-size: .8rem; }
    .opciones > a[href="/cuenta"] { display: none; }
    .marca { font-size: 1.1rem; }
}
.fila-texto { flex: 1 1 180px; }