@font-face {
  font-family: "Montserrat";
  src: url("/publico/fuentes/montserrat-latin-ext.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  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: "Montserrat";
  src: url("/publico/fuentes/montserrat-latin.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   NORMATIVA VISUAL DEL GESTOR 1490
   Ley unica de colores, tipografia y componentes. Nada se pinta fuera de aqui.
   ========================================================================== */

:root {
  /* --- TINTA Y PAPEL (los dos colores de la casa) --- */
  --tinta:        #080f21;   /* azul noche de la marca: texto y menu */
  --tinta-media:  #4a5163;   /* texto secundario */
  --tinta-suave:  #8b91a1;   /* texto terciario, ayudas */
  --papel:        #f5f1eb;   /* fondo general, crudo calido */
  --papel-hueso:  #eae3dd;   /* zonas hundidas, cabeceras de tabla */
  --blanco:       #ffffff;   /* fichas y tarjetas */
  --linea:        #ddd6cd;   /* bordes */
  --linea-suave:  #ebe5dd;   /* separadores internos */

  /* --- ACENTO (unico color de accion: laton de los tapones) --- */
  --oro:          #c9a961;
  --oro-oscuro:   #a8873f;
  --oro-fondo:    #f7f0dd;

  /* --- ESTADOS --- */
  --bien:         #1f7a5a;  --bien-fondo:   #e6f2ec;
  --aviso:        #a86a1f;  --aviso-fondo:  #fbf0e0;
  --mal:          #a8342c;  --mal-fondo:    #f9e8e6;

  /* --- COLORES REALES DE LA PORCELANA (etiquetas de producto) --- */
  --galera:    #f0eae0;   /* blanco roto */
  --roseta:    #dfa0ad;   /* rosa */
  --bluu:      #3d5f9e;   /* azul */
  --gules:     #b02f2c;   /* roja */
  --jade:      #52a58c;   /* verde */
  --limonero:  #e8c53f;   /* amarilla */
  --naranjito: #e07a34;   /* naranja */
  /* categorias */
  --bodas:     #c9a961;   /* dorado */
  --lola:      #7fb8d9;   /* celeste */

  /* --- TIPOGRAFIA --- */
  --letra: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cifra: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", Georgia, serif;

  --t-micro: .6875rem;  /* 11px  etiquetas en mayusculas */
  --t-mini:  .8125rem;  /* 13px  texto de apoyo, tablas densas */
  --t-base:  .9375rem;  /* 15px  cuerpo */
  --t-medio: 1.125rem;  /* 18px  subtitulos */
  --t-alto:  1.5rem;    /* 24px  titulos de pantalla */
  --t-cifra: 2.25rem;   /* 36px  numeros grandes */

  /* --- ESPACIO (todo multiplo de 4) --- */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;

  /* --- FORMA --- */
  --curva:       4px;   /* botones, campos: los radios que ya usa la web */
  --curva-caja: 10px;   /* fichas y tarjetas */
  --sombra:      0 1px 2px rgba(8,15,33,.06), 0 2px 8px rgba(8,15,33,.04);
  --sombra-alta: 0 4px 16px rgba(8,15,33,.10);

  --peso-titulos: 600; --peso-cuerpo: 400; --peso-rotulos: 600;
  --filete: 1px;
  --menu-ancho: 236px; --menu-fondo: #080f21; --menu-texto: #cfd3dc;
}

/* ============================ BASE ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: var(--peso-cuerpo) var(--t-base)/1.55 var(--letra);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: var(--peso-titulos); line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: var(--t-alto); }
h2 { font-size: var(--t-medio); }
h3 { font-size: var(--t-base); }
p { margin: 0 0 var(--e3); }
a { color: var(--oro-oscuro); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Etiqueta en mayusculas: el recurso de jerarquia de la casa */
.rotulo {
  font-size: var(--t-micro); font-weight: var(--peso-rotulos); text-transform: uppercase;
  letter-spacing: .12em; color: var(--tinta-suave);
}

/* Cifras: siempre con el serif de la marca y numeros tabulares */
.cifra {
  font-family: var(--cifra); font-weight: 400;
  /* Se adapta al ancho disponible y NUNCA se parte: el euro no baja de linea */
  font-size: clamp(1.5rem, 1rem + 1.3vw, var(--t-cifra));
  line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  white-space: nowrap;
}

/* ======================= ARMAZON: MENU + CONTENIDO ======================= */
.armazon { display: grid; grid-template-columns: var(--menu-ancho) minmax(0, 1fr); min-height: 100vh; }

.menu {
  background: var(--menu-fondo); color: var(--menu-texto);
  display: flex; flex-direction: column; padding: var(--e5) 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.menu-marca { padding: 0 var(--e5) var(--e5); color: var(--blanco); }
.menu-marca svg { display: block; width: 52px; height: auto; }
/* El logo es vectorial y toma el color del texto: sirve igual sobre oscuro y sobre papel */
.menu-grupo { padding: var(--e4) var(--e5) var(--e1); }
.menu-grupo .rotulo { color: #5d6478; }
.menu-piezas { display: flex; flex-direction: column; }
.pieza { position: relative; }
.pieza a {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e5); color: var(--menu-texto); font-size: var(--t-mini);
  font-weight: 500; border-left: 2px solid transparent; text-decoration: none;
}
.pieza a:hover { background: rgba(255,255,255,.05); color: var(--blanco); text-decoration: none; }
.pieza a.activo { background: rgba(201,169,97,.12); color: var(--blanco); border-left-color: var(--oro); }
.pieza a svg { width: 17px; height: 17px; flex: 0 0 auto; stroke-width: 1.5; }
.pieza-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Grupos y submenus --- */
.grupo-cabeza { display: flex; align-items: center; }
.grupo-boton {
  flex: 1; display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e5); background: none; border: 0; cursor: pointer;
  color: var(--menu-texto); font: 600 var(--t-micro) var(--letra);
  text-transform: uppercase; letter-spacing: .1em; opacity: .62; text-align: left;
}
.grupo-boton:hover { opacity: 1; }
.grupo-boton .flecha { transition: transform .16s ease; flex: 0 0 auto; }
.grupo-icono { display: none; }
.grupo-icono svg { width: 20px; height: 20px; stroke-width: 1.5; display: block; }
.grupo.abierto > .grupo-cabeza .grupo-boton .flecha { transform: rotate(90deg); }
.grupo > .grupo-hijos { display: none; }
.grupo.abierto > .grupo-hijos { display: block; }
/* LA SANGRIA DE CADA PISO. Cada grupo se pinta con --cabeza (lo que se mete su
   propia cabecera) y --sangria (lo que se meten sus hijos). Una pantalla suelta
   no tiene --sangria y se queda donde siempre. */
.pieza a { padding-left: calc(var(--e5) + var(--sangria, 0px)); }
.grupo > .grupo-cabeza { padding-left: var(--cabeza, 0px); }
.subgrupo > .grupo-cabeza .grupo-nombre { font-size: var(--t-micro); letter-spacing: .06em; }
.quitar-grupo { display: none; }

/* --- Asa y modo ordenar --- */
.asa {
  display: none; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.35); cursor: grab; padding: 2px; z-index: 2;
}
.grupo > .grupo-cabeza > .asa { position: static; transform: none; margin-left: 4px; }
body.ordenando .asa { display: inline-flex; }
body.ordenando .pieza a { cursor: default; }
body.ordenando .quitar-grupo {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: rgba(255,255,255,.4); cursor: pointer;
  padding: 4px var(--e4) 4px 4px;
}
body.ordenando .quitar-grupo:hover { color: var(--mal); }
.pieza.viajando { opacity: .4; }
.pieza.encima { box-shadow: inset 0 2px 0 var(--oro); }
.pieza.encima-abajo { box-shadow: inset 0 -2px 0 var(--oro); }
/* mientras se ordena, un grupo vacio tiene que tener sitio donde soltar */
body.ordenando .grupo-hijos { min-height: 20px; }
.grupo.soltar-aqui > .grupo-hijos, #menuPiezas.soltar-aqui {
  outline: 1px dashed var(--oro); outline-offset: -2px; background: rgba(201,169,97,.10); }
.grupo.dentro > .grupo-cabeza { background: rgba(201,169,97,.18); outline: 1px dashed var(--oro); }

/* --- Barra del editor --- */
.menu-editor { margin-top: var(--e3); padding: 0 var(--e5); }
.menu-lapiz {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
  color: rgba(255,255,255,.4); font: 500 var(--t-micro) var(--letra); cursor: pointer;
  text-transform: uppercase; letter-spacing: .1em; padding: var(--e2) 0;
}
.menu-lapiz:hover { color: var(--oro); }
body.ordenando .menu-lapiz { color: var(--oro); }
.menu-editando { display: none; padding-bottom: var(--e2); }
body.ordenando .menu-editando { display: block; }
.menu-editando .mini {
  display: inline-block; margin: 0 4px 4px 0; padding: 4px var(--e2);
  border: var(--filete) solid rgba(255,255,255,.18); background: none; color: var(--menu-texto);
  border-radius: var(--curva); font: 500 var(--t-micro) var(--letra); cursor: pointer;
}
.menu-editando .mini:hover { border-color: var(--oro); color: var(--blanco); }
.menu-editando .mini.principal { background: var(--oro); color: var(--tinta); border-color: var(--oro); }
.menu-pista { font-size: var(--t-micro); color: rgba(255,255,255,.35); line-height: 1.4; margin-top: 4px; }

.menu-pie { margin-top: auto; padding: var(--e4) var(--e5) 0; border-top: var(--filete) solid rgba(255,255,255,.09); }
.menu-quien { font-size: var(--t-mini); font-weight: 600; color: var(--blanco); }
.menu-rol { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .12em; opacity: .5; margin-top: 1px; }
.menu-salir { display: inline-block; margin-top: var(--e2); font-size: var(--t-mini); color: var(--oro); }

.lienzo { padding: var(--e6); max-width: 1720px; min-width: 0; }
.cabecera-pantalla {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e4); margin-bottom: var(--e5); flex-wrap: wrap;
}

