/*
 * Mi Cuenta · navegación con color por sección.
 * Todo el archivo queda acotado a #accountView: no declara variables en :root ni estados globales (.is-active, etc.)
 * sin el contenedor propietario. En teléfono y tablet el menú lateral se reemplaza por la barra «Estás en» y un panel
 * que sube desde abajo, igual que Datos (data-identity.css), con el color de cada sección.
 */

/* ---- Color: cuatro familias (sin amarillos ni ocres). Recordatorios usa el mismo tono que en Datos.
   Paleta elegida por el usuario el 12/10/2026 (Fase 4B): Recordatorios verde neón, Agenda online berenjena,
   Importar menta y Backup grafito. El tono va en superficies; el -ink, más oscuro, en textos y botones. ---- */
#accountView { --account-tone: #5b50e8; --account-tone-ink: #4338ca; }

/* Resumen */
#accountView [data-account-section="resumen"], #accountView[data-section="resumen"] { --account-tone: #5b50e8; --account-tone-ink: #4338ca; }
/* Mi plan */
#accountView [data-account-section="plan"], #accountView[data-section="plan"] { --account-tone: #7c3aed; --account-tone-ink: #6d28d9; }
/* Consultorio */
#accountView [data-account-section="consultorio"], #accountView[data-section="consultorio"] { --account-tone: #2563eb; --account-tone-ink: #1d4ed8; }
#accountView [data-account-section="profesionales"], #accountView[data-section="profesionales"] { --account-tone: #0284c7; --account-tone-ink: #0369a1; }
#accountView [data-account-section="disponibilidad"], #accountView[data-section="disponibilidad"] { --account-tone: #0891b2; --account-tone-ink: #0e7490; }
#accountView [data-account-section="prestadores"], #accountView[data-section="prestadores"] { --account-tone: #3b5bdb; --account-tone-ink: #3148b8; }
#accountView [data-account-section="valores"], #accountView[data-section="valores"] { --account-tone: #1578d4; --account-tone-ink: #0f5fae; }
#accountView [data-account-section="firma"], #accountView[data-section="firma"] { --account-tone: #4f6fe8; --account-tone-ink: #3a55c4; }
#accountView [data-account-section="qr"], #accountView[data-section="qr"] { --account-tone: #0b7bb5; --account-tone-ink: #0a6291; }
/* Pacientes */
#accountView [data-account-section="recordatorios"], #accountView[data-section="recordatorios"] { --account-tone: #00c853; --account-tone-ink: #00843c; }
#accountView [data-account-section="alertas"], #accountView[data-section="alertas"] { --account-tone: #db2777; --account-tone-ink: #be185d; }
#accountView [data-account-section="agenda-online"], #accountView[data-section="agenda-online"] { --account-tone: #86198f; --account-tone-ink: #701a75; }
/* Datos y seguridad */
#accountView [data-account-section="importar"], #accountView[data-section="importar"] { --account-tone: #10b981; --account-tone-ink: #047857; }
#accountView [data-account-section="backup"], #accountView[data-section="backup"] { --account-tone: #334155; --account-tone-ink: #1e293b; }

/* ---- Menú lateral (computadora): título de familia, rótulo con estado real debajo del nombre ---- */
#accountView .account-section-nav { gap: 6px; }
#accountView .account-nav-family { display: flex; align-items: center; gap: 10px; margin: 12px 4px 2px; color: #6b7690; font-size: 12px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
#accountView .account-nav-family::after { flex: 1; height: 1px; content: ""; background: #e4e8f1; }
#accountView .account-section-nav > button { grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; row-gap: 1px; min-height: 58px; }
#accountView .account-section-nav > button > span { grid-row: 1 / span 2; color: var(--account-tone); background: color-mix(in srgb, var(--account-tone) 11%, #fff); transition: background .2s ease, color .2s ease; }
#accountView .account-section-nav b { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; overflow-wrap: break-word; }
#accountView .account-section-nav small { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; text-align: left; overflow-wrap: break-word; }
#accountView .account-section-nav > button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--account-tone) 30%, #fff); background: color-mix(in srgb, var(--account-tone) 6%, #fff); }
#accountView .account-section-nav > button.is-active { border-color: transparent; color: var(--account-tone-ink); background: color-mix(in srgb, var(--account-tone) 10%, #fff); box-shadow: inset 4px 0 var(--account-tone); }
#accountView .account-section-nav > button.is-active > span { color: #fff; background: var(--account-tone); box-shadow: 0 8px 18px color-mix(in srgb, var(--account-tone) 30%, transparent); }
#accountView .account-section-nav > button.is-active small { color: var(--account-tone-ink); }

/* La sección abierta tiene su color en el borde superior del panel de trabajo */
#accountView .account-panel-shell { border-top: 4px solid var(--account-tone); }

