/* Notea 7.8.3.0 — Desktop/tablet hub and application modules.
   This file preserves cascade order from the consolidated legacy stylesheet. */
@media (max-width:760px){
  /* Cada tema define el color de acción y su contraste. */
  html{--m-on-accent:#fff}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]){--m-on-accent:#1d241f}

  /* + de Revisitas/Ministerio y botón principal del cronómetro siguen el tema. */
  .revisits-primary,
  .ministry-primary,
  .ministry-timer-hero .timer-start{
    background:linear-gradient(135deg,color-mix(in srgb,var(--m-accent) 82%,#fff 18%),var(--m-accent))!important;
    border:1px solid color-mix(in srgb,var(--m-accent) 78%,#000 22%)!important;
    color:var(--m-on-accent)!important;
    box-shadow:0 10px 24px color-mix(in srgb,var(--m-accent) 30%,transparent)!important
  }
  .revisits-primary:hover,
  .ministry-primary:hover,
  .ministry-timer-hero .timer-start:hover{filter:brightness(1.04)}

  /* El contador y los detalles del cronómetro responden a la paleta activa. */
  .ministry-timer-hero{
    background:linear-gradient(155deg,var(--m-surface),color-mix(in srgb,var(--m-accent-soft) 58%,var(--m-surface)))!important;
    border-color:var(--m-line)!important;color:var(--m-text)!important
  }
  .ministry-timer-hero .timer-display{color:var(--m-accent)!important;text-shadow:0 1px 14px color-mix(in srgb,var(--m-accent) 12%,transparent)!important}
  .ministry-timer-hero>header small{color:var(--m-text)!important}
  .ministry-timer-hero>header span{color:var(--m-muted)!important}
  .ministry-timer-hero [data-ministry-timer-pause],
  .ministry-timer-hero [data-ministry-timer-save]{
    background:var(--m-surface-2)!important;border-color:var(--m-line)!important;color:var(--m-text)!important
  }
  .ministry-timer-hero [data-ministry-timer-save]:disabled{color:var(--m-muted)!important}

  /* Los iconos superiores y pestañas dejan de conservar morado/azul fijo. */
  .revisits-section-icon,
  .ministry-section-icon{
    color:var(--m-accent)!important;background:var(--m-accent-soft)!important;
    border-color:color-mix(in srgb,var(--m-accent) 24%,var(--m-line))!important
  }
  .segmented button.is-active,
  [data-ministry-tabs] button.is-active{
    background:var(--m-accent-soft)!important;color:var(--m-accent)!important
  }
  .about-brand .brand-mark{background:var(--m-accent)!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .about-brand .brand-mark{background:#71846d!important}

  /* Noche móvil: todas las pantallas usan las mismas superficies y contraste. */
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]){
    --bg:var(--m-bg);--paper:var(--m-surface);--panel:var(--m-surface-2);--panel-2:var(--m-accent-soft);
    --text:var(--m-text);--muted:var(--m-muted);--line:var(--m-line);--accent:var(--m-accent);--accent-soft:var(--m-accent-soft)
  }
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) body,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .portal,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .app,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .portal-main,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .workspace-scroll{
    background:var(--m-bg)!important;color:var(--m-text)!important
  }
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .module-screen,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .settings-screen{color:var(--m-text)!important}

  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .module-search,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .segmented,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .revisits-metrics article,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .record-group,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .person-group,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .people-records-panel,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .goal-card,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .ministry-profile-card,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .ministry-recent-panel,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .service-year-card,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .ministry-calendar-card,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .report-card,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .settings-group,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .settings-control,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .settings-action,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .module-form,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .about-dialog form{
    background:var(--m-surface)!important;border-color:var(--m-line)!important;color:var(--m-text)!important
  }
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .revisits-metrics article:nth-child(1){background:color-mix(in srgb,var(--m-band-revisits) 38%,var(--m-surface))!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .revisits-metrics article:nth-child(2){background:color-mix(in srgb,var(--m-band-notes) 35%,var(--m-surface))!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .revisits-metrics article:nth-child(3){background:color-mix(in srgb,var(--m-band-ministry) 34%,var(--m-surface))!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .revisits-metrics article:nth-child(4){background:var(--m-surface-2)!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .revisits-metrics .metric-icon{background:var(--m-surface-2)!important;color:var(--m-accent)!important}

  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .module-search input,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .module-form input,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .module-form select,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .module-form textarea,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .settings-control select{
    background:var(--m-surface-2)!important;border-color:var(--m-line)!important;color:var(--m-text)!important
  }
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .module-search input{background:transparent!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .module-search input::placeholder,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) input::placeholder,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) textarea::placeholder{color:#a9a094!important;opacity:1!important}

  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .record-main strong,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .record-group>summary strong,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .records-panel h2,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .module-empty strong,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .goal-card header strong,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .ministry-profile-card strong,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .report-card h2,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .report-card dd,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .calendar-head h2,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .settings-group h2{color:var(--m-text)!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .record-main small,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .record-main em,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .record-group>summary small,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .records-panel>header span,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .module-empty p,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .goal-card header span,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .goal-card>small,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .goal-card>p,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .ministry-profile-card small,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .report-card dt,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .report-card small,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .calendar-weekday,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .calendar-hint,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .settings-action small{color:var(--m-muted)!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .record-main em{color:var(--m-accent)!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .record-avatar,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .status-chip{background:var(--m-accent-soft)!important;color:var(--m-accent)!important}

  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .ministry-top-metrics article{border-color:var(--m-line)!important;color:var(--m-text)!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .ministry-top-metrics article:nth-child(1){background:color-mix(in srgb,var(--m-band-notes) 44%,var(--m-surface))!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .ministry-top-metrics article:nth-child(2){background:color-mix(in srgb,var(--m-band-revisits) 44%,var(--m-surface))!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .ministry-top-metrics article:nth-child(3){background:color-mix(in srgb,var(--m-band-ministry) 42%,var(--m-surface))!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .ministry-top-metrics article:nth-child(4){background:var(--m-accent-soft)!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .ministry-top-metrics strong,
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .ministry-top-metrics small{color:var(--m-text)!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .ministry-top-metrics small{opacity:.76}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .goal-track{background:var(--m-surface-2)!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .goal-track i{background:linear-gradient(90deg,var(--m-accent),var(--m-ministry-accent))!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .calendar-day{background:var(--m-surface-2)!important;border-color:var(--m-line)!important;color:var(--m-text)!important}
  :is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .calendar-day small{color:var(--m-accent)!important}
}

/* =========================================================
   VERSIÓN 7.7 — PULIDO ULTRA AESTHETIC (capa aditiva)
   Refinamientos visuales, accesibilidad y micro-interacciones.
   No modifica la lógica ni las clases existentes.
   ========================================================= */

/* Controles nativos (fecha, hora, checkbox, color) coherentes con cada tema */

html[data-theme="light"],html[data-theme="pink"],html[data-theme="green"],html[data-theme="purple"],
html[data-theme="yellow"],html[data-theme="clay"],html[data-theme="mist"],html[data-theme="cedar"]{color-scheme:light}

:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]){color-scheme:dark}

/* Transición suave y global al cambiar de tema (colores, no layout) */

html{transition:background-color .35s ease}

body,.app,.portal,.sidebar,.workspace,.topbar,.paper,.portal-header,.portal-bottom-nav,.desktop-global-nav,
.hub-card,.records-panel,.record-list>*,.settings-group,.module-dialog,.dialog-shell,.wol-panel,.toast{
  transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease;
}

@media(prefers-reduced-motion:reduce){
  html,body,.app,.portal,.sidebar,.workspace,.topbar,.paper,.portal-header,.portal-bottom-nav,.desktop-global-nav,
  .hub-card,.records-panel,.record-list>*,.settings-group,.module-dialog,.dialog-shell,.wol-panel,.toast{transition:none!important}
}

/* Foco visible más elegante y accesible, coherente con el acento del tema */

:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:2px;border-radius:6px}

button:focus-visible,.icon-button:focus-visible,.hub-card:focus-visible,.page-open:focus-visible,
.settings-action:focus-visible,.footer-row:focus-visible{outline-offset:3px}

input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}

/* Retroalimentación táctil premium: leve compresión al presionar */

button,.hub-card,.settings-action,.footer-row,.page-open,.compact-actions button,.template-choice,.blank-template{
  transition:transform .12s cubic-bezier(.34,1.4,.64,1),background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;
}

button:active:not(:disabled),.hub-card:active,.settings-action:active,.compact-actions button:active,
.template-choice:active,.blank-template:active{transform:scale(.975)}

button:disabled{cursor:not-allowed;opacity:.55}

@media(prefers-reduced-motion:reduce){
  button:active:not(:disabled),.hub-card:active,.settings-action:active,.compact-actions button:active,
  .template-choice:active,.blank-template:active{transform:none}
}

/* Resplandor ambiental sutil al pasar el cursor sobre las tarjetas del Inicio */

.hub-card{isolation:isolate}

.hub-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  background:radial-gradient(120px 120px at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%);
  transition:opacity .35s ease}

.hub-card:hover::before{opacity:1}

.settings-action,.module-primary,.quick-create{position:relative;overflow:hidden}

.settings-action:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 10px 26px color-mix(in srgb,var(--text) 6%,transparent)}

/* Estado de carga (skeleton shimmer) mientras se cargan las plantillas */

.template-list p[data-template-loading]{position:relative;overflow:hidden;color:transparent!important;background:var(--panel-2);
  border-radius:10px;padding:14px!important;grid-column:1/-1}

.template-list p[data-template-loading]::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--paper) 70%,transparent),transparent);
  transform:translateX(-100%);animation:notea-shimmer 1.3s ease-in-out infinite}

@keyframes notea-shimmer{to{transform:translateX(100%)}}

@media(prefers-reduced-motion:reduce){.template-list p::after{animation:none}}

/* Toast con entrada y salida animada */

.toast{animation:notea-toast-in .32s cubic-bezier(.16,1,.3,1) both}

@keyframes notea-toast-in{from{opacity:0;transform:translate(-50%,10px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

@media(prefers-reduced-motion:reduce){.toast{animation:none}}

/* Barras de progreso del Ministerio con relleno animado */

.goal-track i{transition:width .6s cubic-bezier(.16,1,.3,1)}

@media(prefers-reduced-motion:reduce){.goal-track i{transition:none}}

/* Cronómetro: pulso suave cuando está activo */

.timer-card:has(button[data-ministry-timer-pause]:not([hidden])) .timer-display{
  animation:notea-timer-breathe 2.4s ease-in-out infinite}

@keyframes notea-timer-breathe{0%,100%{opacity:1}50%{opacity:.82}}

@media(prefers-reduced-motion:reduce){.timer-card .timer-display{animation:none!important}}

/* Navegación inferior/lateral: indicador activo con acento suave */

.portal-bottom-nav button,.notes-bottom-nav button,.desktop-nav-menu button{transition:color .2s ease,transform .18s ease}

.portal-bottom-nav button.is-active,.notes-bottom-nav button.is-active,.desktop-nav-menu button.is-active{color:var(--accent)}

.portal-bottom-nav button:active span,.notes-bottom-nav button:active span{transform:scale(.9)}

.portal-bottom-nav button span,.notes-bottom-nav button span{display:inline-block;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}

/* Selección de tema: vista previa con leve elevación al pasar el mouse */

[data-theme-choice]{transition:transform .18s ease,box-shadow .18s ease}

[data-theme-choice]:hover{transform:translateY(-2px)}

[data-theme-choice][aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent)}

/* Scrollbars finos y temáticos también fuera del listado de páginas */

.workspace-scroll::-webkit-scrollbar,.wol-body::-webkit-scrollbar,.dialog-shell::-webkit-scrollbar,
.records-panel .record-list::-webkit-scrollbar,.portal-main::-webkit-scrollbar{width:6px;height:6px}

.workspace-scroll::-webkit-scrollbar-thumb,.wol-body::-webkit-scrollbar-thumb,.dialog-shell::-webkit-scrollbar-thumb,
.records-panel .record-list::-webkit-scrollbar-thumb,.portal-main::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:10px}

.workspace-scroll::-webkit-scrollbar-track,.wol-body::-webkit-scrollbar-track,.dialog-shell::-webkit-scrollbar-track,
.records-panel .record-list::-webkit-scrollbar-track,.portal-main::-webkit-scrollbar-track{background:transparent}

/* Vacíos de módulos: icono con leve flotación (coherente con .empty-icon existente) */

.module-empty span,.module-empty i,.module-empty .empty-icon{animation:notea-bob 3.6s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){.module-empty span,.module-empty i,.module-empty .empty-icon{animation:none}}

/* Chips de estado con un borde más nítido y legible */

.status-chip{font-weight:750;letter-spacing:.01em}

/* Mejor contraste de placeholders en todos los temas */

input::placeholder,textarea::placeholder{color:var(--muted);opacity:.68}

/* Botones de icono: leve rotación al presionar el de "más opciones" */

[data-more]{transition:transform .18s ease}

[data-more]:active{transform:rotate(90deg)}

/* Alto contraste de impresión ya cubierto; aseguramos que las animaciones no interfieran al imprimir */

@media print{*{animation:none!important;transition:none!important}}

/* =========================================================
   MARFIL COHERENTE + PERFIL SIN FLECHA
   En teléfonos, las pantallas internas usan exactamente la
   misma familia de superficies cálidas del Hub Marfil.
   ========================================================= */

@media (max-width:760px){
  html[data-theme="light"]{
    --bg:var(--m-bg);--paper:var(--m-surface);--panel:var(--m-surface-2);--panel-2:var(--m-accent-soft);
    --text:var(--m-text);--muted:var(--m-muted);--line:var(--m-line);--accent:var(--m-accent);--accent-soft:var(--m-accent-soft)
  }
  html[data-theme="light"] body,
  html[data-theme="light"] .portal,
  html[data-theme="light"] .app,
  html[data-theme="light"] .portal-main,
  html[data-theme="light"] .workspace-scroll{
    background:var(--m-bg)!important;color:var(--m-text)!important
  }
  html[data-theme="light"] .module-screen,
  html[data-theme="light"] .settings-screen{color:var(--m-text)!important}

  html[data-theme="light"] .module-search,
  html[data-theme="light"] .segmented,
  html[data-theme="light"] .revisits-metrics article,
  html[data-theme="light"] .record-group,
  html[data-theme="light"] .person-group,
  html[data-theme="light"] .people-records-panel,
  html[data-theme="light"] .goal-card,
  html[data-theme="light"] .ministry-profile-card,
  html[data-theme="light"] .ministry-recent-panel,
  html[data-theme="light"] .service-year-card,
  html[data-theme="light"] .ministry-calendar-card,
  html[data-theme="light"] .report-card,
  html[data-theme="light"] .settings-group,
  html[data-theme="light"] .settings-control,
  html[data-theme="light"] .settings-action,
  html[data-theme="light"] .module-form,
  html[data-theme="light"] .about-dialog form{
    background:var(--m-surface)!important;border-color:var(--m-line)!important;color:var(--m-text)!important
  }
  html[data-theme="light"] .module-search input,
  html[data-theme="light"] .module-form input,
  html[data-theme="light"] .module-form select,
  html[data-theme="light"] .module-form textarea,
  html[data-theme="light"] .settings-control select{
    background:var(--m-surface-2)!important;border-color:var(--m-line)!important;color:var(--m-text)!important
  }
  html[data-theme="light"] .module-search input{background:transparent!important}
  html[data-theme="light"] .record-main strong,
  html[data-theme="light"] .record-group>summary strong,
  html[data-theme="light"] .records-panel h2,
  html[data-theme="light"] .module-empty strong,
  html[data-theme="light"] .goal-card header strong,
  html[data-theme="light"] .ministry-profile-card strong,
  html[data-theme="light"] .report-card h2,
  html[data-theme="light"] .report-card dd,
  html[data-theme="light"] .calendar-head h2,
  html[data-theme="light"] .settings-group h2{color:var(--m-text)!important}
  html[data-theme="light"] .record-main small,
  html[data-theme="light"] .record-group>summary small,
  html[data-theme="light"] .records-panel>header span,
  html[data-theme="light"] .module-empty p,
  html[data-theme="light"] .goal-card header span,
  html[data-theme="light"] .goal-card>small,
  html[data-theme="light"] .goal-card>p,
  html[data-theme="light"] .ministry-profile-card small,
  html[data-theme="light"] .report-card dt,
  html[data-theme="light"] .report-card small,
  html[data-theme="light"] .calendar-weekday,
  html[data-theme="light"] .calendar-hint,
  html[data-theme="light"] .settings-action small{color:var(--m-muted)!important}
  html[data-theme="light"] .record-main em{color:var(--m-accent)!important}
  html[data-theme="light"] .record-avatar,
  html[data-theme="light"] .status-chip{background:var(--m-accent-soft)!important;color:var(--m-accent)!important}

  html[data-theme="light"] .revisits-metrics article:nth-child(1){background:color-mix(in srgb,var(--m-band-revisits) 38%,var(--m-surface))!important}
  html[data-theme="light"] .revisits-metrics article:nth-child(2){background:color-mix(in srgb,var(--m-band-notes) 35%,var(--m-surface))!important}
  html[data-theme="light"] .revisits-metrics article:nth-child(3){background:color-mix(in srgb,var(--m-band-ministry) 34%,var(--m-surface))!important}
  html[data-theme="light"] .revisits-metrics article:nth-child(4){background:var(--m-surface-2)!important}
  html[data-theme="light"] .revisits-metrics .metric-icon{background:var(--m-surface-2)!important;color:var(--m-accent)!important}

  html[data-theme="light"] .ministry-top-metrics article{border-color:var(--m-line)!important;color:var(--m-text)!important}
  html[data-theme="light"] .ministry-top-metrics article:nth-child(1){background:color-mix(in srgb,var(--m-band-notes) 44%,var(--m-surface))!important}
  html[data-theme="light"] .ministry-top-metrics article:nth-child(2){background:color-mix(in srgb,var(--m-band-revisits) 44%,var(--m-surface))!important}
  html[data-theme="light"] .ministry-top-metrics article:nth-child(3){background:color-mix(in srgb,var(--m-band-ministry) 42%,var(--m-surface))!important}
  html[data-theme="light"] .ministry-top-metrics article:nth-child(4){background:var(--m-accent-soft)!important}
  html[data-theme="light"] .goal-track{background:var(--m-surface-2)!important}
  html[data-theme="light"] .goal-track i{background:linear-gradient(90deg,var(--m-accent),var(--m-ministry-accent))!important}
  html[data-theme="light"] .calendar-day{background:var(--m-surface-2)!important;border-color:var(--m-line)!important;color:var(--m-text)!important}
  html[data-theme="light"] .calendar-day.has-time{background:color-mix(in srgb,var(--m-band-ministry) 52%,var(--m-surface))!important}
  html[data-theme="light"] .calendar-day small{color:var(--m-accent)!important}
}

/* =========================================================
   CONTROLES TEMÁTICOS PENDIENTES
   Desktop/tablet: la tarjeta “Tu actividad” y sus iconos
   heredan la paleta activa. Móvil: la cabecera de Notas y
   el botón del libro WOL heredan la paleta móvil activa.
   ========================================================= */

@media (min-width:761px){
  .portal[data-active-module="hub"] .premium-summary{
    border:1px solid var(--c-line)!important;
    background:color-mix(in srgb,var(--c-paper) 90%,var(--c-accent-soft))!important;
    color:var(--c-ink)!important;
    box-shadow:var(--c-shadow-soft)!important;
    backdrop-filter:blur(16px)!important;
  }
  .portal[data-active-module="hub"] .premium-summary>header{
    border-color:var(--c-line)!important;
  }
  .portal[data-active-module="hub"] .premium-summary h2,
  .portal[data-active-module="hub"] .premium-summary strong{
    color:var(--c-ink)!important;
  }
  .portal[data-active-module="hub"] .premium-summary>header button{
    color:var(--c-accent-deep)!important;
  }
  .portal[data-active-module="hub"] .premium-summary .summary-grid>div{
    border:1px solid color-mix(in srgb,var(--c-line) 88%,transparent)!important;
    background:color-mix(in srgb,var(--c-paper-2) 88%,var(--c-accent-soft))!important;
  }
  .portal[data-active-module="hub"] .premium-summary small{
    color:var(--c-muted)!important;
  }
  .portal[data-active-module="hub"] .premium-summary .summary-grid>div:nth-child(1) .summary-icon{
    background:var(--c-accent-soft)!important;color:var(--c-accent-deep)!important;
  }
  .portal[data-active-module="hub"] .premium-summary .summary-grid>div:nth-child(2) .summary-icon{
    background:var(--c-lav-soft)!important;color:var(--c-lav)!important;
  }
  .portal[data-active-module="hub"] .premium-summary .summary-grid>div:nth-child(3) .summary-icon{
    background:var(--c-blue-soft)!important;color:var(--c-blue)!important;
  }
  .portal[data-active-module="hub"] .premium-summary .summary-grid>div:nth-child(4) .summary-icon{
    background:var(--c-gold-soft)!important;color:var(--c-gold)!important;
  }
}

@media (max-width:760px){
  .app .topbar{
    border-bottom-color:var(--m-line)!important;
    background:color-mix(in srgb,var(--m-surface) 92%,transparent)!important;
    color:var(--m-text)!important;
  }
  .app .notes-screen-title{
    color:var(--m-text)!important;
  }
  .app .topbar-actions .wol-book-button{
    border-color:color-mix(in srgb,var(--m-accent) 26%,var(--m-line))!important;
    background:var(--m-accent-soft)!important;
    color:var(--m-accent)!important;
  }
  .app .topbar-actions .wol-book-button svg{
    stroke:currentColor!important;
  }
}

/* =========================================================
   PANEL DE PÁGINAS TEMÁTICO
   Desktop/tablet: el fondo completo de la biblioteca de Notas
   hereda la paleta activa. Móvil permanece sin cambios.
   ========================================================= */

@media (min-width:761px){
  .app>.sidebar{
    background:linear-gradient(
      180deg,
      color-mix(in srgb,var(--c-paper) 94%,var(--c-bg)) 0%,
      color-mix(in srgb,var(--c-paper-2) 88%,var(--c-bg)) 100%
    )!important;
    border-right-color:var(--c-line)!important;
    color:var(--c-ink)!important;
    box-shadow:10px 0 30px color-mix(in srgb,var(--c-ink) 4%,transparent)!important;
  }
  .app>.sidebar .pages-tools,
  .app>.sidebar .page-list{
    background:transparent!important;
  }
}

/* SUPABASE AUTH + SYNC */

.auth-provider-button{margin-bottom:10px}

.microsoft-button{width:100%;height:52px;border:1px solid var(--line);background:var(--paper);color:var(--text);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:800;box-shadow:0 10px 24px rgba(20,26,45,.08)}

.microsoft-button:hover{border-color:color-mix(in srgb,var(--accent) 52%,var(--line));background:var(--panel-2)}

.microsoft-button>b{width:25px;height:25px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:2px}

.microsoft-button>b i:nth-child(1){background:#f25022}

.microsoft-button>b i:nth-child(2){background:#7fba00}

.microsoft-button>b i:nth-child(3){background:#00a4ef}

.microsoft-button>b i:nth-child(4){background:#ffb900}

.auth-provider-button:disabled{opacity:.58;cursor:wait}

.local-only-button{width:100%;min-height:42px;border:0;background:transparent;color:var(--muted);font-weight:750;font-size:11px;border-radius:11px;margin:0 0 4px}

.local-only-button:hover{background:var(--panel-2);color:var(--text)}

.login-card>[data-login-status][data-error="1"]{color:var(--danger)}

.login-card>[data-login-status]:not([data-error="1"]){color:var(--muted)}

.logout-header-button{font-size:17px!important}

.logout-settings-button{color:var(--danger)}

.settings-action[data-sync-now]:disabled{opacity:.55}

.desktop-local-status span,.local-pill span{white-space:nowrap}

@media(max-width:720px){.microsoft-button,.google-button{height:49px}.local-only-button{font-size:12px;min-height:44px}}

/* ACCOUNT SIGN-OUT CONTROL */

.logout-header-button{
  width:auto!important;
  min-width:40px!important;
  padding:0 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  color:var(--danger)!important;
  font-weight:800!important;
}

.logout-header-icon{font-size:17px;line-height:1}

.logout-header-label{font-size:10px;white-space:nowrap}

[data-logout]:disabled{opacity:.55;cursor:wait}

@media(max-width:760px){
  .logout-header-button{width:40px!important;min-width:40px!important;padding:0!important}
  .logout-header-label{display:none!important}
}

/* =========================================================
   DESKTOP/TABLET LOGIN VISIBILITY
   Prevents a stale/visible login layer from remaining behind
   authenticated desktop and tablet screens. No layout redesign.
   ========================================================= */

[data-login][hidden],
html.notea-authenticated [data-login],
body.notea-authenticated [data-login]{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

@media (min-width:721px){
  html.notea-authenticated .login-screen,
  body.notea-authenticated .login-screen{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    position:fixed!important;
    inset:auto!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    overflow:hidden!important;
  }
}

/* =========================================================
   CENTERED LOGIN + VISIBILITY
   Login-only visual layer. Auth providers and sync unchanged.
   ========================================================= */

.login-screen{
  --login-bg:#fbf9f3;
  --login-card:#fffdf9;
  --login-ink:#293129;
  --login-muted:#737b71;
  --login-line:#ddd8cc;
  --login-sage:#879f82;
  --login-sage-deep:#6f876c;
  --login-soft:#edf2e9;
  position:fixed!important;
  inset:0!important;
  z-index:1000!important;
  width:100%!important;
  height:100dvh!important;
  min-height:100svh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
  padding:0!important;
  color-scheme:light!important;
  background:
    radial-gradient(circle at 17% 9%,rgba(170,191,164,.20),transparent 29%),
    radial-gradient(circle at 85% 90%,rgba(224,207,179,.18),transparent 31%),
    linear-gradient(145deg,#fffefa 0%,var(--login-bg) 52%,#f4f1e9 100%)!important;
}

.login-screen::before,.login-screen::after{content:none!important;display:none!important}

.login-shell{
  width:100%!important;
  max-width:none!important;
  min-height:100%!important;
  margin:0!important;
  padding:clamp(28px,5vh,58px) 20px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
}

.login-intro{display:none!important}

.login-card{
  width:min(100%,465px)!important;
  max-width:465px!important;
  margin:0!important;
  padding:34px 36px 30px!important;
  border:1px solid var(--login-line)!important;
  border-radius:28px!important;
  overflow:visible!important;
  background:rgba(255,253,249,.99)!important;
  color:var(--login-ink)!important;
  box-shadow:0 28px 72px rgba(68,78,63,.14),0 5px 18px rgba(68,78,63,.05)!important;
  backdrop-filter:none!important;
}

html[data-theme] .login-card{background:rgba(255,253,249,.99)!important;color:var(--login-ink)!important;border-color:var(--login-line)!important}

.login-current-brand{
  height:auto!important;min-height:0!important;margin:0 0 24px!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;
}

.login-current-brand-icon{
  width:48px!important;height:48px!important;flex:0 0 48px!important;
  display:grid!important;place-items:center!important;padding:8px!important;border-radius:14px!important;
  background:var(--login-sage)!important;box-shadow:0 10px 24px rgba(91,111,87,.18)!important;
}

.login-current-brand-icon img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;filter:none!important}

.login-current-brand-copy{display:grid!important;gap:2px!important;text-align:left!important}

.login-current-brand-copy strong{font-family:var(--c-display,var(--serif))!important;font-size:27px!important;line-height:1!important;letter-spacing:-.035em!important;color:var(--login-ink)!important}

.login-current-brand-copy small{font-size:9px!important;line-height:1.2!important;color:#7a8176!important}

.login-card .login-welcome{margin:0 0 8px!important;color:var(--login-sage-deep)!important;font-size:9px!important;letter-spacing:.2em!important}

.login-card h2{margin:0 0 11px!important;color:var(--login-ink)!important;font-size:34px!important;line-height:1.06!important;letter-spacing:-.04em!important}

.login-card>p:not(.login-welcome){margin:0 0 23px!important;color:var(--login-muted)!important;font-size:13px!important;line-height:1.6!important}

.login-card .google-button,.login-card .microsoft-button{min-height:52px!important;height:52px!important;border-radius:14px!important}

.login-card .microsoft-button{border-color:#dcd6ca!important;background:#fffefa!important;color:#2d342d!important}

.login-card .login-language-picker{background:#f6f4ed!important;border-color:#ded9cd!important;color:#727a70!important}

.login-card .login-language-picker select{background:#fffdf9!important;border-color:#ded9cd!important;color:var(--login-ink)!important}

.login-card .login-local-note{border-color:#e1dcd0!important;color:var(--login-ink)!important}

.login-card .login-local-note small{color:#777d73!important}

@media(max-width:720px){
  .login-screen{height:100dvh!important;min-height:100svh!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important}
  .login-shell{
    min-height:100%!important;
    padding:calc(18px + env(safe-area-inset-top)) 14px calc(22px + env(safe-area-inset-bottom))!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }
  .login-card{
    width:min(100%,440px)!important;max-width:440px!important;
    margin-top:auto!important;margin-bottom:auto!important;
    padding:24px 20px 22px!important;border-radius:22px!important;
  }
  .login-current-brand{margin-bottom:18px!important;gap:10px!important}
  .login-current-brand-icon{width:42px!important;height:42px!important;flex-basis:42px!important;padding:7px!important;border-radius:12px!important}
  .login-current-brand-copy strong{font-size:24px!important}.login-current-brand-copy small{font-size:8px!important}
  .login-card h2{font-size:29px!important;line-height:1.08!important}
  .login-card>p:not(.login-welcome){font-size:12px!important;margin-bottom:18px!important}
  .login-card .google-button,.login-card .microsoft-button{min-height:49px!important;height:auto!important;padding:10px 12px!important}
}

@media(max-width:390px){
  .login-shell{padding-left:11px!important;padding-right:11px!important}
  .login-card{padding-left:17px!important;padding-right:17px!important}
  .login-card h2{font-size:27px!important}
}

/* Final invariant: if the app portal is visible, the login can never render. */

[data-login][hidden],
html.notea-authenticated [data-login],
body.notea-authenticated [data-login],
body:has([data-portal]:not([hidden])) [data-login]{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  content-visibility:hidden!important;
}

/* INSTALL INTENT FLOW */

.install-intent-dialog{width:min(92vw,470px);border:1px solid var(--line);border-radius:24px;padding:0;background:var(--paper);color:var(--ink);box-shadow:0 28px 90px rgba(20,28,24,.24)}

.install-intent-dialog::backdrop{background:rgba(18,27,22,.46);backdrop-filter:blur(8px)}

.install-intent-dialog form{padding:22px}

.install-intent-dialog header{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);padding-bottom:17px}

.install-intent-body{padding-top:20px}

.install-intent-body h2{font:800 25px/1.05 var(--c-display,var(--font));margin:0 0 10px}

.install-intent-body>p{font-size:12px;line-height:1.6;color:var(--muted);margin:0}

.install-intent-body ol{margin:17px 0;padding-left:20px;font-size:12px;line-height:1.7;color:var(--muted)}

.install-intent-action{width:100%;min-height:48px;margin-top:4px}

.install-intent-body>small{display:block;text-align:center;color:var(--muted);font-size:9px;line-height:1.5;margin-top:12px}

@media(max-width:720px){.install-intent-dialog{width:min(94vw,440px);border-radius:21px}.install-intent-dialog form{padding:18px}.install-intent-body h2{font-size:23px}}

/* =========================================================
   NOTEA — PASE FINAL DE PULIDO ESTÉTICO
   Tipografía nítida, iconos consistentes multiplataforma,
   números tabulares y pequeños detalles de acabado.
   Solo capa visual: no toca estructura, datos ni sesión.
   ========================================================= */

/* Renderizado de fuente más nítido y uniforme en toda la app */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

body,input,textarea,select,button{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}

.free-editor,.template-note,.page-title{font-feature-settings:"kern" 1,"liga" 1,"onum" 1}

/* Iconos: los glifos Unicode (⌂ ▤ ♙ ◷ ⚙ ↪ ☁ ✦ ⌘ 🔒 ›) se fuerzan a
   presentación de texto/monolínea para que no aparezcan como emoji a
   todo color en iOS/Android, rompiendo el estilo minimal de línea. */

.desktop-nav-menu button span,.desktop-nav-links button span,
.portal-bottom-nav button span,.notes-bottom-nav button span,
.portal-icon-button,.hub-card-icon,.logout-header-icon,
.login-benefits span,.login-local-note>span,.login-eyebrow,
.empty-icon,.summary-icon,.action-icon,.status-chip,
.hub-card-arrow,.desktop-nav-brand-icon,.desktop-nav-focus-card>span{
  font-variant-emoji:text;
  font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols","Inter",var(--ui);
  font-weight:600;
  line-height:1;
}

/* Números que cambian (contadores, temporizador, métricas) con ancho
   fijo por dígito: evita el "salto" visual al actualizarse. */

.hub-card-count b,.metric-grid strong,.revisits-metrics strong,
.ministry-top-metrics strong,.timer-display,.timer-ring strong,
.summary-grid strong,.report-card dd,.year-bar,.goal-card strong{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Acabado fino en botones interactivos que aún usaban solo el estilo
   base: transición homogénea y un borde interior sutil tipo "glass". */

.portal-icon-button,.icon-button,.compact-actions button,.settings-action,
.toolbar button,.toolbar select,.color-tool,.more-menu button,
.footer-row,.folder-block,.page-open{
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease;
}

.portal-icon-button:active,.icon-button:active{transform:translateY(0) scale(.93)}

/* Contenedor de icono redondeado y perfectamente centrado en toda la
   navegación, para que ningún glifo quede desalineado por su métrica. */

.desktop-nav-menu button span,.portal-bottom-nav button span,.notes-bottom-nav button span{
  display:inline-flex;align-items:center;justify-content:center;
}

/* Brillo de cristal sutil en tarjetas y superficies elevadas */

.hub-card,.goal-card,.report-card,.people-records-panel,.ministry-profile-card,
.ministry-recent-panel,.service-year-card,.settings-screen .settings-group,
.premium-summary,.ministry-timer-hero,.ministry-calendar-card{
  position:relative;
}

.hub-card::after,.goal-card::after,.report-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,#fff 14%,transparent),transparent 40%);
  opacity:.6;mix-blend-mode:soft-light;
}

:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .hub-card::after,:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .goal-card::after,:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .report-card::after{
  opacity:.28;
}

/* Botón de logout: icono y etiqueta perfectamente alineados */

.logout-header-button{display:inline-flex;align-items:center;gap:6px}

.logout-header-icon{display:inline-flex;transition:transform .18s ease}

.logout-header-button:hover .logout-header-icon{transform:translateX(2px)}

/* Placeholder y select coherentes con el tema en todos los navegadores */

select{color-scheme:light dark}

:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) select{color-scheme:dark}

/* Evita desbordes horizontales accidentales en pantallas muy angostas */

html,body{max-width:100%;overflow-x:hidden}

/* Estados deshabilitados más legibles y consistentes */

button:disabled,input:disabled,select:disabled,textarea:disabled{
  cursor:not-allowed;opacity:.6;filter:saturate(.7);
}

@media(prefers-reduced-motion:reduce){
  .hub-card::after,.goal-card::after,.report-card::after{display:none}
}

/* =========================================================
   EDITOR / PAGE / PRINT
   Scope: presentation only. Does not touch auth, Supabase,
   storage/sync data structures, or RLS.
   ========================================================= */

/* Long uninterrupted text must never escape the note page. */

.free-editor,
.free-editor *{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-wrap:break-word;
  word-break:break-word;
}

/* When a note is open, the paper is the full writing canvas on every size. */

.workspace-scroll:has(> .paper:not([hidden])){
  padding:0!important;
  background:var(--c-paper,var(--paper))!important;
}

.workspace-scroll> .paper:not([hidden]){
  width:100%!important;
  max-width:none!important;
  min-height:100%!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:var(--c-paper,var(--paper))!important;
}

@media (min-width:761px){
  .workspace-scroll> .paper:not([hidden]){
    padding:46px clamp(38px,5vw,78px) 72px!important;
  }
  .workspace-scroll> .paper:not([hidden]) .page-heading,
  .workspace-scroll> .paper:not([hidden]) .template-heading,
  .workspace-scroll> .paper:not([hidden]) .toolbar,
  .workspace-scroll> .paper:not([hidden]) .free-editor,
  .workspace-scroll> .paper:not([hidden]) .template-program,
  .workspace-scroll> .paper:not([hidden]) .paper-footer{
    width:100%!important;
    max-width:1180px!important;
  }
  .workspace-scroll> .paper:not([hidden]) .free-editor{
    max-width:1080px!important;
  }
}

@media (max-width:760px){
  .workspace-scroll> .paper:not([hidden]){
    padding:27px 18px calc(98px + env(safe-area-inset-bottom))!important;
  }
  .workspace-scroll> .paper:not([hidden]) .page-heading,
  .workspace-scroll> .paper:not([hidden]) .template-heading,
  .workspace-scroll> .paper:not([hidden]) .toolbar,
  .workspace-scroll> .paper:not([hidden]) .free-editor,
  .workspace-scroll> .paper:not([hidden]) .template-program,
  .workspace-scroll> .paper:not([hidden]) .paper-footer{
    width:100%!important;
    max-width:none!important;
  }
  .workspace-scroll> .paper:not([hidden]) .free-editor{
    min-height:calc(100dvh - 300px)!important;
  }
}

/* Print/PDF is a clean document: no Notea navigation or transient UI. */

@page{margin:.65in}

@media print{
  html,body{
    width:auto!important;height:auto!important;max-width:none!important;
    overflow:visible!important;background:#fff!important;color:#111!important;
  }
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  .login-screen,.portal,.desktop-global-nav,.sidebar,.scrim,.topbar,
  .notes-bottom-nav,.portal-bottom-nav,.wol-panel,.toolbar,.paper-footer,
  .focus-exit,.more-menu,.toast,.editor-color-palette,dialog,
  .empty-workspace{
    display:none!important;
  }

  .app,.workspace,.workspace-scroll{
    display:block!important;width:auto!important;height:auto!important;min-height:0!important;
    max-width:none!important;overflow:visible!important;margin:0!important;padding:0!important;
    background:#fff!important;border:0!important;box-shadow:none!important;
  }
  .workspace-scroll:has(> .paper:not([hidden])){padding:0!important;background:#fff!important}
  .workspace-scroll> .paper:not([hidden]){
    display:block!important;width:100%!important;max-width:none!important;min-height:0!important;
    margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
    box-shadow:none!important;background:#fff!important;color:#111!important;overflow:visible!important;
  }
  .paper::before,.paper::after,.page-heading::before,.page-heading::after{display:none!important;content:none!important}
  .paper button,.paper select,.paper .tags-popover,.reminder-popover{display:none!important}
  .page-heading,.template-heading,.free-editor,.template-program{
    width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;
    overflow:visible!important;
  }
  .page-title{
    color:#111!important;background:transparent!important;border:0!important;box-shadow:none!important;
    -webkit-text-fill-color:#111!important;
  }
  .page-meta{color:#555!important}
  .free-editor,.free-editor *,.template-program,.template-program *{
    overflow-wrap:anywhere!important;word-break:break-word!important;
  }
  .free-editor{min-height:0!important;padding:24px 0 0!important;color:#111!important}
  .template-note{min-height:0!important;border:1px solid #d7d7d7!important;background:#fff!important}
  img{max-width:100%!important;height:auto!important}
}

/* =========================================================
   QUICK LOGOUT ACCESS
   Desktop/tablet only. Reuses the existing data-logout action,
   so authentication/session logic remains unchanged.
   ========================================================= */

@media (min-width:761px){
  .desktop-quick-logout{
    position:relative;z-index:2;
    width:calc(100% - 8px);min-height:39px;margin:0 4px 7px;padding:0 10px;
    border:1px solid color-mix(in srgb,var(--c-nav-active) 18%,var(--c-line));
    border-radius:12px;background:color-mix(in srgb,var(--c-paper) 42%,transparent);
    color:color-mix(in srgb,var(--c-nav-ink) 78%,transparent);
    display:flex;align-items:center;gap:9px;text-align:left;
    font-family:var(--c-ui,"Inter",system-ui,sans-serif);cursor:pointer;
    transition:transform .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
  }
  .desktop-quick-logout-icon{
    width:27px;height:27px;flex:0 0 27px;border-radius:9px;
    display:grid;place-items:center;font-size:15px;line-height:1;
    background:color-mix(in srgb,var(--c-nav-active) 10%,transparent);
    transition:transform .16s ease,background-color .16s ease;
  }
  .desktop-quick-logout b{font-size:10px;font-weight:720;letter-spacing:.005em}
  .desktop-quick-logout:hover{
    color:var(--c-accent-deep);
    border-color:color-mix(in srgb,var(--c-accent) 48%,var(--c-line));
    background:color-mix(in srgb,var(--c-accent-soft) 76%,var(--c-paper));
    box-shadow:0 7px 18px color-mix(in srgb,var(--c-accent) 10%,transparent);
    transform:translateY(-1px);
  }
  .desktop-quick-logout:hover .desktop-quick-logout-icon{
    transform:translateX(2px);
    color:var(--c-accent-deep);
    background:color-mix(in srgb,var(--c-accent) 18%,transparent);
  }
  .desktop-quick-logout:active{transform:translateY(0) scale(.985)}
  .desktop-quick-logout:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
  .desktop-quick-logout:disabled{opacity:.55;cursor:wait;transform:none}
}

@media (max-width:760px){.desktop-quick-logout{display:none!important}}

@media print{.desktop-quick-logout{display:none!important}}

/* =========================================================
   LOCAL AVATAR PROFILE
   Visual profile only. The selected avatar is stored in localStorage;
   no Supabase tables, Storage buckets, auth or sync code are involved.
   ========================================================= */

.profile-settings-group{position:relative;overflow:hidden}

.avatar-profile-row{display:flex;align-items:center;justify-content:space-between;gap:18px}

.avatar-profile-current{display:flex;align-items:center;gap:13px;min-width:0}

.avatar-profile-image{width:68px;height:68px;flex:0 0 68px;border-radius:22px;padding:4px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 20%,var(--paper)),var(--paper));border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 10%,transparent);overflow:hidden}

.avatar-profile-image img,.desktop-avatar-image img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}

.avatar-profile-copy{display:grid;min-width:0}

.avatar-profile-copy strong{font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}

.avatar-profile-copy b{font-family:var(--ui)!important;font-size:20px;line-height:1.1;margin-top:3px;color:var(--text)}

.avatar-profile-copy small{font-size:9px;color:var(--muted);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}

.avatar-profile-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.avatar-change-button,.avatar-reset-button{min-height:39px;border-radius:11px;font:700 10px/1 "Inter",system-ui,sans-serif;cursor:pointer;transition:.16s ease}

.avatar-change-button{border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));background:var(--accent-soft);color:var(--accent);padding:0 11px 0 13px;display:flex;align-items:center;gap:14px}

.avatar-change-button i{font-style:normal;font-size:18px;line-height:1}

.avatar-change-button:hover{background:color-mix(in srgb,var(--accent) 18%,var(--accent-soft));transform:translateY(-1px)}

.avatar-reset-button{border:1px solid var(--line);background:var(--paper);color:var(--muted);padding:0 12px}

.avatar-reset-button:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--line));color:var(--accent)}

.avatar-local-note{display:flex;align-items:center;gap:6px;margin-top:11px;color:var(--muted);font-size:8.5px}

.avatar-local-note>span:first-child{color:var(--accent);font-size:13px}

.avatar-dialog{padding:0;border:0;background:transparent;color:var(--text);max-width:none;max-height:none}

.avatar-dialog::backdrop{background:rgba(28,31,30,.48);backdrop-filter:blur(8px)}

.avatar-dialog-shell{width:min(760px,calc(100vw - 28px));max-height:min(86dvh,820px);overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:0 28px 90px rgba(34,37,34,.22);padding:0}

.avatar-dialog-shell>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px 24px 17px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,var(--paper),color-mix(in srgb,var(--accent-soft) 48%,var(--paper)))}

.avatar-dialog-shell>header>div{min-width:0}

.avatar-dialog-shell>header small{display:block;color:var(--accent);font:800 8px/1 "Inter",system-ui,sans-serif;letter-spacing:.18em}

.avatar-dialog-shell h2{font-family:var(--ui)!important;font-size:27px;line-height:1.05;letter-spacing:-.025em;margin:6px 0 5px}

.avatar-dialog-shell header p{margin:0;color:var(--muted);font-size:10.5px;line-height:1.5}

.avatar-dialog-close{width:34px;height:34px;flex:0 0 34px;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--muted);font-size:20px;cursor:pointer}

.avatar-dialog-close:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 32%,var(--line));background:var(--accent-soft)}

.avatar-grid{min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:20px 24px 23px;overscroll-behavior:contain}

.avatar-choice{position:relative;min-width:0;border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:8px 7px 9px;display:grid;gap:6px;justify-items:center;color:var(--text);cursor:pointer;transition:transform .15s ease,border-color .15s ease,background-color .15s ease,box-shadow .15s ease}

.avatar-choice:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 38%,var(--line));background:color-mix(in srgb,var(--accent-soft) 42%,var(--paper));box-shadow:0 9px 22px color-mix(in srgb,var(--accent) 9%,transparent)}

.avatar-choice.is-selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 70%,var(--paper));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent)}

.avatar-choice-art{position:relative;width:74px;max-width:100%;aspect-ratio:1;border-radius:18px;overflow:hidden}

.avatar-choice-art img{width:100%;height:100%;display:block;object-fit:cover}

.avatar-choice-art i{position:absolute;right:3px;bottom:3px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font:800 12px/1 "Inter",system-ui,sans-serif;box-shadow:0 3px 9px rgba(0,0,0,.16)}

.avatar-choice-art i:empty{display:none}

.avatar-choice small{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:var(--muted);font:650 8.5px/1.2 "Inter",system-ui,sans-serif}

.avatar-choice.is-selected small{color:var(--accent);font-weight:800}

.avatar-dialog-shell>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 24px 16px;border-top:1px solid var(--line);background:var(--panel)}

.avatar-dialog-shell>footer>span{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:8.5px}

.avatar-dialog-shell>footer i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 12%,transparent)}

