/* =========================================================================
   Metodify — Tema compartido (claro y oscuro)
   Creado el 24/10/2026. Fuente única del estilo de Metodify para:
     · el panel central (metodify-app)
     · el panel de negocio y la página de reservas (metodify-panel)
     · todo lo que se agregue después (lo hereda).
   Se publica en la raíz: /metodify-tema.css (+ /metodify-tema.js).

   De dónde sale: la web www.metodify.com.ar tal como está hoy
   (../metodify/src/styles: metodify.css + v2.css + mobile.css). No se usa
   Tomorrow ni radio de 4px: www los cambió el 08/10 por Inter Tight, el acento
   ámbar, degradés y vidrio de 4 capas (decisiones de Julián).

   Temas (pedido de Julián, 24/10/2026):
     · oscuro = el de www: marino + acento ámbar.
     · claro  = blanco y azul con el mismo estilo (vidrio, radios, letras).
     · Arranca según el sistema; el botón [data-cambiar-tema] lo cambia y el
       navegador lo recuerda. Lo maneja metodify-tema.js.

   Cómo usarlo en una página:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap">
     <link rel="stylesheet" href="/metodify-tema.css">
     <script src="/metodify-tema.js"></script>   ← en el <head>, sin defer
   Sin JS se ve el claro (nada queda invisible).

   Reglas:
     · Usar SIEMPRE los tokens semánticos (--fondo, --texto, --acento…), nunca
       un color suelto. Un color nuevo se agrega acá, en los dos temas.
     · Las clases de este archivo empiezan con "mt-" para no chocar con las
       del panel de negocio.
     · Celular primero: tamaños táctiles de 44px como mínimo.
   Contrastes verificados (AA) en los comentarios de cada token.
   ========================================================================= */

/* ---------- 1. Paleta base (no cambia con el tema) ---------------------- */
:root{
  /* Los 5 colores de Sistema_De_Color.md */
  --m-ink:       #0d1b2a;
  --m-prusia:    #1b263b;
  --m-dusk:      #415a77;
  --m-denim:     #778da9;
  --m-alabastro: #e0e1dd;
  /* Acento ámbar de www (v2.css) */
  --m-ambar:        #f5a524;
  --m-ambar-2:      #e8891f;
  --m-ambar-claro:  #ffd27a;
  /* Azul del tema claro (el del panel de negocio) */
  --m-azul:        #2F6FD6;
  --m-azul-2:      #1F55B0;
  --m-azul-texto:  #2459B3;
  --m-azul-claro:  #5B9BFF;

  /* Letras: las mismas tres voces de www */
  --letra-titulo: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --letra-texto:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --letra-mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Forma y movimiento (www v2.css) */
  --radio-card: 14px;
  --radio-ctrl: 10px;
  --radio-pastilla: 999px;
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transicion: 160ms ease;
  --vidrio-desenfoque: 18px;
  --toque: 44px;                 /* alto mínimo de todo lo que se toca */
  --gutter: 16px;
}
@media (min-width:768px){ :root{ --gutter: 24px; } }

/* ---------- 2. Tema claro (también es el de respaldo sin JS) ------------ */
/* html:not(...) pesa más que :root: así gana aunque otra hoja (por ejemplo el
   global.css viejo de la app) use los mismos nombres y se cargue después. */
