/* Identidad compartida de la entrada, el espacio del asesor y el panel de administración.
   Se carga después del CSS de cada página. El color principal es el azul MediPlus (#02386E) con el verde agua (#0E9A93) del logo;
   los colores de estados (pendiente, cancelada, activa…) conservan su significado en todos los temas.

   1. Colores: modo oscuro, modo claro y los nueve temas del menú del perfil
   2. Firma visual de los espacios de trabajo
   3. Menú del perfil (tema, claro/oscuro y animaciones)
   4. Movimiento: pausa desde el menú y «menos movimiento» del sistema
   5. Identidad MediPlus: nombre en dos colores, verde agua para lo que se destaca, etiquetas en Montserrat,
      datos en IBM Plex Mono y un campo de cruces médicas de fondo (ver el manual de marca) */

/* ---------- 1. Colores ---------- */
@property --orbit{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  --display:'Nunito',system-ui,sans-serif;--label:'Montserrat',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --plus:#0e9a93;--serif:'Nunito',system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
}
/* Paleta del manual de marca: Azul MediPlus #02386E, Verde Agua #0E9A93, Agua Claro #DDF1EF,
   Oro Inscripción #F2B33D (solo avisos y campañas), Tinta #0D1F33 y Nube #F4F8FA. Los tonos intermedios
   son mezclas de esos mismos colores. Única excepción: el rojo de error y «No llamar», para que no se pase por alto. */
