:root {
  --color-bg: #f4f7f8;
  --color-surface: #ffffff;
  --color-text: #101a23;
  --color-text-muted: #64748b;
  --color-border: #e2e8ec;
  --color-primary: #0d9488;
  --color-primary-hover: #0b7a70;
  --color-success: #1a8f4c;
  --color-danger: #d64545;
  --color-warning: #b8860b;
  --color-navy: #0b1f33;
  --color-navy-light: #16324f;
  --color-teal: #14b8a6;
  --color-teal-bright: #2dd4bf;
  --gradient-brand: linear-gradient(135deg, var(--color-navy) 0%, var(--color-teal) 65%, var(--color-teal-bright) 100%);
  --radius: 8px;
  --spacing: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #10151a;
    --color-surface: #1a2028;
    --color-text: #e7e9ee;
    --color-text-muted: #9096a3;
    --color-border: #2a323c;
    --color-primary: #2dd4bf;
    --color-primary-hover: #5eead4;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

a {
  color: var(--color-primary);
}

h1, h2, h3 {
  margin-top: 0;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--spacing);
}

input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
}

label {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.field {
  margin-bottom: var(--spacing);
}

button, .btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--color-primary);
  color: white;
}

button:hover, .btn:hover {
  background: var(--color-primary-hover);
}

button.secundario {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th, td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-border);
}

th {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
}

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge-borrador, .badge-generado, .badge-firmado { background: #e5e7eb; color: #374151; }
.badge-enviado, .badge-procesando { background: #fef3c7; color: var(--color-warning); }
.badge-aceptado { background: #d1fae5; color: var(--color-success); }
.badge-rechazado, .badge-error { background: #fee2e2; color: var(--color-danger); }

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-width: 320px;
}

.toast.error { border-color: var(--color-danger); color: var(--color-danger); }
.toast.success { border-color: var(--color-success); color: var(--color-success); }

/* Marca "Fact by TCF Systems" — el logo se diseñó para fondo claro (texto
   navy sin contorno); se le da su propia tarjeta blanca para que siga
   legible tanto en el sidebar navy como en modo oscuro. */
.marca {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  padding: 8px 14px;
  border-radius: var(--radius);
}

.marca-logo {
  height: 34px;
  width: auto;
  display: block;
}