html:not([data-tema="oscuro"]){
  color-scheme: light;
  --fondo:          #f4f6f9;     /* texto 16:1 · texto-2 9,5:1 · texto-3 5,5:1 */
  --fondo-2:        #e9edf3;     /* franjas y sección alterna */
  --superficie:     rgba(255, 255, 255, .72);  /* vidrio de tarjetas */
  --superficie-alt: rgba(255, 255, 255, .55);
  --superficie-solida: #ffffff;  /* menús que tapan contenido */
  --elegido:        #ffffff;     /* segmento o pestaña elegida */
  --texto:          #0d1b2a;
  --texto-2:        #33415c;
  --texto-3:        #56657a;     /* solo metadatos y rótulos */
  --borde:          rgba(13, 27, 42, .10);
  --borde-fuerte:   rgba(13, 27, 42, .18);

  --acento:         var(--m-azul);
  --acento-2:       var(--m-azul-2);
  --acento-claro:   var(--m-azul-claro);   /* solo decoración, no texto */
  --acento-texto:   var(--m-azul-texto);   /* azul para letras: 6,2:1 sobre --fondo */
  --acento-tinta:   #ffffff;               /* texto sobre el botón: 4,8:1 a 7:1 */
  --acento-suave:   rgba(47, 111, 214, .10);
  --acento-borde:   rgba(47, 111, 214, .32);
  --grad-acento:    linear-gradient(135deg, var(--m-azul) 0%, var(--m-azul-texto) 55%, var(--m-azul-2) 100%);
  --grad-texto:     linear-gradient(100deg, var(--m-azul) 0%, var(--m-azul-texto) 60%, var(--m-azul-2) 100%);
  --sombra-acento:  0 14px 34px -12px rgba(47, 111, 214, .55);

  --vidrio-reflejo: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.35) 38%, rgba(255,255,255,0) 54%, rgba(255,255,255,.15) 82%, rgba(255,255,255,.4) 100%);
  --vidrio-canto:   inset 0 1px 0 rgba(255, 255, 255, .9);
  --sombra:         0 1px 2px rgba(13, 27, 42, .05), 0 12px 32px -12px rgba(13, 27, 42, .16);
  --sombra-fuerte:  0 2px 6px rgba(13, 27, 42, .07), 0 24px 56px -16px rgba(13, 27, 42, .24);

  /* Fondo atmosférico (mismo dibujo que el hero de www, en azul claro) */
  --atm-cielo:  radial-gradient(120% 80% at 50% -10%, rgba(91, 155, 255, .18) 0%, rgba(244, 246, 249, 0) 60%);
  --atm-base:   linear-gradient(180deg, #f8fafc 0%, #f4f6f9 55%, #eef2f7 100%);
  --atm-luz-a:  rgba(119, 141, 169, .22);
  --atm-luz-b:  rgba(47, 111, 214, .14);
  --atm-punto:  rgba(13, 27, 42, .10);
  --grano-opacidad: .035;
  /* Efectos vivos (metodify-efectos.js): en claro, azules que tiñen el blanco */
  --aurora-frio:     91, 155, 255;
  --aurora-frio-2:   47, 111, 214;
  --aurora-frio-3:   150, 185, 235;
  --aurora-calido:   120, 200, 255;
  --aurora-calido-2: 165, 205, 255;
  --aurora-calido-3: 125, 140, 240;
  --aurora-fuerza:   .55;
  --aurora-mezcla:   multiply;
  --pista:           rgba(13, 27, 42, .09);
  --pista-luz:       #2F6FD6;
  --pista-halo:      rgba(47, 111, 214, .20);
  --pista-mezcla:    normal;

  --ok:     #1e7a46;   /* 5,3:1 sobre --fondo */
  --error:  #b3261e;   /* 6,1:1 */
  --aviso:  #8a5a00;   /* 5,6:1 */
  --ok-suave:    rgba(30, 122, 70, .10);
  --error-suave: rgba(179, 38, 30, .10);
  --aviso-suave: rgba(245, 165, 36, .16);

  --meta-color: #f4f6f9;   /* barra del navegador en el celu */
}