.avatar-dialog-done{min-width:88px;height:38px;border:0;border-radius:11px;background:var(--accent);color:#fff;font:750 10px/1 "Inter",system-ui,sans-serif;cursor:pointer}

.avatar-dialog-done:hover{filter:brightness(.96);transform:translateY(-1px)}

@media (min-width:761px){
  .settings-screen .settings-layout{grid-template-areas:"profile profile" "appearance ministry" "data app"!important}
  .profile-settings-group .avatar-profile-image{background:linear-gradient(145deg,color-mix(in srgb,var(--c-accent) 18%,var(--c-paper)),var(--c-paper));border-color:color-mix(in srgb,var(--c-accent) 26%,var(--c-line));box-shadow:0 10px 24px color-mix(in srgb,var(--c-accent) 9%,transparent)}
  .profile-settings-group .avatar-profile-copy b{color:var(--c-ink)}.profile-settings-group .avatar-profile-copy strong,.profile-settings-group .avatar-profile-copy small,.profile-settings-group .avatar-local-note{color:var(--c-muted)}
  .profile-settings-group .avatar-local-note>span:first-child,.profile-settings-group .avatar-change-button{color:var(--c-accent-deep)}
  .profile-settings-group .avatar-change-button{border-color:color-mix(in srgb,var(--c-accent) 40%,var(--c-line));background:var(--c-accent-soft)}.profile-settings-group .avatar-reset-button{border-color:var(--c-line);background:var(--c-paper);color:var(--c-muted)}
  .desktop-avatar-profile{position:relative;z-index:2;width:calc(100% - 8px);min-height:54px;margin:0 4px 8px;padding:6px 8px;border:1px solid color-mix(in srgb,var(--c-nav-active) 18%,var(--c-line));border-radius:14px;background:color-mix(in srgb,var(--c-paper) 44%,transparent);color:var(--c-nav-ink);display:grid;grid-template-columns:39px minmax(0,1fr) 16px;align-items:center;gap:8px;text-align:left;cursor:pointer;transition:.16s ease}
  .desktop-avatar-profile:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--c-accent) 42%,var(--c-line));background:color-mix(in srgb,var(--c-accent-soft) 66%,var(--c-paper));box-shadow:0 8px 20px color-mix(in srgb,var(--c-accent) 9%,transparent)}
  .desktop-avatar-image{width:39px;height:39px;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.08)}.desktop-avatar-copy{display:grid;min-width:0}.desktop-avatar-copy b{font-size:9px;font-weight:760;color:color-mix(in srgb,var(--c-nav-ink) 78%,transparent)}.desktop-avatar-copy small{font-size:8px;color:color-mix(in srgb,var(--c-nav-ink) 56%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.desktop-avatar-chevron{font-size:18px;color:color-mix(in srgb,var(--c-nav-ink) 45%,transparent)}
  .avatar-dialog-shell{color:var(--c-ink);background:var(--c-paper);border-color:var(--c-line)}.avatar-dialog-shell>header{border-color:var(--c-line);background:linear-gradient(135deg,var(--c-paper),color-mix(in srgb,var(--c-accent-soft) 52%,var(--c-paper)))}.avatar-dialog-shell>header small{color:var(--c-accent-deep)}.avatar-dialog-shell header p{color:var(--c-muted)}.avatar-dialog-close{background:var(--c-paper);border-color:var(--c-line);color:var(--c-muted)}.avatar-choice{background:var(--c-paper);border-color:var(--c-line);color:var(--c-ink)}.avatar-choice small{color:var(--c-muted)}.avatar-choice:hover,.avatar-choice.is-selected{border-color:var(--c-accent);background:color-mix(in srgb,var(--c-accent-soft) 68%,var(--c-paper))}.avatar-choice.is-selected small{color:var(--c-accent-deep)}.avatar-choice-art i,.avatar-dialog-done{background:var(--c-accent-deep)}.avatar-dialog-shell>footer{background:var(--c-paper-2);border-color:var(--c-line)}.avatar-dialog-shell>footer>span{color:var(--c-muted)}
}

@media (max-width:760px){
  .desktop-avatar-profile{display:none!important}
  .avatar-profile-row{align-items:flex-start;flex-direction:column}.avatar-profile-current{width:100%}.avatar-profile-actions{width:100%;justify-content:stretch}.avatar-change-button{flex:1;justify-content:space-between}.avatar-reset-button{flex:0 0 auto}
  .avatar-profile-image{width:62px;height:62px;flex-basis:62px;border-radius:19px}.avatar-profile-copy b{font-size:18px}.avatar-profile-copy small{max-width:210px}
  .avatar-dialog-shell{width:calc(100vw - 18px);max-height:88dvh;border-radius:20px}.avatar-dialog-shell>header{padding:18px 17px 14px}.avatar-dialog-shell h2{font-size:23px}.avatar-dialog-shell header p{font-size:9.5px}.avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:14px 13px 18px}.avatar-choice{border-radius:14px;padding:6px 5px 8px}.avatar-choice-art{width:64px;border-radius:15px}.avatar-choice small{font-size:7.8px}.avatar-dialog-shell>footer{padding:11px 14px calc(12px + env(safe-area-inset-bottom))}.avatar-dialog-shell>footer>span{font-size:7.8px}.avatar-dialog-done{min-width:76px}
}