/* ---- Barra «Estás en» y panel «Otras secciones»: sólo teléfono y tablet ---- */
#accountView .account-section-switch { display: none; }
#accountView .account-section-sheet { width: min(560px, 100%); max-width: 100%; max-height: 100dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -18px 50px rgba(20, 28, 55, .25); }
#accountView .account-section-sheet::backdrop { background: rgba(20, 28, 55, .45); }
#accountView .account-section-sheet[open] { animation: account-sheet-up .25s ease; }
#accountView .account-section-sheet__panel { max-height: 100dvh; overflow-y: auto; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); }
#accountView .account-section-sheet header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#accountView .account-section-sheet h2 { margin: 0; color: #18233f; font-size: 17px; }
#accountView .account-section-sheet header button { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #e4e8f1; border-radius: 12px; color: #5b6580; background: #fff; }
#accountView .account-section-sheet .app-icon { width: 20px; height: 20px; }
#accountView .account-section-sheet h3 { margin: 10px 2px 6px; color: #6b7690; font-size: 12px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
#accountView .account-section-sheet__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#accountView .account-section-sheet__home { display: grid; }
#accountView .account-section-sheet__panel button[data-account-sheet-trigger] { display: block; min-width: 0; padding: 10px 4px; border: 1.5px solid transparent; border-radius: 16px; color: #29334d; background: color-mix(in srgb, var(--account-tone) 8%, #fff); font-size: 13px; font-weight: 850; line-height: 1.2; text-align: center; overflow-wrap: break-word; }
#accountView .account-section-sheet__panel button[data-account-sheet-trigger] > span { display: grid; width: 38px; height: 38px; margin: 0 auto 4px; place-items: center; border-radius: 12px; color: var(--account-tone); background: color-mix(in srgb, var(--account-tone) 16%, #fff); }
#accountView .account-section-sheet__panel button[data-account-sheet-trigger][aria-current="page"] { border-color: var(--account-tone); background: color-mix(in srgb, var(--account-tone) 14%, #fff); }
#accountView .account-section-sheet__panel button[data-account-sheet-trigger]:disabled { cursor: not-allowed; opacity: .48; }
#accountView .account-section-sheet__home button[data-account-sheet-trigger] { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-align: left; }
#accountView .account-section-sheet__home button[data-account-sheet-trigger] > span { margin: 0; }

@keyframes account-sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #accountView .account-section-sheet[open] { animation: none; }
}

@media (max-width: 980px) {
  #accountView .account-section-nav { display: none; }
  #accountView .account-sidebar { padding: 0; border: 0; background: transparent; box-shadow: none; }
  #accountView:not([data-section="resumen"]) .account-sidebar { display: none; }
  #accountView .account-section-switch { position: sticky; top: var(--account-switch-top, 76px); z-index: 9; display: flex; width: 100%; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 12px; border: 0; border-radius: 18px; background: #fff; text-align: left; box-shadow: 0 6px 18px rgba(30, 40, 90, .07); }
  #accountView .account-section-switch__icon { display: grid; width: 42px; height: 42px; flex: none; place-items: center; border-radius: 13px; color: #fff; background: var(--account-tone); }
  #accountView .account-section-switch__icon .app-icon { width: 21px; height: 21px; }
  #accountView .account-section-switch__text { display: block; min-width: 0; flex: 1 1 120px; }
  #accountView .account-section-switch__text small { display: block; color: #6f7990; font-size: 12px; font-weight: 850; letter-spacing: .08em; }
  #accountView .account-section-switch__text b { display: block; color: #18233f; font-size: 16px; overflow-wrap: break-word; }
  #accountView .account-section-switch__text > span { display: block; color: var(--account-tone-ink); font-size: 12px; font-weight: 800; overflow-wrap: break-word; }
  #accountView .account-section-switch__more { display: inline-flex; flex: none; align-items: center; gap: 7px; margin-left: auto; padding: 10px 13px; border-radius: 13px; color: #fff; background: var(--account-tone-ink); font-size: 13.5px; font-weight: 850; white-space: nowrap; box-shadow: 0 6px 16px color-mix(in srgb, var(--account-tone-ink) 35%, transparent); }
  #accountView .account-section-switch__more .app-icon { width: 17px; height: 17px; }
  #accountView .account-section-switch:active .account-section-switch__more { transform: scale(.97); }
}

/* Teléfonos angostos: «Otras secciones» pasa a su propia fila para que el nombre de la sección no se comprima */
@media (max-width: 420px) {
  #accountView .account-section-sheet__grid { gap: 6px; }
}
@media (max-width: 359px) {
  #accountView .account-section-switch__more { width: 100%; justify-content: center; margin-left: 0; }
  #accountView .account-section-sheet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Con ventanas bajas el menú lateral (que es fijo) tiene su propio desplazamiento: se llega a todas las secciones sin llegar al final de la página. */
@media (min-width: 981px) {
  #accountView .account-sidebar { align-content: start; max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c3ccdb transparent; }
}

/* El panel de cada sección recibe el foco al abrirse: sin aro anaranjado del navegador alrededor del contenedor (los controles de adentro conservan el suyo). */
#accountView dialog.account-inline-panel:focus { outline: none; }

@media print {
  #accountView .account-section-switch, #accountView .account-section-sheet { display: none !important; }
}