/* ---------- 3. Tema oscuro (el de www) ---------------------------------- */
html[data-tema="oscuro"]{
  color-scheme: dark;
  --fondo:          var(--m-ink);     /* texto 13,2:1 */
  --fondo-2:        var(--m-prusia);
  --superficie:     rgba(20, 34, 52, .72);
  --superficie-alt: rgba(13, 27, 42, .50);
  --superficie-solida: rgba(13, 27, 42, .98);
  --elegido:        rgba(255, 255, 255, .12);
  --texto:          var(--m-alabastro);
  --texto-2:        rgba(224, 225, 221, .66);  /* 5,85:1 en el peor caso (www) */
  --texto-3:        rgba(224, 225, 221, .58);
  --borde:          rgba(255, 255, 255, .12);
  --borde-fuerte:   rgba(255, 255, 255, .22);

  --acento:         var(--m-ambar);
  --acento-2:       var(--m-ambar-2);
  --acento-claro:   var(--m-ambar-claro);
  --acento-texto:   var(--m-ambar);            /* 9,1:1 sobre --fondo */
  --acento-tinta:   var(--m-ink);              /* 8,5:1 sobre el ámbar */
  --acento-suave:   rgba(245, 165, 36, .14);
  --acento-borde:   rgba(245, 165, 36, .38);
  --grad-acento:    linear-gradient(135deg, var(--m-ambar-claro) 0%, var(--m-ambar) 45%, var(--m-ambar-2) 100%);
  --grad-texto:     linear-gradient(100deg, var(--m-ambar-claro) 0%, var(--m-ambar) 60%, var(--m-ambar-2) 100%);
  --sombra-acento:  0 14px 34px -10px rgba(232, 137, 31, .55);

  --vidrio-reflejo: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 38%, rgba(255,255,255,0) 54%, rgba(255,255,255,.02) 82%, rgba(255,255,255,.06) 100%);
  --vidrio-canto:   inset 0 1px 0 rgba(255, 255, 255, .10);
  --sombra:         0 1px 2px rgba(3, 10, 20, .3), 0 24px 48px -16px rgba(3, 10, 20, .65);
  --sombra-fuerte:  0 16px 38px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255,255,255,.07);

  --atm-cielo:  radial-gradient(120% 80% at 50% -10%, rgba(65, 90, 119, .55) 0%, rgba(13, 27, 42, 0) 60%);
  --atm-base:   linear-gradient(180deg, #0b1724 0%, #0d1b2a 55%, #0a1622 100%);
  --atm-luz-a:  rgba(119, 141, 169, .32);
  --atm-luz-b:  rgba(245, 165, 36, .22);
  --atm-punto:  rgba(224, 225, 221, .16);
  --grano-opacidad: .05;
  /* Efectos vivos: los mismos colores y la misma mezcla (screen) que www */
  --aurora-frio:     119, 141, 169;
  --aurora-frio-2:   65, 90, 119;
  --aurora-frio-3:   160, 178, 201;
  --aurora-calido:   245, 165, 36;
  --aurora-calido-2: 255, 207, 122;
  --aurora-calido-3: 232, 137, 31;
  --aurora-fuerza:   1;
  --aurora-mezcla:   screen;
  --pista:           rgba(224, 225, 221, .12);
  --pista-luz:       #ffd27a;
  --pista-halo:      rgba(245, 165, 36, .28);
  --pista-mezcla:    screen;

  --ok:     #7bd389;
  --error:  #ff8a80;
  --aviso:  var(--m-ambar-claro);
  --ok-suave:    rgba(123, 211, 137, .12);
  --error-suave: rgba(255, 138, 128, .12);
  --aviso-suave: rgba(245, 165, 36, .14);

  --meta-color: #0d1b2a;
}

/* ---------- 4. Base (solo para páginas que usan el tema completo) ------- */
/* Se activa con la clase .mt en <html> o <body>, para no pisar el panel de
   negocio mientras se migra. */