@media (max-width:390px){.avatar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.avatar-choice-art{width:68px}.avatar-dialog-shell>footer>span{max-width:170px;line-height:1.3}}

@media print{.desktop-avatar-profile,.avatar-dialog{display:none!important}}

/* =========================================================
   SETTINGS + MOBILE HUB AVATAR
   - Cleaner Settings card rhythm on desktop/tablet
   - Theme names remain contained (including Lavender)
   - Mobile Hub gets a direct avatar shortcut to Profile
   ========================================================= */

.mobile-hub-avatar{display:none}

.app-settings-group>header p{display:none!important}

@media (min-width:761px){
  .settings-screen{max-width:1160px!important}
  .settings-screen .settings-layout{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-areas:
      "profile profile"
      "appearance ministry"
      "data data"
      "app app"!important;
    gap:14px!important;
    align-items:start!important;
  }
  .settings-screen .profile-settings-group{grid-area:profile!important}
  .settings-screen .appearance-settings-group{grid-area:appearance!important;display:block!important}
  .settings-screen .ministry-settings-group{grid-area:ministry!important}
  .settings-screen .data-settings-group{
    grid-area:data!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:14px!important;
    align-items:start!important;
  }
  .settings-screen .data-settings-group>header{grid-column:1/-1!important}
  .settings-screen .data-settings-group .settings-action{width:100%!important;min-width:0!important}
  .settings-screen .data-settings-group .logout-settings-button{grid-column:1/-1!important}
  .settings-screen .app-settings-group{grid-area:app!important;display:block!important}

  .appearance-settings-group>header{grid-column:auto!important}
  .appearance-settings-group .theme-palette{
    display:grid!important;
    width:100%!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .appearance-settings-group .settings-control:last-child{
    display:flex!important;
    width:100%!important;
    margin-top:10px!important;
    border:1px solid var(--c-line)!important;
    border-radius:13px!important;
    padding:8px 10px!important;
    background:var(--c-paper-2)!important;
  }
  .theme-palette button{
    min-width:0!important;
    grid-template-columns:24px minmax(0,1fr)!important;
    gap:7px!important;
    padding:7px 8px!important;
    font-size:9px!important;
  }
  .theme-palette button i{width:24px!important;height:24px!important}
  .theme-palette button span{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}

@media (min-width:761px) and (max-width:900px){
  .appearance-settings-group .theme-palette{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:760px){
  .portal[data-active-module="hub"] .mobile-hub-avatar{
    display:grid!important;
    place-items:center!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    flex:0 0 44px!important;
    padding:3px!important;
    border:1px solid color-mix(in srgb,var(--m-accent) 42%,var(--m-line))!important;
    border-radius:50%!important;
    background:var(--m-surface)!important;
    box-shadow:0 7px 18px rgba(45,64,65,.10)!important;
    overflow:hidden!important;
    cursor:pointer!important;
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important;
  }
  .portal[data-active-module="hub"] .mobile-hub-avatar:active{transform:scale(.94)!important}
  .portal[data-active-module="hub"] .mobile-hub-avatar img{
    width:100%!important;
    height:100%!important;
    display:block!important;
    object-fit:cover!important;
    border-radius:50%!important;
  }
  .app-settings-group .settings-action{min-height:52px!important}
}

@media print{.mobile-hub-avatar{display:none!important}}

/* =====================================================================
   MAIN VISUAL LAYER
   =====================================================================
   Todo lo de aquí abajo es PURAMENTE VISUAL: sombras, cristal (glass),
   degradados, animaciones de hover/foco, tipografía y espaciado fino.
   No se añade ni se quita ninguna clase que el JS use para leer datos,
   no se toca autenticación, ni supabase-config.js, ni la sincronización.
   Se apoya siempre en las mismas variables de tema (--accent, --bg…)
   que ya existían, así que funciona igual en los 9 temas y es 100%
   reversible borrando este bloque. ===================================== */

/* ---------- 1) Tokens extra de profundidad y cristal ---------- */

:root{
  --glass-bg: color-mix(in srgb, var(--paper) 62%, transparent);
  --glass-border: color-mix(in srgb, var(--paper) 55%, var(--line) 45%);
  --glass-blur: 22px;
  --ring-1: color-mix(in srgb, var(--accent) 55%, transparent);
  --ring-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --shadow-xl: 0 32px 90px -24px color-mix(in srgb, var(--text) 32%, transparent), 0 2px 0 0 color-mix(in srgb, var(--paper) 70%, transparent) inset;
  --shadow-float: 0 14px 34px -14px color-mix(in srgb, var(--accent) 38%, transparent);
  --sheen: linear-gradient(115deg, transparent 30%, color-mix(in srgb,#fff 65%,transparent) 47%, transparent 64%);
}

:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]){
  --glass-bg: color-mix(in srgb, var(--paper) 66%, transparent);
  --glass-border: color-mix(in srgb, #fff 10%, var(--line) 90%);
  --shadow-xl: 0 36px 100px -22px rgba(0,0,0,.65), 0 1px 0 0 color-mix(in srgb,#fff 6%,transparent) inset;
  --sheen: linear-gradient(115deg, transparent 30%, color-mix(in srgb,#fff 18%,transparent) 47%, transparent 64%);
}

*{-webkit-tap-highlight-color:transparent}

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* Grano/textura muy sutil sobre toda la app: le da tacto "papel premium" */

body::after{
  content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width:760px){ body::after{ opacity:.022 } }

/* Aurora de fondo, un poco más rica, usando los 3 acentos de cada tema */

body{
  background:
    radial-gradient(circle at 14% -8%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 34%),
    radial-gradient(circle at 102% 6%, color-mix(in srgb,var(--accent-2) 9%,transparent), transparent 32%),
    radial-gradient(circle at 40% 115%, color-mix(in srgb,var(--accent-3) 7%,transparent), transparent 40%),
    var(--bg) !important;
}

/* ---------- 2) Barra lateral y superior: cristal de verdad ---------- */

.sidebar{
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--paper) 30%,transparent), transparent 120px),
    var(--glass-bg) !important;
  backdrop-filter:blur(var(--glass-blur)) saturate(160%) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%) !important;
  box-shadow: 1px 0 0 0 var(--glass-border) inset, -26px 0 60px -40px color-mix(in srgb,var(--text) 30%,transparent);
}

.topbar{
  background:var(--glass-bg) !important;
  backdrop-filter:blur(var(--glass-blur)) saturate(170%) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(170%) !important;
  box-shadow:0 1px 0 0 var(--glass-border) inset, 0 18px 40px -30px color-mix(in srgb,var(--text) 28%,transparent) !important;
}

.brand-mark{
  background:var(--accent-gradient) !important;
  box-shadow:0 8px 18px -6px color-mix(in srgb,var(--accent) 55%,transparent), inset 0 -6px 10px rgba(0,0,0,.15);
}

.pages-title-row h2{background:linear-gradient(120deg,var(--text),color-mix(in srgb,var(--text) 55%,var(--accent)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- 3) Botones: brillo, elevación y "sheen" en primarios ---------- */

button{cursor:pointer}

.primary{position:relative;overflow:hidden;isolation:isolate}

.primary::before{
  content:"";position:absolute;inset:0;background:var(--sheen);
  transform:translateX(-120%);transition:transform .65s cubic-bezier(.2,.8,.2,1);z-index:1;pointer-events:none;
}

.primary:hover::before{transform:translateX(120%)}

.primary:focus-visible{box-shadow:0 0 0 4px var(--ring-soft), 0 16px 32px -8px color-mix(in srgb,var(--accent) 60%,transparent) !important}

.quick-create,.module-primary{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--accent-gradient) !important;
  box-shadow:var(--shadow-float) !important;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease !important;
}

.quick-create::before,.module-primary::before{content:"";position:absolute;inset:0;background:var(--sheen);transform:translateX(-120%);transition:transform .65s cubic-bezier(.2,.8,.2,1)}

.quick-create:hover::before,.module-primary:hover::before{transform:translateX(120%)}

.quick-create:hover,.module-primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px color-mix(in srgb,var(--accent) 55%,transparent) !important}

.quick-create:active,.module-primary:active{transform:translateY(0) scale(.97)}

.back-button,.dialog-close,.avatar-dialog-close,.folder-head>button,.icon-button,.settings-action,.footer-row,
.compact-actions button,.avatar-reset-button,.avatar-change-button,.tool-dropdown-trigger,.color-picker-trigger,
.search-favorite,.trash-item-actions button,.mobile-sidebar-editor{
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background-color .18s ease,border-color .18s ease,color .18s ease !important;
}

.back-button:hover,.folder-head>button:hover,.icon-button:hover,.color-picker-trigger:hover{
  box-shadow:0 8px 18px -10px color-mix(in srgb,var(--accent) 45%,transparent);
}

.compact-actions button{position:relative;overflow:hidden}

.compact-actions button:hover{box-shadow:0 14px 28px -14px color-mix(in srgb,var(--accent) 50%,transparent) !important}

.avatar-change-button,.settings-action.install-app-button,.google-button{position:relative;overflow:hidden}

/* Estados presionados, unificados y satisfactorios */

.back-button:active,.dialog-close:active,.avatar-dialog-close:active,.folder-head>button:active,.icon-button:active,
.compact-actions button:active,.avatar-reset-button:active,.avatar-change-button:active,.tool-dropdown-trigger:active,
.color-picker-trigger:active,.search-favorite:active,.trash-item-actions button:active,.settings-action:active{
  transform:scale(.95) !important;
}

/* ---------- 4) Selects unificados con flecha propia y foco elegante ---------- */

.settings-control select,.theme-select-control select,select[data-theme-select],select[data-language-select],
select[data-ministry-profile],select[data-ministry-aux-goal]{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(var(--panel),var(--panel)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center,right 12px center;background-size:0,10px;
  padding-right:32px !important;
  box-shadow:0 1px 0 0 color-mix(in srgb,#fff 40%,transparent) inset;
  transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease;
}

.settings-control select:hover,select[data-theme-select]:hover,select[data-language-select]:hover{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line)) !important;
}

.settings-control select:focus-visible,select[data-theme-select]:focus-visible,select[data-language-select]:focus-visible{
  border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--ring-soft) !important;outline:0 !important;
}

/* ---------- 5) Paleta de temas: pastillas con degradado real por tema ---------- */

.theme-palette{gap:8px !important}

.theme-palette button{
  position:relative;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,border-color .2s ease,background .2s ease !important;
}

.theme-palette button i{
  display:block;border-radius:50%;width:26px;height:26px;
  border:2px solid var(--paper);
  box-shadow:0 0 0 1px var(--line), inset 0 0 0 1px color-mix(in srgb,#fff 35%,transparent), 0 5px 12px -4px rgba(0,0,0,.28);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease;
}

.theme-palette button:hover{transform:translateY(-3px)}

.theme-palette button:hover i{transform:scale(1.12) rotate(8deg)}

.theme-palette button:active i{transform:scale(.94)}

.theme-palette button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--accent) !important;border-radius:12px;background:var(--accent-soft) !important}

.theme-palette button[aria-pressed="true"] i{box-shadow:0 0 0 1px var(--line), inset 0 0 0 1px color-mix(in srgb,#fff 45%,transparent), 0 6px 14px -3px color-mix(in srgb,var(--accent) 55%,transparent)}

.theme-palette button[aria-pressed="true"] i::after{
  content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:900;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

.theme-palette button i{position:relative}

.theme-palette button[data-theme-choice="light"]  i{background:radial-gradient(circle at 30% 30%,#ff6fa8 0%,transparent 55%),radial-gradient(circle at 72% 26%,#9b6bff 0%,transparent 55%),radial-gradient(circle at 50% 78%,#6269e7 0%,transparent 62%),#f4f5f9}

.theme-palette button[data-theme-choice="dark"]   i{background:radial-gradient(circle at 30% 30%,#ff8fbd 0%,transparent 55%),radial-gradient(circle at 72% 26%,#b98bff 0%,transparent 55%),radial-gradient(circle at 50% 78%,#8b91ff 0%,transparent 62%),#12151d}

.theme-palette button[data-theme-choice="pink"]   i{background:radial-gradient(circle at 30% 30%,#ffb27a 0%,transparent 55%),radial-gradient(circle at 72% 26%,#ff8fc4 0%,transparent 55%),radial-gradient(circle at 50% 78%,#d85f98 0%,transparent 62%),#fff5f9}

.theme-palette button[data-theme-choice="green"]  i{background:radial-gradient(circle at 30% 30%,#3fb0a8 0%,transparent 55%),radial-gradient(circle at 72% 26%,#67c98f 0%,transparent 55%),radial-gradient(circle at 50% 78%,#3f9a68 0%,transparent 62%),#f3faf6}

.theme-palette button[data-theme-choice="purple"] i{background:radial-gradient(circle at 30% 30%,#d876b0 0%,transparent 55%),radial-gradient(circle at 72% 26%,#a985e6 0%,transparent 55%),radial-gradient(circle at 50% 78%,#815dcc 0%,transparent 62%),#f7f4ff}

.theme-palette button[data-theme-choice="yellow"] i{background:radial-gradient(circle at 30% 30%,#d97a4a 0%,transparent 55%),radial-gradient(circle at 72% 26%,#e0a83e 0%,transparent 55%),radial-gradient(circle at 50% 78%,#b98019 0%,transparent 62%),#fffaf0}

.theme-palette button[data-theme-choice="clay"]   i{background:radial-gradient(circle at 30% 30%,#d7a777 0%,transparent 55%),radial-gradient(circle at 72% 26%,#cf8b6d 0%,transparent 55%),radial-gradient(circle at 50% 78%,#b66f52 0%,transparent 62%),#fbf3ed}

.theme-palette button[data-theme-choice="mist"]   i{background:radial-gradient(circle at 30% 30%,#9b93ad 0%,transparent 55%),radial-gradient(circle at 72% 26%,#829fa3 0%,transparent 55%),radial-gradient(circle at 50% 78%,#68878a 0%,transparent 62%),#f1f5f5}

.theme-palette button[data-theme-choice="cedar"]  i{background:radial-gradient(circle at 30% 30%,#879276 0%,transparent 55%),radial-gradient(circle at 72% 26%,#9b8261 0%,transparent 55%),radial-gradient(circle at 50% 78%,#7d6b52 0%,transparent 62%),#f3efe7}

.theme-palette button[data-theme-choice="light"]:hover  i{box-shadow:0 0 0 1px var(--line),0 8px 20px -4px rgba(98,105,231,.45)}

.theme-palette button[data-theme-choice="dark"]:hover   i{box-shadow:0 0 0 1px var(--line),0 8px 20px -4px rgba(139,145,255,.5)}

.theme-palette button[data-theme-choice="pink"]:hover   i{box-shadow:0 0 0 1px var(--line),0 8px 20px -4px rgba(216,95,152,.45)}

.theme-palette button[data-theme-choice="green"]:hover  i{box-shadow:0 0 0 1px var(--line),0 8px 20px -4px rgba(63,154,104,.45)}

.theme-palette button[data-theme-choice="purple"]:hover i{box-shadow:0 0 0 1px var(--line),0 8px 20px -4px rgba(129,93,204,.45)}

.theme-palette button[data-theme-choice="yellow"]:hover i{box-shadow:0 0 0 1px var(--line),0 8px 20px -4px rgba(185,128,25,.45)}

.theme-palette button[data-theme-choice="clay"]:hover   i{box-shadow:0 0 0 1px var(--line),0 8px 20px -4px rgba(182,111,82,.45)}

.theme-palette button[data-theme-choice="mist"]:hover   i{box-shadow:0 0 0 1px var(--line),0 8px 20px -4px rgba(104,135,138,.45)}

.theme-palette button[data-theme-choice="cedar"]:hover  i{box-shadow:0 0 0 1px var(--line),0 8px 20px -4px rgba(125,107,82,.45)}

/* El puntito de vista previa junto al <select> de tema, también con degradado vivo */

.theme-preview{background:conic-gradient(from 200deg,var(--accent),var(--accent-2),var(--accent-3),var(--accent)) !important;box-shadow:0 0 0 1px var(--line),0 4px 10px -2px color-mix(in srgb,var(--accent) 45%,transparent) !important}

/* ---------- 6) Tarjetas de ajustes: vidrio con línea de luz superior ---------- */

.settings-group{
  position:relative;overflow:hidden;
  background:color-mix(in srgb,var(--paper) 90%,transparent) !important;
  box-shadow:var(--shadow-xl) !important;
  transition:transform .22s ease,box-shadow .22s ease;
}

.settings-group::before{
  content:"";position:absolute;top:0;left:18px;right:18px;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 55%,transparent),transparent);
}

.settings-group:hover{box-shadow:var(--shadow-xl),0 0 0 1px var(--ring-soft) !important}

.settings-group>header>span{
  background:var(--accent-gradient-soft) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent);
}

.privacy-note{background:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb,var(--paper) 60%,var(--accent-soft))) !important;box-shadow:0 18px 44px -22px color-mix(in srgb,var(--accent) 45%,transparent)}

/* ---------- 7) Perfil / avatar: anillo de degradado y aire premium ---------- */

.avatar-profile-image{
  position:relative;padding:3px !important;
  background:var(--accent-gradient) !important;
  box-shadow:0 12px 28px -10px color-mix(in srgb,var(--accent) 50%,transparent) !important;
}

.avatar-profile-image img{border-radius:18px !important}

.avatar-profile-image::after{
  content:"";position:absolute;inset:-3px;border-radius:inherit;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);pointer-events:none;
}

.desktop-avatar-image,.desktop-avatar-profile img{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}

.desktop-avatar-profile:hover img{transform:scale(1.08) rotate(-4deg)}

.avatar-choice{position:relative}

.avatar-choice::after{
  content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sheen);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}

.avatar-choice:hover::after{opacity:.5}

.avatar-choice-art{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 6%,transparent)}

.avatar-choice.is-selected .avatar-choice-art{box-shadow:0 0 0 2px var(--accent),inset 0 0 0 1px color-mix(in srgb,#fff 30%,transparent)}

.avatar-dialog-shell{box-shadow:var(--shadow-xl) !important}

.avatar-grid{scroll-padding:8px}

/* ---------- 8) Editor / hoja de papel: seña de luz y sombra elegante ---------- */

.paper{position:relative;box-shadow:var(--shadow-xl) !important}

.paper::before{
  content:"";position:absolute;top:0;left:44px;right:44px;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 45%,transparent),transparent);
}

.page-title{transition:color .12s ease}

.toolbar{position:relative;overflow:hidden}

.toolbar::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 35%,transparent),transparent)}

.empty-icon{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),0 16px 40px -18px color-mix(in srgb,var(--accent) 45%,transparent)}

/* ---------- 9) Diálogos: cristal, profundidad y detalle en el header ---------- */

.dialog-shell,.folder-dialog form,.move-dialog form,.about-dialog,.trash-dialog,.avatar-dialog-shell{
  box-shadow:var(--shadow-xl) !important;
  background:color-mix(in srgb,var(--paper) 96%,transparent) !important;
}

.about-dialog::backdrop,.trash-dialog::backdrop,.avatar-dialog::backdrop,dialog::backdrop{
  background:color-mix(in srgb, #000 42%, transparent) !important;
  backdrop-filter:blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(140%) !important;
}

.about-version{background:linear-gradient(135deg,var(--panel-2),var(--accent-soft)) !important}

.about-points span{transition:.18s ease}

.about-points span:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));transform:translateX(3px);background:var(--accent-soft)}

/* ---------- 10) Fila de página / carpetas: más carácter aún ---------- */

.folder-block{background:color-mix(in srgb,var(--paper) 82%,transparent) !important;box-shadow:0 1px 0 0 color-mix(in srgb,#fff 30%,transparent) inset}

.folder-toggle span:first-child{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent)}

.page-row.is-active{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent)}

.search-box{background:color-mix(in srgb,var(--paper) 85%,transparent) !important}

/* ---------- 11) Chips / badges / estado de guardado ---------- */

.save-state{background:color-mix(in srgb,var(--paper) 88%,transparent) !important;backdrop-filter:blur(10px)}

.status-chip,.footer-row small{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent)}

/* ---------- 12) Casillas y checkboxes con look propio ---------- */

.page-select,.footer-row input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:6px;
  border:1.6px solid var(--line);background:var(--paper);display:inline-grid;place-items:center;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;cursor:pointer;
}

.page-select:checked,.footer-row input[type="checkbox"]:checked{
  background:var(--accent-gradient);border-color:transparent;box-shadow:0 4px 10px -3px color-mix(in srgb,var(--accent) 55%,transparent);
}

.page-select:checked::after,.footer-row input[type="checkbox"]:checked::after{
  content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px);
}

/* ---------- 13) Scrollbars con degradado del acento ---------- */

::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 40%,var(--muted) 25%),color-mix(in srgb,var(--muted) 45%,transparent)) !important;
}

::-webkit-scrollbar-thumb:hover{background:var(--accent-gradient) !important}

/* ---------- 14) Login: aún más atmósfera, sin tocar el flujo ---------- */

.login-screen::before,.login-screen::after{filter:blur(70px) saturate(160%)}

.login-screen{position:relative}

.login-screen>*{position:relative;z-index:2}

.art-companion,.art-companion-wide{backdrop-filter:blur(6px)}

.login-card{
  background:color-mix(in srgb,var(--paper) 94%,transparent) !important;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}

.login-benefits span{background:color-mix(in srgb,var(--paper) 70%,transparent);backdrop-filter:blur(6px)}

/* ---------- 15) Detalles chiquitos: iconos, glifos, separadores ---------- */

.folder-glyph,.compact-actions span,.settings-action i,.settings-group>header>span,.pages-title-row small{
  font-variant-emoji:text;
}

.about-brand strong,.trash-dialog h2,.avatar-dialog-shell h2,
.x-mark::before,.x-mark::after{transition:background .15s ease}

.folder-head>button:hover .x-mark,.dialog-close:hover .x-mark{filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--accent) 40%,transparent))}

