/* Expediente PS — documentacion interna. Prefijo exp- para no chocar con el Roadmap.
 *
 * El lenguaje visual es el de MKT PS (mktps.fdvpy.com) y los valores estan copiados de su origen
 * (app/mktps/tailwind.config.js y app/mktps/src/styles/index.css), no aproximados a ojo. La
 * diferencia de implementacion es deliberada: MKT PS es React + Vite + Tailwind y se compila;
 * este modulo es CSS plano como el resto del Roadmap y se despliega escribiendo el archivo. Se
 * replica el sistema, no la herramienta.
 *
 * Los numeros que parecen esteticos NO lo son, y estan medidos en el origen:
 *   - Velo sobre la foto: el hall tiene porcelanato blanco y ventanal a contraluz. Su zona mas
 *     clara daba 3.88:1 para texto blanco. Con el velo al 0.56 en la franja media queda 5.2:1.
 *   - Vidrio claro al 0.82: es el piso. Por debajo, texto azul sobre esa misma zona clara deja de
 *     cumplir 4.5:1.
 *   - Boton primario en verde-600 #26743a y no en el verde canonico #2f8a43: blanco sobre el
 *     canonico da 4.34:1, insuficiente para una etiqueta de 14-15 px.
 * Bajar cualquiera de los tres rompe accesibilidad, no "queda mas suave".
 */

/* Tipografias propias del modulo, copiadas desde el bundle de MKT PS a una carpeta que este
   modulo controla. No se enlaza /mktps/assets/ porque esos nombres llevan el hash de compilacion:
   al recompilar MKT PS cambiarian y las fuentes de aca dejarian de cargar sin aviso.
   latin-ext no es opcional: el guarani usa ã ẽ ĩ õ ũ ỹ y varias viven en ese subconjunto. */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/expediente-assets/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/expediente-assets/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-display: swap; font-weight: 600;
  src: url('/expediente-assets/cormorant-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-display: swap; font-weight: 600;
  src: url('/expediente-assets/cormorant-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-display: swap; font-weight: 700;
  src: url('/expediente-assets/cormorant-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-display: swap; font-weight: 700;
  src: url('/expediente-assets/cormorant-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --azul-700: #092a32; --azul-800: #061e24; --azul-900: #041316;
  --verde-100: #dcefe0; --verde-500: #2f8a43; --verde-600: #26743a; --verde-700: #1c5328;
  --oro-400: #d1a15a;
  --ink-100: #f4f7f7; --ink-200: #e3eaeb; --ink-300: #cbd6d8; --ink-400: #93a3a7;
  --ink-600: #52636a; --ink-700: #3a4a50;
  --danger: #b3261e;
  --r-sm: .5rem; --r-md: .75rem; --r-lg: 1rem; --r-xl: 1.375rem;
  --s-sm: 0 1px 2px rgb(9 42 50 / .07), 0 1px 1px rgb(9 42 50 / .04);
  --s-lg: 0 12px 32px rgb(9 42 50 / .14), 0 2px 6px rgb(9 42 50 / .07);
  --s-glass: 0 8px 40px rgb(6 30 36 / .20);
  --suave: cubic-bezier(.22, 1, .36, 1);
  --sans: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Respaldo mientras carga la fotografia del hall, o si falla. */
  background-color: var(--azul-800);
  color: var(--azul-700);
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--azul-700); font-weight: 600; letter-spacing: -.011em; text-wrap: balance; }
button, input, select, textarea { font: inherit; }
.hidden { display: none !important; }

:focus-visible { outline: 2px solid var(--verde-500); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--verde-100); color: var(--verde-700); }

* { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-400); background-clip: content-box; }

/* ---------- Telon ----------
   El hall de recepcion, fijo a pantalla completa, con toda la interfaz flotando encima. Al estar
   fijo, el contenido se desplaza y la imagen no: se comporta como escenario, no como un bloque
   mas, y no deja franjas ni bordes que esconder. */
.exp-fondo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.exp-fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exp-velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(6 30 36 / .74) 0%, rgb(6 30 36 / .56) 42%, rgb(6 30 36 / .64) 100%),
    linear-gradient(104deg, rgb(16 45 23 / .42) 0%, rgb(9 42 50 / .20) 55%, transparent 88%);
}

