/* Shell de Aparel. El CSS común es el bloque «estándar aparel v1» de Docs/diseno/aparel/Estandar.dc.html (botones de 3
   alturas, modales 440/640/960, pestañas, filtros, tarjeta tipo tienda, pasos, estados y colores), más los estados
   (Estados.dc.html), Subir (Subir.dc.html) y la hoja de atajos (Lienzo.dc.html). Las pantallas usan estas clases y no las
   copian: un módulo que todavía trae su copia scoped (.cn .btn, .ap .btn…) gana por especificidad hasta que se alinee.
   Modo claro; no usa el design system de GAT (decisión del plan §1). */
:root {
  --tinta: #171a24;
  --tinta-2: #3d4256;
  --tenue: #6b7085;
  --tenue-2: #9aa0b4;
  --borde: #e6e8ef;
  --borde-2: #e2e5ee;
  --borde-3: #d3d7e2;
  --fila: #f0f1f5;
  --fondo: #fff;
  --fondo-pag: #f7f8fb;
  --fondo-pestana: #fafbfc;
  --hover: #f3f4f8;
  --lienzo: #eef0f5;
  --pista: #e8eaf1;
  --acento: #6d5ce8;
  --acento-hover: #5443d6;
  --acento-suave: #f0eefd;
  --error: #a3362b;
  --error-suave: #fdf0ef;
  --ok: #1f7a45;
  --ok-suave: #e7f5ec;
  --aviso: #94600f;
  --aviso-suave: #fdf3e3;
  --sans: 'Hanken Grotesk', sans-serif;
  --mono: 'DM Mono', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fondo); }