/* ---------- 16) Micro-detalle: números tabulares donde cambian valores ---------- */

.metric-grid strong,.about-version strong,.save-state,.page-meta,.status-chip{font-variant-numeric:tabular-nums}

/* ---------- 17) Focos y selección más elegantes en toda la app ---------- */

::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}

/* ---------- 18) Responsive: mismo lujo, sin sacrificar rendimiento ---------- */

@media (max-width:760px){
  .sidebar{backdrop-filter:blur(16px) saturate(150%) !important;-webkit-backdrop-filter:blur(16px) saturate(150%) !important}
  .topbar{backdrop-filter:blur(14px) saturate(150%) !important;-webkit-backdrop-filter:blur(14px) saturate(150%) !important}
  .settings-group{box-shadow:0 14px 34px -18px color-mix(in srgb,var(--text) 30%,transparent) !important}
  .theme-palette button i{width:24px;height:24px}
  .avatar-profile-image{padding:3px !important}
  .paper::before,.settings-group::before,.toolbar::before{left:16px;right:16px}
  button,.footer-row,.settings-action,.settings-control{min-height:44px}
}

@media (max-width:480px){
  body::after{display:none} /* ahorra GPU en móviles modestos */
  .login-screen::before,.login-screen::after{filter:blur(46px)}
}

/* ---------- 19) Tema oscuro: brillos más ricos donde el cristal lo pide ---------- */

:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .settings-group{box-shadow:0 30px 80px -20px rgba(0,0,0,.55) !important}

:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .avatar-dialog-shell,:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .dialog-shell,:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .about-dialog,:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .trash-dialog{
  box-shadow:0 40px 110px -22px rgba(0,0,0,.7) !important;
}

:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 55%,transparent),color-mix(in srgb,var(--muted) 45%,transparent)) !important}

:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .page-title{-webkit-text-fill-color:var(--text) !important}

/* ---------- 20) Respeta accesibilidad: sin animación si el usuario la desactiva ---------- */

@media (prefers-reduced-motion:reduce){
  .primary::before,.quick-create::before,.module-primary::before,.avatar-choice::after{display:none !important}
  .theme-palette button:hover i{transform:none !important}
  body::after{display:none}
}

/* =========================================================
   MOBILE AVATAR PICKER
   Mobile-only layout correction: keep every avatar fully inside
   its own tile, remove label clutter, and prevent row overlap.
   ========================================================= */

@media (max-width:760px){
  .avatar-dialog-shell{
    overflow:hidden !important;
  }
  .avatar-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-auto-rows:84px !important;
    align-content:start !important;
    gap:9px !important;
    padding:14px 13px 18px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  .avatar-choice{
    box-sizing:border-box !important;
    width:100% !important;
    height:84px !important;
    min-height:84px !important;
    padding:7px 5px !important;
    gap:0 !important;
    display:grid !important;
    grid-template-rows:1fr !important;
    place-items:center !important;
    align-content:center !important;
    overflow:hidden !important;
    transform:none !important;
  }
  .avatar-choice:hover{
    transform:none !important;
  }
  .avatar-choice-art{
    width:clamp(54px,14vw,64px) !important;
    max-width:100% !important;
    aspect-ratio:1/1 !important;
    border-radius:15px !important;
    overflow:hidden !important;
  }
  .avatar-choice small{
    display:none !important;
  }
  .avatar-choice-art i{
    right:3px !important;
    bottom:3px !important;
  }
}

@media (max-width:420px){
  .avatar-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-rows:90px !important;
    gap:9px !important;
    padding-inline:12px !important;
  }
  .avatar-choice{
    height:90px !important;
    min-height:90px !important;
  }
  .avatar-choice-art{
    width:68px !important;
  }
}

@media (max-width:330px){
  .avatar-grid{
    gap:7px !important;
    padding-inline:9px !important;
  }
  .avatar-choice-art{
    width:62px !important;
  }
}

/* =========================================================
   PRIMARY BUTTON HOVER
   Removes the glossy/sheen hover from main action buttons
   while preserving the selected theme and button behavior.
   ========================================================= */

.primary::before,
.quick-create::before,
.module-primary::before{
  display:none !important;
  content:none !important;
}

.primary:hover,
.quick-create:hover,
.module-primary:hover,
.revisits-primary:hover,
.ministry-primary:hover{
  transform:none !important;
  filter:brightness(.96) !important;
}

/* Keep the resting shadow instead of adding the floating/glass hover shadow. */

.quick-create:hover,
.module-primary:hover{
  box-shadow:var(--shadow-float) !important;
}

.primary:hover{
  box-shadow:0 10px 24px -8px color-mix(in srgb,var(--accent) 55%,transparent) !important;
}

/* The sidebar New Page action keeps a simple solid theme-color hover only. */

.compact-actions .action-page:hover{
  transform:none !important;
  box-shadow:none !important;
}

@media (min-width:761px){
  .module-primary:hover,
  .primary:hover,
  .revisits-primary:hover,
  .ministry-primary:hover{
    box-shadow:0 10px 22px color-mix(in srgb,var(--c-accent-deep) 23%,transparent) !important;
  }
  .compact-actions .action-page:hover{
    box-shadow:0 7px 15px rgba(75,69,57,.045) !important;
  }
}

@media (max-width:760px){
  .module-primary:hover,
  .quick-create:hover{
    box-shadow:none !important;
  }
}

/* =========================================================
   SUPPORT & FEEDBACK
   ========================================================= */

.support-settings-group{grid-area:support}

.support-actions{display:grid;gap:0}

.support-contact-note{display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}

.support-contact-note>span:first-child{width:32px;height:32px;flex:0 0 32px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:15px}

.support-contact-note>span:last-child{display:grid;min-width:0;gap:2px}

.support-contact-note b{font-size:9px;color:var(--muted);font-weight:750}

.support-contact-note a{font-size:11px;font-weight:750;color:var(--accent);text-decoration:none;overflow-wrap:anywhere}

.support-contact-note a:hover{text-decoration:underline}

.support-privacy-copy{margin:9px 2px 0!important;font-size:8.5px!important;line-height:1.5!important;color:var(--muted)!important}

.support-action i{width:31px;height:31px;flex:0 0 31px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)!important;font-size:14px!important}

@media (min-width:761px){.settings-screen .settings-layout{grid-template-areas:"profile profile" "appearance ministry" "data data" "app app" "support support"!important}.support-settings-group{grid-area:support!important}.support-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:6px}.support-actions .support-action{min-height:78px!important;border:1px solid var(--c-line)!important;border-radius:14px!important;padding:12px!important;background:var(--c-paper-2)!important}.support-actions .support-action:hover{background:var(--c-accent-soft)!important;border-color:color-mix(in srgb,var(--c-accent) 36%,var(--c-line))!important;box-shadow:none!important}.support-contact-note{border-color:var(--c-line);background:var(--c-paper-2)}.support-contact-note>span:first-child,.support-action i{background:var(--c-accent-soft);color:var(--c-accent-deep)!important}.support-contact-note a{color:var(--c-accent-deep)}.support-contact-note b,.support-privacy-copy{color:var(--c-muted)!important}}

@media (max-width:760px){.support-actions{display:block}.support-contact-note{margin-top:10px;padding:9px 10px}.support-privacy-copy{font-size:7.8px!important;margin-top:8px!important}}

/* =========================================================
   QUILL-INSPIRED EDITOR
   Visual language follows Quill Snow's compact grouped toolbar,
   while NOTEA keeps its existing contenteditable/storage engine.
   ========================================================= */

.quill-inspired-toolbar{
  --quill-tool-size:30px;
  width:100%!important;max-width:980px!important;min-height:38px!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  gap:2px!important;flex-wrap:nowrap!important;
  margin:4px auto 14px!important;padding:4px 0!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;overflow-x:auto!important;overflow-y:hidden!important;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain
}

.quill-inspired-toolbar::-webkit-scrollbar{display:none}

.quill-inspired-toolbar::before{display:none!important;content:none!important}

.quill-tool-group{display:flex;align-items:center;gap:1px;flex:0 0 auto}

.quill-inspired-toolbar .toolbar-divider{display:block!important;width:1px!important;height:18px!important;flex:0 0 1px!important;margin:0 5px!important;background:color-mix(in srgb,var(--c-muted) 26%,transparent)!important;border:0!important}