.mt{
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra-texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
body.mt{ margin: 0; min-height: 100dvh; }
.mt *, .mt *::before, .mt *::after{ box-sizing: border-box; }
.mt h1, .mt h2, .mt h3, .mt h4{
  font-family: var(--letra-titulo);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
.mt h1{ font-size: clamp(1.75rem, 7vw, 2.75rem); letter-spacing: -.035em; }
.mt h2{ font-size: clamp(1.35rem, 5vw, 1.9rem); letter-spacing: -.03em; }
.mt h3{ font-size: 1.1rem; font-weight: 600; }
.mt p{ margin: 0 0 1em; }
.mt p:last-child{ margin-bottom: 0; }
/* :not(.mt-btn): un enlace con forma de botón usa el color del botón */
.mt a:not(.mt-btn){ color: var(--texto); text-decoration-color: var(--texto-3); text-underline-offset: 3px; }
.mt a:not(.mt-btn):hover{ text-decoration-color: var(--texto); }
.mt :focus-visible{ outline: 2px solid var(--acento); outline-offset: 3px; }
.mt [hidden]{ display: none !important; }
.mt .mt-mono{ font-family: var(--letra-mono); }
.mt .mt-muted{ color: var(--texto-2); }
.mt .mt-chico{ font-size: .875rem; line-height: 1.5; }
.mt .mt-num{ font-family: var(--letra-titulo); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

@media (prefers-reduced-motion: reduce){
  .mt *, .mt *::before, .mt *::after{ animation: none !important; transition: none !important; }
}

/* Cambio de tema suave (solo colores, solo cuando lo pide el botón) */
html.mt-cambiando, html.mt-cambiando *{
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}

/* ---------- 5. Fondo atmosférico + grano -------------------------------- */
/* <div class="mt-fondo" aria-hidden="true"><i class="mt-luz-a"></i><i class="mt-luz-b"></i><i class="mt-reticula"></i></div> */
.mt-fondo{
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: var(--atm-cielo), var(--atm-base);
}
.mt-fondo i{ position: absolute; display: block; }
.mt-luz-a, .mt-luz-b{ border-radius: 50%; filter: blur(70px); }
.mt-luz-a{ width: 90vw; height: 90vw; left: -40vw; top: -40vw; background: var(--atm-luz-a); }
.mt-luz-b{ width: 110vw; height: 90vw; right: -50vw; bottom: -30vw; background: var(--atm-luz-b); }
.mt-reticula{
  inset: 0;
  background-image: radial-gradient(var(--atm-punto) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 70% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(70% 60% at 70% 30%, #000 0%, transparent 75%);
}
@media (min-width:980px){
  .mt-luz-a{ width: 46vw; height: 46vw; left: -14vw; top: -18vw; }
  .mt-luz-b{ width: 40vw; height: 40vw; right: -8vw; bottom: -16vw; }
}
/* Efectos vivos (metodify-efectos.js, se crean solos dentro de .mt-fondo).
   Capas, de atrás hacia adelante: fondo fijo → luces aurora → circuito →
   contenido (las tarjetas de vidrio los desenfocan). */
body.mt{ background: transparent; }   /* el fondo lo pinta html: si no, el body tapa las capas */
.mt-auroras{ position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.mt-aurora{ position: absolute; will-change: transform; mix-blend-mode: var(--aurora-mezcla); }
.mt-aurora-giro, .mt-aurora-onda{ position: absolute; inset: 0; will-change: transform; }
.mt-aurora-onda{
  border-radius: 50%;
  opacity: var(--aurora-fuerza);
  background: linear-gradient(to bottom,
    rgba(var(--c), 0) 0%, rgba(var(--c), var(--a)) 32%,
    rgba(var(--c2), var(--a)) 68%, rgba(var(--c2), 0) 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}
/* Con las luces vivas, las manchas fijas quedan de base, más suaves */
html.mt-luces-vivas .mt-luz-a, html.mt-luces-vivas .mt-luz-b{ opacity: .5; }
.mt-circuito{
  position: absolute; top: 0; left: 0; width: 100%; z-index: -1;
  pointer-events: none; overflow: hidden;
  mix-blend-mode: var(--pista-mezcla);
  /* se apaga al final en vez de cortarse */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 240px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 240px), transparent);
}
.mt-circuito svg{ position: absolute; inset: 0; overflow: visible; }
.mt-pista{ fill: none; stroke: var(--pista); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.mt-pista-luz, .mt-pista-halo{
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 38 1762;            /* luz de 38 px cada 1800 px */
  animation: mtPistaLuz 12s linear infinite;
}
.mt-pista-luz{ stroke: var(--pista-luz); stroke-width: 2; }
.mt-pista-halo{ stroke: var(--pista-halo); stroke-width: 7; }
@keyframes mtPistaLuz{ from{ stroke-dashoffset: 0; } to{ stroke-dashoffset: -1800; } }
@media (prefers-reduced-motion: reduce){ .mt-pista-luz, .mt-pista-halo{ display: none; } }

/* Grano (www v2.css): poner .mt-grano en <body> */
.mt-grano::after{
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: var(--grano-opacidad); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 6. Vidrio (tarjetas y paneles) ------------------------------ */
.mt-vidrio{
  background-color: var(--superficie);
  background-image: var(--vidrio-reflejo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra), var(--vidrio-canto);
  -webkit-backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(1.4);
          backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(1.4);
}
.mt-tarjeta{ padding: 18px; }
@media (min-width:768px){ .mt-tarjeta{ padding: 22px; } }
/* Tarjeta tocable (complementos): se levanta apenas */
.mt-tocable{
  display: block; color: inherit; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease-expo), box-shadow .25s var(--ease-expo), border-color .2s ease;
}
.mt-tocable:hover{ border-color: var(--borde-fuerte); box-shadow: var(--sombra-fuerte), var(--vidrio-canto); }
@media (hover:hover){ .mt-tocable:hover{ transform: translateY(-2px); } }
.mt-tocable:active{ transform: scale(.985); }

/* ---------- 7. Botones --------------------------------------------------- */
.mt-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--toque); padding: 11px 20px;
  font-family: var(--letra-titulo); font-size: .95rem; font-weight: 600; letter-spacing: .005em;
  border: 1px solid transparent; border-radius: var(--radio-ctrl);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease-expo), box-shadow .25s var(--ease-expo),
              background-color .2s ease, border-color .2s ease, color .2s ease;
}
.mt-btn:active{ transform: scale(.98); }
.mt-btn[disabled]{ opacity: .55; cursor: not-allowed; transform: none; }
.mt-btn svg{ width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* Principal: degradé del acento + sombra teñida + barrido de brillo (www) */
.mt-btn-acento{
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--grad-acento); color: var(--acento-tinta);
  border-color: var(--acento-borde);
  box-shadow: var(--sombra-acento), inset 0 1px 0 rgba(255,255,255,.4);
}
.mt-btn-acento::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%);
}
@media (hover:hover){
  .mt-btn-acento:hover{ transform: translateY(-2px); }
  .mt-btn-acento:hover::after{ transform: translateX(120%); transition: transform .8s var(--ease-expo); }
}

/* Secundario: vidrio */
.mt-btn-vidrio{
  background-color: var(--superficie); background-image: var(--vidrio-reflejo);
  color: var(--texto); border-color: var(--borde-fuerte);
  box-shadow: var(--vidrio-canto);
  -webkit-backdrop-filter: blur(var(--vidrio-desenfoque));
          backdrop-filter: blur(var(--vidrio-desenfoque));
}
.mt-btn-vidrio:hover{ border-color: var(--texto-3); }

/* Solo texto */
.mt-btn-texto{ background: transparent; color: var(--texto-2); padding-inline: 10px; }
.mt-btn-texto:hover{ color: var(--texto); }

.mt-btn-bloque{ width: 100%; }
/* Botón cuadrado de ícono (menú, tema, cerrar) */
.mt-btn-icono{ width: var(--toque); padding: 0; }

/* ---------- 8. Etiquetas y pastillas ------------------------------------ */
/* Etiqueta en mono con punto de acento (www .etiqueta) */
.mt-etiqueta{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 10px;
  font-family: var(--letra-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2);
  background: var(--superficie-alt); border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
}
.mt-etiqueta::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave);
}
.mt-etiqueta.sin-punto::before{ display: none; }
/* Estado chico: "Ejemplo", "Próximamente", "Activo" */
.mt-estado{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--radio-pastilla);
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  background: var(--acento-suave); color: var(--acento-texto);
  border: 1px solid var(--acento-borde);
}
.mt-estado.ok{ background: var(--ok-suave); color: var(--ok); border-color: transparent; }
.mt-estado.neutro{ background: var(--superficie-alt); color: var(--texto-2); border-color: var(--borde); }

