/* Tortugas Metal: estilos de la marca (versión 2, 12/10/2026)
   Única fuente de los colores, las fuentes y los sellos de la casa. Toda herramienta nueva
   carga este archivo ANTES que sus propios estilos y no redefine los tokens --tm-*.
   Guía de uso: MARCA.md (al lado). Para verlo aplicado: muestrario.html.
   Las fuentes se buscan en "fuentes/" al lado de este archivo: el servidor tiene que servir
   /marca.css y /fuentes/ desde la misma carpeta. */

@font-face{font-family:"Russo One";src:url("fuentes/russo-one.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fuentes/ibm-plex-sans.woff2") format("woff2");font-weight:100 700;font-stretch:75% 100%;font-display:swap}

:root{
  /* Registro HOJA (claro): donde se trabaja y lo que se imprime */
  --tm-cemento:#E7E9E5;      /* fondo de pantalla, gris cemento: no blanco */
  --tm-papel:#FBFBF9;        /* paneles y la hoja impresa */
  --tm-fondo:#EEF0F1;        /* fondos internos suaves (cajas dentro de un panel) */
  --tm-zebra:#F2F3F1;        /* filas alternas */
  --tm-verde-claro:#E6F4E3;  /* fila de total */
  --tm-resta-fondo:#FBEAE8;  /* fila con problema */
  --tm-aviso-fondo:#FFF4D6;  /* caja de aviso */

  /* Texto sobre hoja (todos pasan 4,5 a 1 sobre todos los fondos claros) */
  --tm-tinta:#16191A;
  --tm-grafito:#2E3338;
  --tm-suave:#5B6266;
  --tm-verde:#22780D;
  --tm-verde-oscuro:#185309;
  --tm-resta:#A3271F;
  --tm-aviso:#8A5A00;

  /* Líneas */
  --tm-linea:#C9CDCF;
  --tm-borde:#AEB4B6;        /* borde de panel: más duro que la línea de tabla */
  --tm-linea-fuerte:#16191A;

  /* Registro CHAPA (oscuro): franja de arriba, encabezados y piezas para afuera */
  --tm-chapa:#1A1E20;
  --tm-chapa-2:#24292C;      /* segunda franja, filas alternas sobre chapa */
  --tm-chapa-borde:#3A4145;
  --tm-chapa-texto:#EDEFEC;  /* 14,5 a 1 sobre chapa */
  --tm-chapa-suave:#A9B1AE;  /* 7,6 a 1 sobre chapa */
  --tm-neon:#2FC00B;         /* el verde del logo: luz e indicador. Sobre hoja, solo adorno */
  --tm-neon-texto:#5EE03A;   /* verde para TEXTO sobre chapa (9,8 a 1) */

  /* Código de materiales: siempre al lado del nombre, nunca solo */
  --tm-mat-cobre:#B8652E;    --tm-mat-cobre-luz:#E89A62;
  --tm-mat-bronce:#9C7A2C;   --tm-mat-bronce-luz:#D9B865;
  --tm-mat-aluminio:#A9B2B8; --tm-mat-aluminio-luz:#E8EDF0;
  --tm-mat-acero:#4D565C;    --tm-mat-acero-luz:#8C979E;
  --tm-mat-plomo:#5C6470;    --tm-mat-plomo-luz:#9AA3B0;

  /* Gráficos: orden fijo, validado para daltonismo y contraste sobre papel */
  --tm-g1:#2A7F12;  /* verde */
  --tm-g2:#2F70C0;  /* azul acero */
  --tm-g3:#C8692A;  /* cobre */
  --tm-g4:#7A4FA8;  /* violeta anodizado */
  --tm-g-otros:#9AA0A3;

  /* Tipografía */
  --tm-titulo:"Russo One","Bahnschrift","Arial Black",sans-serif;
  --tm-texto:"IBM Plex Sans","Segoe UI",Arial,sans-serif;
  --tm-num:"IBM Plex Sans","Segoe UI",Arial,sans-serif;

  /* Forma: esquinas casi rectas, como chapa cortada */
  --tm-radio:3px;

  /* Textura de chapa semillada (diamantes en relieve, muy suave) */
  --tm-textura:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='2.2'%3E%3Cpath d='M4 9l5-5' stroke='%23ffffff' stroke-opacity='.05'/%3E%3Cpath d='M5 10l5-5' stroke='%23000000' stroke-opacity='.28'/%3E%3Cpath d='M13 13l5 5' stroke='%23ffffff' stroke-opacity='.05'/%3E%3Cpath d='M14 12l5 5' stroke='%23000000' stroke-opacity='.28'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Sello 1: chapa (superficie oscura) ---------- */
.tm-chapa{background-color:var(--tm-chapa);background-image:var(--tm-textura);color:var(--tm-chapa-texto)}
.tm-chapa a{color:var(--tm-chapa-texto)}

/* Franja de chapa arriba de cada herramienta: logo, nombre, navegación.
   Termina en una línea neón pegada a una negra, nunca el neón solo. */
.tm-franja{background-color:var(--tm-chapa);background-image:var(--tm-textura);color:var(--tm-chapa-texto);
  border-bottom:3px solid var(--tm-neon);box-shadow:0 3px 0 var(--tm-tinta)}

/* ---------- Sello 2: plaqueta (título de panel) ---------- */
/* Chapa identificadora atornillada: fondo chapa, letras Russo One, dos remaches. */
.tm-plaqueta{display:flex;width:fit-content;align-items:center;gap:10px;margin:0;padding:6px 26px 6px 26px;position:relative;
  background:var(--tm-chapa);color:var(--tm-chapa-texto);font-family:var(--tm-titulo);font-weight:400;font-size:14px;
  text-transform:uppercase;letter-spacing:.06em;line-height:1.3;border-radius:var(--tm-radio);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.35)}