.quill-inspired-toolbar button{
  width:var(--quill-tool-size)!important;min-width:var(--quill-tool-size)!important;height:var(--quill-tool-size)!important;
  display:grid!important;place-items:center!important;padding:0!important;margin:0!important;
  border:0!important;border-radius:4px!important;background:transparent!important;color:var(--c-ink)!important;
  box-shadow:none!important;filter:none!important;transform:none!important;
  font-family:var(--ui)!important;font-size:15px!important;font-weight:500!important;
  transition:background .12s ease,color .12s ease!important
}

.quill-inspired-toolbar button:hover,.quill-inspired-toolbar button:focus-visible{
  background:var(--c-accent-soft)!important;color:var(--c-accent-deep)!important;box-shadow:none!important;transform:none!important
}

.quill-inspired-toolbar button.is-format-active{background:var(--c-accent-soft)!important;color:var(--c-accent-deep)!important}

.quill-inspired-toolbar button b,.quill-inspired-toolbar button i,.quill-inspired-toolbar button u,.quill-inspired-toolbar button s{font-size:15px;line-height:1;font-weight:600;text-decoration-thickness:1px}

.quill-inspired-toolbar button i{font-family:Georgia,serif;font-weight:600}

.quill-inspired-toolbar svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.55!important;stroke-linecap:round!important;stroke-linejoin:round!important;pointer-events:none}

.quill-inspired-toolbar .color-picker-trigger{position:relative!important}

.quill-inspired-toolbar .color-picker-trigger>i{position:static!important;width:14px!important;height:14px!important;border-radius:999px!important}

.quill-inspired-toolbar .highlight-trigger>i{width:14px!important;height:14px!important}

.quill-select-wrap{
  height:30px!important;display:flex!important;align-items:center!important;position:relative!important;
  border:0!important;border-radius:4px!important;background:transparent!important;box-shadow:none!important;transition:background .12s ease!important
}

.quill-select-wrap:hover,.quill-select-wrap:focus-within{background:var(--c-accent-soft)!important;border:0!important;box-shadow:none!important}

.quill-select-wrap select{
  height:30px!important;border:0!important;outline:0!important;background:transparent!important;color:var(--c-ink)!important;
  padding:0 22px 0 7px!important;margin:0!important;font:400 13px/30px var(--ui)!important;cursor:pointer!important
}

.block-select-wrap select{width:91px!important}

.font-select-wrap select{width:126px!important}

.size-select-wrap select{width:79px!important}

.paper-select-wrap select{width:83px!important}

.quill-select-wrap>svg{right:5px!important;width:13px!important;height:13px!important;stroke:var(--c-muted)!important;stroke-width:1.7!important}

.quill-inspired-toolbar select option{font-size:14px!important;color:var(--c-ink)!important;background:var(--c-paper)!important}

/* Palette: reset lives inside the related menu instead of consuming two toolbar buttons. */

.palette-reset-option{width:100%!important;min-height:34px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;margin:0 0 10px!important;padding:7px 9px!important;border:1px solid var(--c-line)!important;border-radius:9px!important;background:var(--c-paper-2)!important;color:var(--c-ink)!important;font:600 11px/1.2 var(--ui)!important;box-shadow:none!important}

.palette-reset-option:hover{background:var(--c-accent-soft)!important;color:var(--c-accent-deep)!important;transform:none!important;box-shadow:none!important}

.palette-reset-icon{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;border:1px solid currentColor;font-size:12px;font-weight:700}

.editor-color-palette{backdrop-filter:none!important;background:var(--c-paper)!important;border-radius:10px!important;box-shadow:0 8px 28px rgba(35,40,43,.16)!important}

/* Open, borderless writing surface like the Quill demo. */

.workspace-scroll:has(> .paper:not([hidden])){background:var(--c-paper)!important}

.workspace-scroll> .paper:not([hidden]){background:var(--c-paper)!important;border:0!important;border-radius:0!important;box-shadow:none!important}

.workspace-scroll> .paper:not([hidden]) .page-heading,
.workspace-scroll> .paper:not([hidden]) .template-heading,
.workspace-scroll> .paper:not([hidden]) .toolbar,
.workspace-scroll> .paper:not([hidden]) .free-editor,
.workspace-scroll> .paper:not([hidden]) .template-program,
.workspace-scroll> .paper:not([hidden]) .paper-footer{width:100%!important;max-width:980px!important;margin-left:auto!important;margin-right:auto!important}

.free-editor{
  min-height:54vh!important;padding:18px 0 80px!important;margin:0 auto!important;
  border:0!important;border-radius:0!important;outline:0!important;box-shadow:none!important;
  background-color:transparent!important;color:var(--c-ink)!important;
  font-family:var(--ui)!important;font-size:18px!important;line-height:1.65!important;
  max-width:900px!important
}

.free-editor:focus{outline:0!important;box-shadow:none!important;border:0!important}

.free-editor[data-paper-style="blank"]{background-image:none!important}

.free-editor[data-paper-style="lined"]{background-color:transparent!important}

.free-editor[data-paper-style="dotted"]{background-color:transparent!important}

.free-editor p{margin:.4em 0!important}

.free-editor h2{font:600 30px/1.25 var(--ui)!important;margin:1.1em 0 .45em!important}

.free-editor h3{font:600 23px/1.3 var(--ui)!important;margin:1em 0 .4em!important}

.free-editor blockquote{font-family:var(--ui)!important;font-size:1.05em!important;line-height:1.65!important;margin:1em 0!important;padding:0 0 0 16px!important;border-left:3px solid var(--c-accent)!important;color:var(--c-muted)!important}

.page-heading{padding-bottom:12px!important}

.page-title{font-size:42px!important;line-height:1.08!important}

.page-meta{margin-top:7px!important}

.paper-footer{border-top:1px solid color-mix(in srgb,var(--c-line) 72%,transparent)!important;margin-top:0!important;padding-top:12px!important}

@media (max-width:1100px){
  .quill-inspired-toolbar{max-width:100%!important}
  .workspace-scroll> .paper:not([hidden]) .page-heading,.workspace-scroll> .paper:not([hidden]) .toolbar,.workspace-scroll> .paper:not([hidden]) .free-editor,.workspace-scroll> .paper:not([hidden]) .paper-footer{max-width:100%!important}
}

@media (max-width:760px){
  .workspace-scroll> .paper:not([hidden]){padding:20px 18px calc(94px + env(safe-area-inset-bottom))!important}
  .page-title{font-size:34px!important}.page-meta{font-size:10px!important}
  .quill-inspired-toolbar{
    --quill-tool-size:36px;position:sticky!important;top:0!important;z-index:8!important;
    margin:2px -18px 12px!important;width:calc(100% + 36px)!important;max-width:none!important;
    padding:6px 12px!important;background:var(--c-paper)!important;border-top:1px solid var(--c-line)!important;border-bottom:1px solid var(--c-line)!important;
    box-shadow:none!important
  }
  .quill-inspired-toolbar button{border-radius:6px!important}
  .quill-select-wrap,.quill-select-wrap select{height:36px!important;line-height:36px!important}.quill-select-wrap select{font-size:14px!important}
  .block-select-wrap select{width:100px!important}.font-select-wrap select{width:132px!important}.size-select-wrap select{width:86px!important}.paper-select-wrap select{width:92px!important}
  .quill-inspired-toolbar .toolbar-divider{height:22px!important;margin:0 5px!important}
  .free-editor{min-height:calc(100dvh - 255px)!important;padding:12px 0 64px!important;font-size:17px!important;line-height:1.65!important;max-width:none!important}
  .free-editor h2{font-size:27px!important}.free-editor h3{font-size:21px!important}
}

@media (min-width:761px) and (max-width:1180px){
  .workspace-scroll> .paper:not([hidden]){padding:34px 34px 60px!important}
  .quill-inspired-toolbar{--quill-tool-size:32px;max-width:100%!important}
  .quill-select-wrap,.quill-select-wrap select{height:32px!important;line-height:32px!important}
  .free-editor{min-height:58vh!important;max-width:860px!important}
}

:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .quill-inspired-toolbar,:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .quill-select-wrap,:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .quill-inspired-toolbar button{background:transparent!important;color:var(--c-ink)!important}

:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .quill-inspired-toolbar button:hover,:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .quill-inspired-toolbar button.is-format-active,:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .quill-select-wrap:hover{background:var(--c-accent-soft)!important;color:var(--c-accent-deep)!important}

/* =========================================================
   QUILL RESPONSIVE POLISH
   Corrects editor spacing, mobile toolbar wrapping, mobile
   Settings layout, tag sizing, and theme-aware Notes library.
   Presentation only; app data/auth/sync logic is unchanged.
   ========================================================= */

/* Quill-like compact vertical rhythm on desktop and tablet. */

.page-heading{padding-bottom:5px!important}

.quill-inspired-toolbar{margin-top:0!important;margin-bottom:3px!important}

.free-editor{
  padding-top:5px!important;
  line-height:1.5!important;
}

.free-editor p,.free-editor div{margin:.14em 0!important}

.free-editor br+br{line-height:1.35}

/* A title that is still the automatic "Untitled" clears when the user
   enters it, so typing starts immediately without manual selection. */

.page-title:focus{outline:0!important}

@media (max-width:760px){
  /* Notes document header: tighter and cleaner. */
  .workspace-scroll> .paper:not([hidden]){
    padding:15px 14px calc(92px + env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
  }
  .page-heading{padding-bottom:2px!important}
  .page-title{font-size:34px!important;line-height:1.06!important}
  .page-meta{
    display:flex!important;align-items:center!important;flex-wrap:wrap!important;
    gap:5px!important;margin:5px 0 7px!important;min-height:24px!important;
    font-size:9px!important
  }
  .page-meta>span{font-size:9px!important;line-height:1.2!important}
  .page-meta [data-tags-open]{
    width:auto!important;min-width:0!important;height:24px!important;min-height:24px!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    margin:0!important;padding:0 8px!important;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line))!important;
    border-radius:999px!important;background:var(--accent-soft)!important;color:var(--accent)!important;
    font-size:9px!important;line-height:1!important;box-shadow:none!important;transform:none!important
  }
  .page-meta [data-tags-open]:hover,.page-meta [data-tags-open]:active{
    background:color-mix(in srgb,var(--accent-soft) 78%,var(--paper))!important;
    box-shadow:none!important;transform:none!important
  }

  /* Every editor control remains visible: two compact Quill-style rows,
     no horizontal scrolling and no clipped labels. */
  .quill-inspired-toolbar{
    --quill-tool-size:clamp(23px,6.8vw,28px);
    position:sticky!important;top:0!important;z-index:8!important;
    width:calc(100% + 28px)!important;max-width:none!important;
    margin:0 -14px 4px!important;padding:5px 9px 6px!important;
    display:flex!important;align-items:center!important;align-content:center!important;
    flex-wrap:wrap!important;justify-content:flex-start!important;gap:1px!important;
    overflow:visible!important;white-space:normal!important;
    background:color-mix(in srgb,var(--paper) 97%,transparent)!important;
    border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent)!important;
    border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent)!important;
    box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important
  }
  .quill-inspired-toolbar .quill-tool-group{gap:0!important;min-width:0!important}
  .quill-inspired-toolbar .select-group + .toolbar-divider{
    display:block!important;flex:0 0 100%!important;width:100%!important;height:1px!important;
    margin:3px 0!important;background:color-mix(in srgb,var(--line) 58%,transparent)!important
  }
  .quill-inspired-toolbar .select-group{
    flex:1 1 0!important;display:flex!important;align-items:center!important;
    justify-content:space-evenly!important;gap:1px!important;min-width:0!important
  }
  .quill-inspired-toolbar button{
    width:var(--quill-tool-size)!important;min-width:var(--quill-tool-size)!important;
    height:var(--quill-tool-size)!important;min-height:var(--quill-tool-size)!important;
    border-radius:4px!important
  }
  .quill-inspired-toolbar svg{width:16px!important;height:16px!important}
  .quill-select-wrap,.quill-select-wrap select{
    height:28px!important;min-height:28px!important;line-height:28px!important
  }
  .quill-select-wrap select{
    padding:0 14px 0 4px!important;font-size:clamp(10px,2.9vw,12px)!important;
    text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important
  }
  .quill-select-wrap>svg{right:2px!important;width:10px!important;height:10px!important}
  .block-select-wrap select{width:clamp(56px,18vw,82px)!important}
  .font-select-wrap select{width:clamp(68px,22vw,100px)!important}
  .size-select-wrap select{width:clamp(52px,16vw,72px)!important}
  .paper-select-wrap select{width:clamp(56px,18vw,78px)!important}
  .inline-format-group,.color-group,.list-group,.align-group,.link-group{flex:0 0 auto!important}
  .inline-format-group{margin-left:auto!important}
  .link-group{margin-right:auto!important}

  .free-editor{
    min-height:calc(100dvh - 250px)!important;
    padding:4px 0 62px!important;
    font-size:17px!important;line-height:1.48!important;max-width:none!important
  }
  .free-editor p,.free-editor div{margin:.1em 0!important}

  /* Restore Settings to a true one-column mobile dashboard. */
  .portal[data-active-module="settings"] .portal-main{
    width:100%!important;max-width:100%!important;padding:10px 12px calc(88px + env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important
  }
  .settings-screen{
    width:100%!important;max-width:none!important;min-width:0!important;padding:0!important;margin:0!important;overflow:visible!important
  }
  .settings-screen .settings-layout{
    width:100%!important;min-width:0!important;display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"profile" "appearance" "ministry" "data" "app" "support"!important;
    gap:12px!important;align-items:start!important
  }
  .settings-screen .profile-settings-group{grid-area:profile!important}
  .settings-screen .appearance-settings-group{grid-area:appearance!important;display:block!important}
  .settings-screen .ministry-settings-group{grid-area:ministry!important}
  .settings-screen .data-settings-group{grid-area:data!important;display:block!important}
  .settings-screen .app-settings-group{grid-area:app!important;display:block!important}
  .settings-screen .support-settings-group{grid-area:support!important;display:block!important}
  .settings-screen .privacy-note{display:none!important}
  .settings-screen .settings-group{
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0!important;padding:14px!important;border-radius:18px!important;
    overflow:hidden!important;background:var(--m-surface,var(--paper))!important;
    border-color:var(--m-line,var(--line))!important;
    box-shadow:0 10px 26px color-mix(in srgb,var(--m-text,var(--text)) 7%,transparent)!important
  }
  .settings-screen .settings-group>header{
    margin:-14px -14px 9px!important;padding:13px 14px 10px!important;
    background:linear-gradient(90deg,var(--m-surface,var(--paper)),var(--m-surface-2,var(--panel)))!important;
    border-bottom:1px solid var(--m-line,var(--line))!important
  }
  .settings-screen .settings-group>header>span{
    width:36px!important;height:36px!important;min-width:36px!important;border-radius:11px!important;
    background:var(--m-accent-soft,var(--accent-soft))!important;color:var(--m-accent,var(--accent))!important
  }
  .settings-screen .settings-group h2{font-size:18px!important}
  .settings-screen .settings-group header p{font-size:10px!important;line-height:1.35!important}
  .settings-screen .settings-control,.settings-screen .settings-action{
    width:100%!important;min-width:0!important;min-height:50px!important;padding:8px 2px!important
  }
  .settings-screen .settings-control select{
    min-width:124px!important;max-width:48%!important;height:38px!important;font-size:12px!important
  }
  .avatar-profile-row{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important}
  .avatar-profile-current{width:100%!important;min-width:0!important}
  .avatar-profile-copy{min-width:0!important}
  .avatar-profile-copy small{max-width:210px!important}
  .avatar-profile-actions{justify-content:flex-start!important;gap:8px!important}
  .avatar-change-button,.avatar-reset-button{min-height:40px!important}
  .support-actions{display:block!important}
  .support-contact-note{width:100%!important;min-width:0!important}

  /* Mobile Notes library uses the active theme instead of the gray glass layer. */
  .app>.sidebar{
    background:linear-gradient(180deg,var(--m-bg,var(--bg)) 0%,color-mix(in srgb,var(--m-accent-soft,var(--accent-soft)) 28%,var(--m-bg,var(--bg))) 100%)!important;
    color:var(--m-text,var(--text))!important;border-right-color:var(--m-line,var(--line))!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    box-shadow:16px 0 38px color-mix(in srgb,var(--m-text,var(--text)) 10%,transparent)!important
  }
  .app>.sidebar .sidebar-header,.app>.sidebar .pages-tools,.app>.sidebar .page-list{background:transparent!important}
  .mobile-sidebar-editor{
    background:var(--m-surface,var(--paper))!important;color:var(--m-accent,var(--accent))!important;
    border-color:var(--m-line,var(--line))!important;box-shadow:none!important
  }
  .compact-actions .action-page,.compact-actions .action-folder,.compact-actions .action-select{
    background:var(--m-surface,var(--paper))!important;color:var(--m-text,var(--text))!important;
    border-color:var(--m-line,var(--line))!important;box-shadow:none!important
  }
  .compact-actions .action-page:hover,.compact-actions .action-folder:hover,.compact-actions .action-select:hover{
    background:var(--m-accent-soft,var(--accent-soft))!important;border-color:var(--m-accent,var(--accent))!important
  }
  .compact-actions .action-page .action-icon{background:var(--m-accent-soft,var(--accent-soft))!important;color:var(--m-accent,var(--accent))!important}
  .compact-actions .action-folder .action-icon{background:var(--m-band-ministry,var(--panel-2))!important;color:var(--m-ministry-accent,var(--accent))!important}
  .compact-actions .action-select .action-icon{background:var(--m-band-notes,var(--panel-2))!important;color:var(--m-notes-accent,var(--accent))!important}
  .search-box,.folder-block{
    background:var(--m-surface,var(--paper))!important;border-color:var(--m-line,var(--line))!important;color:var(--m-text,var(--text))!important
  }
  .search-box input{color:var(--m-text,var(--text))!important}
  .search-box input::placeholder{color:var(--m-muted,var(--muted))!important}
  .page-row.is-active{background:var(--m-accent-soft,var(--accent-soft))!important}
  .page-open strong{color:var(--m-text,var(--text))!important}.page-open small{color:var(--m-muted,var(--muted))!important}
}

@media (max-width:350px){
  .quill-inspired-toolbar{padding-inline:6px!important}
  .block-select-wrap select{width:58px!important}.font-select-wrap select{width:70px!important}.size-select-wrap select{width:54px!important}.paper-select-wrap select{width:58px!important}
  .quill-inspired-toolbar{--quill-tool-size:22px}
  .quill-inspired-toolbar button b,.quill-inspired-toolbar button i,.quill-inspired-toolbar button u,.quill-inspired-toolbar button s{font-size:13px!important}
  .quill-inspired-toolbar svg{width:14px!important;height:14px!important}
}

/* Tablet editor: allow the same tools to wrap instead of forcing a long
   horizontal toolbar when the Notes library leaves a narrow writing column. */

@media (min-width:761px) and (max-width:1180px){
  .quill-inspired-toolbar{
    --quill-tool-size:28px;
    display:flex!important;flex-wrap:wrap!important;align-content:center!important;
    overflow:visible!important;gap:1px!important;padding-block:4px!important
  }
  .quill-inspired-toolbar .toolbar-divider{display:none!important}
  .quill-inspired-toolbar .select-group + .toolbar-divider{
    display:block!important;flex:0 0 100%!important;width:100%!important;height:1px!important;
    margin:3px 0!important;background:color-mix(in srgb,var(--c-line) 58%,transparent)!important
  }
  .quill-inspired-toolbar .select-group{display:flex!important;flex-wrap:wrap!important;gap:2px!important;min-width:0!important}
  .quill-inspired-toolbar .inline-format-group{margin-left:auto!important}
  .quill-inspired-toolbar .link-group{margin-right:auto!important}
  .quill-select-wrap,.quill-select-wrap select{height:30px!important;min-height:30px!important;line-height:30px!important}
  .block-select-wrap select{width:82px!important}.font-select-wrap select{width:108px!important}.size-select-wrap select{width:70px!important}.paper-select-wrap select{width:76px!important}
  .free-editor{padding-top:4px!important;line-height:1.5!important}
}

@media (min-width:761px) and (max-width:960px){
  .workspace-scroll> .paper:not([hidden]){padding:26px 24px 58px!important}
  .quill-inspired-toolbar{--quill-tool-size:25px}
  .quill-inspired-toolbar button{min-height:25px!important;height:25px!important}
  .block-select-wrap select{width:68px!important}.font-select-wrap select{width:86px!important}.size-select-wrap select{width:58px!important}.paper-select-wrap select{width:64px!important}
  .quill-select-wrap select{font-size:11px!important;padding-left:4px!important;padding-right:14px!important}
}