/* Boton para abrir el menu en movil: oculto en PC */
.abrir-menu { display: none; }

/* ============================ FICHAS ============================ */
.ficha {
  background: var(--blanco); border: var(--filete) solid var(--linea);
  border-radius: var(--curva-caja); padding: var(--e5); box-shadow: var(--sombra);
}
.rejilla { display: grid; gap: var(--e4); }
.rejilla.c2 { grid-template-columns: repeat(2, 1fr); }
.rejilla.c3 { grid-template-columns: repeat(3, 1fr); }
.rejilla.c4 { grid-template-columns: repeat(4, 1fr); }

/* Cifra de cabecera (pulso del negocio) */
.dato .rotulo { display: block; margin-bottom: var(--e2); line-height: 1.35; }
.dato .pie { font-size: var(--t-mini); color: var(--tinta-media); margin-top: var(--e1); }

/* ============================ BOTONES ============================ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: var(--e2) var(--e4); min-height: 38px; border-radius: var(--curva);
  font: 600 var(--t-mini)/1 var(--letra); cursor: pointer; border: 1px solid transparent;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.boton-principal { background: var(--tinta); color: var(--blanco); }
.boton-principal:hover { background: #131c35; }
.boton-oro { background: var(--oro); color: var(--tinta); }
.boton-oro:hover { background: var(--oro-oscuro); color: var(--blanco); }
.boton-borde { background: var(--blanco); color: var(--tinta); border-color: var(--linea); border-width: var(--filete); }
.boton-borde:hover { border-color: var(--tinta-suave); }
.boton-plano { background: transparent; color: var(--tinta-media); }
.boton-plano:hover { background: var(--papel-hueso); color: var(--tinta); }
.boton:disabled { opacity: .45; cursor: not-allowed; }

/* ============================ CAMPOS ============================ */
.campo { display: block; margin-bottom: var(--e4); }
.campo > span { display: block; margin-bottom: var(--e1); font-size: var(--t-mini); font-weight: 500; }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: var(--e2) var(--e3); min-height: 38px;
  border: var(--filete) solid var(--linea); border-radius: var(--curva);
  background: var(--blanco); color: var(--tinta);
  font: 400 var(--t-base) var(--letra);
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: 2px solid var(--oro); outline-offset: -1px; border-color: var(--oro);
}
.campo .ayuda { font-size: var(--t-mini); color: var(--tinta-suave); margin-top: var(--e1); }