:root,:root[data-theme="dark"]{
  --bg:#0d1f33;--bg-2:color-mix(in srgb,#0d1f33 80%,#02386e);--solid:color-mix(in srgb,#0d1f33 88%,#02386e);--solid-2:color-mix(in srgb,#0d1f33 74%,#02386e);
  --text:#f4f8fa;--text-2:color-mix(in srgb,#f4f8fa 84%,#0d1f33);--muted:color-mix(in srgb,#f4f8fa 64%,#0d1f33);--soft:color-mix(in srgb,#f4f8fa 50%,#0d1f33);
  --panel:rgba(244,248,250,.035);--panel-2:rgba(244,248,250,.065);--surface:var(--panel);--surface-2:var(--panel-2);
  --line:rgba(221,241,239,.1);--line-2:rgba(221,241,239,.2);--line-rgb:221,241,239;--ink-rgb:244,248,250;
  --glass-rgb:13,31,51;--glass-2-rgb:11,36,63;--field-rgb:13,31,51;
  --sheet-1:color-mix(in srgb,#0d1f33 80%,#02386e);--sheet-2:#0d1f33;--shadow-deep:rgba(0,0,0,.5);--highlight:rgba(244,248,250,.06);
  --card-grad:linear-gradient(160deg,rgba(244,248,250,.055),rgba(244,248,250,.014));
  --accent:#0e9a93;--accent-2:#ddf1ef;--accent-rgb:14,154,147;--on-accent:#fff;--shine:#ddf1ef;
  --mint:var(--accent);--mint-rgb:var(--accent-rgb);--mint-mid:var(--accent);--cyan:var(--accent-2);--teal:var(--accent-2);
  --ok:#0e9a93;--ok-rgb:14,154,147;--good:#0e9a93;--good-rgb:14,154,147;
  --warn:#f2b33d;--warn-rgb:242,179,61;--info:#ddf1ef;--info-rgb:221,241,239;
  --violet:color-mix(in srgb,#0e9a93 50%,#ddf1ef);--violet-rgb:118,198,195;--product-text:#ddf1ef;
  --bad:#f08a7e;--bad-rgb:240,138,126;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f4f8fa;--bg-2:color-mix(in srgb,#02386e 5%,#f4f8fa);--solid:#fff;--solid-2:#f4f8fa;
  --text:#0d1f33;--text-2:color-mix(in srgb,#0d1f33 84%,#f4f8fa);--muted:color-mix(in srgb,#0d1f33 70%,#f4f8fa);--soft:color-mix(in srgb,#0d1f33 58%,#f4f8fa);
  --panel:rgba(255,255,255,.72);--panel-2:#fff;
  --line:rgba(2,56,110,.12);--line-2:rgba(2,56,110,.24);--line-rgb:2,56,110;--ink-rgb:13,31,51;
  --glass-rgb:244,248,250;--glass-2-rgb:255,255,255;--field-rgb:255,255,255;
  --sheet-1:#fff;--sheet-2:#f4f8fa;--shadow-deep:rgba(2,56,110,.16);--highlight:rgba(255,255,255,.75);
  --card-grad:linear-gradient(160deg,#fff,rgba(255,255,255,.76));
  --accent:#02386e;--accent-2:#0e9a93;--accent-rgb:2,56,110;--on-accent:#fff;--shine:#ddf1ef;
  --ok:color-mix(in srgb,#0e9a93 80%,#0d1f33);--ok-rgb:14,154,147;--good:color-mix(in srgb,#0e9a93 80%,#0d1f33);--good-rgb:14,154,147;
  --warn:color-mix(in srgb,#f2b33d 50%,#0d1f33);--warn-rgb:242,179,61;--info:#02386e;--info-rgb:2,56,110;
  --violet:color-mix(in srgb,#02386e 55%,#0e9a93);--violet-rgb:7,99,125;--product-text:color-mix(in srgb,#0e9a93 75%,#0d1f33);
  --bad:#c2392b;--bad-rgb:194,57,43;
  color-scheme:light;
}
/* Temas, todos con colores de la marca: cada uno con su versión oscura (primera regla) y clara (segunda).
   MediPlus: azul con verde agua. Verde Agua: el verde manda. Tinta: sobrio, tinta con verde agua. */
:root[data-palette="verde"]{--accent:#ddf1ef;--accent-2:#0e9a93;--accent-rgb:221,241,239;--on-accent:#0d1f33;--shine:#fff}
:root[data-theme="light"][data-palette="verde"]{--accent:#0e9a93;--accent-2:#02386e;--accent-rgb:14,154,147;--on-accent:#fff;--shine:#ddf1ef}
:root[data-palette="tinta"]{--accent:#f4f8fa;--accent-2:#0e9a93;--accent-rgb:244,248,250;--on-accent:#0d1f33;--shine:#ddf1ef}
:root[data-theme="light"][data-palette="tinta"]{--accent:#0d1f33;--accent-2:#0e9a93;--accent-rgb:13,31,51;--on-accent:#fff;--shine:#ddf1ef}
/* El área se ve en su etiqueta; el tema del usuario manda sobre los colores de producto. */
:root[data-theme] .area-suple{--accent:inherit;--accent-2:inherit;--accent-rgb:inherit;--on-accent:inherit}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
::selection{background:rgba(var(--accent-rgb),.24)}

/* ---------- 2. Firma visual de los espacios de trabajo ---------- */
/* Fondo: luz petróleo que deriva despacio, cuadrícula fina y grano de papel. */
.backdrop{background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .2 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");overflow:hidden}
.backdrop::before{content:"";position:absolute;inset:-25%;
  background:radial-gradient(32% 30% at 82% 12%,rgba(var(--accent-rgb),.16),transparent 70%),radial-gradient(28% 32% at 8% 92%,rgba(var(--accent-rgb),.09),transparent 70%),radial-gradient(22% 22% at 45% 55%,rgba(var(--accent-rgb),.05),transparent 70%);
  animation:backdrop-drift 38s ease-in-out infinite alternate}
@keyframes backdrop-drift{to{transform:translate3d(-6%,5%,0) rotate(8deg) scale(1.08)}}
.backdrop::after{opacity:.22}
.sidebar{background:rgba(var(--glass-rgb),.92)}
.brand strong,.entry-brand strong{letter-spacing:-.035em}

/* Encabezado de bienvenida: cristal, filo de luz arriba y nombre en serif itálica. */
.welcome,.hero-card{border-radius:26px;border-color:var(--line);
  background:radial-gradient(60% 140% at 100% 0%,rgba(var(--accent-rgb),.16),transparent 62%),radial-gradient(45% 100% at 0% 100%,rgba(var(--accent-rgb),.07),transparent 70%),var(--card-grad);
  box-shadow:0 1px 0 var(--highlight) inset,0 30px 70px -48px var(--shadow-deep)}
.welcome::after,.hero-card::after{content:"";position:absolute;left:4%;right:4%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.2) 0%,rgba(var(--accent-rgb),.2) 35%,rgba(var(--accent-rgb),.9) 47%,var(--shine) 50%,rgba(var(--accent-rgb),.9) 53%,rgba(var(--accent-rgb),.2) 65%,rgba(var(--accent-rgb),.2) 100%);
  background-size:300% 100%;animation:edge-flow 7s var(--ease-in-out) 1s infinite;
  -webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
@keyframes edge-flow{0%{background-position:100% 0}60%,100%{background-position:0% 0}}
.welcome h1,.hero-card h1{font-weight:600;letter-spacing:-.055em}
.welcome h1 .name,.hero-card h1 .name{display:inline-block;padding:0 .08em .04em 0;font:italic 800 1.06em/1 var(--serif);letter-spacing:-.012em}
.welcome h1.swap{animation:title-in 620ms var(--ease-out)}
.eyebrow{letter-spacing:.16em;font-weight:700}

/* Tarjetas de cifras: borde que se enciende donde está el puntero. */
.stat,.kpi{position:relative;border-radius:18px;box-shadow:0 1px 0 var(--highlight) inset,0 16px 36px -30px var(--shadow-deep)}
.stat::after,.kpi::after,.panel.glow-edge::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity 350ms ease;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),rgba(var(--accent-rgb),.95),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.stat strong,.kpi strong{font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.kpi{background:rgba(var(--field-rgb),.55)}
.panel,.table-wrap,.upload{border-radius:18px}
.panel{box-shadow:0 1px 0 var(--highlight) inset,0 24px 60px -50px var(--shadow-deep)}
.panel-head{padding-top:25px;padding-bottom:22px}
.panel-head h2,.section-head h2{letter-spacing:-.04em}
th{font-size:10px;letter-spacing:.08em}
tbody tr{transition:background-color 160ms ease}

/* Botón principal: profundidad y un brillo que cruza al pasar el puntero. */
.button.primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 74%,#000));
  box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 14px 30px -16px rgba(var(--accent-rgb),.95)}
:root[data-theme="dark"] .button.primary,:root:not([data-theme]) .button.primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 80%,#fff))}

/* Avatar con un anillo de luz que gira despacio. */
.avatar{position:relative;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000));color:var(--on-accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12)}
.avatar::after{content:"";position:absolute;inset:-4px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from var(--orbit),transparent 0 62%,rgba(var(--accent-rgb),.9) 82%,transparent 92%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.6px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 1.6px),#000 0);
  animation:orbit 6s linear infinite}
@keyframes orbit{to{--orbit:360deg}}

.nav-indicator{transition:transform 420ms var(--ease-out),width 420ms var(--ease-out),height 420ms var(--ease-out),opacity 200ms ease;
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.03));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.2)}

/* Pantalla de carga: el logo con sus meridianos dibujándose. */
.loading-meridians{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(var(--accent-rgb),.6);stroke-width:.8;stroke-linecap:round}
.loading-meridians>*{stroke-dasharray:400;stroke-dashoffset:400;animation:meridian-draw 1.6s var(--ease-out) infinite alternate}
.loading-meridians>:nth-child(2){animation-delay:.15s}.loading-meridians>:nth-child(3){animation-delay:.3s}
@keyframes meridian-draw{to{stroke-dashoffset:0}}
.loading-logo:has(.loading-meridians) .loading-ring{display:none}

@media(hover:hover) and (pointer:fine){
  .stat:hover::after,.kpi:hover::after{opacity:1}
  .stat:hover{transform:translateY(-3px)}
  .kpi{transition:transform 300ms var(--ease-out)}.kpi:hover{transform:translateY(-3px)}
}
@media(max-width:1100px){.top-right{gap:8px}.topbar{padding-inline:20px}}
@media(max-width:760px){
  .topbar:has(>.brand){flex-wrap:wrap}.topbar:has(>.brand) .top-right{flex-wrap:wrap;margin-left:0}
  .topbar .crumb{display:none}
  .welcome h1 .name{display:inline}
}

/* ---------- 3. Menú del perfil ---------- */
.profile-settings{position:relative;color:var(--text);flex-shrink:0}
.profile-settings>summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;padding:5px 8px 5px 10px;border-radius:14px;border:1px solid transparent;user-select:none;
  transition:background-color 200ms ease,border-color 200ms ease}
.profile-settings>summary::-webkit-details-marker{display:none}
.profile-settings[open]>summary{background:var(--panel-2);border-color:var(--line-2)}
.profile-chevron{display:grid;place-items:center;width:16px;height:16px;font-size:17px;line-height:0;color:var(--muted);transition:transform 320ms var(--ease-out)}
.profile-settings[open] .profile-chevron{transform:rotate(180deg)}
.appearance-panel{position:absolute;right:0;top:calc(100% + 12px);z-index:50;width:336px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain;
  padding:20px;border-radius:22px;text-align:left;transform-origin:top right;
  background:linear-gradient(170deg,var(--solid),var(--sheet-2));border:1px solid var(--line-2);
  box-shadow:0 1px 0 var(--highlight) inset,0 30px 80px -24px var(--shadow-deep)}
/* Con el menú abierto, la barra superior no recorta ni reubica el panel (el desenfoque crea un contenedor propio). */
.topbar:has(.profile-settings[open]){backdrop-filter:none;-webkit-backdrop-filter:none;animation:none;transform:none;background:rgba(var(--glass-rgb),.97)}
.profile-settings[open] .appearance-panel{animation:menu-in 340ms var(--ease-out)}
.profile-settings[open] .appearance-panel>*{animation:menu-item 460ms var(--ease-out) both}
.profile-settings[open] .appearance-panel>:nth-child(2){animation-delay:40ms}
.profile-settings[open] .appearance-panel>:nth-child(3){animation-delay:80ms}
.profile-settings[open] .appearance-panel>:nth-child(4){animation-delay:120ms}
@keyframes menu-in{from{opacity:0;transform:translateY(-10px) scale(.95);filter:blur(6px)}}
@keyframes menu-item{from{opacity:0;transform:translateY(6px)}}
.appearance-heading{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.appearance-heading .avatar{width:40px;height:40px;flex:none}
.appearance-heading strong{display:block;font:600 16px/1.2 var(--display);letter-spacing:-.03em}
.appearance-heading p{margin:3px 0 0;font-size:12px;color:var(--muted);font-weight:400}
.appearance-panel fieldset{padding:0;border:0;margin:0 0 18px;min-width:0}
.appearance-panel legend{padding:0;margin-bottom:10px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.appearance-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.appearance-theme{display:grid;justify-items:center;gap:8px;padding:11px 4px 9px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--text-2);font-size:11.5px;font-weight:500;cursor:pointer;
  transition:background-color 200ms ease,border-color 200ms ease,color 200ms ease}
.theme-swatch{position:relative;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--sw-a) 0 50%,var(--sw-b) 50% 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 8px 16px -8px var(--sw-a);transition:transform 380ms var(--ease-out),box-shadow 300ms ease}
.theme-swatch::after{content:"";position:absolute;inset:0;margin:auto;width:11px;height:6px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-2px) rotate(-45deg) scale(0);transition:transform 320ms var(--ease-out);filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.appearance-theme[aria-pressed="true"]{background:var(--panel-2);border-color:var(--line-2);color:var(--text);font-weight:600}
.appearance-theme[aria-pressed="true"] .theme-swatch{box-shadow:0 0 0 2px var(--solid),0 0 0 3.5px var(--sw-a),0 10px 20px -8px var(--sw-a)}
.appearance-theme[aria-pressed="true"] .theme-swatch::after{transform:translateY(-2px) rotate(-45deg) scale(1)}
.appearance-theme[data-palette="brand"]{--sw-a:#02386e;--sw-b:#0e9a93}
.appearance-theme[data-palette="verde"]{--sw-a:#0e9a93;--sw-b:#ddf1ef}
.appearance-theme[data-palette="tinta"]{--sw-a:#0d1f33;--sw-b:#0e9a93}
/* Claro / oscuro: un interruptor con una pastilla que se desliza. */
.appearance-modes{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:14px;background:rgba(var(--ink-rgb),.06);box-shadow:inset 0 0 0 1px var(--line)}
.appearance-modes::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:10px;background:var(--solid);
  box-shadow:0 6px 16px -8px var(--shadow-deep),inset 0 0 0 1px var(--line-2);transition:transform 480ms var(--ease-out)}
.appearance-modes:has([data-mode="dark"][aria-pressed="true"])::before{transform:translateX(100%)}
.appearance-modes button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;transition:color 300ms ease}
.appearance-modes button[aria-pressed="true"]{color:var(--text)}
.appearance-modes svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform 500ms var(--ease-out)}
.appearance-modes button[aria-pressed="true"] svg{transform:rotate(-20deg) scale(1.08);color:var(--accent)}
/* Animaciones: interruptor. */
.appearance-motion{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(var(--ink-rgb),.04);font-size:12.5px;font-weight:600;cursor:pointer}
.appearance-motion small{display:block;margin-top:2px;color:var(--muted);font-size:11px;font-weight:400}
.appearance-motion input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:40px;height:24px;margin:0;border-radius:99px;background:rgba(var(--ink-rgb),.16);cursor:pointer;transition:background-color 250ms ease}
.appearance-motion input::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform 380ms var(--ease-out)}
.appearance-motion input:checked{background:var(--accent)}
.appearance-motion input:checked::before{transform:translateX(16px)}
.appearance-motion input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.appearance-note{margin:14px 2px 0;font-size:11px;line-height:1.5;color:var(--muted);font-weight:400}
@media(hover:hover) and (pointer:fine){
  .profile-settings>summary:hover{background:var(--panel-2)}
  .appearance-theme:hover{background:var(--panel-2)}
  .appearance-theme:hover .theme-swatch{transform:scale(1.1) rotate(-12deg)}
  .appearance-modes button:hover{color:var(--text)}
}
/* En el teléfono el menú sube desde abajo como una hoja. */
@media(max-width:760px){
  .profile-settings .profile-name{display:block;max-width:130px}
  .profile-settings #profileName{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .profile-settings>summary{gap:7px;padding:4px}
  .profile-settings .avatar{width:32px;height:32px}
  .appearance-panel{position:fixed;left:10px;right:10px;top:auto;bottom:10px;width:auto;max-width:none;max-height:min(82dvh,640px);padding:22px 18px calc(18px + env(safe-area-inset-bottom));border-radius:26px;transform-origin:bottom center}
  .profile-settings[open] .appearance-panel{animation:sheet-in 460ms var(--ease-out)}
  .profile-settings[open]::before{content:"";position:fixed;inset:0;z-index:49;background:rgba(13,31,51,.32);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:fade-in 300ms ease}
}
@keyframes sheet-in{from{transform:translateY(105%)}}
@keyframes fade-in{from{opacity:0}}
@media(max-width:430px){.profile-settings .profile-name{max-width:85px}.profile-settings .profile-name small{display:none}}

