/* Colores de acción, acompañados siempre de etiquetas de texto. */
header>nav{gap:10px;align-items:center}
header>nav>a[href="/areas"],header>nav>a[href="/ajustes"]{width:44px;height:44px;flex:0 0 44px;box-sizing:border-box;background:#e4f4ee;border:1px solid #a5cbbf;border-radius:11px;color:#145c54;box-shadow:0 2px 4px #183b4b0d;text-decoration:none}
header>nav>a[href="/areas"],header>nav>a[href="/ajustes"]{padding:0!important;gap:0!important}
header>nav>a[href="/areas"] svg,header>nav>a[href="/ajustes"] svg{width:22px;height:22px;flex:0 0 22px;stroke-width:1.8}
header>nav>a[href="/areas"]:hover,header>nav>a[href="/ajustes"]:hover{background:#cde9dd;border-color:#116d68}
header>nav>a[aria-current="page"]{background:#cde9dd;border-color:#116d68}
header>nav>.account-name{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:14px;line-height:1.3;color:#526877}
header>nav>form>button.quiet{display:inline-flex;align-items:center;justify-content:center;height:44px;min-height:44px;padding:0 16px;margin:0;border:1px solid #a5cbbf;border-radius:11px;background:#e4f4ee;color:#145c54;font-size:14px;line-height:1.3;font-weight:650;box-shadow:0 2px 4px #183b4b0d}
header>nav>form>button.quiet:hover{background:#cde9dd;border-color:#116d68}
header>nav>a:focus-visible,header>nav>form>button:focus-visible{outline:3px solid #145c54;outline-offset:3px}
@media(max-width:650px){header{flex-wrap:wrap}header>nav{width:100%;justify-content:flex-end;gap:8px}header>nav>.account-name{margin-right:auto;order:-1;max-width:calc(100% - 180px);overflow-wrap:anywhere;padding:0;font-size:13px}}
main nav[aria-label="Secciones de edición"]{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0;padding:0}
main nav[aria-label="Secciones de edición"] a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 20px;background:#e4f4ee;border:1px solid #9ec8ba;border-radius:11px;color:#145c54;font-weight:700;text-decoration:none;box-shadow:0 2px 4px #183b4b12;transition:background .15s,box-shadow .15s}
main nav[aria-label="Secciones de edición"] a:hover{background:#cde9dd;box-shadow:0 3px 7px #183b4b22}
main nav[aria-label="Secciones de edición"] a[aria-selected="true"]{background:#cde9dd;border:2px solid #116d68;color:#145c54;box-shadow:0 2px 5px #183b4b20}
main [role="tabpanel"][hidden]{display:none!important}
main nav[aria-label="Secciones de edición"] a:focus-visible{outline:3px solid #183b4b;outline-offset:3px}
@media(max-width:600px){main nav[aria-label="Secciones de edición"]{flex-direction:column}main nav[aria-label="Secciones de edición"] a{width:100%}}
header nav a[href="/ajustes"]{min-width:44px;justify-content:center}
header nav a[href="/ajustes"] > span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
main a.button[href^="/admin/banco/"][href*="/preguntas/"],
main form[action^="/admin/banco/"][action$="/editar"] button,
main form[action^="/admin/banco/"][action$="/preguntas"] button,
main form[action^="/admin/banco/"][action*="/preguntas/"]:not([action$="/eliminar"]) button,
main details:has(> form[action^="/admin/banco/"][action$="/editar"]) > summary {
    background: #fff3c4;
    color: #654b0a;
    border: 1px solid #e4cb78;
}
main form[action^="/admin/banco/"][action$="/eliminar"] button,
main details:has(> form[action^="/admin/banco/"][action$="/eliminar"]) > summary {
    background: #fde5e5;
    color: #8c2626;
    border: 1px solid #ecb4b4;
}
main details:has(> form[action^="/admin/banco/"][action$="/editar"]) > summary,
main details:has(> form[action^="/admin/banco/"][action$="/eliminar"]) > summary {
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 650;
    min-height: 44px;
}
main a.button[href^="/admin/banco/"][href*="/preguntas/"]:hover,
main form[action^="/admin/banco/"][action$="/editar"] button:hover,
main form[action^="/admin/banco/"][action$="/preguntas"] button:hover,
main form[action^="/admin/banco/"][action*="/preguntas/"]:not([action$="/eliminar"]) button:hover,
main details:has(> form[action^="/admin/banco/"][action$="/editar"]) > summary:hover { background: #f9e7a1; }
main form[action^="/admin/banco/"][action$="/eliminar"] button:hover,
main details:has(> form[action^="/admin/banco/"][action$="/eliminar"]) > summary:hover { background: #f8cece; }
main details:has(> form[action^="/admin/banco/"]) > summary:focus-visible { outline: 3px solid #183b4b; outline-offset: 3px; }