/* ============================ TABLAS ============================ */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-mini); letter-spacing: -.005em; }
.tabla thead th {
  text-align: left; padding: var(--e2) var(--e3); background: var(--papel-hueso);
  font-size: var(--t-micro); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tinta-media); white-space: nowrap;
  border-bottom: var(--filete) solid var(--linea);
}
.tabla tbody td { padding: var(--e3); border-bottom: var(--filete) solid var(--linea-suave); vertical-align: middle; }
.tabla tbody tr:hover { background: #fbf9f6; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.envoltorio-tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* ============================ PASTILLAS ============================ */
.pastilla {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px var(--e2); border-radius: 999px;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  background: var(--papel-hueso); color: var(--tinta-media);
}
.pastilla.bien  { background: var(--bien-fondo);  color: var(--bien); }
.pastilla.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.pastilla.mal   { background: var(--mal-fondo);   color: var(--mal); }
.pastilla.oro   { background: var(--oro-fondo);   color: var(--oro-oscuro); }

/* El recuento del mes, al pie de Reembolsos pendientes */
.recuento-mes { margin-top: var(--e3); padding: var(--e3) var(--e4);
  background: var(--papel-hueso); border-radius: var(--curva, 4px); font-size: var(--t-mini); }
.recuento-mes .rotulo { display: block; margin-bottom: 4px; }
.pastilla::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Punto de color de cada frasca */
.frasca { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-mini); }
.frasca::before {
  content: ""; width: 10px; height: 10px; border-radius: 2px;
  background: var(--c); box-shadow: inset 0 0 0 1px rgba(8,15,33,.18);
}