/* Cambio de tema: el nuevo color se abre en círculo desde donde se pulsó (lo hace tema.js). */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

/* ---------- 4. Movimiento ---------- */
/* «Animaciones» apagado en el menú: todo queda quieto y visible al instante. */
:root[data-motion="paused"] *,:root[data-motion="paused"] *::before,:root[data-motion="paused"] *::after{animation:none!important;scroll-behavior:auto!important}
:root[data-motion="paused"] [data-reveal]{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .backdrop::before,.avatar::after{animation:none!important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* ---------- 5. Identidad MediPlus ---------- */
/* Verde agua de la marca: «Plus», la palabra que se destaca y el arco. */

/* «Medi» en azul y «Plus» en verde agua, como en el logo. En oscuro «Medi» va en blanco. */
.wordmark{font-family:var(--display)!important;font-weight:900!important;letter-spacing:-.02em!important;color:var(--plus)}
.wordmark span{color:var(--accent)}
:root[data-theme="dark"] .wordmark span,:root:not([data-theme]) .wordmark span{color:var(--text)}
.brand small,.entry-brand small{font-family:var(--label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-size:9.5px}

/* Títulos redondeados y gruesos; el nombre de la persona en verde agua, sin cursiva. */
.welcome h1,.hero-card h1{font-weight:800;letter-spacing:-.025em}
.welcome h1 .name,.hero-card h1 .name{font:900 1em/1 var(--display);letter-spacing:-.02em;color:var(--plus);
  background:none;-webkit-background-clip:border-box;background-clip:border-box;animation:none}
.panel-head h2,.section-head h2{font-weight:800;letter-spacing:-.02em}
.stat strong,.kpi strong{font-weight:800;letter-spacing:-.02em}

/* Etiquetas en Montserrat espaciada; datos de reportes en IBM Plex Mono. */
.eyebrow,.hs-eyebrow,.nb-eyebrow,.workspace-label,th{font-family:var(--label);font-weight:600;letter-spacing:.16em}
td.num,.entry-clock{font-family:var(--mono);font-size:.94em;letter-spacing:0}
.lema{font-family:var(--label);letter-spacing:.14em}

/* Fondo de los espacios de trabajo: cruces médicas finas en lugar de la cuadrícula. */
.backdrop::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M26.5 23h3v3.5H33v3h-3.5V33h-3v-3.5H23v-3h3.5z' fill='%2302386e' fill-opacity='.16'/%3E%3C/svg%3E");background-size:56px 56px;opacity:1}
:root[data-theme="dark"] .backdrop::after,:root:not([data-theme]) .backdrop::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M26.5 23h3v3.5H33v3h-3.5V33h-3v-3.5H23v-3h3.5z' fill='%230e9a93' fill-opacity='.16'/%3E%3C/svg%3E")}

/* Crédito del desarrollador: discreto, en el pie de la portada, como en los sitios profesionales. */
.firma{opacity:.75;transition:opacity 200ms ease}
.firma:hover{opacity:1}