/* ============================================================
   CALZADOS NORTE — Sistema de gestión
   Tokens de diseño: color, tipografía, espaciado
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* --- Color: cuero, papel y latón --- */
  --bg:            #FAF8F3;
  --surface:       #FFFFFF;
  --surface-2:     #F2EEE4;
  --surface-3:     #EBE5D8;

  --sidebar:       #3d251e;
  --sidebar-hi:    #6a5743;
  --sidebar-line:  #816f60;
  --sidebar-text:  #efebe6;
  --sidebar-text-dim: #f4f0eb;
  --sidebar-text-on: #FFFFFF;

  --text:          #241F1A;
  --text-muted:    #766C5F;
  --text-faint:    #A79C8B;

  --border:        #E6DFD1;
  --border-strong: #D6CCB8;

  --accent:        #4b302a;   /* verde pino, caja de zapatos */
  --accent-dark:   #4b302a;
  --accent-soft:   #E4ECE5;

  --gold:          #d0c1aa;   /* ojal de latón */
  --gold-soft:     #897b5e;

  --rust:          #AE4B30;   /* alerta, sin reproducir el naranja de plantilla */
  --rust-soft:     #F5E2DA;

  /* --- Tipografía --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* --- Escala y espaciado --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(36,27,20,0.06);
  --shadow-md: 0 8px 24px rgba(36,27,20,0.10);
  --shadow-lg: 0 20px 48px rgba(36,27,20,0.22);

  --sidebar-w: 244px;
}

*, *::before, *::after{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

p{ margin: 0; }

a{ color: inherit; text-decoration: none; }

ul{ list-style: none; margin: 0; padding: 0; }

button{ font-family: inherit; }

input, select, textarea{
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::selection{ background: var(--accent-soft); color: var(--accent-dark); }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Barra de scroll discreta */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius: 8px; }

/* --- Marca / etiqueta de zapato (elemento de firma) ---
   Un pequeño "boleto" con muesca, como la etiqueta de una caja
   de zapatos. Se usa en el logotipo y en los estados de la tabla. */
.tag-mark{
  --tag-color: var(--accent);
  position: relative;
  display: inline-block;
  width: 30px;
  height: 22px;
  background: var(--tag-color);
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
}
.tag-mark::after{
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sidebar);
  transform: translateY(-50%);
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.eyebrow::before{
  content: '';
  width: 7px;
  height: 7px;
  clip-path: polygon(2px 0, 100% 0, 100% 100%, 2px 100%, 0 50%);
  background: var(--gold);
}

.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}