body { font-family: var(--sans); color: var(--tinta); -webkit-font-smoothing: antialiased; font-size: 12px; }
a { color: #5443d6; text-decoration: none; }
a:hover { color: #3f30b8; }
textarea, input, select, button { font-family: inherit; }
.mono { font-family: var(--mono); font-size: 10px; }
.tenue { color: var(--tenue); }

.app { height: 100vh; min-height: 640px; display: flex; flex-direction: column; overflow: hidden; background: var(--fondo); }

/* ── Barra de Aparel (Estandar.dc.html, `.bar`): logo → Mi Marca · módulos · píldora de marca · saldo → Créditos · avatar → Mi cuenta ── */
.barra { min-height: 56px; flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; padding: 8px 24px; border-bottom: 1px solid var(--borde); background: var(--fondo); font-size: 14px; line-height: 1.5; }
.barra .logo { display: flex; align-items: center; flex: none; }
.barra .logo img { height: 20px; width: auto; display: block; }
.barra nav { display: flex; gap: 2px; flex-wrap: wrap; min-width: 0; }
.barra nav a { padding: 7px 12px; border-radius: 8px; white-space: nowrap; text-decoration: none; color: var(--tinta-2); font-weight: 500; }
.barra nav a:hover { background: var(--hover); color: var(--tinta); }
.barra nav a[aria-current="page"] { background: var(--acento-suave); color: #4a3bc4; }
.barra .derecha { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.saldo { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #e6e8ef; background: #fff; color: #3d4256; font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.saldo b { font: 500 13px 'DM Mono', monospace; color: #171a24; }
.saldo:hover { border-color: #c9c1f6; color: #4a3bc4; }
.saldo.lleno b { color: #a3362b; }
.avatar { display: inline-flex; align-items: center; gap: 8px; color: #3d4256; font-weight: 500; text-decoration: none; white-space: nowrap; }
.avatar i { width: 30px; height: 30px; border-radius: 50%; background: #e8eaf1; display: grid; place-items: center; font: 700 12px 'Hanken Grotesk', sans-serif; font-style: normal; color: #171a24; }
.avatar:hover { color: #171a24; }
.marca-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid #e6e8ef; border-radius: 999px; color: #171a24; text-decoration: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
.marca-pill i { width: 24px; height: 24px; border-radius: 7px; background: #3b4a3a; color: #fff; display: grid; place-items: center; font: 700 12px 'Hanken Grotesk', sans-serif; font-style: normal; }
.marca-pill:hover { border-color: #c9c1f6; color: #171a24; }

/* Selector de marca: en la barra (pantallas sin menú de Marca) y arriba del menú lateral. */
.ap-selector, .ap-selector-lateral { position: relative; }
.ap-selector summary, .ap-selector-lateral summary { list-style: none; cursor: pointer; }
.ap-selector summary::-webkit-details-marker, .ap-selector-lateral summary::-webkit-details-marker { display: none; }
.ap-selector summary b { font-weight: 700; }
.ap-ini { width: 24px; height: 24px; border-radius: 7px; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.ap-ini.grande { width: 34px; height: 34px; border-radius: 9px; font-size: 14px; }
/* El popover (SelectorMarca.dc.html `.pop`): 340 de ancho, buscar, ítems de 48 con logo de 32, rol y ✓, separador y las dos
   salidas. En la barra se abre hacia la izquierda desde la píldora (no se sale a 924); en el menú lateral, hacia la derecha. */
.ap-marcas-lista { position: absolute; z-index: 41; top: calc(100% + 8px); right: 0; width: 340px; max-width: calc(100vw - 32px); max-height: min(480px, calc(100vh - 120px)); overflow: auto; padding: 10px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 14px; box-shadow: 0 12px 40px rgba(23, 26, 36, .18); display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; }
.ap-selector-lateral .ap-marcas-lista { left: 0; right: auto; }
.ap-marcas-lista > input { min-height: 40px; margin-bottom: 4px; }
.ap-marcas-lista a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 10px; color: var(--tinta); text-decoration: none; font-size: 14px; font-weight: 500; }
.ap-marcas-lista a .ap-ini { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }
.ap-marcas-lista .ap-m-txt { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.ap-marcas-lista .ap-m-txt b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-marcas-lista a .mono { font-size: 11.5px; color: var(--tenue); }
.ap-marcas-lista a:hover { background: var(--fila); color: var(--tinta); }
.ap-marcas-lista a[aria-current="true"] { background: var(--fondo-pag); }
.ap-marcas-lista a[hidden], .ap-marcas-nada[hidden], .fila[hidden], .vacio[hidden] { display: none; }
.ap-marcas-lista .ap-check { flex: none; }
.ap-marcas-lista hr { border: 0; height: 1px; background: var(--fila); margin: 2px 0; width: 100%; }
.ap-marcas-lista .ap-marcas-nueva, .ap-marcas-lista .ap-marcas-pedir { min-height: 44px; }
.ap-marcas-lista .ap-marcas-nueva { color: #4a3bc4; font-weight: 600; }
.ap-marcas-nada { font-size: 13px; padding: 10px; }

/* Menú del avatar (MiCuenta.dc.html, «menú del avatar», `.pop` de 300). */
.ap-avatar { position: relative; }
.ap-avatar summary { list-style: none; cursor: pointer; }
.ap-avatar summary::-webkit-details-marker { display: none; }
.ap-pop { position: absolute; z-index: 41; top: calc(100% + 8px); right: 0; width: 300px; max-width: calc(100vw - 32px); background: var(--fondo); border: 1px solid var(--borde); border-radius: 14px; box-shadow: 0 12px 40px rgba(23, 26, 36, .18); padding: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.5; }
.ap-pop > a, .ap-pop > button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 10px; border-radius: 9px; color: var(--tinta); font: 500 14px var(--sans); border: 0; background: none; cursor: pointer; text-align: left; width: 100%; text-decoration: none; }
.ap-pop > a:hover, .ap-pop > button:hover { background: var(--fila); color: var(--tinta); }
.ap-pop > a b.mono { font-weight: 500; font-size: 12px; color: var(--tenue); }
.ap-pop hr { border: 0; height: 1px; background: var(--fila); margin: 6px 2px; }
.ap-quien { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; border-bottom: 1px solid var(--fila); margin-bottom: 6px; }
.ap-quien > i { width: 40px; height: 40px; border-radius: 50%; background: var(--pista); display: grid; place-items: center; font: 700 13px var(--sans); font-style: normal; color: var(--tinta); flex: none; }
.ap-quien > span { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.ap-quien .tenue { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.ap-quien .mono { font-size: 11.5px; }

/* ── Menú lateral de Marca (MiMarca.dc.html, `.side`) ─────────────── */
.ap-con-menu { flex: 1; min-height: 0; overflow: auto; background: var(--fondo-pag); font-size: 14px; line-height: 1.5; }
.ap-con-menu-in { display: flex; flex-wrap: wrap; align-items: flex-start; max-width: 1440px; margin: 0 auto; min-height: 100%; }
.ap-lateral { flex: 1 1 220px; max-width: 264px; padding: 24px 16px; display: flex; flex-direction: column; gap: 20px; }
.ap-selector-lateral summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo); min-height: 56px; }
.ap-marca-txt { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.ap-marca-txt b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-marca-txt .mono { font-size: 11px; }
.ap-lateral nav { display: flex; flex-direction: column; gap: 2px; }
.ap-lateral nav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; color: var(--tinta-2); font-weight: 500; min-height: 42px; text-decoration: none; }
.ap-lateral nav a:hover { background: var(--lienzo); color: var(--tinta); }
.ap-lateral nav a[aria-current="page"] { background: var(--fondo); color: var(--tinta); box-shadow: 0 1px 2px rgba(23, 26, 36, .06), 0 0 0 1px var(--borde); }
.ap-lateral nav .mono { font-size: 12px; }
.ap-lateral nav .chip { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: #f0eefd; color: #4a3bc4; }
.ap-nota { margin: 0; padding: 0 12px; font-size: 12px; line-height: 1.5; }
.ap-con-menu-cuerpo { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.ap-con-menu-cuerpo > .pagina { flex: none; overflow: visible; }

/* Una ruta del mapa que todavía no tiene su pantalla: el estado vacío del shell. */
.ap-pendiente { padding: 32px 40px 72px; display: flex; flex-direction: column; gap: 20px; }
.ap-pendiente h1 { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; }
.ap-pendiente .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--tenue); }
.ap-pendiente .vacio { background: var(--fondo); border: 1px solid var(--borde); border-radius: 18px; padding: 48px 24px; font-size: 14px; }
.ap-pendiente .vacio b { font-size: 16px; }
.ap-solo { flex: 1; min-height: 0; overflow: auto; background: var(--fondo-pag); font-size: 14px; line-height: 1.5; }
.ap-solo .ap-pendiente { max-width: 1440px; margin: 0 auto; }

/* ── Pestañas de documento ──────────────────────────────────────── */
.pestanas { height: 34px; flex: none; display: flex; align-items: flex-end; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--borde); background: var(--fondo-pestana); }
.pestanas .pestana { padding: 7px 12px; white-space: nowrap; flex: none; border: 1px solid var(--borde); border-bottom: none; border-radius: 6px 6px 0 0; background: var(--fondo); font-weight: 600; }
.pestanas .migas { margin-left: auto; padding-left: 12px; align-self: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 10px; color: var(--tenue); }

/* ── Página de tablero (Inicio y módulos de configuración) ──────── */
.pagina { flex: 1; overflow: auto; background: var(--fondo-pag); padding: 28px 32px; display: flex; flex-direction: column; gap: 24px; }
.encabezado { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.encabezado .titulos { display: flex; flex-direction: column; gap: 4px; }
.encabezado h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
/* `.boton` es el nombre de antes: se ve como el `.btn` del estándar (mediano 40). Lo nuevo usa `.btn`. */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; background: #6d5ce8; color: #fff; border: 1px solid #6d5ce8; border-radius: 10px; font: 600 13.5px 'Hanken Grotesk', sans-serif; white-space: nowrap; text-decoration: none; cursor: pointer; }
.boton:hover { background: #5443d6; border-color: #5443d6; color: #fff; }
.boton.secundario { background: #fff; color: #171a24; border-color: #d3d7e2; }
.boton.secundario:hover { background: #f7f8fb; color: #171a24; }
.rejilla { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; }
.columna { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.panel { background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px; }
.panel > header { padding: 12px 16px; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.panel > header b { font-size: 13px; }
.panel .fila { display: grid; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--fila); }
.panel .fila:last-child { border-bottom: none; }
.fila-marca { grid-template-columns: 36px minmax(0, 1fr) auto; }
.inicial { width: 36px; height: 36px; border-radius: 8px; background: var(--acento); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.fila-pedido { grid-template-columns: 64px minmax(0, 1fr) 120px 140px; color: inherit; text-decoration: none; }
.fila-pedido:hover { background: var(--fondo-pestana); }
.apilado { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apilado .t { font-weight: 600; font-size: 13px; }
.etiqueta { font-family: var(--mono); font-size: 10px; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
.etiqueta.ok { background: var(--ok-suave); color: var(--ok); }
.etiqueta.aviso { background: var(--aviso-suave); color: var(--aviso); }
.progreso { height: 4px; background: var(--lienzo); border-radius: 2px; margin-top: 4px; }
.progreso i { display: block; height: 4px; border-radius: 2px; background: var(--acento); }
.gasto { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.gasto .cifra { font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.gasto .barra-gasto { height: 6px; background: var(--pista); border-radius: 3px; overflow: hidden; }
.gasto .barra-gasto i { display: block; height: 6px; background: var(--acento); }
.gasto .lineas { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; color: var(--tinta-2); }
.cola-item { padding: 12px 16px; border-bottom: 1px solid var(--fila); display: flex; flex-direction: column; gap: 6px; }
.cola-item:last-child { border-bottom: none; }
.cola-item .error { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; background: var(--error-suave); border-radius: 5px; color: var(--error); }

/* ── Estado vacío ───────────────────────────────────────────────── */
.vacio { border: 1.5px dashed #d3d7e2; border-radius: 16px; padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--tenue); line-height: 1.45; font-size: 13px; }
.vacio b { color: var(--tinta); font-size: 15px; }
.vacio p { margin: 0; max-width: 520px; }
.vacio .btn, .vacio .boton { margin-top: 6px; }
.panel .vacio { margin: 12px; }
.regla-madre { padding: 10px 14px; border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); color: var(--tinta-2); }
.regla-madre b { color: var(--acento); }

/* ── Mesa de herramientas (Studio.dc.html, pantalla «propuesta») ── */
.opciones { height: 34px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 12px; border-bottom: 1px solid var(--borde); background: var(--fondo); color: var(--tinta-2); }
.opciones .herr { font-family: var(--mono); font-size: 10px; color: var(--tenue); flex: none; }
.opciones .sep { color: #c4c8d4; flex: none; }
.opciones .ayuda { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opciones .extra { margin-left: auto; display: flex; gap: 10px; align-items: center; flex: none; white-space: nowrap; }
.mesa { flex: 1; display: flex; min-height: 0; }
.herramientas { width: 44px; flex: none; border-right: 1px solid var(--borde); display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 8px; }
.herramientas .divisor { width: 24px; height: 1px; background: var(--borde); margin: 3px 0; }
.herramientas button { position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; font-family: var(--mono); font-size: 11px; background: transparent; color: var(--tinta-2); border: none; padding: 0; }
.herramientas button:hover { outline: 1px solid var(--borde-3); }
.herramientas button[aria-pressed="true"] { background: var(--acento); color: #fff; }
.herramientas button:disabled { color: var(--tenue-2); cursor: default; outline: none; }
.herramientas button svg { display: block; pointer-events: none; }
/* Tooltip (v3 §2.7): nombre + atajo, a la derecha del botón, al pasar el mouse o con el foco del teclado. */
.herramientas .tip { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); display: none; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; background: var(--tinta); color: #fff; font-family: var(--sans); font-size: 11px; white-space: nowrap; z-index: 15; pointer-events: none; box-shadow: 0 6px 16px -6px rgba(23, 26, 36, .4); }
.herramientas .tip kbd { font-family: var(--mono); font-size: 10px; padding: 1px 5px; border-radius: 3px; background: rgba(255, 255, 255, .16); color: #fff; }
.herramientas button:hover .tip, .herramientas button:focus-visible .tip { display: flex; }
.lienzo { flex: 1; min-width: 0; position: relative; background-color: var(--lienzo); background-image: radial-gradient(var(--borde-3) 1px, transparent 1px); background-size: 16px 16px; overflow: auto; }
.lienzo .contenido { min-height: 100%; display: flex; align-items: center; justify-content: center; gap: 32px; padding: 48px 32px; flex-wrap: wrap; }
.lienzo .vacio { background: rgba(255, 255, 255, .7); border: 1px dashed #c4c8d4; border-radius: 8px; max-width: 420px; }
.inspector { width: 300px; flex: none; border-left: 1px solid var(--borde); display: flex; flex-direction: column; min-height: 0; }
.inspector nav { display: flex; border-bottom: 1px solid var(--borde); flex: none; }
.inspector nav span { flex: 1; white-space: nowrap; text-align: center; padding: 10px 0; color: var(--tenue); border-bottom: 2px solid transparent; }
.inspector nav span[aria-current="true"] { font-weight: 600; color: var(--tinta); border-bottom-color: var(--acento); }
.inspector .cuerpo { flex: 1; overflow: auto; scrollbar-gutter: stable; }
.inspector section { padding: 12px 14px; border-bottom: 1px solid var(--borde); display: flex; flex-direction: column; gap: 8px; }
.estado-mesa { height: 28px; flex: none; border-top: 1px solid var(--borde); display: flex; align-items: center; gap: 14px; padding: 0 12px; white-space: nowrap; overflow: hidden; font-family: var(--mono); font-size: 10px; color: var(--tenue); }
.estado-mesa .izq { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.estado-mesa .izq b { color: var(--acento); font-weight: 400; }
.estado-mesa .cadena { margin-left: auto; flex: none; display: flex; gap: 5px; align-items: center; }
.estado-mesa .cadena .flecha { color: #c4c8d4; }

/* ── Lista lateral (Creaciones / Crear) ─────────────────────────── */
.lateral { width: 260px; flex: none; border-right: 1px solid var(--borde); display: flex; flex-direction: column; overflow: auto; background: var(--fondo); }
.lateral .titulo { padding: 12px 14px; font-family: var(--mono); font-size: 10px; color: var(--tenue); text-transform: uppercase; }

/* ── Aviso de error del API (red del shell: lo que la pantalla no mostró) ── */
.aviso-error { position: fixed; top: 46px; right: 16px; z-index: 60; max-width: min(420px, calc(100vw - 32px)); display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; background: var(--error-suave); color: var(--error); border: 1px solid #f1c9c4; border-radius: 8px; font-size: 12px; line-height: 1.45;
  box-shadow: 0 6px 20px rgba(23, 26, 36, .12); }
.aviso-error[hidden] { display: none; }
.aviso-error b { flex: 1; font-weight: 500; }
.aviso-error button { flex: none; border: none; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }

/* 924 px: el inspector y las listas laterales de la mesa se angostan; la barra se acomoda sola (flex-wrap, como el mockup). */
@media (max-width: 1100px) {
  .barra { gap: 8px 16px; padding: 8px 16px; }
  .barra nav a { padding: 7px 8px; }
  .barra .derecha { gap: 8px; }
  .ap-idioma summary { padding: 0 8px; }
  .inspector { width: 260px; }
  .lateral { width: 220px; }
  .fila-pedido { grid-template-columns: 56px minmax(0, 1fr) 96px 110px; }
}

/* 390 px: quedan el logo, los cinco módulos, la cifra del saldo y el avatar. */
@media (max-width: 600px) {
  .barra { padding: 8px; gap: 6px 8px; }
  .barra nav a { padding: 6px 7px; }
  .barra .derecha { gap: 8px; }
  .barra .nombre-quien, .barra .ver-showroom, .saldo .saldo-txt, .ap-selector summary b, .ap-selector summary svg { display: none; }
  .ap-selector summary { padding: 3px; }
  .ap-lateral { max-width: none; padding: 16px; }
  .ap-pendiente { padding: 20px 16px 48px; }
}

/* Una cita [ref:…] de las reglas: el referente, como chip que lleva a su ficha (T51). Lo usan Marca y Crear. */
.mc-cita { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: baseline; white-space: nowrap; font-size: 11px; font-weight: 500; line-height: 1.5; padding: 0 7px; margin: 0 1px; border-radius: 9px; background: var(--acento-suave); color: var(--acento); text-decoration: none; }
a.mc-cita:hover { text-decoration: underline; }
.mc-cita.sin { background: var(--hover); color: var(--tenue); font-weight: 400; }
.mc-cita.fuente { background: var(--hover); color: var(--tinta-2); font-weight: 400; }

/* ════ estándar aparel v1 (Estandar.dc.html) ═══════════════════════════════════════════════════════════════════════
   Igual al bloque del diseño, más las piezas que el diseño define por pantalla y se repiten (tarjeta, pestañas, pasos,
   modal). No editar a mano sin cambiar antes Estandar.dc.html. */
.lbl { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: #6b7085; }
.btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d3d7e2; background: #fff; color: #171a24; cursor: pointer;
  min-height: 40px; padding: 0 16px; border-radius: 10px; font: 600 13.5px 'Hanken Grotesk', sans-serif; gap: 8px; white-space: nowrap; text-decoration: none; }
.btn:hover { background: #f7f8fb; color: #171a24; }
.btn.pri { background: #6d5ce8; border-color: #6d5ce8; color: #fff; }
.btn.pri:hover { background: #5443d6; border-color: #5443d6; color: #fff; }
.btn.sm { min-height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
.btn.lg { min-height: 48px; padding: 0 22px; border-radius: 12px; font-size: 15px; }
.btn.rojo { background: #a3362b; border-color: #a3362b; color: #fff; }
.btn.rojo:hover { background: #8a2c22; border-color: #8a2c22; color: #fff; }
.btn.peligro { color: #a3362b; border-color: #f1d3cf; }
.btn.ok { color: #1f6b3e; border-color: #bfe3cc; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn:focus-visible, .x:focus-visible, .filtro:focus-visible, .tab:focus-visible, .ptab:focus-visible, .tacho:focus-visible, .prod:focus-visible { outline: 2px solid #6d5ce8; outline-offset: 2px; }
.x { width: 36px; height: 36px; border-radius: 9px; border: 0; background: #f0f1f5; color: #3d4256; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; font-size: 18px; line-height: 1; }
.x:hover { background: #e6e8ef; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ok { background: #e7f5ec; color: #1f6b3e; }
.av { background: #fdf3e3; color: #7d500c; }
.vi { background: #f0eefd; color: #4a3bc4; }
.gr { background: #f0f1f5; color: #3d4256; }
.er { background: #fdf0ef; color: #a3362b; }
/* Cada pantalla del diseño le da a la tarjeta su padding y su layout; el estándar fija solo la caja. `.caja` suma los de
   Estandar.dc.html (24, columna, 16). */
.card { background: #fff; border: 1px solid #e6e8ef; border-radius: 16px; min-width: 0; }
.card.caja { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* Solo en el control: el Crear de antes usa `.campo` como envoltorio. */
:is(input, select, textarea).campo { width: 100%; min-height: 40px; border: 1px solid #d3d7e2; border-radius: 10px; padding: 0 12px; font: 500 14px 'Hanken Grotesk', sans-serif; color: #171a24; background: #fff; }
textarea.campo { padding: 10px 12px; line-height: 1.45; }
:is(input, select, textarea).campo:focus { outline: 2px solid #c9c1f6; border-color: #6d5ce8; }
.tacho { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; display: grid; place-items: center; cursor: pointer; padding: 0; }
.tacho:hover { background: #fdf0ef; }

/* Página: H1 32/700 + subtítulo 15, la acción principal arriba a la derecha, contenido de 1320 px con padding 28/32/72. */
.ap-pagina { flex: 1; min-height: 0; overflow: auto; background: #f7f8fb; font-size: 14px; line-height: 1.5; }
.ap-pagina-in { max-width: 1320px; margin: 0 auto; padding: 28px 32px 72px; display: flex; flex-direction: column; gap: 24px; }
.ap-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ap-cab > div { display: flex; flex-direction: column; gap: 4px; max-width: 760px; }
.ap-cab h1 { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.ap-cab p { margin: 0; font-size: 15px; color: #6b7085; }

/* Pestañas de página (subrayado de 44) · en panel (grid) · filtros (píldora de 32, activo en violeta). */
.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid #e6e8ef; }
.tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; margin-right: 20px; border: 0; border-bottom: 2px solid transparent; background: none; font: 600 14px 'Hanken Grotesk', sans-serif; color: #6b7085; cursor: pointer; white-space: nowrap; text-decoration: none; }
.tab:hover { color: #171a24; }
.tab[aria-selected="true"], .tab[aria-current] { color: #171a24; border-bottom-color: #6d5ce8; }
.ptabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 3px; border-radius: 11px; background: #f0f1f5; max-width: 100%; }
.ptab { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border: 0; border-radius: 8px; background: none; font: 600 12.5px 'Hanken Grotesk', sans-serif; color: #5b6074; cursor: pointer; padding: 0 10px; white-space: nowrap; }
.ptab[aria-selected="true"] { background: #fff; color: #171a24; box-shadow: 0 1px 2px rgba(23, 26, 36, .12); }
.cta { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e4e0fb; color: #4a3bc4; font: 600 10.5px 'DM Mono', monospace; display: inline-grid; place-items: center; }
.filtro { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #e2e5ee; background: #fff; font: 500 13px 'Hanken Grotesk', sans-serif; color: #3d4256; cursor: pointer; white-space: nowrap; text-decoration: none; }
.filtro[aria-pressed="true"], .filtro.on, .filtro[aria-current] { background: #f0eefd; border-color: #6d5ce8; color: #4a3bc4; }

/* Tarjeta tipo tienda: grid de mínimo 230, gap 20, portada 4:5 con el chip arriba a la izquierda, «+ Nuevo» primero. */
.tienda { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
a.prod, button.prod { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; min-width: 0; background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
a.prod:hover, button.prod:hover { color: inherit; }
.prod > b { font-size: 15px; }
.prod > .tenue { font-size: 12px; }
.portada { position: relative; display: block; aspect-ratio: 4/5; border-radius: 14px; overflow: hidden; background: #f1ede6; border: 1px solid #e6e8ef; }
.portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portada .chip { position: absolute; left: 10px; top: 10px; min-height: 22px; padding: 1px 9px; font-size: 11.5px; }
.prod:hover .portada { border-color: #c9c1f6; }
.nuevo { aspect-ratio: 4/5; border-radius: 14px; border: 1.5px dashed #b9b2f5; background: #fcfbff; display: grid; place-items: center; align-content: center; gap: 4px; color: #4a3bc4; font-weight: 600; text-align: center; padding: 16px; text-decoration: none; cursor: pointer; font-size: 14px; }
.nuevo:hover { background: #f0eefd; color: #4a3bc4; }
.nuevo .tenue { font-weight: 500; font-size: 12px; }

/* Asistentes y pasos: círculo de 24, conector, hecho en verde y clicable para volver. */
.pasos { display: flex; align-items: center; gap: 8px; }
.paso { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #6b7085; border: 0; background: none; padding: 0; cursor: default; text-decoration: none; white-space: nowrap; font-family: 'Hanken Grotesk', sans-serif; }
.paso i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 12px 'Hanken Grotesk', sans-serif; font-style: normal; background: #f0f1f5; color: #6b7085; flex: none; }
.paso.on { color: #171a24; }
.paso.on i { background: #6d5ce8; color: #fff; }
.paso.hecho { color: #171a24; cursor: pointer; }
.paso.hecho i { background: #e7f5ec; color: #1f7a45; }
.conector { flex: 1; min-width: 24px; height: 2px; background: #e6e8ef; }

/* Modales: chico 440 (confirmar) · mediano 640 (formularios) · grande 960 (reportes y detalles); radio 16; X de 36; se
   cierran tocando fuera o con Esc (shell.cliente.js); pie con la nota a la izquierda y [Cancelar] [Primario] a la derecha. */
.velo { position: fixed; inset: 0; z-index: 50; background: rgba(23, 26, 36, .45); display: flex; padding: 40px 16px; overflow-y: auto; font-family: 'Hanken Grotesk', sans-serif; color: #171a24; font-size: 14px; line-height: 1.5; }
.velo[hidden] { display: none; }
.dlg { background: #fff; border-radius: 16px; box-shadow: 0 24px 64px rgba(23, 26, 36, .28); display: flex; flex-direction: column; max-width: 100%; margin: auto; overflow: hidden; }
.dlg.chico { width: min(440px, 100%); }
.dlg.mediano { width: min(640px, 100%); }
.dlg.grande { width: min(960px, 100%); }
.dlg-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 0; }
.dlg-cab b { font-size: 17px; }
.dlg.chico .dlg-cab b { font-size: 20px; }
.dlg-cab .tenue { font-size: 13px; }
.dlg-cuerpo { padding: 8px 20px 0; display: flex; flex-direction: column; gap: 12px; }
.dlg-cuerpo > .tenue { font-size: 13.5px; }
.dlg-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid #f0f1f5; margin-top: 16px; flex-wrap: wrap; }
.dlg-pie > .tenue { font-size: 12px; }
.dlg-pie .acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.dlg [data-error-modal] { flex-basis: 100%; margin: 0; color: #a3362b; font-size: 13px; }
.dlg [data-error-modal][hidden] { display: none; }
.stat { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-top: 1px solid #f0f1f5; font-size: 14px; }
body.ap-modal-abierto { overflow: hidden; }

/* Estados (Estados.dc.html): error, aviso, listo, info; vacío; error con su acción; carga; toast. */
.estado { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
.estado > span { flex: 1; min-width: 0; }
.estado.er { background: #fdf0ef; color: #8a2c22; }
.estado.av { background: #fdf3e3; color: #7d500c; }
.estado.ok { background: #e7f5ec; color: #1f6b3e; }
.estado.vi { background: #f0eefd; color: #4a3bc4; }
.estado .btn { flex: none; }
.err { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: #fdf0ef; color: #8a2c22; font-size: 13.5px; }
.err b { font-size: 15px; color: #8a2c22; }
.err p { margin: 0; }
.err .chip { background: #fff; color: #8a2c22; }
@keyframes ap-gira { to { transform: rotate(360deg); } }
@keyframes ap-brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.gira { animation: ap-gira .9s linear infinite; }
.hueco { background: linear-gradient(90deg, #eceef3 25%, #f6f7fa 37%, #eceef3 63%); background-size: 400% 100%; animation: ap-brillo 1.4s ease infinite; border-radius: 8px; }
.cargando { display: flex; gap: 10px; align-items: center; color: #6b7085; }
@media (prefers-reduced-motion: reduce) { .gira, .hueco { animation: none; } }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 16px; border-radius: 12px; background: #171a24; color: #fff; box-shadow: 0 12px 32px rgba(23, 26, 36, .32); font-size: 13.5px; line-height: 1.45; max-width: min(420px, calc(100vw - 32px)); font-family: 'Hanken Grotesk', sans-serif; }
.toast[hidden] { display: none; }
.toast > span { flex: 1; }
.toast a { color: #cfc8fb; font-weight: 700; }
.toast a:hover { color: #fff; }
.toast .x { background: #2b2f3d; color: #e6e8ef; }
.toast .x:hover { background: #3a3f50; }

/* Subir (Subir.dc.html): una sola zona para todo lo que se sube. */
.ap-subir { display: flex; flex-direction: column; gap: 12px; position: relative; }
.subir-zona { border: 1.5px dashed #d3d7e2; border-radius: 16px; background: #fcfcfd; min-height: 200px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; transition: background .12s, border-color .12s; font-size: 15px; }
.subir-zona.arrastra { border-color: #6d5ce8; border-style: solid; background: #f0eefd; }
.subir-zona.mala { border-color: #e7b4ae; background: #fffafa; }
.subir-zona .mono { font-size: 12px; }
.subir-zona .nota { font-size: 12.5px; }
.subir-zona [data-suelta] { color: #4a3bc4; }
.subir-zona.arrastra [data-invita], .subir-zona:not(.arrastra) [data-suelta] { display: none; }
.ap-subir input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.enlace { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: #5443d6; text-decoration: underline; cursor: pointer; }
.enlace:hover { color: #3f30b8; }
.subir-lista { display: flex; flex-direction: column; gap: 8px; }
.subir-lista:empty, .subir-minis:empty { display: none; }
.arch { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid #e6e8ef; border-radius: 12px; background: #fff; }
.arch.mal { border-color: #f1d3cf; background: #fdf0ef; }
.arch-ico { width: 44px; height: 44px; border-radius: 10px; background: #f0f1f5; display: grid; place-items: center; font: 500 10.5px 'DM Mono', monospace; color: #3d4256; text-transform: uppercase; }
.arch.mal .arch-ico { background: #fff; color: #a3362b; }
.arch-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13.5px; }
.arch-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-txt .fila { justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
.arch-txt .mono { font-size: 12px; white-space: nowrap; }
.arch.mal .arch-txt span:last-child { font-size: 12.5px; color: #8a2c22; }
.ap-progreso { display: block; height: 6px; border-radius: 999px; background: #eceef3; overflow: hidden; }
.ap-progreso > i { display: block; height: 100%; background: #6d5ce8; border-radius: 999px; transition: width .3s; }
.ap-progreso.fin > i { background: #1f7a45; }
.subir-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.subir-mini { position: relative; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.3; min-width: 0; }
.subir-mini .foto { position: relative; aspect-ratio: 4/5; border-radius: 12px; border: 1px solid #e6e8ef; display: grid; place-items: center; overflow: hidden; background: #f1ede6; }
.subir-mini .foto img { width: 100%; height: 100%; object-fit: cover; }
.subir-mini .tacho { position: absolute; right: 6px; top: 6px; background: #fff; box-shadow: 0 1px 4px rgba(23, 26, 36, .2); opacity: 0; transition: opacity .12s; }
.subir-mini:hover .tacho, .subir-mini:focus-within .tacho { opacity: 1; }
.subir-mini .ext { position: absolute; left: 8px; bottom: 8px; font: 500 10px 'DM Mono', monospace; text-transform: uppercase; background: rgba(255, 255, 255, .9); padding: 1px 6px; border-radius: 5px; color: #3d4256; }
.subir-mini b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subir-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid #f0f1f5; padding-top: 14px; }
.subir-pie .tenue { font-size: 12px; }
.ap-subir [hidden] { display: none !important; }

/* Hoja de atajos (la del Lienzo y la Ficha): se abre con «?» o con el botón [data-abrir-atajos]. */
.hoja-atajos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; font-size: 13px; }
.hoja-atajos .lbl { grid-column: 1 / -1; margin-top: 6px; }
.hoja-atajos .lbl:first-child { margin-top: 0; }
.hoja-atajos .mono { font-size: 12.5px; }

/* Riel de los editores (Lienzo y Ficha): claro, de 56, botones de 44 con su atajo. */
.rail { width: 56px; background: #fff; border-right: 1px solid #e6e8ef; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; }
.rail .herr { width: 44px; height: 44px; border-radius: 10px; border: 0; background: none; color: #3d4256; display: grid; place-items: center; cursor: pointer; position: relative; padding: 0; }
.rail .herr:hover { background: #f0f1f5; }
.rail .herr[aria-pressed="true"] { background: #f0eefd; color: #4a3bc4; }
.rail .herr .k { position: absolute; right: 3px; bottom: 2px; font: 500 8.5px 'DM Mono', monospace; color: #9aa0b4; }
.rail .sep { width: 28px; height: 1px; background: #e6e8ef; margin: 5px 0; }

/* Tira de íconos del panel y pestañas de documento de los editores (Estandar.dc.html v134, sección 8). */
.tira { width: 52px; background: #fff; border-left: 1px solid #e6e8ef; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; flex: none; }
.tira .herr { width: 44px; height: 44px; border-radius: 10px; border: 0; background: none; color: #3d4256; display: grid; place-items: center; cursor: pointer; position: relative; padding: 0; }
.tira .herr:hover { background: #f0f1f5; }
.tira .herr[aria-pressed="true"] { background: #f0eefd; color: #4a3bc4; }
.tira .pt { position: absolute; right: 5px; top: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #6d5ce8; color: #fff; font: 600 9.5px 'DM Mono', monospace; display: grid; place-items: center; }
.dtabs { display: flex; gap: 2px; padding: 6px 8px 0; background: #e9ebf1; border-bottom: 1px solid #d3d7e2; }
.dtab { min-height: 32px; padding: 0 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: none; font: 600 12.5px 'Hanken Grotesk', sans-serif; color: #5b6074; cursor: pointer; }
.dtab[aria-selected="true"] { background: #fff; color: #171a24; border-color: #d3d7e2; position: relative; top: 1px; }
.dtab:hover { color: #171a24; }

/* Progreso de una espera larga (componentes.js `progreso`; el lenguaje de AnalisisFlujo.dc.html «Analizando»). */
.ap-espera { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border: 1px solid #e6e8ef; border-radius: 16px; background: #fff; }
.ap-espera.compacto { padding: 0; border: 0; background: none; gap: 10px; }
.esp-cab { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
.esp-cab b { font-size: 16px; letter-spacing: -.01em; }
.esp-cab .tenue { font-size: 13px; }
.esp-num { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.esp-num [data-esp-pct] { font-size: 26px; font-weight: 500; line-height: 1.1; }
.esp-num [data-esp-tiempo] { font-size: 12px; }
.ap-espera.compacto .esp-num [data-esp-pct] { font-size: 18px; }
.esp-barra { height: 8px; border-radius: 4px; background: #e8eaf1; overflow: hidden; }
.esp-barra > i { display: block; height: 100%; width: 0; background: #6d5ce8; border-radius: 4px; transition: width .5s linear; }
.ap-espera.fin-ok .esp-barra > i { background: #1f7a45; }
.ap-espera.fin-mal .esp-barra > i { background: #a3362b; }
.esp-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.esp-etapas li { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid #f0f1f5; font-size: 13.5px; }
.esp-etapas li b { flex: 1; min-width: 0; }
.esp-etapas li[data-estado="pendiente"] b { color: #6b7085; font-weight: 600; }
.esp-etapas .mono { font-size: 12px; }
.esp-ico { width: 24px; height: 24px; display: grid; place-items: center; flex: none; }
.esp-ok { width: 24px; height: 24px; border-radius: 50%; background: #e7f5ec; display: grid; place-items: center; }
.esp-pend { width: 16px; height: 16px; border-radius: 50%; border: 2px dashed #c3c8d6; display: block; }
.ap-espera [hidden] { display: none !important; }

@media (max-width: 1100px) {
  .ap-pagina-in { padding: 24px 24px 64px; }
}
@media (max-width: 600px) {
  .ap-pagina-in { padding: 20px 16px 48px; }
  .ap-cab h1 { font-size: 26px; }
  .velo { padding: 16px 8px; }
  .hoja-atajos { grid-template-columns: 1fr; }
}
/* fin estándar aparel v1 */

/* Selector de idioma «ES · EN» junto al avatar (D16) y aviso de cookies abajo de la página (D19). */
.ap-idioma { position: relative; }
.ap-idioma summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--borde); font: 500 12px 'DM Mono', monospace; color: var(--tenue); white-space: nowrap; }
.ap-idioma summary::-webkit-details-marker { display: none; }
.ap-idioma summary .on { color: var(--tinta); font-weight: 700; }
.ap-idioma-pop { width: 180px; }
.ap-idioma-pop button[aria-checked="true"] { font-weight: 700; }
.ap-cookies { position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 16px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 14px; box-shadow: 0 12px 40px rgba(23, 26, 36, .18); font-size: 14px; }