/* Aura 2.1 · Primitivas de interfaz (se carga la última; usa solo tokens de ui-tokens.css)
   Familias: foco · iconos · botones · chips · tarjetas · campos · estados · diálogos · toast. */

/* ── Foco visible coherente ───────────────────────────────────────── */
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,
summary:focus-visible,[tabindex]:focus-visible,.card[data-action]:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:none}
.topbar,.member-hero,.login-story,.shell>aside{--focus:var(--white)}
.topbar .header-round-control,.topbar .account,.topbar select{--focus:var(--primary)}

/* ── Iconos SVG (máscaras) ───────────────────────────────────────── */
.ui-icon{display:inline-block;flex:0 0 auto;width:20px;height:20px;background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.ui-icon.i-x{--icon:url('/assets/icons/x.svg')}.ui-icon.i-refresh{--icon:url('/assets/icons/rotate-cw.svg')}
.ui-icon.i-edit{--icon:url('/assets/icons/pencil.svg')}.ui-icon.i-back{--icon:url('/assets/icons/chevron-left.svg')}
.ui-icon.i-next{--icon:url('/assets/icons/chevron-right.svg')}.ui-icon.i-more{--icon:url('/assets/icons/ellipsis.svg')}
.ui-icon.i-upload{--icon:url('/assets/icons/upload.svg')}.ui-icon.i-download{--icon:url('/assets/icons/download.svg')}
.ui-icon.i-check{--icon:url('/assets/icons/check.svg')}.ui-icon.i-trash{--icon:url('/assets/icons/trash-2.svg')}
.ui-icon.i-info{--icon:url('/assets/icons/info.svg')}.ui-icon.i-add{--icon:url('/assets/icons/plus.svg')}
.ui-icon.i-search{--icon:url('/assets/icons/search.svg')}.ui-icon.i-calendar-plus{--icon:url('/assets/icons/calendar-plus.svg')}
.ui-icon.i-user{--icon:url('/assets/icons/circle-user-round.svg')}.ui-icon.i-dashboard{--icon:url('/assets/icons/layout-dashboard.svg')}
.ui-icon.i-bell{--icon:url('/assets/icons/bell.svg')}.ui-icon.i-logout{--icon:url('/assets/icons/log-out.svg')}

/* ── Botones: primario · secundario (.alt) · fantasma (.ghost) · peligro · icono ── */
.btn{font-size:var(--fs-2);transition:background var(--motion),border-color var(--motion),color var(--motion),transform var(--motion)}
.btn:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.alt:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--primary)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--primary)}
.btn.ghost:hover{background:var(--primary-soft);border-color:transparent}
.btn.danger:hover{background:var(--danger);filter:brightness(.9)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;transform:none}
.btn .ui-icon{width:18px;height:18px}
.icon-btn{display:inline-grid;place-items:center;width:var(--tap);min-width:var(--tap);height:var(--tap);min-height:var(--tap);padding:0;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--primary);cursor:pointer;
  transition:background var(--motion),border-color var(--motion)}
.icon-btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
.icon-btn.plain{border-color:transparent;background:transparent}
.icon-btn.plain:hover{background:var(--primary-soft)}

/* ── Chips: informativo (.pill/.chip) · filtro (.chip-btn) · estado (.badge) ── */
.pill,.chip,.badge,.group-badge,.disc-chip,.discipline-chip,.common-chip{
  display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-1);font-weight:700;line-height:1.4;max-width:100%}
.pill{background:var(--success-soft);color:var(--success);white-space:normal}
.pill.neutral,.chip{background:var(--surface-2);color:var(--text-2)}
.pill.warning,.badge.warning{background:var(--warning-soft);color:var(--warning)}
.badge{background:var(--surface-2);color:var(--text-2)}
.badge.success{background:var(--success-soft);color:var(--success)}
.badge.danger{background:var(--danger-soft);color:var(--danger)}
.badge.info{background:var(--info-soft);color:var(--info)}
/* Disciplinas: mismo lenguaje en En marcha, Mi repertorio, histórico y eventos */
.disc-chip,.discipline-chip{background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary-border)}
.chip-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:6px 14px;border:1px solid var(--border);
  border-radius:var(--r-pill);background:var(--surface);color:var(--text);font-size:var(--fs-3);font-weight:700;cursor:pointer;
  transition:background var(--motion),border-color var(--motion),color var(--motion)}
.chip-btn:hover{border-color:var(--primary);color:var(--primary)}
.chip-btn.active{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-3)}

