/* ============================================================
   Portal del fabricante, página pública de fabricantes y página de solo
   lectura de las fichas. Encima de styles.css: solo lo que no existe allí.
   Prefijo `fab-` (el `fb-` ya es de las sugerencias).
   ============================================================ */

/* ---- el armazón del portal ----
   El de la aplicación de empresas (index.html y styles.css): menú lateral
   claro, cuenta abajo, tema claro u oscuro. Aquí solo lo que es del portal.
   Las cifras de cabecera del panel de MFW (admin) siguen en .fab-cifras. */
.fab-cifras{display:flex;gap:32px;flex-wrap:wrap;margin:0 0 24px;padding:0 0 18px;border-bottom:1px solid var(--line)}
.fab-cifra b{display:block;font-family:var(--font-display);font-size:var(--t-xl);font-weight:600;line-height:1.1}
.fab-cifra span{font-size:var(--t-sm);color:var(--muted)}
/* Norte y, debajo, Fabricantes: en una fila no caben con el logo y el botón de plegar. */
.side-cab .wordmark{display:flex;flex-direction:column;gap:3px}
.fab-wm{font-family:var(--font-sans);font-size:11px;font-weight:500;color:var(--muted);line-height:1;letter-spacing:0}
/* Las peticiones de clientes sin responder: alguien espera. */
.side-cnt.fab-cnt-ojo{background:var(--warn-bg);color:var(--warn-ink)}
.fab-miga{margin:0 0 6px;font-size:var(--t-sm)}
.fab-paso{margin:0 0 24px}
.fab-sec{margin-bottom:32px}
.fab-estrecha{max-width:640px}
.fab-vacio{color:var(--muted);margin:8px 0 24px}
.fab-n{font-family:var(--font-sans);font-size:var(--t-xs);font-weight:600;color:var(--muted);background:var(--neutral-bg);
  border-radius:var(--r-full);padding:1px 8px;margin-left:6px;vertical-align:3px}

/* ---- el catálogo: la tabla de Envases ---- */
.fab-filtros{margin:0 0 12px}
.fab-cat.sobre{outline:2px dashed var(--brand);outline-offset:4px;border-radius:var(--r-sm)}
.fab-nom{display:block;font-weight:600;color:var(--ink)}
.fab-cod{display:block;font-size:var(--t-xs);color:var(--muted);margin-top:1px}
.env-tabla td .fab-cod{white-space:normal}
.fab-falta{display:inline-block;width:52px;height:5px;border-radius:var(--r-full);background:var(--neutral-bg);overflow:hidden;
  vertical-align:middle;margin-right:8px}
.fab-falta i{display:block;height:100%;background:var(--brand)}
.fab-falta.ok i{background:var(--good)}
.fab-falta.mal i{background:var(--bad)}
.env-tabla .c-nota,.env-tabla .c-usan{text-align:right}
.env-tabla th.c-nota{white-space:normal;max-width:88px;line-height:1.3}
.env-tabla td.c-falta{white-space:nowrap}
.fab-acc{white-space:nowrap;text-align:right}
.fab-enl-mal{color:var(--bad)}
@media(max-width:860px){
  .fab-cat .c-mat,.fab-cat .c-nota,.fab-cat .c-usan,.fab-docs-t .c-citas,.fab-enl-t .c-incl,.fab-enl-t .c-idioma{display:none}
}
@media(max-width:520px){
  .fab-cat .c-falta,.fab-docs-t .c-tipo{display:none}
  .fab-acc{white-space:normal}
  .fab-acc .enl{display:block;padding:3px 0}
}

