/* Catálogo de materiales (/materiales): misma paleta, tipografía y botones redondeados del showroom */
.materials{padding:34px 40px 28px}.materials svg{width:17px;height:17px}.materials h1 em{font-style:normal;color:#3d7f9e}
.mat-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px;align-items:center}.mat-hero h1{font-size:clamp(28px,3vw,40px);line-height:1.12;letter-spacing:-.03em;margin:10px 0}.mat-lead{color:#5d707a;line-height:1.6;max-width:590px;margin:0;text-wrap:pretty}
.mat-hero-actions{margin-top:24px;max-width:470px;flex-wrap:wrap}.mat-hero-actions>*,.mat-actions>*,.mat-sheet-foot button,.mat-doc{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.mat-showcase{min-height:0;gap:14px;border-radius:18px;padding:18px;color:#fff;background:radial-gradient(circle at 85% 10%,#3d7f9e66,transparent 50%),linear-gradient(140deg,#1d5571,#123446);box-shadow:0 18px 45px #16405626;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.mat-showcase-top,.mat-showcase-foot{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#cfe0e7}.mat-showcase-foot{align-items:center}.mat-showcase-foot strong{flex:1;min-width:0;font-size:20px;line-height:1.15;letter-spacing:-.01em;text-transform:none;color:#fff}.mat-showcase-foot span{border:1px solid #ffffff55;border-radius:30px;padding:7px 11px;white-space:nowrap}
.mat-stats{display:flex;align-items:center;gap:32px;padding:14px 0;margin:0 0 14px;border-block:1px solid var(--line)}.mat-stats>div{display:flex;gap:8px;align-items:baseline;white-space:nowrap}.mat-stats strong{font-size:26px;color:var(--ink)}.mat-stats span{font-size:12px;color:#6b7c85}.mat-stats p{margin:0 0 0 auto;text-align:right}
#mat-catalog{padding-top:0;margin-top:24px;border-top:1px solid var(--line);scroll-margin-top:10px}.mat-sectionhead{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:24px;margin-bottom:0}.mat-sectionhead>div:first-child{flex:1;min-width:0}.mat-sectionhead h2{font-size:24px;margin:0 0 4px}.mat-sectionhead p{margin:0}.mat-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:none;margin-left:auto;width:max-content;max-width:100%}.mat-actions>*{font-size:12px}
.mat-toolbar input{min-width:220px}.mat-toolbar select{min-width:150px;cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%2714%27 viewBox=%270 0 14 14%27%3E%3Cpath d=%27m3 5 4 4 4-4%27 fill=%27none%27 stroke=%27%23647680%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:14px 14px}
.mat-categories{display:flex;gap:7px;overflow-x:auto;padding:14px 0 12px;scrollbar-width:thin}.mat-pill{border:1px solid var(--line);background:#fff;border-radius:30px;padding:8px 14px;font-size:12px;font-weight:600;white-space:nowrap;color:#41596a}.mat-pill:hover{border-color:#7e9aa8}.mat-pill small{opacity:.6;margin-left:3px}.mat-pill.active{background:var(--ink);border-color:var(--ink);color:#fff}
.mat-resultbar{border-radius:12px;border:1px solid var(--line);margin-bottom:14px}.mat-resultbar b{color:var(--ink)}.viewtools .mat-fave-toggle{display:flex;gap:6px;align-items:center;border:0;background:transparent;color:#5b6b74}.viewtools .mat-fave-toggle.active{background:#fdecef;color:#c2414f}.viewtools button[data-mat-layout]{display:flex;padding:5px 8px;border:0;background:transparent}.viewtools button[data-mat-layout].active{background:var(--ink);color:#fff}
.mat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.matcard{position:relative;border:1px solid #e3e8eb;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 1px 3px #0001;transition:border-color .15s,box-shadow .15s,transform .15s;min-width:0}.matcard:hover{border-color:#7e9aa8;box-shadow:0 6px 18px #1640561f;transform:translateY(-2px)}
.matcard-main{display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;color:inherit}.matcard-photo{display:block;position:relative;height:170px;background:#eef2f3;overflow:hidden}.matcard-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.matcard-photo .badge{position:absolute;left:12px;top:12px}
/* Fotos reales: se muestran completas dentro del recuadro, sin recortes (las muestras SVG sí lo llenan) */
.is-photo{background:#f3f5f5}.is-photo img{object-fit:contain!important;padding:10px}
.matcard-body{display:block;min-width:0;padding:15px 16px 13px}.mat-meta{display:grid;grid-template-columns:minmax(0,1fr) 7ch;align-items:start;gap:8px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#3d7f9e}.mat-meta span:first-child{min-width:0;overflow-wrap:anywhere}.mat-meta span:last-child{color:#93a3ab;letter-spacing:0;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}.matcard h3{font-size:16px;margin:8px 0 5px}.matcard-summary{display:block;font-size:12px;color:#647680;line-height:1.6}
.matcard-brand{display:block;margin-top:3px;font-size:11px;font-weight:700;line-height:1.6;color:#788991;overflow-wrap:anywhere}
.matcard-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);margin-top:14px;padding-top:10px;font-size:11px;color:#71838d}.matcard-bottom>span:first-child{display:flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.matcard-bottom svg{width:13px!important;height:13px!important}.matcard-arrow{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#edf3f5;color:var(--ink);flex:none}
.matcard-fave{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:#ffffffee;color:#41596a;box-shadow:0 2px 6px #0001}.matcard-fave:hover{background:#fff}.matcard-fave.active{color:#c2414f}.matcard-fave.active svg{fill:#c2414f33}
.mat-grid.list{grid-template-columns:1fr;gap:10px}.mat-grid.list .matcard-main{display:flex;align-items:stretch}.mat-grid.list .matcard-photo{width:190px;height:auto;min-height:130px;flex:none}.mat-grid.list .matcard-body{flex:1;align-self:center;padding:12px 58px 12px 18px}.mat-grid.list .matcard-summary{min-height:0}.mat-grid.list .matcard-bottom{margin-top:8px;padding-top:8px}.mat-grid.list .matcard-fave{top:50%;transform:translateY(-50%)}
.mat-status-propuesto{background:var(--ink)}.mat-status-por-confirmar{background:#bd7b16}.mat-status-seleccionado{background:#24ac58}
.mat-help{display:flex;align-items:center;gap:12px;margin-top:24px;border-radius:0 12px 12px 0}.mat-help svg{color:var(--ink);width:22px!important;height:22px!important}.mat-footer{border-top:1px solid var(--line);margin-top:28px;padding-top:16px}.mat-footer strong{letter-spacing:1px;color:var(--ink)}

/* Cabecera del catálogo con Menú, QR, Atrás y pantalla completa. */
body.page-materials #app{background:#fff}body.page-materials #scene,body.page-materials #whatsapp{visibility:hidden}
body.page-materials .contentpage.materials{inset:72px 0 0;border-radius:0;background:#fff;border-top:1px solid var(--line)}
body.page-materials .materials>*{max-width:1370px;margin-inline:auto}

/* Ficha lateral del material */
.material-sheet{margin:0 0 0 auto;width:min(680px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;border-radius:20px 0 0 20px;border:0;overflow:hidden}.material-sheet[open]{display:flex;flex-direction:column;animation:mat-sheet-in .28s ease}@keyframes mat-sheet-in{from{transform:translateX(40px);opacity:0}}
.mat-sheet-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 22px;border-bottom:1px solid var(--line);flex:none}.mat-sheet-bar .close{position:static}.mat-back{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:#5b6b74;font-size:12px;font-weight:600;padding:8px 0}.material-sheet svg{width:17px;height:17px}
.mat-sheet-scroll{flex:1;overflow:auto;overscroll-behavior:contain}.mat-sheet-visual{position:relative;height:280px;background:#eef2f3}.mat-sheet-visual img{width:100%;height:100%;object-fit:cover}.mat-sheet-visual span{position:absolute;right:18px;bottom:16px;font-size:10px;background:#ffffffeb;border-radius:30px;padding:6px 10px;color:#41596a}
.mat-sheet-body{padding:24px 30px 34px}.mat-sheet-body .detail-heading{align-items:start}.mat-sheet-body h2{font-size:28px;margin:4px 0 0;line-height:1.15}.mat-sheet-body h3{font-size:13px;margin:24px 0 10px;padding-top:20px;border-top:1px solid var(--line)}.mat-desc{color:#5d707a;line-height:1.8;margin:14px 0 0}
.mat-facts{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;margin:0}.mat-facts>div{flex-direction:column;gap:3px}.mat-facts span{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#8394a0}.mat-facts strong{font-weight:600;overflow-wrap:anywhere}
.mat-tags{display:flex;flex-wrap:wrap;gap:7px}.mat-tags span{background:#edf3f5;color:#41596a;border-radius:30px;padding:6px 12px;font-size:12px}.mat-sheet-body .notice{margin:0}.mat-doc{margin-top:12px;text-decoration:none;font-size:12px}
.mat-sheet-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 22px;border-top:1px solid var(--line);flex:none}.mat-sheet-foot>div{display:flex;gap:8px;align-items:center}.mat-sheet-foot .matcard-fave{position:static;border:1px solid var(--line);width:40px;height:40px}.mat-sheet-foot button{font-size:12px}

@media(max-width:1024px){.materials{padding:28px}.mat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mat-hero{gap:22px}}
@media(max-width:760px){body.page-materials .contentpage.materials{inset:58px 0 0}.materials{padding:20px 16px}.mat-hero{grid-template-columns:minmax(0,1fr);gap:12px}.mat-hero h1{margin:8px 0 10px}.mat-hero .menu-subtitle{letter-spacing:1px;line-height:1.6}.mat-showcase-top span:last-child{display:none}.mat-showcase{min-height:0;padding:16px;gap:10px}.mat-showcase-foot strong{font-size:18px}.mat-stats{flex-wrap:wrap;gap:16px}.mat-stats strong{font-size:22px}.mat-stats p{width:100%;margin:0;text-align:left}.mat-actions-bottom,.mat-actions-bottom>*{width:100%}.mat-toolbar input,.mat-toolbar select{min-width:0}.mat-grid{gap:10px}.matcard-photo{height:140px}.matcard-body{padding:12px}.matcard h3{font-size:14px}.mat-grid.list .matcard-photo{width:110px}.mat-grid.list .matcard-body{padding:10px 46px 10px 12px}.mat-grid.list .matcard-bottom{display:none}.material-sheet{border-radius:0}.mat-sheet-visual{height:210px}.mat-sheet-body{padding:20px 18px 28px}.mat-sheet-body h2{font-size:23px}.mat-facts{grid-template-columns:1fr}.mat-sheet-bar,.mat-sheet-foot{padding:10px 14px}}
@media(max-width:510px){.mat-grid{grid-template-columns:1fr}.matcard-photo{height:180px}.mat-sheet-foot span{display:none}}
/* Móvil en horizontal: imagen de la ficha en 2,4:1 y ficha más estrecha para que no ocupe toda la altura */
@media(orientation:landscape) and (max-height:500px){.material-sheet{width:min(680px,100vw,calc(55dvh * 2.4));border-radius:20px 0 0 20px}.mat-sheet-visual{height:auto;aspect-ratio:12/5}}
@media(prefers-reduced-motion:reduce){.material-sheet[open]{animation:none}}

/* Impresión: catálogo filtrado (print-materials) o ficha abierta (print-material) */
@media print{
  html,body{height:auto!important;overflow:visible!important;background:#fff!important}
  body.print-materials #app{height:auto;min-height:0;overflow:visible}
  body.print-materials #app>*:not(#content),body.print-materials #veil,body.print-materials #toast{display:none!important}
  body.print-materials .contentpage{position:static;overflow:visible;background:#fff;padding:0}
  body.print-materials :is(.mat-showcase,.mat-hero-actions,.mat-actions,.mat-toolbar,.mat-categories,.viewtools,.mat-help,.matcard-fave,.matcard-arrow){display:none!important}
  body.print-materials .mat-hero{display:block}body.print-materials .mat-hero h1{font-size:30px}
  body.print-materials .mat-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px}body.print-materials .matcard{break-inside:avoid;box-shadow:none;transform:none}
  body.print-materials .matcard-main{display:block!important}body.print-materials .matcard-photo{width:auto!important;height:90px!important;min-height:0}
  body.print-material #app,body.print-material #toast{display:none!important}
  body.print-material .material-sheet{position:static;height:auto;max-height:none;width:100%;box-shadow:none;border-radius:0;display:block;animation:none}
  body.print-material .material-sheet::backdrop{display:none}body.print-material :is(.mat-sheet-bar,.mat-sheet-foot){display:none!important}
  body.print-material .mat-sheet-scroll{overflow:visible}body.print-material .mat-sheet-visual{height:220px}
}

/* Encabezado alineado con Menú también en teléfonos en horizontal. */
@media screen and (max-width:760px), screen and (pointer:coarse) and (max-width:1024px), screen and (max-width:1024px) and (max-height:500px) and (orientation:landscape){
  body.page-materials .toolbar{top:10px;left:16px;right:6px;height:36px;align-items:center}
  body.page-materials .contentpage.materials{inset:56px 0 0;padding:20px 16px}
}

@media(orientation:landscape) and (min-width:640px) and (max-height:500px){.mat-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px}.mat-showcase-foot strong{font-size:18px}}

.mat-actions-bottom{margin:24px 0 0}.mat-actions-bottom+.mat-footer{margin-top:16px}
@media(max-width:760px) and (orientation:portrait){.mat-showcase-top span:last-child{display:inline}.mat-showcase-foot{align-items:flex-end}}

/* La ampliación se abre únicamente desde la fotografía de la ficha en móvil. */
button.mat-sheet-visual{display:block;width:100%;border:0;padding:0;text-align:left;cursor:zoom-in;color:inherit}
button.mat-sheet-visual:disabled{opacity:1;cursor:default}
.mat-image-viewer{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:56px 16px 20px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
.mat-image-viewer[open]{display:grid;place-items:center}
.mat-image-viewer::backdrop{background:#0c253a99;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.mat-image-viewer>img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;min-height:0;min-width:0;object-fit:contain;border-radius:12px;transform-origin:center}
.mat-image-viewer .mat-image-close{position:fixed;right:auto;z-index:2}
.mat-image-close svg{width:17px;height:17px}

.mat-name-token{white-space:nowrap}
.mat-sheet-body h2,.matcard h3{text-wrap:pretty}
@media(max-width:760px){
 .mat-grid.list .mat-meta{margin-right:-34px}
 .mat-grid.list .mat-meta>span:first-child{overflow-wrap:normal;word-break:normal;hyphens:none}
}
@media(max-width:760px) and (orientation:portrait){
 .mat-sheet-body .detail-heading{display:block;position:relative}
 .mat-sheet-body .detail-heading>.badge{position:absolute;top:0;right:0}
 .mat-sheet-body .detail-heading .menu-subtitle{padding-right:90px;line-height:1.6}
}

/* El gesto de ampliar sólo afecta a la imagen abierta, incluso en pantalla completa. */
body.page-materials,.material-sheet{touch-action:pan-y}
.mat-image-viewer{touch-action:none;overscroll-behavior:none}
.mat-image-viewer>img{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;will-change:transform}
