/* ============================================================
   Mkaddesh CRM — tokens base (piel clara, ago 2026)
   Fondo claro, menú negro, esquinas rectas.
   El color solo habla: rojo lo que falla, amarillo lo que espera,
   verde lo que salió bien. Sin azul en ninguna parte.
   ============================================================ */
:root {
  /* --- Superficies --- */
  --bg: #F2F4F5;          /* lienzo de la pantalla */
  --surface: #FFFFFF;     /* tarjetas */
  --surface-2: #F7F8F9;   /* campos y zonas hundidas */
  --surface-3: #EDEFF1;   /* rellenos marcados, pistas de progreso */
  --cream: #FAFBFC;

  /* --- Tinta: el negro del menú y los títulos --- */
  --ink: #111111;
  --ink-soft: #1A1A1A;    /* hover dentro del menú negro */
  --ink-line: #2A2A2A;    /* separadores dentro del menú negro */

  /* --- Texto --- */
  --text: #111111;
  --muted: #6B7280;
  /* muted-2 es el texto más apagado que existe. No puede bajar de aquí:
     por debajo deja de cumplir contraste AA sobre blanco. */
  --muted-2: #71767D;

  /* --- Líneas --- */
  --border: #DBDEE0;
  --border-strong: #C4C9CD;

  /* --- Semáforo ---
     primary-glow es el rojo para TEXTO sobre claro: más oscuro que el de
     marca para que se lea. Lo mismo con gold. */
  --primary: #D91F27;
  --primary-glow: #B01820;
  --primary-wash: rgba(217, 31, 39, .08);

  --green: #00914B;
  --green-wash: #EAF7F0;

  --amber: #FFDE1B;       /* fondo de advertencia */
  --gold: #8A6D00;        /* texto ámbar legible sobre claro */
  --amber-wash: #FFFBE6;

  /* --- Geometría: recta, de herramienta --- */
  --radius: 4px;
  --radius-xl: 6px;

  --shadow: 0 1px 2px rgba(17, 17, 17, .05), 0 10px 28px -20px rgba(17, 17, 17, .30);
  --shadow-red: 0 1px 2px rgba(217, 31, 39, .28);

  /* --- Tipografía --- */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Botones base */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  white-space: nowrap; background: var(--primary); color: #fff;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: #C21B22; }
.btn:active { background: var(--primary-glow); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn.secondary {
  background: var(--surface); color: var(--text); border-color: var(--border);
}
.btn.secondary:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn.dark { background: var(--ink); color: #fff; }
.btn.dark:hover { background: var(--ink-soft); }
.btn.small { height: 30px; padding: 0 12px; font-size: 12.5px; }

/* Inputs base */
input, select, textarea {
  font-family: var(--font-body); font-size: 13.5px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 12px; outline: none; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(217, 31, 39, .15);
}
label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}

/* Tabla base */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-family: var(--font-display); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  background: var(--cream); white-space: nowrap;
}
td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-2); }

/* Progreso */
.progress { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--primary); }

/* Mensajes flash — el semáforo completo */
.flash {
  padding: 11px 15px; border-radius: var(--radius); margin-bottom: 12px; font-size: 13.5px;
  border: 1px solid rgba(217, 31, 39, .30); border-left: 3px solid var(--primary);
  background: var(--primary-wash); color: var(--text);
}
.flash.success {
  border-color: rgba(0, 145, 75, .30); border-left-color: var(--green);
  background: var(--green-wash);
}
.flash.warning {
  border-color: #F2DE7A; border-left-color: var(--amber);
  background: var(--amber-wash);
}