@import url('./botones.css');

.menu-cuenta { position: relative; margin-left: auto; flex-shrink: 0; text-align: left; }
.menu-cuenta > summary.boton-cuenta { display: flex; margin: 0; padding: 11px 18px; border: 2px solid #5f4d93; border-radius: 10px; background: #5f4d93; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.5; cursor: pointer; list-style: none; }
.menu-cuenta > summary::-webkit-details-marker { display: none; }
.menu-cuenta > summary.boton-cuenta:is(:hover, :focus-visible), .menu-cuenta[open] > summary.boton-cuenta { color: #fff; box-shadow: inset 0 -100px 0 0 #303044; border-color: #303044; }
.menu-cuenta > summary span { margin-left: 8px; }
.menu-cuenta .opciones-cuenta { position: absolute; top: calc(100% + 10px); right: 0; z-index: 25; min-width: 210px; max-width: min(260px, 80vw); padding: 12px; border: 1px solid #ddd; border-radius: 10px; background: #fff; box-shadow: 0 10px 30px #30304420; }
.menu-cuenta .opciones-cuenta p { margin: 0 0 8px; padding: 7px 10px 12px; border-bottom: 1px solid #ddd; color: #303044; font-size: 13px; overflow-wrap: anywhere; }
.menu-cuenta .opciones-cuenta a, .menu-cuenta .opciones-cuenta button { display: block; width: 100%; margin: 0; padding: 10px; border: 0; border-radius: 6px; background: transparent; color: #5f4d93; text-align: left; text-decoration: none; font: inherit; font-size: 14px; }
.menu-cuenta .opciones-cuenta a:hover, .menu-cuenta .opciones-cuenta button:hover { background: #ede8fa; }
.cabecera-con-cuenta { position: relative; min-height: 64px; padding-right: 120px; }
.cabecera-con-cuenta > .menu-cuenta { position: absolute; right: 0; top: 0; }
.estado-cuenta { color: #ab3547; font-size: 14px; }
@media (max-width: 700px) { .menu-cuenta > summary.boton-cuenta { padding: 9px 12px; font-size: 13px; } }
@media (max-width: 420px) { .cabecera-con-cuenta { padding: 58px 0 0; } }