/* ---- listas de peticiones: filas planas, no tarjetas ---- */
.fab-item{padding:14px 0;border-bottom:1px solid var(--line)}
.fab-item:last-child{border-bottom:0}
.fab-item-cab{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.fab-item h3{margin:0;font-family:var(--font-sans);font-size:var(--t-base);font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0}
.fab-ref-cli{font-weight:400;color:var(--muted);font-size:var(--t-sm);margin-left:4px}
.fab-meta{margin:2px 0 0;font-size:var(--t-sm);color:var(--muted)}
.fab-resp{color:var(--ink);margin-top:8px}
.fab-pet-otras{display:flex;gap:4px 14px;flex-wrap:wrap;margin-top:8px}
.fab-pet-otras .enl{padding:2px 0}
.fab-cambiar{margin-top:6px;padding:2px 0}
/* Lo cerrado, plegado: es historial. */
.fab-cerradas{margin:0 0 32px;border-top:1px solid var(--line)}
.fab-cerradas>summary{cursor:pointer;padding:12px 0;font-weight:600;color:var(--muted);font-size:var(--t-sm);list-style:none}
.fab-cerradas>summary::-webkit-details-marker{display:none}
.fab-cerradas>summary::before{content:"▸";display:inline-block;width:16px;transition:transform .15s}
.fab-cerradas[open]>summary::before{transform:rotate(90deg)}
.fab-cerradas>summary:hover{color:var(--ink)}
/* El formulario de pedir a un proveedor, abierto desde la cabecera. */
.fab-sec-form>div:not(.hidden){margin:0 0 28px;padding:0 0 20px;border-bottom:1px solid var(--line)}
.fab-subir-doc select{padding:9px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font:inherit;font-size:var(--t-sm);
  background:var(--campo);color:var(--ink);max-width:240px}
.fab-doc-fila{display:flex;gap:10px;align-items:center}

/* ---- subir fichas ---- */
.fab-subir{border:1.5px dashed var(--line-strong);border-radius:var(--r-md);padding:18px 20px;display:flex;gap:16px;
  align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 24px;background:var(--surface-2)}
.fab-subir.sobre{border-color:var(--brand);background:var(--brand-soft)}
.fab-subir p{margin:4px 0 0;font-size:var(--t-sm);color:var(--muted)}

/* ---- propuestas leídas de una ficha ---- */
.fab-prop{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-md);padding:14px 16px;margin:0 0 12px}
.fab-prop .head-row h4{margin:0;font-size:var(--t-base)}
.fab-prop ul{margin:8px 0 0;padding-left:18px;font-size:var(--t-sm);color:var(--muted)}


/* ---- la ficha ---- */
.fab-ficha{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:32px;align-items:start}
/* Con el menú lateral, por debajo de 1240 px la columna de la ficha se queda
   en 375 px y la tabla de componentes necesita el doble. Pasa a una columna, y
   el resumen de lo que falta sube arriba: al final de un formulario largo no
   lo vería nadie. */