/* =========================================================
   FOCUS / THEME / SELECTION
   Requested visual-only corrections. Keeps auth/data/sync intact.
   ========================================================= */

/* Search fields: no inner browser/focus ring. Keep the existing outer search
   container exactly as the visual boundary on desktop, tablet and mobile. */

.hub-search input,
.module-search input,
.search-box input{
  outline:none!important;
  box-shadow:none!important;
  border:0!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}

.hub-search input:focus,
.hub-search input:focus-visible,
.module-search input:focus,
.module-search input:focus-visible,
.search-box input:focus,
.search-box input:focus-visible{
  outline:none!important;
  box-shadow:none!important;
  border:0!important;
}

/* Open editor canvas must be an opaque surface from the active theme, never a
   transparent layer showing the gradient beneath it. Paper textures remain. */

.workspace-scroll:has(> .paper:not([hidden])){
  background:var(--c-paper,var(--paper))!important;
}

.workspace-scroll> .paper:not([hidden]){
  background:var(--c-paper,var(--paper))!important;
}

.workspace-scroll> .paper:not([hidden]) .free-editor{
  background-color:var(--c-paper,var(--paper))!important;
}

/* Active page/folder list rows: selection color fills the complete row,
   including the delete-control area, with no leftover accent strip. */

.page-row{
  width:100%!important;
  box-sizing:border-box!important;
  gap:0!important;
  overflow:hidden!important;
}

.page-row.is-active{
  width:100%!important;
  background:var(--c-accent-soft,var(--accent-soft))!important;
}

.page-row.is-active::before{
  display:none!important;
  content:none!important;
}

.page-row.is-active .page-open,
.page-row.is-active .page-open:hover{
  background:transparent!important;
}

.page-row .page-open{
  margin:0!important;
  border-radius:inherit!important;
}

.page-row .page-delete{
  flex:0 0 32px!important;
  margin-right:3px!important;
}

/* Page title: typing should feel like plain document text, with no focus box,
   underline, top/bottom ring, glow or browser focus treatment. */

.page-title,
.page-title:focus,
.page-title:focus-visible{
  outline:none!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}

/* Desktop/tablet Notes header: WOL is icon-only. */

@media (min-width:761px){
  .topbar-actions .wol-book-button{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    gap:0!important;
  }
  .topbar-actions .wol-book-button .wol-button-label{
    display:none!important;
  }
}

@media (max-width:760px){
  /* Mobile editor uses the mobile theme surface explicitly. */
  .workspace-scroll:has(> .paper:not([hidden])),
  .workspace-scroll> .paper:not([hidden]){
    background:var(--m-surface,var(--c-paper,var(--paper)))!important;
  }
  .workspace-scroll> .paper:not([hidden]) .free-editor{
    background-color:var(--m-surface,var(--c-paper,var(--paper)))!important;
  }
  .page-row.is-active{
    background:var(--m-accent-soft,var(--c-accent-soft,var(--accent-soft)))!important;
  }
}

/* =========================================================
   TITLE PLACEHOLDER
   Default titles are visual hints, not editable text values.
   ========================================================= */

.page-title::placeholder{
  color:var(--c-muted,var(--muted))!important;
  opacity:.38!important;
  -webkit-text-fill-color:var(--c-muted,var(--muted))!important;
}

.template-title-edit[data-placeholder]:empty::before{
  color:var(--c-muted,var(--muted))!important;
  opacity:.38!important;
  font-weight:inherit!important;
}

@media (max-width:760px){
  .page-title::placeholder,
  .template-title-edit[data-placeholder]:empty::before{
    opacity:.42!important;
  }
}

/* =========================================================
   MOBILE EDITOR STICKY TOOLBAR
   Keep the Quill-inspired formatting toolbar pinned while the
   document scrolls on phones. Presentation only.
   ========================================================= */

@media (max-width:760px){
  /* The paper must not become an accidental scroll container.
     overflow-x:hidden makes sticky descendants bind to the paper;
     clip keeps horizontal spill contained without breaking sticky. */
  .workspace-scroll{
    overflow-x:clip!important;
  }
  .workspace-scroll> .paper:not([hidden]){
    overflow-x:visible!important;
    overflow-y:visible!important;
  }
  .quill-inspired-toolbar{
    position:-webkit-sticky!important;
    position:sticky!important;
    top:0!important;
    z-index:12!important;
    background:var(--m-surface,var(--c-paper,var(--paper)))!important;
    isolation:isolate!important;
  }
}

/* =========================================================
   EDITOR RHYTHM / STICKY / PALETTE / PRINT
   Requested editor-only refinements. No auth, data or sync changes.
   ========================================================= */

/* A real paragraph break (Enter) must be visually different from a wrapped
   line inside the same paragraph. Keep line-height compact, add block rhythm. */

.free-editor p,
.free-editor > div{
  margin:0 0 .68em!important;
}

.free-editor p:last-child,
.free-editor > div:last-child{
  margin-bottom:0!important;
}

/* Keep the Quill-style toolbar pinned inside the document scroll area on
   desktop, tablet and mobile. An opaque theme surface prevents text showing
   through while the document scrolls beneath it. */

.quill-inspired-toolbar{
  position:-webkit-sticky!important;
  position:sticky!important;
  top:0!important;
  z-index:24!important;
  background:var(--c-paper,var(--paper))!important;
  isolation:isolate!important;
}

/* Mobile color/highlight palette becomes a compact bottom sheet instead of
   floating over the paragraph. Inline desktop positioning is intentionally
   overridden only on phones. */