/* ---------- Superficies ---------- */
.exp-vidrio {
  background-color: rgb(255 255 255 / .82);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / .6);
  box-shadow: var(--s-glass);
  min-width: 0;
}
/* 0.93 y no 0.82 para el area de lectura: lleva texto largo y tablas. min-width:0 no es
   cosmetico — un elemento de grilla no encoge por debajo del ancho de su contenido, asi que una
   tabla ancha adentro estiraria la tarjeta y desbordaria la pagina entera. */
.exp-tarjeta {
  min-width: 0;
  background-color: rgb(255 255 255 / .93);
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  border: 1px solid rgb(255 255 255 / .55);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgb(6 30 36 / .17);
}

/* ---------- Controles ---------- */
input, textarea {
  width: 100%; min-height: 40px; border: .8px solid var(--ink-300); border-radius: var(--r-sm);
  padding: 0 12px; background: white; color: var(--azul-700); font-size: .875rem;
  transition: border-color .15s var(--suave);
}
input:focus, textarea:focus { border-color: var(--verde-500); }
input::placeholder { color: var(--ink-600); }

button {
  border: 0; border-radius: var(--r-md); background: var(--verde-600); color: white;
  min-height: 44px; padding: 0 24px; font-size: .9375rem; font-weight: 500; cursor: pointer;
  box-shadow: var(--s-sm); transition: background-color .15s var(--suave);
}
button:hover { background: var(--verde-700); }
button:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Ingreso ---------- */
.exp-login { position: relative; z-index: 10; min-height: 100dvh; display: grid; align-items: center; gap: 40px; padding: 32px 24px; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); max-width: 1600px; margin: 0 auto; }
.exp-login-card { border-radius: var(--r-xl); padding: 32px; display: grid; gap: 14px; }
.exp-login-card img.exp-marca { width: 44px; height: 44px; }
.exp-cejilla { color: var(--ink-600); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.exp-login-card h1 { margin: 0; font-family: var(--display); font-size: 1.75rem; font-weight: 600; }
.exp-login-card > p.exp-sub { margin: -8px 0 6px; color: var(--ink-600); font-size: .875rem; }
.exp-login-card label { display: grid; gap: 6px; color: var(--azul-700); font-size: .8125rem; font-weight: 500; }
.exp-error { margin: 0; color: var(--danger); font-size: .8125rem; font-weight: 500; min-height: 18px; }
.exp-pie-login { margin: 0; color: var(--ink-600); font-size: .75rem; line-height: 1.5; }

.exp-lema { position: relative; z-index: 10; color: white; }
.exp-lema h2 { margin: 0 0 12px; color: white; font-family: var(--display); font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 600; line-height: 1.15; }
.exp-lema p { margin: 0; color: rgb(255 255 255 / .82); font-size: .9375rem; max-width: 46ch; }

/* ---------- Cabecera ---------- */
.exp-shell { position: relative; z-index: 10; min-height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); }

.exp-cab { display: flex; align-items: center; gap: 12px; height: 64px; width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 24px; }
.exp-cab-marca { display: flex; align-items: center; gap: 8px; background: none; box-shadow: none; padding: 0; min-height: 0; }
.exp-cab-marca:hover { background: none; }
.exp-cab-marca img { width: 28px; height: 28px; }
.exp-cab-marca span { font-family: var(--display); font-size: 1.15rem; font-weight: 600; line-height: 1; color: white; }

/* Pildoras de vidrio sobre la foto: inactivo translucido, activo blanco solido. El estado activo
   no se negocia con la legibilidad. */