/* ============================ VACIO ============================ */
.vacio { text-align: center; padding: var(--e7) var(--e5); color: var(--tinta-suave); }
.vacio .cifra { color: var(--linea); }

/* ============================ MOVIL ============================ */
@media (max-width: 860px) {
  .armazon { grid-template-columns: minmax(0, 1fr); }
  .menu {
    position: fixed; inset: 0 auto 0 0; width: 82vw; max-width: var(--menu-ancho);
    transform: translateX(-100%); transition: transform .22s ease; z-index: 40;
    box-shadow: var(--sombra-alta);
  }
  .menu.abierto { transform: none; }
  .abrir-menu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--curva);
    background: var(--blanco); border: var(--filete) solid var(--linea); cursor: pointer;
  }
  .velo { position: fixed; inset: 0; background: rgba(8,15,33,.45); z-index: 30; }
  .lienzo { padding: var(--e4); }
  .rejilla.c4, .rejilla.c3, .rejilla.c2 { grid-template-columns: 1fr 1fr; }
  :root { --t-cifra: 1.75rem; }
}
@media (max-width: 520px) {
  .rejilla.c4, .rejilla.c3, .rejilla.c2 { grid-template-columns: 1fr; }
  .lienzo { padding: var(--e3); }
}

/* Respeto por quien no quiere animaciones */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }


/* ==========================================================================
   PIEZAS DE LA CASA — sustituyen a los cuadros y desplegables del navegador.
   LEY: aqui no sale nunca un alert, un prompt, un confirm ni un select nativo.
   ========================================================================== */

