/* ============================================================
   TEMECA 2000 — site.css
   Complements Tailwind Play CDN with brand-specific utilities
   that are awkward to express inline (color swatches, decorative
   background-repeat images, print styles).
   ============================================================ */

html { scroll-behavior: smooth; }

body { font-family: Arial, Helvetica, sans-serif; color: #333; }

/* --- Top-nav decorative backgrounds (replicate original look) --- */
.bg-seleccion  { background-image: url("../images/seleccion.jpg");  background-repeat: repeat-x; background-position: top left; }
.bg-over       { background-image: url("../images/over.jpg");       background-repeat: repeat-x; background-position: top left; }
.bg-barra      { background-image: url("../images/barra_gris.jpg"); background-repeat: repeat-x; background-position: left center; }
.bg-menu-izda  { background-image: url("../images/menu_izda.jpg");  background-repeat: repeat-x; background-position: top center; background-color: #CAE4F1; }
.bg-bolongo    { background-image: url("../images/bolongo.jpg");    background-repeat: no-repeat; background-position: left center; }

/* --- Color swatches (product color palette) --- */
.swatch { width: 30px; height: 30px; border: 1px solid #333; display: inline-block; vertical-align: middle; margin: 5px 0; }
.bg-teja      { background-color: #FF702B; }
.bg-negro     { background-color: #000000; }
.bg-antracita { background-color: #787878; }
.bg-burdeos   { background-color: #D3052F; }
.bg-verde     { background-color: #2BB01C; }
.bg-marron    { background-color: #984B27; }
.bg-dextar    { background-color: #231A11; }
.bg-arena     { background-color: #FED869; }
.bg-bidasoa   { background-color: #F8F081; }
.bg-tabaco    { background-color: #42241A; }
.bg-navarra   { background-color: #0F4513; }
.bg-vclaro    { background-color: #859F56; }
.bg-lago      { background-color: #26517E; }
.bg-cielo     { background-color: #C6C9D8; }
.bg-marino    { background-color: #062037; }
.bg-pirineo   { background-color: #F9F9F9; }
.bg-ostra     { background-color: #F3F0E9; }
.bg-perla     { background-color: #ECEBE9; }
.bg-rteja     { background-color: #A81F0F; }
.bg-baztan    { background-color: #710505; }
.bg-coral     { background-color: #EE2400; }
.bg-ral9006   { background-color: #7E8689; }
.bg-ral1015   { background-color: #FFE8AA; }
.bg-ral5008   { background-color: #21313A; }
.bg-calabaza  { background-color: #FAD01A; }
.bg-baracaldo { background-color: #00274F; }
.bg-ral9002   { background-color: #F0EDE6; }
.bg-sepia     { background-color: #734212; }
.bg-azafata   { background-color: #607F79; }

/* --- Product / data tables (keep original styling) --- */
.t-chapas, .resist-polic { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.t-chapas    { border: 1px solid #55A6D5; }
.t-chapas th { color: #fff; background-color: #55A6D5; text-align: left; padding: 6px 10px; }
.t-chapas td { padding: 6px; border-left: 1px solid #55A6D5; background: #fff; }

.resist-polic { font-size: 1em; }
.resist-polic th { color: #fff; background-color: #55A6D5; height: 22px; padding: 4px 8px; }
.resist-polic td { padding: 5px; border-left: 1px solid #55A6D5; border-bottom: 1px solid #55A6D5; background: #fff; }

.manipulacion  td { background-color: #A6D8F3; padding: 10px; }
.manipulacion2 td { background-color: #55A6D5; padding: 10px; color: #fff; }
.manipulacion2 a { color: #A5D8F3; }
.manipulacion2 a:hover { color: #fff; }

/* --- Lightbox dialog --- */
dialog#lightbox {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 95vw;
  max-height: 95vh;
}
dialog#lightbox::backdrop { background: rgba(0,0,0,0.85); }
dialog#lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
dialog#lightbox img { max-width: 95vw; max-height: 85vh; display: block; background: #fff; padding: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.4); }
dialog#lightbox figcaption { color: #fff; padding: 8px 12px; font-size: 0.85em; text-align: center; max-width: 90vw; }
dialog#lightbox .lb-close { position: absolute; top: -36px; right: 0; background: #fff; color: #333; border: 0; padding: 4px 10px; cursor: pointer; font-size: 0.9em; border-radius: 3px; }

/* --- Print --- */
@media print {
  header, footer, aside, #menu-toggle, #mobile-menu, .no-print { display: none !important; }
  main, section { background: #fff !important; color: #000 !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}