/* ── Tarjetas: base · compacta · interactiva · destacada · alerta ───── */
:where(.card,.community-card,.rep-card,.rep-event,.my-song,.production-card,.agenda-row,.add-song,.common-item){
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
:where(.card){box-shadow:var(--elev-1)}
.card.compact{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md)}
.community-card,.rep-card,.common-item,.agenda-row,button.card{transition:border-color var(--motion),box-shadow var(--motion),transform var(--motion)}
.community-card:hover,.rep-card:hover,button.common-item:hover,.agenda-row:hover{border-color:var(--primary);box-shadow:var(--elev-1)}
.community-card:active,.rep-card:active{transform:scale(.995)}
.card.featured{border-left:4px solid var(--primary)}
.card.alert{background:var(--warning-soft);border-color:var(--warning-border)}
.card.alert.danger{background:var(--danger-soft);border-color:var(--danger-border)}
.eyebrow{letter-spacing:.1em}

/* ── Campos y búsqueda ──────────────────────────────────────────── */
input,select,textarea{transition:border-color var(--motion),box-shadow var(--motion)}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--primary)}
.community-search,.search-field{position:relative;display:block}
.community-search input,.search-field input{padding-left:40px}
.community-search::before,.search-field::before{content:"";position:absolute;left:13px;top:50%;width:18px;height:18px;margin-top:-9px;
  background:var(--text-2);-webkit-mask:url('/assets/icons/search.svg') center/contain no-repeat;mask:url('/assets/icons/search.svg') center/contain no-repeat;pointer-events:none;z-index:1}

/* ── Estados: vacío · cargando · error ──────────────────────────── */
.empty{background:var(--surface);color:var(--text-2)}
.empty p{margin:6px auto 0;max-width:46ch}
.empty .btn{margin-top:var(--sp-4)}
.state{display:grid;gap:var(--sp-2);justify-items:center;text-align:center;padding:var(--sp-6) var(--sp-4);border-radius:var(--r-lg)}
.state.loading{color:var(--text-2)}
.state.loading::before{content:"";width:22px;height:22px;border-radius:50%;border:3px solid var(--border-strong);border-top-color:var(--primary);animation:ui-spin .8s linear infinite}
.state.error{background:var(--danger-soft);border:1px solid var(--danger-border);color:var(--danger)}
.state.error .btn{margin-top:var(--sp-2)}
@keyframes ui-spin{to{transform:rotate(360deg)}}
.skeleton{display:block;height:14px;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:ui-shimmer 1.2s ease infinite}
@keyframes ui-shimmer{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.state.loading::before,.skeleton{animation:none}}

/* ── Diálogos: modal en escritorio · hoja inferior en móvil ─────── */
dialog{border-radius:var(--r-lg);box-shadow:var(--elev-3)}
dialog header{position:sticky;top:0;background:var(--bg);z-index:2}
dialog header .icon{display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);min-width:var(--tap);padding:0;border:0;background:transparent;color:var(--primary);font-size:0;border-radius:var(--r-md);cursor:pointer}
dialog header .icon::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:url('/assets/icons/x.svg') center/contain no-repeat;mask:url('/assets/icons/x.svg') center/contain no-repeat}
dialog header .icon:hover{background:var(--primary-soft)}
dialog footer{padding-bottom:max(15px,env(safe-area-inset-bottom))}
@media(max-width:740px){
  dialog,dialog.wide,dialog.sheet{margin:auto 0 0;width:100%;max-width:none;max-height:92dvh;border-radius:var(--r-xl) var(--r-xl) 0 0;border-bottom:0}
  dialog[open]{animation:ui-sheet-in .22s ease}
  dialog header{padding:14px 18px}
  dialog header::before{content:"";position:absolute;left:50%;top:6px;width:38px;height:4px;margin-left:-19px;border-radius:var(--r-pill);background:var(--border-strong)}
  dialog .dialog-body{padding:var(--sp-3) 18px var(--sp-5)}
  dialog.print-sheet{max-height:none}
}
@keyframes ui-sheet-in{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){dialog[open]{animation:none}}

/* ── Toast: sobre la barra inferior y la zona segura; con icono además de color ── */
#toast{bottom:calc(24px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;font-size:var(--fs-3);font-weight:600;line-height:1.35}
#toast::before{content:"";flex:0 0 18px;width:18px;height:18px;background:currentColor;-webkit-mask:url('/assets/icons/check.svg') center/contain no-repeat;mask:url('/assets/icons/check.svg') center/contain no-repeat}
#toast.error{background:var(--danger)}
#toast.error::before{-webkit-mask-image:url('/assets/icons/info.svg');mask-image:url('/assets/icons/info.svg')}
@media(max-width:740px){#toast{bottom:calc(86px + env(safe-area-inset-bottom))}}
.modal-toast{display:flex;align-items:center;gap:8px}

/* Cabecera: en móvil el cierre de sesión vive en Mi Aura → Perfil */
@media(max-width:560px){.topbar [data-action="logout"]{display:none!important}}

/* ── Inicio del socio, calendario y avisos de cambios (antes inyectados por decoradores) ── */
.page-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;justify-content:flex-end}
.calendar-subscribe{text-decoration:none}
.legend-details{flex:1 1 100%;margin:0}
.legend-details summary{cursor:pointer;color:var(--text-2);font-size:var(--fs-2);font-weight:700;min-height:32px;display:flex;align-items:center}
.legend-details .legend{margin-top:var(--sp-2)}
.stats-strip{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);width:100%;text-align:left;color:var(--text);font:inherit;cursor:pointer;margin-top:var(--sp-3)}
.stats-strip strong{font-size:var(--fs-6);color:var(--primary)}
.stats-strip-go{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2);font-weight:700;color:var(--primary)}
.stats-strip:hover{border-color:var(--primary)}
.notification-item{display:flex;align-items:stretch;gap:var(--sp-2)}
.notification-item .notification-row{flex:1 1 auto;min-width:0}
.notification-item .notification-clean{align-self:center;flex:0 0 auto}
.admin-area-text small{font-size:var(--fs-1);letter-spacing:.04em;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:740px){.shell.admin aside .brand small{display:none}}

