/* app/assets/css/instructors.css — Instructores: listado y ficha (tarea #76)
   Misma paleta que la home nueva y el menú móvil (home-v2.css / mobile-menu.css):
   azul noche #1E2532 / #262E3D + lima #C2F858 / #EBF8A4, Inter, borde degradado de .btn-outline.
   Todo acotado a .wfi (contenedor de instructors.js e instructor-profile.js): no afecta al resto de la web.
   El lima va de fondo con texto oscuro o como acento sobre azul noche, nunca como texto sobre fondo claro. */
.wfi{
  --wfi-bg:#262E3D; --wfi-bg-2:#1E2532; --wfi-bg-3:#161B25;
  --wfi-card:rgba(255,255,255,.06); --wfi-card-2:rgba(255,255,255,.09);
  --wfi-borde:rgba(235,248,164,.18); --wfi-borde-2:rgba(255,255,255,.10);
  --wfi-lima:#C2F858; --wfi-lima-hover:#B5F536; --wfi-lima-suave:#EBF8A4; --wfi-tinta:#1E2532;
  --wfi-txt:#FFFFFF; --wfi-txt-2:#CBD5E1; --wfi-txt-3:#94A3B8; --wfi-rojo:#FCA5A5;
  --wfi-ease:cubic-bezier(0.23,1,0.32,1);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--wfi-txt);
}
.wfi :focus-visible{outline:3px solid var(--wfi-lima);outline-offset:2px}