.tm-plaqueta::before,.tm-plaqueta::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#C9CFD3 0 30%,#6B7378 70%);box-shadow:0 1px 0 rgba(0,0,0,.6)}
.tm-plaqueta::before{left:9px}
.tm-plaqueta::after{right:9px}

/* ---------- Sello 3: visor de balanza (el número protagonista, uno por pantalla) ---------- */
.tm-visor{display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px;background:#0E120D;border-radius:var(--tm-radio);
  padding:10px 18px 12px;box-shadow:inset 0 0 0 2px #2B3328,inset 0 0 18px rgba(47,192,11,.16),0 2px 0 var(--tm-tinta)}
.tm-visor-etq{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7F9A78}
.tm-visor-num{font-family:var(--tm-num);font-variant-numeric:tabular-nums lining-nums;font-weight:700;font-size:44px;line-height:1.05;
  color:#D7F7CC;text-shadow:0 0 12px rgba(47,192,11,.35);white-space:nowrap}

/* ---------- Sello 4: rayado de advertencia ---------- */
/* El rayado más la palabra ATENCIÓN: se entiende aunque se imprima en blanco y negro. */
.tm-advertencia{position:relative;padding:10px 14px 10px 26px;background:var(--tm-aviso-fondo);color:var(--tm-tinta)}
.tm-advertencia::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;
  background:repeating-linear-gradient(-45deg,#E0A100 0 6px,var(--tm-tinta) 6px 12px)}
.tm-advertencia.grave{background:var(--tm-resta-fondo)}
.tm-advertencia.grave::before{background:repeating-linear-gradient(-45deg,var(--tm-resta) 0 6px,var(--tm-tinta) 6px 12px)}

/* ---------- Sello 5: código de materiales ---------- */
/* Un cuadradito con brillo metálico ANTES del nombre del material. El nombre se escribe igual. */
.tm-mat{display:inline-flex;align-items:center;gap:8px}
.tm-mat::before{content:"";flex:none;width:14px;height:14px;border-radius:2px;
  background:linear-gradient(135deg,var(--luz,#ccc) 0%,var(--base,#888) 55%,var(--base,#888) 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 1px 0 rgba(0,0,0,.25)}
.tm-mat.cobre{--base:var(--tm-mat-cobre);--luz:var(--tm-mat-cobre-luz)}
.tm-mat.bronce{--base:var(--tm-mat-bronce);--luz:var(--tm-mat-bronce-luz)}
.tm-mat.aluminio{--base:var(--tm-mat-aluminio);--luz:var(--tm-mat-aluminio-luz)}
.tm-mat.acero{--base:var(--tm-mat-acero);--luz:var(--tm-mat-acero-luz)}
.tm-mat.plomo{--base:var(--tm-mat-plomo);--luz:var(--tm-mat-plomo-luz)}

/* ---------- Hoja: panel de trabajo ---------- */
/* Borde duro, canto superior grafito, sin sombras blandas ni esquinas redondas. */
.tm-panel{background:var(--tm-papel);border:1px solid var(--tm-borde);border-top:3px solid var(--tm-grafito);border-radius:var(--tm-radio);
  box-shadow:0 2px 0 rgba(22,25,26,.08)}

.tm-num{font-family:var(--tm-num);font-variant-numeric:tabular-nums lining-nums;text-align:right;white-space:nowrap}

@media print{
  .tm-franja,.tm-chapa,.tm-plaqueta{background:none!important;color:var(--tm-tinta)!important;box-shadow:none!important}
  .tm-plaqueta{border:1.5px solid var(--tm-tinta)}
  .tm-plaqueta::before,.tm-plaqueta::after{display:none}
  .tm-franja *,.tm-chapa *{color:var(--tm-tinta)!important}
  .tm-visor{background:none;box-shadow:none;border:2px solid var(--tm-tinta)}
  .tm-visor-etq,.tm-visor-num{color:var(--tm-tinta);text-shadow:none}
}