.exp-nav-vidrio {
  background-color: rgb(255 255 255 / .1); color: rgb(255 255 255 / .85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 999px; min-height: 38px; padding: 0 14px; font-size: .8125rem;
  box-shadow: none;
}
.exp-nav-vidrio:hover { background-color: rgb(255 255 255 / .2); color: white; }

.exp-buscar-caja { margin-left: auto; position: relative; width: min(320px, 38vw); }
.exp-buscar {
  min-height: 38px; border-radius: 999px; padding: 0 16px; font-size: .8125rem;
  background-color: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .18); color: white;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.exp-buscar::placeholder { color: rgb(255 255 255 / .6); }
.exp-buscar:focus { background-color: rgb(255 255 255 / .2); border-color: rgb(255 255 255 / .45); }

.exp-avatar {
  width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%;
  background-color: rgb(255 255 255 / .18); color: white; font-size: .7rem; font-weight: 600;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: none;
  display: grid; place-items: center;
}
.exp-avatar:hover { background-color: rgb(255 255 255 / .28); }

.exp-cuenta { position: relative; }
.exp-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 250px;
  border: 1px solid var(--ink-200); border-radius: var(--r-md); background: white;
  box-shadow: var(--s-lg); overflow: hidden; padding: 4px 0;
}
.exp-menu-datos { border-bottom: 1px solid var(--ink-200); padding: 10px 14px; }
.exp-menu-datos b { display: block; font-size: .8125rem; font-weight: 500; color: var(--azul-700); }
.exp-menu-datos span { display: block; font-size: .6875rem; color: var(--ink-600); }
.exp-menu button {
  width: 100%; text-align: left; background: white; color: var(--azul-700); border-radius: 0;
  min-height: 42px; padding: 0 14px; font-size: .8125rem; font-weight: 400; box-shadow: none;
}
.exp-menu button:hover { background: var(--ink-100); }

/* ---------- Cuerpo ---------- */
.exp-cuerpo {
  display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 20px;
  width: 100%; max-width: 1600px; margin: 0 auto; padding: 4px 24px 28px; min-height: 0;
}

/* ---------- Indice ---------- */
.exp-indice { border-radius: var(--r-lg); padding: 14px; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; align-content: start; max-height: calc(100dvh - 96px); position: sticky; top: 76px; }
.exp-nav { overflow-y: auto; display: grid; gap: 2px; align-content: start; }

.exp-cont { border-top: 1px solid var(--ink-200); padding-top: 4px; }
.exp-cont:first-child { border-top: 0; }
.exp-cont-cab { display: flex; align-items: center; gap: 8px; }
/* El nombre del contenedor se ajusta en dos lineas en vez de cortarse con puntos suspensivos.
   "Politica con Vendedores" en versalitas espaciadas no entra en 310 px, y un indice que muestra
   "POLITICAS CO..." obliga a adivinar cual de las dos politicas es. */
.exp-cont-cab > button {
  flex: 1; background: none; box-shadow: none; color: var(--ink-600); text-align: left;
  padding: 8px 6px; min-height: 38px; font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r-sm);
  white-space: normal; line-height: 1.35; text-wrap: balance;
}
.exp-cont-cab > button:hover { background: var(--ink-100); color: var(--azul-700); }

/* El color identifica al contenedor de un vistazo, pero nunca es el unico portador de
   informacion: el nombre siempre esta escrito al lado. */