/* ---------- Cabecera de página ---------- */
.wfi .page-header{
  background:radial-gradient(70% 90% at 85% 10%,rgba(194,248,88,.14),transparent 60%),linear-gradient(180deg,var(--wfi-bg-3) 0%,var(--wfi-bg-2) 100%);
  border:1px solid var(--wfi-borde);border-radius:20px;padding:32px 28px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
}
.wfi .page-header::before{opacity:.15}
.wfi .page-header > div{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.wfi .page-header h1{font-size:clamp(28px,4.4vw,40px);font-weight:900;letter-spacing:-.03em;line-height:1.08;color:#fff;text-shadow:none}
.wfi .page-header p{color:var(--wfi-txt-2);text-shadow:none;opacity:1}

/* ---------- Botones de la web dentro de Instructores ---------- */
.wfi .btn{min-height:44px;padding:0 18px;border-radius:999px;font-weight:700;font-size:15px;margin-left:0;
  transition:transform 140ms var(--wfi-ease),background-color 200ms ease,box-shadow 200ms ease,color 200ms ease}
.wfi .btn:active{transform:scale(.97)}
.wfi .btn-sm{min-height:38px;padding:0 14px;font-size:14px}
.wfi .btn-primary{background:var(--wfi-lima);color:var(--wfi-tinta);box-shadow:0 10px 30px -12px rgba(194,248,88,.55)}
.wfi .btn-primary:hover{background:var(--wfi-lima-hover)}
/* .btn-outline mantiene su borde degradado animado; solo cambia el texto y la forma */
.wfi .btn-outline{color:var(--wfi-lima-suave);background:rgba(255,255,255,.04);border-radius:999px}
.wfi .btn-outline::before{border-radius:999px}
.wfi .btn-outline:hover{color:#fff;transform:none;box-shadow:0 0 0 4px rgba(194,248,88,.10)}
.wfi .btn-error{background:rgba(252,165,165,.14);color:var(--wfi-rojo);border:1.5px solid rgba(252,165,165,.4)}
.wfi .btn-success{background:var(--wfi-lima);color:var(--wfi-tinta)}

/* ---------- Filtros (listado) ---------- */
.wfi .filters-section{
  background:radial-gradient(120% 120% at 0% 0%,rgba(194,248,88,.06) 0%,rgba(194,248,88,0) 55%),var(--wfi-bg-2);
  border:1px solid var(--wfi-borde-2);border-radius:20px;padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.wfi .filters-section > .grid{align-items:end}
.wfi .filters-section .mt-8{margin-top:0;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.wfi .form-label{display:block;margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wfi-txt-3)}
.wfi .form-input,.wfi .form-select{width:100%;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--wfi-borde-2);
  background:rgba(255,255,255,.05);color:var(--wfi-txt);font:inherit;font-size:14px;outline:none;box-shadow:none}
.wfi .form-input::placeholder{color:var(--wfi-txt-3)}
.wfi .form-input:focus,.wfi .form-select:focus{border-color:var(--wfi-lima);box-shadow:0 0 0 3px rgba(194,248,88,.18)}
.wfi .form-select option{background:var(--wfi-bg-2);color:var(--wfi-txt)}
.wfi .filters-section .fa-search{color:var(--wfi-txt-3)}

/* ---------- Textos utilitarios (Tailwind) sobre fondo oscuro ---------- */
.wfi .text-gray-500,.wfi .text-gray-600{color:var(--wfi-txt-3)}
.wfi .text-gray-700{color:var(--wfi-txt-2)}
.wfi .text-gray-900{color:#fff}
.wfi .text-verde-600{color:var(--wfi-txt-3)}
.wfi .text-blue-600{color:var(--wfi-lima)}
.wfi .hover\:text-blue-800:hover,.wfi .hover\:text-gray-600:hover{color:var(--wfi-lima-suave)}
.wfi .text-yellow-500{color:var(--wfi-lima)}
.wfi .font-semibold{color:inherit}

/* ---------- Tarjeta de instructor (listado) ---------- */
.wfi .instructor-card-modern{display:flex;flex-direction:column;background:var(--wfi-bg-2);border:1px solid var(--wfi-borde-2);border-radius:20px;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.7);transition:transform 250ms var(--wfi-ease),border-color 250ms ease,box-shadow 250ms ease}
.wfi .instructor-card-modern.featured{animation:none;border:1px solid var(--wfi-borde);
  background:linear-gradient(180deg,rgba(194,248,88,.07) 0%,rgba(194,248,88,0) 40%),var(--wfi-bg-2)}
@media (hover:hover) and (pointer:fine){
  .wfi .instructor-card-modern:hover{transform:translateY(-4px);border-color:rgba(194,248,88,.45);box-shadow:0 18px 40px rgba(0,0,0,.45)}
}
.wfi .instructor-header{background:radial-gradient(80% 100% at 50% 0%,rgba(194,248,88,.12),transparent 70%),var(--wfi-bg-3);border-bottom:1px solid var(--wfi-borde-2)}
.wfi .instructor-avatar-modern{border:3px solid var(--wfi-lima);box-shadow:0 10px 30px -10px rgba(194,248,88,.45);background:var(--wfi-bg)}
.wfi .instructor-status{border-color:var(--wfi-bg-3)}
.wfi .instructor-status.online{background:var(--wfi-lima)}
.wfi .instructor-status.away{background:#FCD34D}
.wfi .instructor-status.offline{background:#64748B}
.wfi .quick-action-btn{background:rgba(30,37,50,.86);color:var(--wfi-txt-2);border:1px solid var(--wfi-borde-2);box-shadow:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wfi .quick-action-btn:hover{background:var(--wfi-bg);color:#fff;transform:none;box-shadow:none}
.wfi .quick-action-btn:active{transform:scale(.95)}
.wfi .favorite-btn-modern.active{background:var(--wfi-lima);color:var(--wfi-tinta);border-color:var(--wfi-lima)}
.wfi .share-btn:hover{background:var(--wfi-lima);color:var(--wfi-tinta);border-color:var(--wfi-lima)}
.wfi .verified-badge{background:var(--wfi-lima);color:var(--wfi-tinta);box-shadow:0 6px 16px -6px rgba(194,248,88,.6)}

/* Insignias (Premium, Destacado, Top, Nuevo): pastillas de la marca */
.wfi .instructor-badge-modern{color:var(--wfi-tinta);box-shadow:0 6px 16px -8px rgba(0,0,0,.6);font-weight:800;letter-spacing:.02em}
.wfi .instructor-badge-modern.premium{background:#FCD34D}
.wfi .instructor-badge-modern.featured{background:var(--wfi-lima)}
.wfi .instructor-badge-modern.top-rated{background:var(--wfi-lima-suave)}
.wfi .instructor-badge-modern.new{background:#fff}

.wfi .instructor-info{padding:16px 16px 0}
.wfi .instructor-name-modern{color:#fff;font-weight:800;letter-spacing:-.01em}
.wfi .instructor-title-modern{color:var(--wfi-txt-3)}
.wfi .instructor-rating-modern{margin:0 0 12px;padding:6px 0}
.wfi .star-filled,.wfi .star-half{color:var(--wfi-lima)}
.wfi .star-empty{color:rgba(255,255,255,.18)}
.wfi .rating-text{color:#fff;font-weight:700}
.wfi .rating-count{color:var(--wfi-txt-3)}

/* Especialidades: etiquetas neutras con acento lima (antes un color distinto por especialidad) */
.wfi .specialization-tag-modern,
.wfi .spec-red,.wfi .spec-blue,.wfi .spec-purple,.wfi .spec-pink,.wfi .spec-orange,.wfi .spec-green,.wfi .spec-teal,.wfi .spec-gray,.wfi .more-specs{
  background:rgba(255,255,255,.06);color:var(--wfi-txt-2);border:1px solid var(--wfi-borde-2)}
.wfi .instructor-specializations-modern .specialization-tag-modern:first-child{background:rgba(194,248,88,.12);color:var(--wfi-lima-suave);border-color:var(--wfi-borde)}
.wfi .specialization-tag-modern:hover{transform:none;box-shadow:none}

.wfi .instructor-stats-modern{gap:8px;padding:0 16px 14px}
.wfi .stat-modern{background:var(--wfi-card);border:1px solid var(--wfi-borde-2);border-radius:14px}
.wfi .stat-modern:hover{background:var(--wfi-card-2);border-color:var(--wfi-borde);transform:none}
.wfi .stat-icon{background:rgba(194,248,88,.14);color:var(--wfi-lima);border-radius:10px}
.wfi .stat-value-modern{color:#fff}
.wfi .stat-label-modern{color:var(--wfi-txt-3)}

.wfi .instructor-meta{padding:0 16px 14px}
.wfi .meta-item{background:var(--wfi-card);color:var(--wfi-txt-2);border-radius:12px}
.wfi .meta-item i{color:var(--wfi-lima)}
.wfi .meta-item.price{background:rgba(194,248,88,.12);color:var(--wfi-lima-suave)}
.wfi .meta-item.price i{color:var(--wfi-lima)}

.wfi .instructor-actions-modern{margin-top:auto;background:rgba(0,0,0,.18);border-top:1px solid var(--wfi-borde-2);padding:12px 16px;gap:10px}
.wfi .btn-action-secondary,.wfi .btn-action-primary{flex:1;min-height:44px;border-radius:999px;font-weight:700;
  transition:transform 140ms var(--wfi-ease),background-color 200ms ease,color 200ms ease,border-color 200ms ease}
.wfi .btn-action-secondary{background:rgba(255,255,255,.04);color:var(--wfi-txt-2);border:1.5px solid var(--wfi-borde-2)}
.wfi .btn-action-secondary:first-child{background:var(--wfi-lima);color:var(--wfi-tinta);border-color:var(--wfi-lima)}
.wfi .btn-action-secondary:hover{background:var(--wfi-card-2);color:#fff;border-color:var(--wfi-borde);transform:none}
.wfi .btn-action-secondary:first-child:hover{background:var(--wfi-lima-hover);color:var(--wfi-tinta);border-color:var(--wfi-lima-hover)}
.wfi .btn-action-secondary:active,.wfi .btn-action-primary:active{transform:scale(.97)}
.wfi .btn-action-primary{background:var(--wfi-lima);color:var(--wfi-tinta)}
.wfi .btn-action-primary:hover{background:var(--wfi-lima-hover);transform:none;box-shadow:none}

/* Paginación */
.wfi .pagination-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:8px 0 24px}
.wfi .pagination-numbers{display:flex;gap:6px}
.wfi .pagination-number{min-width:44px;height:44px;border-radius:12px;border:1px solid var(--wfi-borde-2);background:var(--wfi-card);color:var(--wfi-txt-2);font-weight:700;cursor:pointer}
.wfi .pagination-number:hover{background:var(--wfi-card-2);color:#fff}
.wfi .pagination-number.active{background:var(--wfi-lima);border-color:var(--wfi-lima);color:var(--wfi-tinta)}

/* ---------- Ficha del instructor: desde la tarea #78 tiene su propia hoja, instructor-profile.css (.wfp-) ---------- */

@media (max-width:767px){
  .wfi .page-header{padding:22px 18px;border-radius:16px}
  .wfi .filters-section{padding:14px;border-radius:16px}
  .wfi .filters-section .mt-8 .btn{flex:1 1 calc(50% - 5px)}
}
@media (prefers-reduced-motion:reduce){
  .wfi .instructor-card-modern,.wfi .btn,.wfi .btn-action-secondary,.wfi .btn-action-primary{transition:none}
  .wfi .btn-outline::before{animation:none}
}