@media(max-width:1240px){
  .fab-ficha{grid-template-columns:minmax(0,1fr)}
  .fab-lado{order:-1}
  .fab-lado .btn{width:auto;margin-right:6px}
}
.fab-bloque{margin:0 0 34px}
.fab-bloque-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:12px}
.fab-bloque-cab h2{margin:0}
/* Los apartados opcionales, plegados con su estado. */
details.fab-plegable>summary{list-style:none;cursor:pointer;justify-content:flex-start}
details.fab-plegable>summary::-webkit-details-marker{display:none}
details.fab-plegable>summary h2{flex:1;min-width:0}
details.fab-plegable>summary h2::before{content:"▸";display:inline-block;width:18px;color:var(--muted);font-size:.8em;transition:transform .15s}
details.fab-plegable[open]>summary h2::before{transform:rotate(90deg)}
details.fab-plegable:not([open]){margin-bottom:12px}
details.fab-plegable:not([open])>summary{margin-bottom:0}
.fab-pl-est{font-size:var(--t-xs);color:var(--muted);min-width:5.5em;text-align:right}
.fab-base{font-size:var(--t-xs);color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fab-tag{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.02em;padding:2px 8px;border-radius:var(--r-xs);
  border:1px solid var(--line-strong);color:var(--muted);background:var(--surface);white-space:nowrap}
.fab-tag.ya{border-color:var(--brand-line);color:var(--brand);background:var(--brand-soft)}
.fab-estado{font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:var(--r-xs);white-space:nowrap}
.fab-estado.ok{background:var(--good-bg);color:var(--good-ink)}
.fab-estado.falta{background:var(--warn-bg);color:var(--warn-ink)}
.fab-estado.no_cumple{background:var(--bad-bg);color:var(--bad-ink)}
.fab-estado.pendiente,.fab-estado.recoge,.fab-estado.opcional{background:var(--neutral-bg);color:var(--muted)}
.fab-lab{display:flex;align-items:center;gap:8px;justify-content:space-between}
.fab-lab label{margin-bottom:0}
.field .fab-lab{margin-bottom:8px}
.fab-nota{font-size:var(--t-xs);color:var(--muted);margin:6px 0 0}
.fab-foco{animation:fabfoco 1.4s ease}
@keyframes fabfoco{0%{background:var(--warn-bg)}100%{background:transparent}}

.fab-tabla-scroll{overflow-x:auto}
.fab-comp{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:700px}
.fab-comp th{text-align:left;font-size:var(--t-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
  font-weight:600;padding:6px 6px;border-bottom:1px solid var(--line-strong)}
.fab-comp td{padding:6px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.fab-comp input,.fab-comp select{width:100%;padding:8px;border:1px solid var(--line-strong);border-radius:var(--r-xs);
  font-family:inherit;font-size:var(--t-sm);background:var(--surface);color:var(--ink)}
.fab-comp .num{width:84px}
.fab-comp button.fab-x{background:none;border:0;color:var(--muted);font-size:1.2rem;cursor:pointer;padding:4px 8px}
.fab-comp button.fab-x:hover{color:var(--bad)}

/* ---- documentos dentro de un campo ---- */
.fab-docs{display:flex;flex-direction:column;gap:6px;margin:6px 0 0}
.fab-doc{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:var(--t-sm)}
.fab-doc .fab-ico,.fab-doc-fila .fab-ico{width:26px;height:32px;border:1px solid var(--line-strong);border-radius:3px;display:grid;place-items:center;
  font-size:.58rem;font-weight:700;color:var(--bad);background:var(--surface);flex:none;text-transform:uppercase}
.fab-doc .fab-doc-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fab-doc button{background:none;border:0;color:var(--brand);cursor:pointer;font-size:var(--t-sm);padding:2px 6px;font-family:inherit}
.fab-doc button.quitar{color:var(--muted)}
.fab-doc-acc{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.fab-doc-acc select{padding:7px 8px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-family:inherit;font-size:var(--t-sm);max-width:260px;background:var(--campo);color:var(--ink)}

/* ---- lateral ---- */
.fab-lado{position:sticky;top:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px}
@media(max-width:1240px){.fab-lado{position:static}}
.fab-lado h3{margin:0 0 6px;font-family:var(--font-display);font-size:var(--t-lg);text-transform:none;letter-spacing:0;color:var(--ink);font-weight:600}
.fab-lado ul{list-style:none;padding:0;margin:8px 0 14px}
.fab-lado li{padding:6px 0;border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.fab-lado li button{background:none;border:0;color:var(--brand);padding:0;text-align:left;font-size:var(--t-sm);
  text-decoration:underline;cursor:pointer;font-family:inherit}
.fab-lado .btn{width:100%;margin-top:8px}
.fab-sello{font-size:var(--t-xs);color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin-top:14px}
.fab-versiones{font-size:var(--t-xs);color:var(--muted);margin:10px 0 0;padding:0;list-style:none}
.fab-sucio{font-size:var(--t-xs);color:var(--warn-ink);margin:8px 0 0}

/* ---- tablas planas (compartir, documentos, panel) ---- */
.fab-tabla{width:100%;border-collapse:collapse;font-size:var(--t-sm);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.fab-tabla th{text-align:left;font-size:var(--t-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600;
  padding:10px 12px;border-bottom:1px solid var(--line-strong);background:var(--surface-2)}
.fab-tabla td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.fab-tabla tr:last-child td{border-bottom:0}
.fab-tabla .anulado td{color:var(--muted)}
.fab-elegir{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto;padding:8px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface)}
.fab-elegir label{display:flex;gap:8px;align-items:center;font-size:var(--t-sm);font-weight:400}
.fab-elegir input{width:auto}

/* ============ página pública /fabricantes ============ */
.fab-pub-top{background:var(--brand-2);color:#e9f0f7}
.fab-pub-top-in{max-width:1080px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.fab-pub{max-width:1080px;margin:0 auto;padding:0 24px 60px}
.fab-hero{padding:48px 0 30px;border-bottom:1px solid var(--line);margin-bottom:36px}
.fab-hero h1{font-size:2.6rem;max-width:780px;line-height:1.08}
.fab-hero .lede{font-size:1.15rem;color:var(--ink);max-width:690px}
.fab-sec{margin:0 0 40px}
.fab-sec>h2{padding-bottom:8px;border-bottom:1px solid var(--line)}
.fab-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px}
.fab-cols h3{margin:0 0 6px;font-family:var(--font-display);font-size:1.05rem;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:600}
.fab-cols p{margin:0;font-size:var(--t-sm);color:var(--muted)}
.fab-paso .n{display:block;font-family:var(--font-display);color:var(--accent);font-size:1.6rem;line-height:1;margin-bottom:6px}
.fab-ley{display:grid;grid-template-columns:120px 1fr;gap:6px 18px;padding:12px 0;border-bottom:1px solid var(--line)}
.fab-ley:last-child{border-bottom:0}
.fab-ley .art{font-weight:700;color:var(--brand);font-size:var(--t-sm)}
.fab-datos{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.fab-datos th{text-align:left;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;
  padding:8px 10px;border-bottom:1px solid var(--line-strong)}
.fab-datos td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.fab-datos td:first-child{font-weight:600}
.fab-aviso{border-left:4px solid var(--accent);background:var(--surface);padding:12px 14px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:0 0 16px}
.fab-aviso.warn{border-left-color:var(--warn)}
@media(max-width:720px){
  .fab-hero h1{font-size:2rem}
  .fab-ley{grid-template-columns:1fr}
  .fab-datos,.fab-tabla{display:block;overflow-x:auto}
}

/* ============ página de solo lectura /fichas ============ */
.fab-ver{max-width:980px;margin:0 auto;padding:28px 24px 60px}
.fab-ver-ref{margin:0 0 44px;padding-top:4px}
.fab-ver-ref>.head-row{border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:12px}
.fab-ver-ref h2{margin:0}
.fab-ver dl{display:grid;grid-template-columns:240px 1fr;gap:0;margin:0 0 14px}
.fab-ver dt,.fab-ver dd{padding:8px 0;border-bottom:1px solid var(--line);margin:0;font-size:var(--t-sm)}
.fab-ver dt{font-weight:600;padding-right:14px}
@media(max-width:720px){.fab-ver dl{grid-template-columns:1fr}.fab-ver dt{border-bottom:0;padding-bottom:0}}
@media print{
  .fab-pub-top,.fab-no-print,.toast{display:none!important}
  body{background:#fff}
  .fab-ver-ref{break-inside:avoid-page}
}

/* ============ el bloque del envase en la app del cliente ============ */
.red-bloque{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:14px 16px;margin:0 0 24px}
.red-bloque .head-row h3{margin:0;font-family:var(--font-display);font-size:var(--t-base);text-transform:none;letter-spacing:0;color:var(--ink)}
.red-bloque p{margin:6px 0 0;font-size:var(--t-sm);color:var(--muted)}
.red-nueva{border-left:4px solid var(--warn);padding-left:10px;margin-top:10px}
.red-res{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.red-res:last-child{border-bottom:0}
.red-res .muted{font-size:var(--t-xs)}
/* Lo que hoy es opcional y luego no: en letra pequeña, sin color de alarma. */
.fab-aviso-fut{font-size:var(--t-xs);color:var(--muted);margin:-4px 0 10px}
.fab-nota-ficha{font-size:var(--t-xs);color:var(--muted);margin:10px 0 0}
.fab-nota-ficha b{color:var(--ink);font-weight:600}
.fab-futuros{font-size:var(--t-xs);color:var(--muted);margin:6px 0 10px;line-height:1.5}
.fab-futuros [data-foco]{text-decoration:underline dotted;cursor:pointer}
/* Mandar por correo el enlace recién creado. */
.fab-mandar{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
/* Formulario de alta en /fabricantes. La trampa para robots no se ve ni se
   alcanza con el tabulador; display:none la saltarían algunos robots. */
.fab-alta{max-width:760px}
.fab-trampa{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.fab-privacidad{color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin:6px 0 8px;line-height:1.5}
.fab-alta-error{color:var(--bad);font-size:var(--t-sm);min-height:1.2em;margin:6px 0 0}
/* Peticiones de ficha. */
.fab-pet{margin-bottom:12px}
.fab-pet-msg{margin:10px 0 0;padding-left:12px;border-left:3px solid var(--line);white-space:pre-line;font-size:var(--t-sm)}
.fab-pet-acc{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.fab-pet-fila{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fab-pet-fila select,.fab-pet-fila input{flex:0 1 440px;min-width:220px;padding:8px 10px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);font:inherit;font-size:var(--t-sm);background:var(--campo);color:var(--ink)}
/* Peticiones aguas arriba: el formulario dentro de la ficha y en Proveedores,
   y la página del proveedor que contesta. */
.fab-aa{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.fab-aa-lista{list-style:none;padding:0;margin:8px 0 0;font-size:var(--t-sm)}
.fab-aa-lista li{padding:6px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}
.fab-aa-resp{margin:10px 0 0;padding:10px 12px;background:var(--surface-2);border-radius:var(--r-sm);font-size:var(--t-sm)}
.fab-aa-resp dl{display:grid;grid-template-columns:150px 1fr;gap:4px 12px;margin:0}
.fab-aa-resp dt{color:var(--muted)}
.fab-aa-resp dd{margin:0}
@media(max-width:720px){.fab-aa-resp dl{grid-template-columns:1fr}}
.fab-sub-ops{display:flex;gap:18px;flex-wrap:wrap}
.fab-sub-op{display:flex;gap:8px;align-items:center;font-weight:500}
.fab-sub-op input{width:auto}

/* Empresa y personas: quién entra en el portal */
.fab-personas{list-style:none;margin:0 0 18px;padding:0}
.fab-personas li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.fab-personas li:last-child{border-bottom:0}
.fab-per-acc{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.fab-per-acc .enl{padding:0}
.fab-h3{font-size:var(--t-sm);font-weight:600;margin:6px 0 10px}
@media (max-width:600px){.fab-personas li{flex-direction:column;align-items:flex-start}.fab-per-acc{justify-content:flex-start}}

/* Un documento en varias fichas: la lista con casillas del diálogo */
.fab-citar-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 8px}
.fab-citar-cab input{flex:1 1 200px}
.fab-citar-cab .enl{padding:0}
.fab-citar-lista{list-style:none;margin:0;padding:0;max-height:50vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.fab-citar-lista li{border-bottom:1px solid var(--line)}
.fab-citar-lista li:last-child{border-bottom:0}
.fab-citar-lista label{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;cursor:pointer;margin:0;font-weight:400}
.fab-citar-lista input{margin-top:3px}

/* Las fichas desde un Excel: lo que se va a importar */
.fab-excel p{margin:6px 0 0}
.fab-excel-avisos{margin:10px 0 0;padding-left:18px;font-size:var(--t-sm);color:var(--muted)}
.fab-excel-avisos li{margin:2px 0}

/* Una casilla suelta con su texto, en Empresa y personas */
.fab-check{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:var(--t-sm);margin:4px 0 14px;cursor:pointer}
.fab-check input{margin-top:3px}

/* Documentos: la validez; Fichas…: el filtro por material */
.fab-citar-cab select{flex:0 1 220px}

/* Un certificado leído, para confirmar: cada dato con su cita */
.fab-cert-t{width:100%;border-collapse:collapse;margin:8px 0 0;font-size:var(--t-sm)}
.fab-cert-t th{text-align:left;font-weight:500;color:var(--muted);padding:5px 10px 5px 0;white-space:nowrap;vertical-align:top;width:1%}
.fab-cert-t td{padding:5px 10px 5px 0;vertical-align:top}
.fab-cert-t .fab-cita{color:var(--muted);font-size:var(--t-xs)}
.fab-cert-t tr.revisar th,.fab-cert-t tr.revisar td{background:var(--warn-bg)}
.fab-cert .btn-row{margin-top:6px}
@media (max-width:600px){.fab-cert-t,.fab-cert-t tbody,.fab-cert-t tr,.fab-cert-t th,.fab-cert-t td{display:block;width:auto}.fab-cert-t th{padding-top:8px}}