.exp-punto { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.exp-c-green { background: var(--verde-500); }
.exp-c-navy { background: var(--azul-700); }
.exp-c-blue { background: #164651; }
.exp-c-orange { background: #ef6f2e; }
.exp-c-gold { background: var(--oro-400); }
.exp-c-brown { background: #674b22; }

.exp-lista { display: grid; gap: 1px; }
.exp-item { display: flex; align-items: center; gap: 2px; }
.exp-item > button.exp-tit {
  flex: 1; background: none; box-shadow: none; color: var(--azul-700); text-align: left;
  font-weight: 400; font-size: .8125rem; padding: 8px 10px; min-height: 36px;
  border-radius: var(--r-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.exp-item > button.exp-tit:hover { background: var(--ink-100); }
.exp-item > button.exp-tit.exp-activa { background: var(--verde-100); color: var(--verde-700); font-weight: 500; }
.exp-sub { padding-left: 14px; border-left: 1px solid var(--ink-200); margin-left: 10px; }
.exp-sub > .exp-item > button.exp-tit { font-size: .78125rem; color: var(--ink-700); }

/* Las acciones aparecen al pasar el mouse: el panel tiene que leerse como un indice, no como un
   tablero de control. En tactil no hay hover, asi que abajo de 900 px quedan siempre visibles. */
.exp-mini {
  background: none; box-shadow: none; color: var(--ink-400); min-height: 28px; width: 28px;
  padding: 0; font-size: 16px; line-height: 1; border-radius: var(--r-sm); opacity: 0;
  transition: opacity .15s var(--suave), background-color .15s var(--suave);
}
.exp-cont-cab:hover .exp-mini, .exp-item:hover .exp-mini, .exp-mini:focus-visible { opacity: 1; }
.exp-mini:hover { background: var(--ink-200); color: var(--azul-700); }

.exp-indice-pie { border-top: 1px solid var(--ink-200); padding-top: 10px; }
.exp-indice-pie button { width: 100%; background: white; color: var(--verde-700); border: 1px solid var(--ink-300); min-height: 40px; font-size: .8125rem; }
.exp-indice-pie button:hover { background: var(--verde-100); border-color: var(--verde-500); }

/* ---------- Resultados ---------- */
.exp-resultados { display: grid; gap: 6px; }
.exp-res {
  display: grid; gap: 3px; text-align: left; background: white; color: var(--azul-700);
  border: 1px solid var(--ink-200); padding: 10px 12px; border-radius: var(--r-sm);
  font-weight: 400; min-height: 0; box-shadow: none;
}
.exp-res:hover { background: var(--ink-100); }
.exp-res small { color: var(--ink-600); font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.exp-res b { font-size: .8125rem; font-weight: 500; }
.exp-res span { font-size: .75rem; line-height: 1.45; color: var(--ink-700); }
.exp-res mark { background: var(--verde-100); color: var(--verde-700); padding: 0 2px; border-radius: 3px; }
.exp-sin { color: var(--ink-600); font-size: .8125rem; padding: 10px 2px; }

/* ---------- Pagina ---------- */
.exp-pagina-caja { border-radius: var(--r-lg); padding: 32px 36px 44px; align-self: start; }
.exp-vacio { display: grid; place-items: center; align-content: center; min-height: 55vh; text-align: center; gap: 8px; padding: 24px; }
.exp-vacio h2 { margin: 0; font-family: var(--display); font-size: 1.6rem; font-weight: 600; }
.exp-vacio p { margin: 0; color: var(--ink-600); font-size: .875rem; max-width: 42ch; }

.exp-ruta { color: var(--ink-600); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 6px; }
.exp-titulo {
  border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none;
  padding: 0 0 8px; min-height: 0; width: 100%;
  font-family: var(--display); font-size: 2rem; font-weight: 600; letter-spacing: -.011em;
  color: var(--azul-700);
}
.exp-titulo:focus { outline: 0; border-bottom-color: var(--verde-500); }

.exp-pie-cab { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 10px 0 18px; min-height: 30px; border-bottom: 1px solid var(--ink-200); padding-bottom: 12px; }
.exp-firma { color: var(--ink-600); font-size: .75rem; }
.exp-pie-cab .exp-mini { opacity: 1; color: var(--ink-600); }
.exp-estado { font-size: .75rem; font-weight: 500; margin-left: auto; }
.exp-guardando { color: var(--ink-600); }
.exp-guardado { color: var(--verde-600); }
.exp-falla { color: var(--danger); }

/* ---------- Barra de formato ---------- */
.exp-barra { display: flex; flex-wrap: wrap; gap: 3px; padding: 6px; background: var(--ink-100); border: 1px solid var(--ink-200); border-radius: var(--r-md); margin-bottom: 14px; position: sticky; top: 72px; z-index: 5; }
.exp-barra button {
  background: transparent; color: var(--azul-700); box-shadow: none; min-height: 34px;
  min-width: 34px; padding: 0 8px; font-weight: 500; font-size: .8125rem; border-radius: var(--r-sm);
}
.exp-barra button:hover { background: white; box-shadow: var(--s-sm); }
.exp-barra .exp-sep { width: 1px; background: var(--ink-300); margin: 5px 4px; padding: 0; min-width: 0; }
.exp-b-negrita { font-weight: 700; }
.exp-b-cursiva { font-style: italic; }
.exp-b-subrayado { text-decoration: underline; }
.exp-b-tachado { text-decoration: line-through; }

/* ---------- Lectura y edicion ---------- */
.exp-editor { min-height: 52vh; line-height: 1.7; font-size: .9375rem; color: var(--azul-700); }
.exp-editor:focus { outline: 0; }
.exp-editor h1, .exp-editor h2, .exp-editor h3, .exp-editor h4 { font-family: var(--display); font-weight: 600; line-height: 1.2; margin: 1.5em 0 .45em; }
.exp-editor h1 { font-size: 1.75rem; } .exp-editor h2 { font-size: 1.5rem; }
.exp-editor h3 { font-size: 1.25rem; } .exp-editor h4 { font-size: 1.0625rem; }
.exp-editor > *:first-child { margin-top: 0; }
.exp-editor p { margin: 0 0 1em; }
.exp-editor ul, .exp-editor ol { margin: 0 0 1em; padding-left: 1.4em; }
.exp-editor li { margin-bottom: .3em; }
.exp-editor a { color: var(--verde-700); text-underline-offset: 2px; }
.exp-editor blockquote { margin: 0 0 1em; padding: 4px 0 4px 18px; border-left: 2px solid var(--oro-400); color: var(--ink-700); font-style: italic; }
.exp-editor pre { background: var(--ink-100); border: 1px solid var(--ink-200); border-radius: var(--r-sm); padding: 14px 16px; overflow-x: auto; font-size: .8125rem; }
.exp-editor code { font-size: .92em; background: var(--ink-100); padding: 1px 5px; border-radius: 4px; }
.exp-editor pre code { background: none; padding: 0; }
.exp-editor hr { border: 0; border-top: 1px solid var(--ink-200); margin: 1.8em 0; }
.exp-editor table { border-collapse: collapse; width: 100%; margin: 0 0 1em; font-size: .875rem; font-variant-numeric: tabular-nums; }
.exp-editor th, .exp-editor td { border: 1px solid var(--ink-200); padding: 9px 12px; text-align: left; vertical-align: top; }
.exp-editor th { background: var(--ink-100); color: var(--ink-600); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Historial ---------- */
dialog { width: min(720px, calc(100vw - 32px)); border: 0; border-radius: var(--r-lg); padding: 0; box-shadow: var(--s-lg); }
dialog::backdrop { background: rgb(4 19 22 / .45); backdrop-filter: blur(2px); }
.exp-dialogo { padding: 24px; display: grid; gap: 14px; background: white; max-height: 80vh; overflow-y: auto; }
.exp-dialogo h2 { margin: 0; font-family: var(--display); font-size: 1.4rem; font-weight: 600; }
.exp-dialogo-cab { display: flex; align-items: center; gap: 12px; }
.exp-cerrar { margin-left: auto; background: white; color: var(--ink-600); border: 1px solid var(--ink-200); width: 36px; min-width: 36px; min-height: 36px; padding: 0; font-size: 18px; border-radius: 50%; box-shadow: none; }
.exp-cerrar:hover { background: var(--ink-100); color: var(--azul-700); }
.exp-versiones { display: grid; gap: 6px; }
.exp-version { display: flex; align-items: center; gap: 12px; text-align: left; background: white; border: 1px solid var(--ink-200); color: var(--azul-700); font-weight: 400; padding: 11px 14px; border-radius: var(--r-sm); box-shadow: none; min-height: 44px; }
.exp-version:hover { background: var(--ink-100); }
.exp-version b { font-size: .8125rem; font-weight: 500; }
.exp-version small { color: var(--ink-600); font-size: .75rem; margin-left: auto; }
.exp-previa { border: 1px solid var(--ink-200); border-radius: var(--r-sm); padding: 18px 20px; background: var(--ink-100); max-height: 40vh; overflow-y: auto; font-size: .875rem; line-height: 1.6; }

@media (max-width: 1000px) {
  .exp-cuerpo { grid-template-columns: 1fr; padding: 4px 16px 24px; }
  .exp-indice { position: static; max-height: 52vh; }
  .exp-cab { padding: 0 16px; }
  .exp-buscar-caja { width: min(220px, 42vw); }
  .exp-cab-marca span { display: none; }
  .exp-pagina-caja { padding: 22px 18px 32px; }
  .exp-titulo { font-size: 1.6rem; }
  .exp-mini { opacity: 1; }
  .exp-login { grid-template-columns: 1fr; }
  .exp-lema { display: none; }
  .exp-barra { position: static; }
}

/* Si el sistema pide menos movimiento o menos transparencia, la interfaz degrada a solido y sin
   animacion en lugar de ignorarlo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .exp-vidrio, .exp-tarjeta { background-color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .exp-nav-vidrio, .exp-buscar, .exp-avatar {
    background-color: rgb(9 42 50 / .88) !important; backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}