@media(max-width:740px){.page-intro{flex-wrap:wrap}.page-actions{width:100%;justify-content:stretch}.page-actions .btn{flex:1 1 auto}}
.legend-details summary::marker{color:var(--primary)}

/* ── Mi asistencia: métricas clave + detalle plegable ── */
.kpi-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:var(--sp-2);margin:var(--sp-3) 0}
.kpi-tile{display:grid;gap:2px;padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);min-width:0}
.kpi-tile b{font-size:var(--fs-5);color:var(--primary);overflow-wrap:break-word}
.kpi-tile small{color:var(--text-2);font-size:var(--fs-1)}
.more-stats{margin:0 0 var(--sp-4)}
.more-stats summary{cursor:pointer;color:var(--primary);font-weight:700;font-size:var(--fs-3);min-height:40px;display:flex;align-items:center}

/* ── Menú desplegable (acciones poco frecuentes) ── */
.menu-popover{position:relative;display:inline-block}
.menu-popover>summary{list-style:none;cursor:pointer}
.menu-popover>summary::-webkit-details-marker{display:none}
.menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:230px;display:grid;padding:var(--sp-2);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--elev-2)}
.menu-item{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:var(--tap);padding:var(--sp-2) var(--sp-3);border:0;border-radius:var(--r-sm);background:transparent;color:var(--text);font:inherit;font-size:var(--fs-3);text-align:left;cursor:pointer}
.menu-item:hover{background:var(--primary-soft);color:var(--primary)}
@media(max-width:560px){.menu-list{left:0;right:auto}}

/* Filtros de Repertorio: compactos en móvil */
@media(max-width:740px){.rep-filters{grid-template-columns:1fr 1fr}.rep-filters .community-search{grid-column:1/-1}}
@media(max-width:420px){.chip-btn{padding:6px 10px;font-size:var(--fs-2)}.my-filters{gap:var(--sp-1)}}
dialog :focus:not(:focus-visible){outline:none}
.my-check{flex-direction:row;margin:0}
@media(max-width:740px){.community-filters{grid-template-columns:1fr 1fr}.community-filters .community-search{grid-column:1/-1}}

.hub-tabs button{white-space:nowrap}
.admin-area-text small{color:var(--primary-soft)}
.rep-filters select{font-size:var(--fs-3);padding-left:10px;padding-right:8px}

/* Pantallas táctiles: objetivos de al menos 40 px también en botones compactos */
@media(pointer:coarse){.section-title .btn,.event .btn,td .btn,.setting-row .btn,.account-actions .btn,.my-song-actions .btn{min-height:40px}}
/* Escritorio: rejillas legibles en lugar de tarjetas móviles estiradas */
@media(min-width:741px){.rep-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.rep-events{max-width:920px}}
@media(min-width:1024px){.my-list{grid-template-columns:repeat(auto-fill,minmax(440px,1fr));align-items:start}}

/* Producciones: logotipo discreto junto al nombre */
.prod-tag{display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.prod-mini{width:18px;height:18px;object-fit:contain;border-radius:var(--r-sm);background:var(--white);border:1px solid var(--border)}
.rep-prods{margin:0 0 var(--sp-2);font-size:var(--fs-2);color:var(--text-2)}
/* Avatares: tres tamaños (sm 32 · md 44 · lg 72) */
.avatar.small{width:32px;height:32px}
.community-avatar{width:44px;height:44px;flex:0 0 44px;font-size:var(--fs-3)}
.community-card.mini .community-avatar{width:36px;height:36px;flex-basis:36px;font-size:var(--fs-1)}
.profile-photo,.community-profile-head .profile-photo{width:72px;height:72px;flex:0 0 72px}
@media(max-width:740px){.profile-photo,.community-profile-head .profile-photo{width:60px;height:60px;flex-basis:60px}}