/* --- Dialogo --- */
.velo-dialogo {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(8,15,33,.45); padding: var(--e4);
  animation: aparece .14s ease;
}
@keyframes aparece { from { opacity: 0 } to { opacity: 1 } }
.dialogo {
  width: 100%; max-width: 400px; background: var(--blanco);
  border: var(--filete) solid var(--linea); border-radius: var(--curva-caja);
  padding: var(--e5); box-shadow: 0 12px 40px rgba(8,15,33,.22);
  /* Un cuadro alto no se puede comer los botones de abajo: crece hasta donde hay
     pantalla y a partir de ahi hace su propio scroll. */
  max-height: 100%; overflow-y: auto;
}
.dialogo-titulo { font-size: var(--t-medio); font-weight: var(--peso-titulos); margin: 0; }
.dialogo-texto { font-size: var(--t-mini); color: var(--tinta-media); margin: var(--e2) 0 0; }
.dialogo-campos { margin-top: var(--e4); }
.dialogo-campos .campo:last-child { margin-bottom: 0; }
.dialogo-campos:empty { display: none; }
.dialogo-error {
  margin-top: var(--e3); font-size: var(--t-mini);
  background: var(--mal-fondo); color: var(--mal);
  padding: var(--e2) var(--e3); border-radius: var(--curva);
}
.dialogo-botones { display: flex; gap: var(--e2); justify-content: flex-end; margin-top: var(--e5); }
.boton-peligro { background: var(--mal); color: #fff; }
.boton-peligro:hover { background: #8d2a23; }

/* --- Avisos cortos --- */
.avisos { position: fixed; top: var(--e4); right: var(--e4); z-index: 95; display: grid; gap: var(--e2); }
.aviso {
  background: var(--tinta); color: var(--blanco); font-size: var(--t-mini); font-weight: 500;
  padding: var(--e3) var(--e4); border-radius: var(--curva); box-shadow: var(--sombra-alta);
  animation: entra .18s ease; max-width: 340px;
}
@keyframes entra { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
.aviso.yendose { opacity: 0; transition: opacity .3s ease; }
.aviso-mal { background: var(--mal); }
.aviso-aviso { background: var(--aviso); }

/* --- Desplegable propio --- */
.select-oculto { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.desplegable { position: relative; }
.desplegable-boton {
  width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--e2); padding: var(--e2) var(--e3); cursor: pointer;
  border: var(--filete) solid var(--linea); border-radius: var(--curva);
  background: var(--blanco); color: var(--tinta); font: 400 var(--t-base) var(--letra); text-align: left;
}
.desplegable-boton:hover { border-color: var(--tinta-suave); }
.desplegable-boton:disabled { opacity: .5; cursor: not-allowed; }
.desplegable.abierto .desplegable-boton { outline: 2px solid var(--oro); outline-offset: -1px; border-color: var(--oro); }
.desplegable-boton svg { flex: 0 0 auto; opacity: .55; }
.desplegable-lista {
  display: none; position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--blanco); border: var(--filete) solid var(--linea);
  border-radius: var(--curva-caja); box-shadow: var(--sombra-alta);
  padding: var(--e1); max-height: 268px; overflow-y: auto;
}
.desplegable.abierto .desplegable-lista { display: block; }
.desplegable-opcion {
  display: block; width: 100%; text-align: left; cursor: pointer; border: 0; background: none;
  padding: var(--e2) var(--e3); border-radius: var(--curva);
  font: 400 var(--t-mini) var(--letra); color: var(--tinta);
}
.desplegable-opcion:hover { background: var(--papel-hueso); }
.desplegable-opcion.elegida { background: var(--oro-fondo); font-weight: 600; }


/* ==========================================================================
   MENU PLEGADO — se queda en 64px con solo los iconos
   ========================================================================== */
.plegar {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: var(--e3) var(--e5) 0; padding: var(--e2) 0; cursor: pointer;
  background: none; border: 0; border-top: var(--filete) solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.35); font: 500 var(--t-micro) var(--letra);
  text-transform: uppercase; letter-spacing: .1em; width: calc(100% - var(--e5) * 2);
}
.plegar:hover { color: var(--oro); }
.plegar svg { transition: transform .2s ease; }

body.menu-plegado .armazon { grid-template-columns: 64px minmax(0, 1fr); }
body.menu-plegado .menu { align-items: center; }
body.menu-plegado .menu-marca { padding: 0 0 var(--e4); }
body.menu-plegado .menu-marca svg { width: 30px; }
body.menu-plegado .pieza-nombre,
body.menu-plegado .menu-grupo,
body.menu-plegado .grupo-nombre,
body.menu-plegado .menu-quien,
body.menu-plegado .menu-rol,
body.menu-plegado .menu-salir,
body.menu-plegado .menu-editor,
body.menu-plegado .plegar span { display: none; }
body.menu-plegado .pieza a { justify-content: center; padding: var(--e3) 0; border-left-width: 3px; }
body.menu-plegado .grupo-hijos .pieza a { padding-left: 0; }
body.menu-plegado .grupo-boton { justify-content: center; padding: var(--e2) 0; }
body.menu-plegado .grupo-boton .flecha { display: none; }
/* PLEGADO: cada grupo es UNA carpeta; lo de dentro no se pinta. Tocarla, despliega. */
body.menu-plegado .grupo > .grupo-hijos { display: none; }
body.menu-plegado .grupo-icono { display: inline-flex; }
body.menu-plegado .menu-pie { padding: var(--e3) 0 0; text-align: center; }
body.menu-plegado .plegar { margin: var(--e3) 0 0; width: 100%; }
body.menu-plegado .plegar svg { transform: rotate(180deg); }

/* Nombre flotante al pasar el raton, ya que el texto no se ve */
body.menu-plegado .pieza { position: relative; }
body.menu-plegado .pieza a::after {
  content: attr(data-nombre); position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%); background: var(--tinta); color: var(--blanco);
  padding: 5px var(--e3); border-radius: var(--curva); font-size: var(--t-mini);
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease;
  box-shadow: var(--sombra-alta); z-index: 30;
}
body.menu-plegado .pieza a:hover::after { opacity: 1; }

