/* Catálogo de muebles: distribución y color de familia. */

/* El color de familia se presenta aquí, no en el HTML. */
[data-seccion="f0"], [data-seccion="f9"], [data-seccion="f18"], [data-seccion="f27"], [data-seccion="f36"],
#f0, #f9, #f18, #f27, #f36 { --af: #3d6ea5; }
[data-seccion="f1"], [data-seccion="f10"], [data-seccion="f19"], [data-seccion="f28"], [data-seccion="f37"],
#f1, #f10, #f19, #f28, #f37 { --af: #2e7d6b; }
[data-seccion="f2"], [data-seccion="f11"], [data-seccion="f20"], [data-seccion="f29"], [data-seccion="f38"],
#f2, #f11, #f20, #f29, #f38 { --af: #b07c2e; }
[data-seccion="f3"], [data-seccion="f12"], [data-seccion="f21"], [data-seccion="f30"], [data-seccion="f39"], [data-seccion="fM"],
#f3, #f12, #f21, #f30, #f39, #fM { --af: #8a5aa0; }
[data-seccion="f4"], [data-seccion="f13"], [data-seccion="f22"], [data-seccion="f31"],
#f4, #f13, #f22, #f31 { --af: #c05d5d; }
[data-seccion="f5"], [data-seccion="f14"], [data-seccion="f23"], [data-seccion="f32"],
#f5, #f14, #f23, #f32 { --af: #4a7e9e; }
[data-seccion="f6"], [data-seccion="f15"], [data-seccion="f24"], [data-seccion="f33"],
#f6, #f15, #f24, #f33 { --af: #6b8e3d; }
[data-seccion="f7"], [data-seccion="f16"], [data-seccion="f25"], [data-seccion="f34"],
#f7, #f16, #f25, #f34 { --af: #a0662e; }
[data-seccion="f8"], [data-seccion="f17"], [data-seccion="f26"], [data-seccion="f35"],
#f8, #f17, #f26, #f35 { --af: #5a6ea0; }
[data-seccion="fB"], #fB { --af: #5a6470; }
.ficha .mini.muestra-iconos { color:var(--tinta); }
.ficha .mini.muestra-iconos svg { font-size:26px; margin:6px; }
body.pagina-listado { padding-bottom:64px; }
.cabecera-listado, .barra, .familias, section, .linea-titulo {
  width:min(1120px, calc(100% - 56px));
  margin-left:auto;
  margin-right:auto;
}
.cabecera-listado { padding-top:24px; }
.cabecera-listado p { margin:0; color:var(--suave); }
.barra { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.barra input { flex:1 1 240px; max-width:340px; padding:7px 12px; }
.linea-titulo { margin:26px auto 0; color:var(--suave); font-size:15px;
                text-transform:uppercase; letter-spacing:.6px; }

/* Portada: una casilla por familia, en columnas. */
.familias { display:grid; gap:14px; margin-top:16px;
            grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
.ficha { display:flex; flex-direction:column; padding:0; overflow:hidden; cursor:pointer; text-align:left;
         background:var(--panel); border:1px solid var(--linea); border-top:4px solid var(--af);
         border-radius:var(--radio); box-shadow:var(--sombra); }
.ficha:hover { border-color:var(--af); transform:translateY(-2px); }
.ficha .mini { display:flex; align-items:center; justify-content:center; height:140px;
                background:var(--panel); border-bottom:1px solid var(--linea); }
.ficha .mini img { max-width:100%; max-height:100%; object-fit:contain; }
.ficha .datos { display:flex; flex-direction:column; gap:6px; padding:10px 12px 12px; }
.ficha h2 { margin:0; font-size:15px; line-height:1.25; }
.ficha .linea1 { display:flex; align-items:center; justify-content:space-between; }
.ficha .progreso { color:var(--suave); font-size:12px; }
.ficha .cuenta { padding:1px 9px; color:var(--sobre-acento); background:var(--af); border-radius:var(--radio-pildora); font-size:12px; }

/* Dentro de una familia. */
section { display:none; }
section.activa { display:block; }
.cab-familia { display:flex; align-items:center; gap:12px; margin:18px 0 4px; }
.cab-familia h2 { margin:0; color:var(--af); font-size:18px; }
.cab-familia .progreso { margin-left:auto; color:var(--suave); font-size:12px; }
.volver { padding:6px 12px; background:var(--panel); }
.volver:hover { border-color:var(--af); }
section h3 { margin:16px 0 8px; color:var(--af); font-size:12px; font-weight:700;
              text-transform:uppercase; letter-spacing:.5px; }
.rejilla { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }
.carta { position:relative; display:flex; flex-direction:column; overflow:hidden;
         background:var(--panel); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); }
.carta:hover { border-color:var(--af); }
.carta .foto { position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
               height:130px; background:var(--panel); border-bottom:1px solid var(--linea); }
.carta .foto img { max-width:100%; max-height:100%; object-fit:contain; }
.carta .foto.sin { color:var(--suave); font-size:12px; }
.carta .cuerpo { display:flex; flex-direction:column; gap:3px; padding:8px 10px 10px; }
.carta .linea1 { display:flex; align-items:center; justify-content:space-between; }
.carta .id, .carta .ir-visor { color:var(--af); font-variant-numeric:tabular-nums; font-weight:700; }
.carta .ir-visor { text-decoration:none; }
.carta .ir-visor::after { position:absolute; inset:0; content:""; }
.carta .nombre { font-size:13px; line-height:1.3; }
.carta .medidas { color:var(--suave); font-size:11.5px; }
.carta .nota { margin-top:2px; color:var(--suave); font-size:11px; font-style:italic; }
.carta.control { flex-direction:row; align-items:center; gap:10px; padding:8px 12px; }
.carta.control .ctrl-icono { display:flex; flex:none; align-items:center; justify-content:center; width:34px; height:34px;
                               color:var(--tinta); background:var(--panel); border:1px solid var(--linea);
                               border-radius:var(--radio); font-size:18px; }
.carta.control .cuerpo { padding:0; }
.rejilla.iconos { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); }
.carta.icono-suelto { align-items:center; flex-direction:column; gap:6px; padding:12px 8px 10px; }
.carta.icono-suelto .ctrl-icono { color:var(--tinta); font-size:24px; }
.carta.icono-suelto .medidas { text-align:center; word-break:break-all; }
.b-si, .b-no { display:inline-block; padding:1px 8px; border-radius:var(--radio-pildora); font-size:11px; font-weight:600; white-space:nowrap; }
.b-si { color:var(--exito); background:var(--exito-fondo); }
.b-no { color:var(--suave); background:var(--fondo); border:1px dashed var(--linea); }
.carta.oculto, .ficha.oculto { display:none; }

@media (max-width:760px) {
  body.pagina-listado { padding-bottom:48px; }
  .cabecera-listado, .barra, .familias, section, .linea-titulo { width:calc(100% - 36px); }
  .cabecera-listado { padding-top:18px; }
}