/* Texto con degradé del acento (www .texto-senal) */
.mt-texto-acento{
  background: var(--grad-texto); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .mt-texto-acento{ color: var(--acento-texto); -webkit-text-fill-color: currentColor; }
}

/* ---------- 9. Selector de segmentos (Empresa / Asistente Personal) ----- */
.mt-segmentos{
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--superficie-alt); border: 1px solid var(--borde);
  border-radius: calc(var(--radio-ctrl) + 4px);
  -webkit-backdrop-filter: blur(var(--vidrio-desenfoque));
          backdrop-filter: blur(var(--vidrio-desenfoque));
}
.mt-segmento{
  flex: 1; min-height: 40px; padding: 8px 14px;
  font: 600 .9rem/1 var(--letra-titulo); color: var(--texto-2);
  background: transparent; border: 0; border-radius: var(--radio-ctrl); cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.mt-segmento[aria-selected="true"], .mt-segmento[aria-pressed="true"]{
  background: var(--elegido); color: var(--texto);
  box-shadow: var(--sombra), var(--vidrio-canto);
}

/* ---------- 10. Campos --------------------------------------------------- */
.mt-campo{ display: grid; gap: 6px; margin-bottom: 14px; font-size: .9rem; font-weight: 500; }
.mt-input{
  width: 100%; min-height: var(--toque); padding: 10px 13px;
  font: 400 1rem/1.4 var(--letra-texto);   /* 16px: iOS no hace zoom */
  color: var(--texto); background: var(--superficie-alt);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-ctrl);
}
.mt-input::placeholder{ color: var(--texto-3); }
.mt-input:focus{ outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent; }

/* ---------- 11. Botón de tema -------------------------------------------- */
/* <button class="mt-btn mt-btn-vidrio mt-btn-icono mt-tema" data-cambiar-tema>…dos svg…</button> */
.mt-tema .mt-ico-sol, .mt-tema .mt-ico-luna{ width: 20px; height: 20px; }
[data-tema="oscuro"] .mt-tema .mt-ico-luna,
.mt-tema .mt-ico-sol{ display: none; }
[data-tema="oscuro"] .mt-tema .mt-ico-sol{ display: block; }