/* =========================
   🎨 VARIABLES (DEFAULT)
========================= */
:root {
   --radius: 12px;

    /* 🎯 NEUTRALES */
  --accent: #6b7280;        /* gris */
  --accent-hover: #4b5563;  /* gris más oscuro */
  --accent-active: #374151;

  --text-main: #1c1c1e;
  --text-soft: #737373;

  --bg: #ffffff;
  --border: #d1d5db;
}

/* =========================
   🧱 BASE
========================= */
body {
   font-family: 'Inter', sans-serif;
  font-size: 15px;
}

/* =========================
   🔤 TIPOGRAFÍA
========================= */

h1 {
  font-size: 28px;
  font-weight: 700;
}

h2 {
  font-size: 22px;
  font-weight: 600;
}

h3 {
  font-size: 18px;
  font-weight: 600;
}

p {
  color: var(--text-soft);
  line-height: 1.5;
}

.small {
  font-size: 13px;
  color: var(--text-soft);
}

/* =========================
   🔘 LAYOUTS
========================= */


/* =========================
   🧭 NAVBAR CONTROLADO
========================= */
.navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
}

.wbLienMenu {
  text-decoration: none !important;
   padding: 8px 14px !important;
  border-radius: 8px !important;
  transition: 0.3s !important;
}


/* Modo móvil */
@media (max-width: 1024px) {
  .nav-links {
    position: absolute !important;
    top: 60px !important;
    left: 0 !important;
    width: 100% !important;
    flex-direction: column !important;

    background: transparent !important; /* 👈 quitamos fondo sólido */
    backdrop-filter: blur(8px) !important;

    padding: 15px !important;
    gap: 10px !important; /* separación entre items */
  }
.wbLienMenu {
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.75) !important;
   border-radius: 0 !important;
  margin-bottom: 0 !important; /* importante */
   border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

.wbLienMenu:first-child {
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

.wbLienMenu:last-child {
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
    border-bottom: none !important;
}

.wbLienMenu:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.wbLienMenu:active,
.wbLienMenu.selected {
  background: #e65c00 !important;
  color: white !important;
}

}



/* =========================
   🔘 BOTONES
========================= */
button,
input[type="button"],
input[type="submit"],
.btn {
  border-radius: 18px !important;
  padding: 10px 18px !important;
  font-weight: 600;
   border: none;
  cursor: pointer;
  transition: all 0.2s ease !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.btn:not(.btn-select-looper):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
  filter: brightness(0.97) !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12) !important;
  filter: brightness(0.97) !important;
}

.btn-outline {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-main) !important;
}


.btn-ghost {
  border: 2px solid var(--accent) !important;
}

.btn-card-looper {
  border: 1px solid var(--accent) !important;
}

.btn-card-looper:hover {
  border: transparent !important;
  color: var(--bg) !important;
}

.btn-nav {
  background-color: #f3f4f6 !important; /* gris muy claro */
  color: #374151 !important; /* gris oscuro (casi negro) */
  font-size: 11px !important;
  padding: 6px 12px !important;
  
  border: 1px solid #d1d5db !important; /* borde sutil */
  border-radius: 6px !important;
  
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

/* Hover (cuando pasas el mouse) */
.btn-nav:hover {
  background-color: #e5e7eb !important;
  color: #111827 !important; /* más oscuro */
  border-color: #9ca3af !important;
}

/* Activo (cuando haces click) */
.btn-nav:active {
  background-color: #d1d5db !important;
}

/* Opcional: deshabilitado */
.btn-nav:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}


/* =========================
   🧾 CARDS
========================= */
.card {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  padding: 16px !important;
  transition: all 0.25s ease;
}

/* hover */
.card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}

/* =========================
   🏷️ BADGES
========================= */
.badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
}

.badge-ok {
  background: #D1FAE5;
  color: #065F46;
}

.badge-no {
  background: #FEE2E2;
  color: #991B1B;
}

.wbMenuMain .wbOptionLien:hover .wbLienMenu {  
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
  color: rgb(31, 30, 30) !important;
}

.theme-icon {
  transition: color 0.3s ease;
}

/* ===== INPUT BASE ===== */
.input,
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  background-color: var(--bg) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;

  transition: all 0.18s ease-in-out !important;
  outline: none !important;
}

/* ===== HOVER ===== */
.input:hover,
input:hover,
textarea:hover,
select:hover {
  transform: translateY(-1px) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

/* ===== FOCUS ===== */
.input:focus,
input:focus,
textarea:focus,
select:focus {
  transform: translateY(-1px) !important;

  border: 1px solid var(--accent-hover) !important;

  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.12),
    0 0 0 3px rgba(107, 114, 128, 0.25) !important;

  background-color: var(--bg) !important;
}

/* ===== ACTIVE ===== */
.input:active,
input:active {
  transform: translateY(0) !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1) !important;
}

/* ===== PLACEHOLDER ===== */
.input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--text-soft) !important;
  transition: color 0.2s ease !important;
}

.input:focus::placeholder,
input:focus::placeholder,
textarea:focus::placeholder {
  color: #d1d5db !important;
}

/* ===== DISABLED ===== */
.input:disabled,
input:disabled,
textarea:disabled {
  background-color: #f3f4f6 !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
}

.btn-delete-chip {
  height: 18px !important;
  width: 18px !important;
  padding: 0 !important;   /* 🔥 CLAVE */
  background-color: transparent !important;
}

.btn-card-postulacion {
  padding: 0 !important;
}

.btn-menu-crear-oferta {
  width: 74px !important;
  height: 28px !important;
  font-size: 11.5px !important;
  padding: 0 !important;
  font-weight: normal !important;

  text-align: center !important;
  line-height: 31px !important; /* mismo valor que height */
}