@media (max-width:760px){
  body > .editor-color-palette{
    top:auto!important;
    left:12px!important;
    right:12px!important;
    bottom:calc(72px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(48dvh,360px)!important;
    overflow:auto!important;
    padding:12px!important;
    border-radius:16px!important;
    background:var(--m-surface,var(--c-paper,var(--paper)))!important;
    border-color:var(--m-line,var(--c-line,var(--line)))!important;
    box-shadow:0 18px 52px color-mix(in srgb,var(--m-text,var(--text)) 18%,transparent)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  body > .editor-color-palette header{
    position:sticky!important;
    top:0!important;
    z-index:2!important;
    margin:-2px 0 8px!important;
    padding:2px 0 5px!important;
    background:var(--m-surface,var(--c-paper,var(--paper)))!important;
  }
  body > .editor-color-palette .palette-reset-option{
    margin-bottom:8px!important;
    min-height:36px!important;
    background:var(--m-surface-2,var(--c-paper-2,var(--panel)))!important;
    border-color:var(--m-line,var(--c-line,var(--line)))!important;
  }
  body > .editor-color-palette .color-swatches{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:8px!important;
  }
  body > .editor-color-palette .color-swatch{
    width:100%!important;
    max-width:46px!important;
    aspect-ratio:1/1!important;
    height:auto!important;
    justify-self:center!important;
  }
  body > .editor-color-palette .custom-color-row{
    margin-top:9px!important;
    padding-top:8px!important;
  }
  .free-editor p,
  .free-editor > div{
    margin:0 0 .72em!important;
  }
  .quill-inspired-toolbar{
    background:var(--m-surface,var(--c-paper,var(--paper)))!important;
  }
}

/* Final print/PDF guard. This block intentionally lives after every editor
   theme rule so no later !important toolbar rule can make formatting controls
   visible on paper. The document content itself remains printable. */

@media print{
  .toolbar,
  .quill-inspired-toolbar,
  [data-toolbar],
  .editor-color-palette,
  [data-editor-color-palette]{
    display:none!important;
    visibility:hidden!important;
  }
}

/* =========================================================
   TITLE / TAGS / RESPONSIVE EDITOR FOUNDATION
   Consolidates the editor interaction layer for the 7.8.2 update.
   ========================================================= */

/* ---------- Compact aesthetic tags ---------- */

.page-heading{position:relative!important}

.tags-popover{
  position:fixed!important;z-index:12000!important;
  width:min(360px,calc(100vw - 32px))!important;margin:0!important;padding:12px!important;
  border:1px solid var(--c-line,var(--line))!important;border-radius:14px!important;
  background:var(--c-paper,var(--paper))!important;color:var(--c-ink,var(--text))!important;
  box-shadow:0 16px 42px color-mix(in srgb,var(--c-ink,var(--text)) 14%,transparent)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}

.tags-popover-header{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;margin:0 0 9px!important;padding:0!important;border:0!important}

.tags-popover-header>span{display:grid!important;gap:2px!important;min-width:0!important}

.tags-popover-header strong{font:750 13px/1.2 var(--ui,Inter,system-ui,sans-serif)!important;color:var(--c-ink,var(--text))!important}

.tags-popover-header small{font:500 9px/1.35 var(--ui,Inter,system-ui,sans-serif)!important;color:var(--c-muted,var(--muted))!important}

.tags-close{width:28px!important;height:28px!important;min-width:28px!important;padding:0!important;border:1px solid var(--c-line,var(--line))!important;border-radius:9px!important;background:var(--c-paper-2,var(--panel))!important;color:var(--c-muted,var(--muted))!important;font:500 17px/1 var(--ui)!important;box-shadow:none!important;transform:none!important}

.tags-close:hover{background:var(--c-accent-soft,var(--accent-soft))!important;color:var(--c-accent-deep,var(--accent))!important}

.tag-entry-row{display:grid!important;grid-template-columns:minmax(0,1fr) 36px!important;gap:7px!important;align-items:center!important}

.tag-entry-row input{
  width:100%!important;height:36px!important;min-width:0!important;padding:0 11px!important;
  border:1px solid var(--c-line,var(--line))!important;border-radius:10px!important;
  background:var(--c-paper-2,var(--panel))!important;color:var(--c-ink,var(--text))!important;
  outline:0!important;box-shadow:none!important;font:500 12px/1 var(--ui,Inter,system-ui,sans-serif)!important
}

.tag-entry-row input:focus{border-color:color-mix(in srgb,var(--c-accent,var(--accent)) 45%,var(--c-line,var(--line)))!important;background:var(--c-paper,var(--paper))!important}

.tag-add{width:36px!important;height:36px!important;min-width:36px!important;padding:0!important;border:1px solid color-mix(in srgb,var(--c-accent,var(--accent)) 35%,var(--c-line,var(--line)))!important;border-radius:10px!important;background:var(--c-accent-soft,var(--accent-soft))!important;color:var(--c-accent-deep,var(--accent))!important;font-size:16px!important;font-weight:800!important;box-shadow:none!important;transform:none!important}

.tag-add:hover{background:color-mix(in srgb,var(--c-accent,var(--accent)) 18%,var(--c-paper,var(--paper)))!important}

.tag-suggestions{margin-top:9px!important;display:grid!important;gap:5px!important}

.tag-suggestions[hidden]{display:none!important}

.tag-suggestions-label{font:700 8px/1 var(--ui,Inter,system-ui,sans-serif)!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--c-muted,var(--muted))!important}

.tag-suggestion-row{display:flex!important;gap:5px!important;flex-wrap:wrap!important}

.tag-suggestion{width:auto!important;min-width:0!important;min-height:28px!important;padding:0 9px!important;border:1px solid var(--c-line,var(--line))!important;border-radius:999px!important;background:var(--c-paper-2,var(--panel))!important;color:var(--c-muted,var(--muted))!important;font:650 10px/1 var(--ui,Inter,system-ui,sans-serif)!important;box-shadow:none!important;transform:none!important}

.tag-suggestion:hover{background:var(--c-accent-soft,var(--accent-soft))!important;color:var(--c-accent-deep,var(--accent))!important;border-color:color-mix(in srgb,var(--c-accent,var(--accent)) 34%,var(--c-line,var(--line)))!important}

.tag-chip-list,.page-tags-inline{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:6px!important}

.tag-chip-list{margin-top:9px!important}

.page-tags-inline{margin:0 0 8px!important;min-height:0!important}

.tag-chip-list[hidden],.page-tags-inline[hidden]{display:none!important}

.notea-tag-chip{max-width:100%!important;display:inline-flex!important;align-items:center!important;gap:5px!important;min-height:27px!important;padding:3px 5px 3px 9px!important;border:1px solid color-mix(in srgb,var(--c-accent,var(--accent)) 28%,var(--c-line,var(--line)))!important;border-radius:999px!important;background:var(--c-accent-soft,var(--accent-soft))!important;color:var(--c-accent-deep,var(--accent))!important;font:700 10px/1.2 var(--ui,Inter,system-ui,sans-serif)!important}

.notea-tag-chip>span{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:190px!important}

.notea-tag-chip>button{width:20px!important;height:20px!important;min-width:20px!important;padding:0!important;border:0!important;border-radius:50%!important;background:color-mix(in srgb,var(--c-accent,var(--accent)) 12%,transparent)!important;color:inherit!important;font:700 14px/1 var(--ui)!important;box-shadow:none!important;transform:none!important}

.notea-tag-chip>button:hover{background:color-mix(in srgb,var(--c-accent,var(--accent)) 24%,transparent)!important}

.reminder-compact{margin-top:10px!important;padding-top:9px!important;border-top:1px solid var(--c-line,var(--line))!important}

.reminder-compact .reminder-row{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;gap:10px!important;margin:0!important;font-size:9px!important}

.reminder-compact .reminder-row input[type="date"]{height:34px!important;min-width:0!important;padding:0 9px!important;border:1px solid var(--c-line,var(--line))!important;border-radius:9px!important;background:var(--c-paper-2,var(--panel))!important;box-shadow:none!important}

.reminder-clear-text{width:auto!important;min-width:0!important;min-height:25px!important;margin:6px 0 0 auto!important;padding:0 4px!important;border:0!important;background:transparent!important;color:var(--c-muted,var(--muted))!important;font:650 9px/1 var(--ui,Inter,system-ui,sans-serif)!important;box-shadow:none!important;transform:none!important}

.reminder-clear-text:hover{color:var(--danger)!important;background:transparent!important}

/* Two support actions are clearer than a third redundant feedback action. */

@media (min-width:761px){.support-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* ---------- Quill-style selects: placeholder is not repeated in menus ---------- */

.quill-select-wrap select option[hidden]{display:none!important}

.quill-select-wrap select:focus{outline:0!important;box-shadow:none!important}

/* ---------- One-row desktop, two-row tablet/mobile responsive editor ---------- */

@media (min-width:1121px){
  .quill-inspired-toolbar{flex-wrap:nowrap!important;overflow:visible!important;max-width:980px!important}
  .quill-inspired-toolbar .select-group + .toolbar-divider{display:block!important;flex:0 0 1px!important;width:1px!important;height:18px!important;margin:0 5px!important}
  .quill-inspired-toolbar .inline-format-group{margin-left:0!important}.quill-inspired-toolbar .link-group{margin-right:0!important}
}

@media (min-width:761px) and (max-width:1120px){
  .quill-inspired-toolbar{
    --quill-tool-size:27px!important;display:flex!important;flex-wrap:wrap!important;overflow:visible!important;
    align-items:center!important;align-content:center!important;gap:1px!important;padding:4px 0 5px!important
  }
  .quill-inspired-toolbar .toolbar-divider{display:none!important}
  .quill-inspired-toolbar .select-group + .toolbar-divider{display:block!important;flex:0 0 100%!important;width:100%!important;height:1px!important;margin:3px 0!important;background:color-mix(in srgb,var(--c-line,var(--line)) 60%,transparent)!important}
  .quill-inspired-toolbar .history-group{flex:0 0 auto!important}
  .quill-inspired-toolbar .select-group{flex:1 1 auto!important;display:flex!important;align-items:center!important;gap:2px!important;min-width:0!important}
  .quill-inspired-toolbar .inline-format-group{margin-left:auto!important}.quill-inspired-toolbar .link-group{margin-right:auto!important}
  .block-select-wrap select{width:76px!important}.font-select-wrap select{width:104px!important}.size-select-wrap select{width:68px!important}.paper-select-wrap select{width:74px!important}
}

@media (max-width:760px){
  .page-heading{position:relative!important}
  .tags-popover{
    position:fixed!important;right:auto!important;bottom:auto!important;max-width:calc(100vw - 24px)!important;
    max-height:min(54dvh,390px)!important;overflow:auto!important;padding:12px!important;border-radius:17px!important;
    background:var(--m-surface,var(--c-paper,var(--paper)))!important;border-color:var(--m-line,var(--c-line,var(--line)))!important;
    box-shadow:0 20px 56px color-mix(in srgb,var(--m-text,var(--text)) 20%,transparent)!important
  }
  .tag-entry-row input,.reminder-compact .reminder-row input[type="date"]{background:var(--m-surface-2,var(--c-paper-2,var(--panel)))!important;border-color:var(--m-line,var(--c-line,var(--line)))!important;color:var(--m-text,var(--text))!important}
  .notea-tag-chip{background:var(--m-accent-soft,var(--c-accent-soft,var(--accent-soft)))!important;color:var(--m-accent,var(--c-accent-deep,var(--accent)))!important;border-color:color-mix(in srgb,var(--m-accent,var(--accent)) 30%,var(--m-line,var(--line)))!important}
  .page-tags-inline{margin-top:-2px!important;margin-bottom:7px!important;gap:5px!important}
  .notea-tag-chip{min-height:25px!important;font-size:9px!important;padding-left:8px!important}
  .notea-tag-chip>span{max-width:118px!important}

  .quill-inspired-toolbar{
    --quill-tool-size:clamp(22px,6.4vw,27px)!important;
    display:flex!important;flex-wrap:wrap!important;align-items:center!important;align-content:center!important;
    overflow:visible!important;gap:1px!important;padding:5px 8px 6px!important
  }
  .quill-inspired-toolbar .toolbar-divider{display:none!important}
  .quill-inspired-toolbar .select-group + .toolbar-divider{display:block!important;flex:0 0 100%!important;width:100%!important;height:1px!important;margin:3px 0!important;background:color-mix(in srgb,var(--m-line,var(--line)) 62%,transparent)!important}
  .quill-inspired-toolbar .history-group{flex:0 0 auto!important}
  .quill-inspired-toolbar .select-group{flex:1 1 auto!important;display:flex!important;justify-content:space-evenly!important;gap:0!important;min-width:0!important}
  .quill-inspired-toolbar .inline-format-group{margin-left:auto!important}.quill-inspired-toolbar .link-group{margin-right:auto!important}
  .quill-select-wrap,.quill-select-wrap select{height:27px!important;min-height:27px!important;line-height:27px!important}
  .quill-select-wrap select{font-size:clamp(9.5px,2.7vw,11.5px)!important;padding-left:3px!important;padding-right:13px!important}
  .block-select-wrap select{width:clamp(56px,18vw,74px)!important}.font-select-wrap select{width:clamp(64px,21vw,88px)!important}.size-select-wrap select{width:clamp(50px,15vw,64px)!important}.paper-select-wrap select{width:clamp(54px,17vw,70px)!important}
}

@media (max-width:370px){
  .quill-inspired-toolbar{padding-inline:5px!important;--quill-tool-size:21px!important}
  .block-select-wrap select{width:55px!important}.font-select-wrap select{width:66px!important}.size-select-wrap select{width:50px!important}.paper-select-wrap select{width:55px!important}
  .quill-select-wrap select{font-size:9.5px!important}
}

/* Print stays content-only. */

@media print{
  .tags-popover,.page-tags-inline .notea-tag-chip>button{display:none!important}
}

/* 7.8.2 responsive safeguard: the available editor width can be much
   narrower than the viewport when the Notes library/sidebar is open.
   Let flexbox wrap naturally at every desktop width instead of assuming
   viewport >= 1121px always has room for one line. */

.quill-inspired-toolbar{flex-wrap:wrap!important;overflow:visible!important;row-gap:3px!important}

/* =========================================================
   TITLE + TAGS
   ========================================================= */

/* The old makeover used transparent text fill outside focus. Once the title
   background was later made transparent, that made a saved title LOOK as if
   it had been erased on blur. Keep title text fully opaque at all times. */

.page-title,
.page-title:focus,
.page-title:not(:focus){
  background:transparent!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;
  color:var(--c-ink,var(--text))!important;
}

:is(html[data-theme="dark"],html[data-theme="eclipse"],html[data-theme="peachcoal"],html[data-theme="aurora"]) .page-title{color:var(--c-ink,var(--text))!important;-webkit-text-fill-color:currentColor!important}

/* Editor typography hierarchy: one Inter family, varied by weight. */

.page-title{
  font-family:var(--ui)!important;
  font-weight:700!important;
  letter-spacing:-.04em!important;
}

.template-title-edit,
.notes-library-heading,
.desktop-nav-brand strong,
.module-title-copy h1,
.settings-title-copy h1{
  font-family:var(--ui)!important;
}

/* Tags are a real overlay, independent from the editor stacking context. */

.tags-popover{
  position:fixed!important;
  z-index:12000!important;
  width:320px!important;
  max-width:calc(100vw - 24px)!important;
  max-height:min(420px,calc(100dvh - 24px))!important;
  overflow:auto!important;
  margin:0!important;
  padding:11px!important;
  border:1px solid var(--c-line,var(--line))!important;
  border-radius:14px!important;
  background:var(--c-paper,var(--paper))!important;
  box-shadow:0 18px 52px rgba(27,45,46,.16)!important;
  isolation:isolate!important;
}

.tags-popover[hidden]{display:none!important}

/* Compact label chips: one small capsule, one integrated x, no bubble-on-bubble. */

.notea-tag-chip{
  min-height:26px!important;
  height:26px!important;
  gap:6px!important;
  padding:0 7px 0 9px!important;
  border-radius:9px!important;
  font-size:9.5px!important;
  line-height:1!important;
  box-shadow:none!important;
}

.notea-tag-chip>span{max-width:150px!important}

.notea-tag-chip>button{
  width:14px!important;height:18px!important;min-width:14px!important;
  padding:0!important;border:0!important;border-radius:4px!important;
  background:transparent!important;font-size:13px!important;line-height:18px!important;
  opacity:.72!important;
}

.notea-tag-chip>button:hover{background:color-mix(in srgb,var(--c-accent,var(--accent)) 14%,transparent)!important;opacity:1!important}

.tag-chip-list,.page-tags-inline{gap:5px!important}

.page-tags-inline{margin:1px 0 7px!important}

@media (max-width:760px){
  .tags-popover{
    right:auto!important;bottom:auto!important;
    width:min(360px,calc(100vw - 24px))!important;
    max-height:calc(100dvh - 108px)!important;
    padding:12px!important;border-radius:16px!important;
    background:var(--m-surface,var(--c-paper,var(--paper)))!important;
    border-color:var(--m-line,var(--c-line,var(--line)))!important;
    box-shadow:0 20px 56px color-mix(in srgb,var(--m-text,var(--text)) 18%,transparent)!important;
  }
  .notea-tag-chip{
    min-height:25px!important;height:25px!important;border-radius:9px!important;
    padding:0 6px 0 8px!important;font-size:9px!important;
  }
  .notea-tag-chip>span{max-width:104px!important}
  .notea-tag-chip>button{width:13px!important;min-width:13px!important;height:17px!important;font-size:12px!important}
  .page-tags-inline{gap:4px!important;margin:1px 0 6px!important}
}

/* curated editor font menu. */

.quill-inspired-toolbar .font-select-wrap select{font-family:var(--ui)!important}

.quill-inspired-toolbar .font-select-wrap optgroup{
  font-family:var(--ui)!important;
  font-style:normal!important;
  font-weight:700!important;
}

/* =========================================================
   TEMPLATE + MOBILE MINISTRY HOTFIX
   Template errors are readable; mobile Ministry tabs use an exact,
   centered 3-column geometry so the selected state never looks offset.
   ========================================================= */

.template-list p:not([data-template-loading]){
  color:var(--muted)!important;background:transparent!important;padding:8px 2px!important;
}

@media(max-width:760px){
  .ministry-screen .ministry-toolbar .segmented{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;justify-items:stretch!important;
    gap:2px!important;padding:4px!important;box-sizing:border-box!important;
  }
  .ministry-screen .ministry-toolbar .segmented button{
    width:100%!important;min-width:0!important;height:38px!important;min-height:38px!important;
    margin:0!important;padding:0 5px!important;box-sizing:border-box!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    text-align:center!important;line-height:1!important;border-radius:10px!important;
  }
}

/* =========================================================
   NOTEA — Template typography + Focus mode stability
   Keep the assembly template in the same Inter language as normal notes,
   while preserving hierarchy with restrained weights.
   ========================================================= */

.template-title-edit{
  font-family:var(--ui)!important;
  font-weight:700!important;
  letter-spacing:-.04em!important;
}

.program-day-edit{
  font-family:var(--ui)!important;
  font-weight:700!important;
}

.program-session-edit{
  font-family:var(--ui)!important;
  font-weight:500!important;
  line-height:1.3!important;
  min-height:1.3em!important;
  display:block!important;
}

.editable-program-theme strong{
  font-family:var(--ui)!important;
  font-weight:600!important;
}

.editable-program-theme span{
  font-family:var(--ui)!important;
  font-weight:400!important;
}

.program-time-edit{
  font-family:var(--ui)!important;
  font-weight:600!important;
}

.program-label-edit{
  font-family:var(--ui)!important;
  font-weight:600!important;
}

.program-title-edit{
  font-family:var(--ui)!important;
  font-weight:600!important;
}

.program-reference-edit{
  font-family:var(--ui)!important;
  font-weight:400!important;
}

.template-note-label{
  font-family:var(--ui)!important;
  font-weight:600!important;
}

.template-note{
  font-family:var(--ui)!important;
  font-weight:400!important;
}

/* An empty session field must still reserve its line. This prevents the day
   (for example “Viernes”) from dropping when the session text is deleted. */

.program-session-edit[data-placeholder]:empty{
  min-height:1.3em!important;
}

/* Focus mode: make the writing surface explicit instead of relying on the
   accumulated desktop grid rules from older layouts. */

.app.focus-mode{
  width:100vw!important;
  height:100dvh!important;
  overflow:hidden!important;
}

.app.focus-mode>.desktop-global-nav,
.app.focus-mode>.sidebar,
.app.focus-mode>.scrim,
.app.focus-mode>.workspace>.topbar,
.app.focus-mode>.workspace>.notes-bottom-nav{
  display:none!important;
}

.app.focus-mode>.workspace{
  display:grid!important;
  grid-column:1/-1!important;
  grid-row:1!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr)!important;
  width:100vw!important;
  max-width:none!important;
  height:100dvh!important;
  min-height:0!important;
  margin:0!important;
  visibility:visible!important;
  opacity:1!important;
}

.app.focus-mode>.workspace>.workspace-scroll{
  display:block!important;
  grid-column:1!important;
  grid-row:1!important;
  width:100%!important;
  height:100dvh!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  visibility:visible!important;
  opacity:1!important;
}

.app.focus-mode [data-paper]:not([hidden]),
.app.focus-mode [data-empty]:not([hidden]){
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

.app.focus-mode [data-paper]:not([hidden]){
  margin-left:auto!important;
  margin-right:auto!important;
}

/* =========================================================
   NOTEA — Image paste protection + compact print/PDF
   ========================================================= */

@media print{
  /* Keep title, metadata and first paragraph visually connected on paper/PDF. */
  .page-meta{
    margin:3px 0 6px!important;
    min-height:0!important;
    line-height:1.25!important;
  }
  .page-tags-inline{
    margin:0 0 5px!important;
  }
  .free-editor{
    padding:5px 0 0!important;
  }
  /* Old image content from legacy notes must never print even before
     the safety cleanup has had a chance to persist it. */
  .free-editor img,.template-note img,.free-editor picture,.template-note picture,.free-editor svg,.template-note svg{
    display:none!important;
  }
}

/* =========================================================
   NOTEA — startup hydration shield
   Never expose a false empty notebook while auth/local/cloud
   hydration is resolving after a deploy, cold start or PWA update.
   ========================================================= */

.notea-hydration[hidden]{display:none!important}

.notea-hydration{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  place-items:center;
  padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));
  background:var(--bg,#f4f0e8);
  color:var(--ink,#282721);
  pointer-events:auto;
}

.notea-hydration-card{
  width:min(360px,calc(100vw - 40px));
  display:grid;
  justify-items:center;
  text-align:center;
  gap:10px;
}

.notea-hydration-mark{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin-bottom:3px;
}

.notea-hydration-mark img{display:block;width:100%;height:100%;object-fit:contain}

.notea-hydration-spinner{
  width:24px;
  height:24px;
  margin:3px 0 5px;
  border:2px solid color-mix(in srgb,var(--ink,#282721) 16%,transparent);
  border-top-color:var(--accent,#76654d);
  border-radius:50%;
  animation:notea-hydration-spin .72s linear infinite;
}

.notea-hydration-card strong{
  font:600 17px/1.25 "Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.015em;
}

.notea-hydration-card small{
  max-width:300px;
  font:400 13px/1.5 "Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--muted,#777167);
}

@keyframes notea-hydration-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){.notea-hydration-spinner{animation-duration:1.6s}}

/* =========================================================
   NOTEA — FINAL PRINT/PDF LAYOUT GUARD
   This MUST remain the last print rule in the stylesheet.
   Print preview can match tablet viewport breakpoints; those rules must
   never reactivate the editor toolbar or reserve its layout height.
   ========================================================= */

@media print{
  .toolbar,
  .quill-inspired-toolbar,
  [data-toolbar],
  .editor-color-palette,
  [data-editor-color-palette]{
    display:none!important;
    visibility:hidden!important;
    position:absolute!important;
    width:0!important;
    height:0!important;
    min-width:0!important;
    min-height:0!important;
    max-width:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    gap:0!important;
    overflow:hidden!important;
  }

  .page-heading{
    padding-bottom:0!important;
    margin-bottom:0!important;
  }
  .page-meta{
    margin:2px 0 4px!important;
    min-height:0!important;
    line-height:1.2!important;
  }
  .page-tags-inline{
    margin:0 0 4px!important;
  }
  .free-editor{
    margin-top:0!important;
    padding-top:2px!important;
  }
  .free-editor> :first-child{
    margin-top:0!important;
  }
}

/* =========================================================
   NOTEA — PROFESSIONAL EDITOR LINKS
   Clear link styling + compact Open / Edit / Remove popover.
   ========================================================= */

[data-free-editor] a[href],
[data-note-id] a[href]{
  color:var(--accent)!important;
  text-decoration-line:underline!important;
  text-decoration-thickness:1.35px!important;
  text-decoration-color:color-mix(in srgb,var(--accent) 72%,transparent)!important;
  text-underline-offset:2.5px!important;
  cursor:pointer!important;
  border-radius:3px;
}

[data-free-editor] a[href]:hover,
[data-note-id] a[href]:hover{
  text-decoration-thickness:2px!important;
  background:color-mix(in srgb,var(--accent-soft) 58%,transparent);
}

.notea-link-popover[hidden]{display:none!important}

.notea-link-popover{
  position:fixed;
  z-index:2147482500;
  width:min(330px,calc(100vw - 20px));
  padding:9px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--paper);
  color:var(--text);
  box-shadow:0 16px 42px color-mix(in srgb,var(--text) 16%,transparent);
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.notea-link-popover-url{
  overflow:hidden;
  padding:1px 3px 8px;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.3;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.notea-link-popover-actions{display:flex;align-items:center;gap:6px}

.notea-link-popover-actions button{
  flex:1 1 auto;
  min-width:0;
  min-height:34px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel);
  color:var(--text);
  font:600 11.5px/1 "Inter",system-ui,sans-serif;
  cursor:pointer;
}

.notea-link-popover-actions button:hover{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent)}

.notea-link-popover-actions [data-link-remove]:hover{background:color-mix(in srgb,#c95353 10%,var(--paper));border-color:color-mix(in srgb,#c95353 36%,var(--line));color:#a93d3d}

@media(max-width:560px){
  .notea-link-popover{padding:8px;border-radius:12px}
  .notea-link-popover-actions button{min-height:38px;padding-inline:7px;font-size:11px}
}

@media print{
  .notea-link-popover{display:none!important}
  [data-free-editor] a[href],[data-note-id] a[href]{
    text-decoration-line:underline!important;
    background:transparent!important;
  }
}

/* NOTEA THEMES-ONLY SAFE REFRESH
   Replaces Marfil -> Nórdico, Noche -> Laguna, Arena -> Cielo,
   Arcilla -> Borgoña. No editor structure or editor behavior is changed. */

/* Laguna gets a normal light base so it remains readable outside desktop/tablet too. */

html[data-theme="laguna"]{
  --bg:#f2f9f9;--paper:#ffffff;--panel:#f7fbfb;--panel-2:#e6f3f3;--text:#17383d;--muted:#638085;
  --line:#d4e8e8;--accent:#168a91;--accent-soft:#e2f3f3;--danger:#bf5962;--ok:#4a9d79;
  --shadow:0 24px 72px rgba(22,121,128,.12);--accent-2:#5ab8bd;--accent-3:#90d4d5
}

@media (min-width:761px){
  /* NÓRDICO — exact visual direction from the approved blue/lavender/beige reference. */
  html[data-theme="light"]{
    --c-bg:#f5f8fb;--c-bg-2:#edf3f8;--c-paper:#ffffff;--c-paper-2:#f8fafc;
    --c-ink:#172b43;--c-muted:#687c94;--c-line:#dbe5ef;
    --c-accent:#315f99;--c-accent-deep:#214879;--c-accent-soft:#e8f0f8;
    --c-lav:#8491c2;--c-lav-soft:#f0f0f8;--c-gold:#cda86f;--c-gold-soft:#f7ecdd;
    --c-blue:#6e96c7;--c-blue-soft:#eaf2f9;--c-stone:#b6c1ce;
    --c-shadow:0 18px 52px rgba(45,75,111,.10);--c-shadow-soft:0 10px 28px rgba(45,75,111,.07);
    --c-nav-start:#f8fbfd;--c-nav-end:#eef4f8;--c-nav-active:#214879;--c-nav-ink:#2f4358;
    --c-hero-glow:rgba(77,114,158,.11);
    --c-card-notes-1:#f2f7fb;--c-card-notes-2:#e8f1f8;--c-card-notes-border:#d4e2ee;
    --c-card-revisits-1:#f4f4fb;--c-card-revisits-2:#ececf8;--c-card-revisits-border:#dcdcf0;
    --c-card-ministry-1:#fbf6ef;--c-card-ministry-2:#f4eadc;--c-card-ministry-border:#ead8bd;
    --c-card-icon-bg:#ffffff;--c-card-arrow-bg:rgba(255,255,255,.88);
    --desktop-nav-start:#5f83ad;--desktop-nav-mid:#315f99;--desktop-nav-end:#214879;
    --desktop-nav-glow:rgba(175,204,238,.24);--desktop-nav-shadow:rgba(33,72,121,.18)
  }

  /* LAGUNA — sea-glass aqua/teal. */
  html[data-theme="laguna"]{
    --c-bg:#f1f9f9;--c-bg-2:#e8f4f4;--c-paper:#ffffff;--c-paper-2:#f8fcfc;
    --c-ink:#17383d;--c-muted:#638085;--c-line:#d4e8e8;
    --c-accent:#269ca2;--c-accent-deep:#147d84;--c-accent-soft:#e2f3f3;
    --c-lav:#91b9bd;--c-lav-soft:#edf7f7;--c-gold:#cdb47f;--c-gold-soft:#f7efdf;
    --c-blue:#67bec4;--c-blue-soft:#e7f7f7;--c-stone:#b9d4d5;
    --c-shadow:0 18px 52px rgba(22,121,128,.10);--c-shadow-soft:0 10px 28px rgba(22,121,128,.07);
    --c-nav-start:#f8ffff;--c-nav-end:#eaf7f7;--c-nav-active:#168a91;--c-nav-ink:#24464b;
    --c-hero-glow:rgba(52,166,172,.11);
    --c-card-notes-1:#f0f9f9;--c-card-notes-2:#e4f2f3;--c-card-notes-border:#cce3e4;
    --c-card-revisits-1:#f3fbfb;--c-card-revisits-2:#eaf6f6;--c-card-revisits-border:#d8ebeb;
    --c-card-ministry-1:#f8fbf7;--c-card-ministry-2:#edf6ef;--c-card-ministry-border:#d7e7da;
    --c-card-icon-bg:#ffffff;--c-card-arrow-bg:rgba(255,255,255,.88);
    --desktop-nav-start:#45b6bc;--desktop-nav-mid:#168f96;--desktop-nav-end:#0d6870;
    --desktop-nav-glow:rgba(190,242,243,.25);--desktop-nav-shadow:rgba(14,104,112,.18)
  }

  /* BORGOÑA — muted wine, dusty rose, warm cream. */
  html[data-theme="clay"]{
    --c-bg:#fbf5f6;--c-bg-2:#f4ecef;--c-paper:#ffffff;--c-paper-2:#fdf9fa;
    --c-ink:#432b34;--c-muted:#866b76;--c-line:#ead9de;
    --c-accent:#ad496c;--c-accent-deep:#842d4d;--c-accent-soft:#f7e6ec;
    --c-lav:#aa91a8;--c-lav-soft:#f2ebf1;--c-gold:#caa777;--c-gold-soft:#f7eddf;
    --c-blue:#c7a6b2;--c-blue-soft:#f5ecef;--c-stone:#d2bec5;
    --c-shadow:0 18px 52px rgba(126,45,75,.10);--c-shadow-soft:0 10px 28px rgba(126,45,75,.07);
    --c-nav-start:#fffafb;--c-nav-end:#f7eff2;--c-nav-active:#8f3153;--c-nav-ink:#513541;
    --c-hero-glow:rgba(171,76,111,.11);
    --c-card-notes-1:#fff8fa;--c-card-notes-2:#f7edf1;--c-card-notes-border:#ead6de;
    --c-card-revisits-1:#fcf8fb;--c-card-revisits-2:#f2eaf2;--c-card-revisits-border:#e4d5e3;
    --c-card-ministry-1:#fff9f3;--c-card-ministry-2:#f6eadc;--c-card-ministry-border:#ecd6b9;
    --c-card-icon-bg:#ffffff;--c-card-arrow-bg:rgba(255,255,255,.90);
    --desktop-nav-start:#bd587c;--desktop-nav-mid:#963858;--desktop-nav-end:#6e243f;
    --desktop-nav-glow:rgba(247,201,217,.24);--desktop-nav-shadow:rgba(110,36,63,.18)
  }

  /* CIELO — luminous powder/sky blue. */
  html[data-theme="yellow"]{
    --c-bg:#f3f8fe;--c-bg-2:#eaf3fd;--c-paper:#ffffff;--c-paper-2:#f8fbff;
    --c-ink:#244164;--c-muted:#6884a6;--c-line:#d9e7f7;
    --c-accent:#72a9e6;--c-accent-deep:#4f8dcc;--c-accent-soft:#e7f1fc;
    --c-lav:#9bb8dc;--c-lav-soft:#eef4fb;--c-gold:#d2b476;--c-gold-soft:#f8efdf;
    --c-blue:#78b3ed;--c-blue-soft:#e9f3fd;--c-stone:#bfd1e5;
    --c-shadow:0 18px 52px rgba(68,132,196,.10);--c-shadow-soft:0 10px 28px rgba(68,132,196,.07);
    --c-nav-start:#fbfdff;--c-nav-end:#eff6fd;--c-nav-active:#5b99d8;--c-nav-ink:#304b6d;
    --c-hero-glow:rgba(106,165,226,.11);
    --c-card-notes-1:#f4f9ff;--c-card-notes-2:#eaf3fd;--c-card-notes-border:#dae8f7;
    --c-card-revisits-1:#f7faff;--c-card-revisits-2:#eef5fc;--c-card-revisits-border:#dfeaf6;
    --c-card-ministry-1:#fbfcff;--c-card-ministry-2:#f3f7fc;--c-card-ministry-border:#e2e9f3;
    --c-card-icon-bg:#ffffff;--c-card-arrow-bg:rgba(255,255,255,.90);
    --desktop-nav-start:#8bbcf0;--desktop-nav-mid:#68a7e8;--desktop-nav-end:#4788ca;
    --desktop-nav-glow:rgba(205,228,252,.26);--desktop-nav-shadow:rgba(65,127,191,.18)
  }
}

/* Updated selector swatches. Internal IDs are kept where possible to avoid touching app/editor logic. */

.theme-palette button[data-theme-choice="light"] i{
  background:radial-gradient(circle at 30% 30%,#d9e7f6 0%,transparent 54%),radial-gradient(circle at 72% 28%,#8491c2 0%,transparent 54%),radial-gradient(circle at 50% 78%,#214879 0%,transparent 62%),#f5f8fb!important
}

.theme-palette button[data-theme-choice="laguna"] i{
  background:radial-gradient(circle at 30% 30%,#9edadd 0%,transparent 54%),radial-gradient(circle at 72% 28%,#58b8bd 0%,transparent 54%),radial-gradient(circle at 50% 78%,#168a91 0%,transparent 62%),#f1f9f9!important
}

.theme-palette button[data-theme-choice="clay"] i{
  background:radial-gradient(circle at 30% 30%,#e6bdcc 0%,transparent 54%),radial-gradient(circle at 72% 28%,#ba6685 0%,transparent 54%),radial-gradient(circle at 50% 78%,#842d4d 0%,transparent 62%),#fbf5f6!important
}

.theme-palette button[data-theme-choice="yellow"] i{
  background:radial-gradient(circle at 30% 30%,#c7e0fa 0%,transparent 54%),radial-gradient(circle at 72% 28%,#8bbcf0 0%,transparent 54%),radial-gradient(circle at 50% 78%,#4f8dcc 0%,transparent 62%),#f3f8fe!important
}

/* =========================================================
   NOTEA — NEW THEMES ON MOBILE
   Extends Nórdico, Laguna, Borgoña and Cielo to phones only.
   Visual variables only: no editor, sync or data behavior.
   ========================================================= */

@media (max-width:760px){
  /* NÓRDICO — blue / lavender / warm beige, matching desktop/tablet. */
  html[data-theme="light"]{
    --m-bg:#f5f8fb;--m-surface:#ffffff;--m-surface-2:#f8fafc;--m-text:#172b43;--m-muted:#687c94;--m-line:#dbe5ef;
    --m-accent:#214879;--m-accent-soft:#e8f0f8;--m-shadow:0 10px 28px rgba(45,75,111,.09);
    --m-card-notes:#f2f7fb;--m-band-notes:#e8f1f8;--m-notes-accent:#315f99;
    --m-card-revisits:#f4f4fb;--m-band-revisits:#ececf8;--m-revisits-accent:#707dac;
    --m-card-ministry:#fbf6ef;--m-band-ministry:#f4eadc;--m-ministry-accent:#92734c;
    --m-nav-bg:#ffffff;--m-nav-active-bg:#e8f0f8;--m-nav-active:#214879;--m-nav-ink:#687c94;
    --bg:var(--m-bg);--paper:var(--m-surface);--panel:var(--m-surface-2);--panel-2:var(--m-accent-soft);
    --text:var(--m-text);--muted:var(--m-muted);--line:var(--m-line);--accent:var(--m-accent);--accent-soft:var(--m-accent-soft)
  }

  /* LAGUNA — fresh sea-glass aqua / teal. */
  html[data-theme="laguna"]{
    --m-bg:#f1f9f9;--m-surface:#ffffff;--m-surface-2:#f8fcfc;--m-text:#17383d;--m-muted:#638085;--m-line:#d4e8e8;
    --m-accent:#147d84;--m-accent-soft:#e2f3f3;--m-shadow:0 10px 28px rgba(22,121,128,.09);
    --m-card-notes:#f0f9f9;--m-band-notes:#e4f2f3;--m-notes-accent:#147d84;
    --m-card-revisits:#f3fbfb;--m-band-revisits:#eaf6f6;--m-revisits-accent:#4e8287;
    --m-card-ministry:#f8fbf7;--m-band-ministry:#edf6ef;--m-ministry-accent:#668a6a;
    --m-nav-bg:#ffffff;--m-nav-active-bg:#e2f3f3;--m-nav-active:#147d84;--m-nav-ink:#638085;
    --bg:var(--m-bg);--paper:var(--m-surface);--panel:var(--m-surface-2);--panel-2:var(--m-accent-soft);
    --text:var(--m-text);--muted:var(--m-muted);--line:var(--m-line);--accent:var(--m-accent);--accent-soft:var(--m-accent-soft)
  }

  /* BORGOÑA — muted wine / dusty rose / warm cream. */
  html[data-theme="clay"]{
    --m-bg:#fbf5f6;--m-surface:#ffffff;--m-surface-2:#fdf9fa;--m-text:#432b34;--m-muted:#866b76;--m-line:#ead9de;
    --m-accent:#842d4d;--m-accent-soft:#f7e6ec;--m-shadow:0 10px 28px rgba(126,45,75,.09);
    --m-card-notes:#fff8fa;--m-band-notes:#f7edf1;--m-notes-accent:#8f3153;
    --m-card-revisits:#fcf8fb;--m-band-revisits:#f2eaf2;--m-revisits-accent:#865a78;
    --m-card-ministry:#fff9f3;--m-band-ministry:#f6eadc;--m-ministry-accent:#9a6d46;
    --m-nav-bg:#ffffff;--m-nav-active-bg:#f7e6ec;--m-nav-active:#842d4d;--m-nav-ink:#866b76;
    --bg:var(--m-bg);--paper:var(--m-surface);--panel:var(--m-surface-2);--panel-2:var(--m-accent-soft);
    --text:var(--m-text);--muted:var(--m-muted);--line:var(--m-line);--accent:var(--m-accent);--accent-soft:var(--m-accent-soft)
  }

  /* CIELO — luminous powder / sky blue. */
  html[data-theme="yellow"]{
    --m-bg:#f3f8fe;--m-surface:#ffffff;--m-surface-2:#f8fbff;--m-text:#244164;--m-muted:#6884a6;--m-line:#d9e7f7;
    --m-accent:#4f8dcc;--m-accent-soft:#e7f1fc;--m-shadow:0 10px 28px rgba(68,132,196,.09);
    --m-card-notes:#f4f9ff;--m-band-notes:#eaf3fd;--m-notes-accent:#4f8dcc;
    --m-card-revisits:#f6fbff;--m-band-revisits:#eef6fd;--m-revisits-accent:#6e8fb6;
    --m-card-ministry:#fbfcff;--m-band-ministry:#f2f5fa;--m-ministry-accent:#7488a5;
    --m-nav-bg:#ffffff;--m-nav-active-bg:#e7f1fc;--m-nav-active:#4f8dcc;--m-nav-ink:#6884a6;
    --bg:var(--m-bg);--paper:var(--m-surface);--panel:var(--m-surface-2);--panel-2:var(--m-accent-soft);
    --text:var(--m-text);--muted:var(--m-muted);--line:var(--m-line);--accent:var(--m-accent);--accent-soft:var(--m-accent-soft)
  }
}

/* =========================================================
   NOTEA HUB V2 — desktop + tablet only
   Reference-driven dashboard. Mobile Hub remains untouched.
   ========================================================= */

.desktop-hub-v2{display:none}

@media (min-width:761px){
  .portal[data-active-module="hub"] .hub-screen>.hub-hero,
  .portal[data-active-module="hub"] .hub-screen>.premium-hub-grid,
  .portal[data-active-module="hub"] .hub-screen>.premium-summary{display:none!important}
  .portal[data-active-module="hub"] .portal-main{
    padding:30px clamp(24px,3.1vw,46px) 42px!important;
    background:linear-gradient(135deg,color-mix(in srgb,var(--c-paper) 78%,var(--c-bg)),var(--c-bg-2))!important;
    overflow:auto!important;
  }
  .portal[data-active-module="hub"] .hub-screen{max-width:1480px!important;margin:0 auto!important;padding:0!important}
  .desktop-hub-v2{display:grid;gap:22px;color:var(--c-ink);font-family:var(--c-ui)}

  .desktop-nav-menu .desktop-nav-svg svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

  .desktop-hub-topbar{display:grid;grid-template-columns:minmax(320px,1fr) minmax(470px,.9fr);align-items:center;gap:28px;padding:0 2px}
  .desktop-hub-welcome{min-width:0}
  .desktop-hub-dayline{display:flex;align-items:center;gap:8px;margin:0 0 15px;color:var(--c-ink);font-size:14px;font-weight:650}
  .desktop-hub-sun{width:20px;height:20px;display:grid;place-items:center;color:#e8a62f}.desktop-hub-sun svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .desktop-hub-welcome h1{margin:0;font-size:clamp(34px,3.15vw,48px);line-height:.98;letter-spacing:-.055em;font-weight:820;color:var(--c-ink)}
  .desktop-hub-welcome>p:last-child{margin:12px 0 0;color:var(--c-muted);font-size:clamp(15px,1.25vw,19px);line-height:1.4;font-weight:500}
  .desktop-hub-tools{display:grid;grid-template-columns:minmax(0,1fr) 48px auto;gap:14px;align-items:center}
  .desktop-hub-search{height:54px;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid color-mix(in srgb,var(--c-line) 90%,transparent);border-radius:15px;background:color-mix(in srgb,var(--c-paper) 94%,transparent);padding:0 10px 0 16px;box-shadow:0 10px 28px rgba(46,64,83,.035)}
  .desktop-hub-search>svg{width:20px;height:20px;fill:none;stroke:var(--c-muted);stroke-width:1.8;stroke-linecap:round}.desktop-hub-search input{min-width:0;border:0;outline:0;background:transparent;color:var(--c-ink);font-size:13px}.desktop-hub-search input::placeholder{color:color-mix(in srgb,var(--c-muted) 70%,transparent)}
  .desktop-hub-search kbd{border:0;border-radius:8px;background:var(--c-paper-2);color:var(--c-muted);padding:5px 7px;font:600 11px/1 var(--c-ui);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-line) 72%,transparent)}
  .desktop-hub-bell{position:relative;width:48px;height:48px;border:1px solid var(--c-line);border-radius:14px;background:var(--c-paper);color:var(--c-ink);display:grid;place-items:center;transition:.18s ease}.desktop-hub-bell:hover{transform:translateY(-1px);border-color:var(--c-accent);background:var(--c-accent-soft)}.desktop-hub-bell svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.desktop-hub-bell i{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;border-radius:999px;background:var(--c-accent-deep);color:#fff;display:grid;place-items:center;padding:0 4px;border:2px solid var(--c-paper);font:800 9px/1 var(--c-ui);font-style:normal}
  .desktop-hub-new-note{height:48px;border:0;border-radius:13px;background:var(--c-accent-deep);color:#fff;display:grid;grid-template-columns:auto auto auto;align-items:center;gap:8px;padding:0 13px 0 15px;font-size:12px;font-weight:760;box-shadow:0 11px 24px color-mix(in srgb,var(--c-accent-deep) 22%,transparent);transition:.18s ease}.desktop-hub-new-note:hover{transform:translateY(-1px);filter:brightness(1.04)}.desktop-hub-new-plus{font-size:19px;font-weight:400}.desktop-hub-new-caret{height:24px;display:grid;place-items:center;border-left:1px solid rgba(255,255,255,.25);padding-left:9px;margin-left:3px;font-size:12px}

  .desktop-hub-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .desktop-hub-feature{position:relative;min-height:250px;border:1px solid var(--c-line);border-radius:24px;padding:26px;text-align:left;overflow:hidden;isolation:isolate;color:var(--c-ink);display:block;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.desktop-hub-feature:hover{transform:translateY(-3px);box-shadow:var(--c-shadow-soft);border-color:color-mix(in srgb,var(--c-accent) 35%,var(--c-line))}.desktop-hub-feature-notes{background:linear-gradient(145deg,color-mix(in srgb,var(--c-blue-soft) 78%,var(--c-paper)),color-mix(in srgb,var(--c-blue-soft) 55%,var(--c-paper)))}.desktop-hub-feature-revisits{background:linear-gradient(145deg,color-mix(in srgb,var(--c-lav-soft) 82%,var(--c-paper)),color-mix(in srgb,var(--c-lav-soft) 60%,var(--c-paper)))}.desktop-hub-feature-ministry{background:linear-gradient(145deg,color-mix(in srgb,var(--c-gold-soft) 82%,var(--c-paper)),color-mix(in srgb,var(--c-gold-soft) 58%,var(--c-paper)))}
  .desktop-hub-feature-icon{position:absolute;z-index:3;left:26px;top:26px;width:56px;height:56px;border-radius:15px;display:grid;place-items:center;color:#fff;box-shadow:0 10px 21px rgba(38,55,73,.12)}.desktop-hub-feature-notes .desktop-hub-feature-icon{background:var(--c-accent-deep)}.desktop-hub-feature-revisits .desktop-hub-feature-icon{background:var(--c-lav)}.desktop-hub-feature-ministry .desktop-hub-feature-icon{background:var(--c-gold)}.desktop-hub-feature-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .desktop-hub-feature-copy{position:absolute;z-index:3;left:26px;bottom:23px;max-width:56%;display:grid;justify-items:start}.desktop-hub-feature-copy strong{font-size:22px;line-height:1.05;letter-spacing:-.035em;font-weight:780}.desktop-hub-feature-copy small{margin-top:7px;color:var(--c-muted);font-size:12px;line-height:1.45}.desktop-hub-feature-cta{margin-top:16px;display:flex;align-items:center;gap:9px;border:1px solid color-mix(in srgb,var(--c-line) 90%,transparent);border-radius:10px;background:color-mix(in srgb,var(--c-paper) 54%,transparent);padding:9px 12px;font-size:11px;font-weight:700;color:var(--c-ink);backdrop-filter:blur(7px)}.desktop-hub-feature-cta b{font-size:14px;font-weight:500}
  .desktop-hub-feature-art{position:absolute;z-index:1;right:-2px;bottom:7px;width:47%;height:auto;pointer-events:none}.desktop-hub-notes-art{color:var(--c-accent-deep)}.desktop-hub-books-art{color:color-mix(in srgb,var(--c-lav) 82%,#314b86)}.desktop-hub-calendar-art{color:color-mix(in srgb,var(--c-gold) 84%,#93673e)}

  .desktop-hub-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(330px,.95fr);gap:20px;align-items:start}
  .desktop-hub-activity-panel,.desktop-hub-recent-panel,.desktop-hub-quick-panel{border:1px solid var(--c-line);border-radius:22px;background:color-mix(in srgb,var(--c-paper) 95%,transparent);box-shadow:0 10px 30px rgba(48,64,78,.025)}
  .desktop-hub-activity-panel{padding:20px 22px 19px;min-width:0}
  .desktop-hub-panel-header{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:14px}.desktop-hub-panel-header>div{display:flex;align-items:center;gap:10px}.desktop-hub-panel-header h2{margin:0;color:var(--c-ink);font-size:16px;letter-spacing:-.025em;font-weight:780}.desktop-hub-panel-icon{width:26px;height:26px;display:grid;place-items:center;color:var(--c-accent-deep)}.desktop-hub-panel-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.desktop-hub-period{border:1px solid var(--c-line);border-radius:9px;background:var(--c-paper-2);padding:8px 10px;color:var(--c-muted);font-size:10px;font-weight:650}
  .desktop-hub-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:15px}.desktop-hub-metrics article{min-width:0;min-height:90px;border:1px solid color-mix(in srgb,var(--c-line) 84%,transparent);border-radius:13px;background:color-mix(in srgb,var(--c-paper) 96%,var(--c-paper-2));display:grid;grid-template-columns:48px 1fr;align-items:center;gap:10px;padding:12px}.desktop-hub-metric-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center}.desktop-hub-metric-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.metric-notes{background:var(--c-blue-soft);color:var(--c-accent-deep)}.metric-studies{background:var(--c-lav-soft);color:var(--c-lav)}.metric-time{background:color-mix(in srgb,var(--c-blue-soft) 72%,var(--c-paper));color:var(--c-blue)}.metric-days{background:var(--c-gold-soft);color:color-mix(in srgb,var(--c-gold) 80%,#795b35)}.desktop-hub-metrics article>div{min-width:0;display:grid}.desktop-hub-metrics strong{font-size:17px;line-height:1.1;color:var(--c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-hub-metrics small{font-size:9px;color:var(--c-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-hub-metrics em{font-size:8px;color:color-mix(in srgb,var(--c-muted) 80%,transparent);font-style:normal;margin-top:2px}
  .desktop-hub-chart-head{margin-top:22px;display:flex;justify-content:space-between}.desktop-hub-chart-head>div{display:grid}.desktop-hub-chart-head strong{font-size:13px;color:var(--c-ink)}.desktop-hub-chart-head small{font-size:9px;color:var(--c-muted);margin-top:4px}
  .desktop-hub-chart{position:relative;height:210px;margin-top:10px}.desktop-hub-chart>svg{display:block;width:100%;height:182px;overflow:visible}.desktop-hub-chart-grid path{fill:none;stroke:color-mix(in srgb,var(--c-line) 70%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}.desktop-hub-chart-line,.desktop-hub-chart-area{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.desktop-hub-chart-area{fill:color-mix(in srgb,var(--c-accent-deep) 7%,transparent);stroke:none}.desktop-hub-chart-line{stroke-width:1.8}.desktop-hub-chart-line.chart-notes{stroke:var(--c-accent-deep)}.desktop-hub-chart-line.chart-time{stroke:var(--c-lav)}.desktop-hub-chart-line.chart-days{stroke:var(--c-gold)}.desktop-hub-chart-labels{position:absolute;left:3%;right:3%;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;color:var(--c-muted);font-size:8px}.desktop-hub-chart-labels span{text-align:center}.desktop-hub-chart-labels span:first-child{text-align:left}.desktop-hub-chart-labels span:last-child{text-align:right}
  .desktop-hub-chart-legend{display:flex;justify-content:center;gap:23px;flex-wrap:wrap;margin-top:5px}.desktop-hub-chart-legend span{display:flex;align-items:center;gap:6px}.desktop-hub-chart-legend i{width:13px;height:2px;border-radius:999px}.desktop-hub-chart-legend .legend-notes{background:var(--c-accent-deep)}.desktop-hub-chart-legend .legend-time{background:var(--c-lav)}.desktop-hub-chart-legend .legend-days{background:var(--c-gold)}.desktop-hub-chart-legend b{font-size:8px;font-weight:600;color:var(--c-muted)}

  .desktop-hub-side-stack{display:grid;gap:14px;min-width:0}.desktop-hub-recent-panel{padding:15px 17px 12px}.desktop-hub-recent-panel .desktop-hub-panel-header{padding:0 2px 7px}.desktop-hub-recent-panel .desktop-hub-panel-header button{border:1px solid var(--c-line);border-radius:8px;background:var(--c-paper);color:var(--c-muted);padding:6px 9px;font-size:9px;font-weight:650}.desktop-hub-recent-list{display:grid}.desktop-hub-recent-item{width:100%;min-width:0;min-height:51px;border:0;border-top:1px solid color-mix(in srgb,var(--c-line) 70%,transparent);background:transparent;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 3px;text-align:left;color:var(--c-ink);transition:.15s ease}.desktop-hub-recent-item:hover{background:color-mix(in srgb,var(--c-accent-soft) 42%,transparent);padding-inline:7px;border-radius:9px}.desktop-hub-recent-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center}.recent-note .desktop-hub-recent-icon{background:var(--c-blue-soft);color:var(--c-accent-deep)}.recent-study .desktop-hub-recent-icon,.recent-revisit .desktop-hub-recent-icon{background:var(--c-lav-soft);color:var(--c-lav)}.recent-ministry .desktop-hub-recent-icon{background:var(--c-gold-soft);color:var(--c-gold)}.desktop-hub-recent-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.desktop-hub-recent-copy{min-width:0;display:grid}.desktop-hub-recent-copy strong{font-size:10px;font-weight:680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-hub-recent-copy small{margin-top:2px;font-size:8px;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-hub-recent-item time{font-size:8px;color:var(--c-muted);white-space:nowrap}.desktop-hub-recent-empty{min-height:110px;display:grid;place-items:center;text-align:center;color:var(--c-muted);font-size:10px}
  .desktop-hub-quick-panel{padding:13px 16px 15px}.desktop-hub-quick-panel .desktop-hub-panel-header{min-height:30px}.desktop-hub-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:9px}.desktop-hub-quick-grid button{min-width:0;border:0;background:transparent;color:var(--c-ink);display:grid;justify-items:center;gap:7px;padding:5px 2px}.desktop-hub-quick-grid button>span{width:46px;height:44px;border:1px solid color-mix(in srgb,var(--c-line) 76%,transparent);border-radius:12px;background:var(--c-paper-2);display:grid;place-items:center;transition:.15s ease}.desktop-hub-quick-grid button:hover>span{transform:translateY(-2px);background:var(--c-accent-soft);border-color:var(--c-accent)}.desktop-hub-quick-grid svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.desktop-hub-quick-grid button:nth-child(1)>span{color:var(--c-accent-deep)}.desktop-hub-quick-grid button:nth-child(2)>span{color:var(--c-lav)}.desktop-hub-quick-grid button:nth-child(3)>span{color:var(--c-blue)}.desktop-hub-quick-grid button:nth-child(4)>span{color:var(--c-gold)}.desktop-hub-quick-grid small{font-size:8px;color:var(--c-muted);text-align:center;line-height:1.2}
}