@media (max-width: 860px) { body.menu-plegado .armazon { grid-template-columns: minmax(0,1fr); } }


/* El numerito de avisos del menu lateral. Sin esto, contestar a un fallo no
   sirve de nada: quien lo apunto no se entera de que le han respondido. */
.menu-aviso { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--oro); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1; flex: none; }
.menu-plegado .menu-aviso { position: absolute; top: 4px; right: 4px; margin: 0; }

/* --- buscador general --- */
  .cabecera-dcha { display:flex; gap:8px; align-items:center; }
  .busca { position:relative; display:flex; align-items:center; gap:7px; width:330px;
    background:var(--blanco); border:var(--filete) solid var(--linea);
    border-radius:999px; padding:0 12px; height:36px; transition:border-color .12s; }
  .busca:focus-within { border-color:var(--oro); }
  .busca-lupa { color:var(--tinta-suave); flex:0 0 auto; }
  .busca-campo { flex:1; min-width:0; border:0; outline:0; background:none;
    font:inherit; font-size:var(--t-micro); color:var(--tinta); }
  .busca-campo::placeholder { color:var(--tinta-suave); }
  .busca-atajo { flex:0 0 auto; font-size:11px; color:var(--tinta-suave);
    border:var(--filete) solid var(--linea); border-radius:5px; padding:0 5px; line-height:16px; }
  .busca:focus-within .busca-atajo { display:none; }
  .busca-panel { position:absolute; top:calc(100% + 6px); right:0; width:min(520px,86vw);
    max-height:min(70vh,520px); overflow:auto; z-index:60;
    background:var(--blanco); border:var(--filete) solid var(--linea);
    border-radius:var(--curva-caja); box-shadow:0 14px 40px rgba(0,0,0,.13); padding:5px; }
  .busca-fila { display:block; width:100%; text-align:left; text-decoration:none;
    border:0; background:none; font:inherit; cursor:pointer;
    padding:9px 11px; border-radius:calc(var(--curva-caja) - 4px); }
  .busca-fila:hover, .busca-fila.puesta { background:var(--papel); }
  .busca-alto { display:flex; align-items:baseline; gap:8px; }
  .busca-alto b { font-size:var(--t-mini); }
  .busca-quien { color:var(--tinta-media); font-size:var(--t-mini);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .busca-bajo { display:flex; align-items:center; gap:6px; margin-top:2px;
    font-size:var(--t-micro); color:var(--tinta-suave); }
  .busca-sello { flex:0 0 auto; font-weight:600; color:var(--oro-oscuro);
    background:var(--oro-tenue,rgba(176,141,58,.10)); border-radius:4px; padding:1px 6px; }
  .busca-porque { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .busca-nada { padding:14px 12px; color:var(--tinta-suave); font-size:var(--t-micro); }
  .busca-titulin { padding:8px 11px 4px; font-size:11px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--tinta-suave); }
  @keyframes busca-late { 0%,100% { background:transparent; } 18% { background:var(--oro-tenue,rgba(176,141,58,.22)); } }
  .fila.busca-senalada { animation:busca-late 1.1s ease-in-out 3; }
  @media (max-width:900px) { .busca { width:auto; flex:1; } .busca-atajo { display:none; } }

/* --- el buscador presidiendo un panel --- */
  .busca.preside { width:100%; height:54px; padding:0 20px; gap:12px; margin:0 0 var(--e5);
    border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
  .busca.preside .busca-lupa { width:19px; height:19px; }
  .busca.preside .busca-campo { font-size:var(--t-mini); }
  .busca.preside .busca-atajo { font-size:12px; padding:1px 7px; line-height:18px; }
  .busca.preside .busca-panel { left:0; right:0; width:auto; max-height:min(62vh,600px); }
  @media (max-width:900px) { .busca.preside { height:48px; padding:0 14px; } }