/* ============================================================ */
/* BREEDING SYSTEM — Centro de Crianza                          */
/* ============================================================ */
.breed-topbar { display:flex; justify-content:flex-end; gap:15px; padding:6px 10px; font-size:0.75rem; color:#fbbf24; border-bottom:1px solid var(--tibia-border-gold); }
.breed-topbar-gold, .breed-topbar-item { background:rgba(0,0,0,0.5); padding:3px 10px; border-radius:4px; border:1px solid #333; }
.breed-main { display:flex; gap:8px; padding:8px; min-height:260px; }
.breed-col { background:rgba(0,0,0,0.3); border:1px solid #2a2d33; border-radius:6px; padding:8px; }
.breed-col-pair { flex:0 0 200px; display:flex; flex-direction:column; }
.breed-col-analysis { flex:1; }
.breed-col-incubator { flex:0 0 220px; display:flex; flex-direction:column; gap:6px; }
.breed-section-title { font-family:'VT323',monospace; font-size:0.85rem; color:var(--tibia-border-gold); margin-bottom:8px; letter-spacing:1px; }
.breed-pair-slots { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; }
.breed-pair-plus { font-size:1.2rem; color:#555; }
.breed-slot { width:100%; background:rgba(0,0,0,0.4); border:2px dashed #3e3f42; border-radius:8px; padding:8px; text-align:center; position:relative; cursor:pointer; transition:border-color 0.2s; }
.breed-slot:hover { border-color:var(--tibia-border-gold); }
.breed-slot-filled { border:2px solid var(--tibia-border-gold); background:rgba(198,161,82,0.08); }
.breed-slot-label { font-family:'VT323',monospace; font-size:0.7rem; color:#94a3b8; text-align:left; }
.breed-slot-sprite { width:56px; height:56px; image-rendering:pixelated; filter:drop-shadow(0 0 4px rgba(255,215,0,0.3)); }
.breed-slot-name { font-size:0.7rem; color:#e2e8f0; font-weight:600; margin-top:2px; }
.breed-slot-stats { font-size:0.6rem; color:#94a3b8; display:flex; justify-content:center; gap:8px; margin-top:2px; }
.breed-slot-placeholder { font-size:2rem; color:#3e3f42; margin:10px 0; }
.breed-slot-hint { font-size:0.6rem; color:#555; }
.breed-slot-remove { position:absolute; top:2px; right:4px; background:none; border:none; color:#ef4444; cursor:pointer; font-size:0.8rem; opacity:0.6; }
.breed-slot-remove:hover { opacity:1; }
.breed-warning { font-size:0.55rem; color:#f87171; margin-top:8px; padding:6px; background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.2); border-radius:4px; line-height:1.4; }
.breed-analysis-empty { text-align:center; color:#94a3b8; padding:20px 10px; font-size:0.7rem; line-height:1.6; }
.breed-analysis-compat { padding:6px 10px; border-radius:4px; font-size:0.75rem; font-weight:600; margin-bottom:8px; }
.breed-compat-ok { background:rgba(34,197,94,0.1); color:#4ade80; border:1px solid rgba(34,197,94,0.3); }
.breed-compat-fail { background:rgba(239,68,68,0.1); color:#f87171; border:1px solid rgba(239,68,68,0.3); }
.breed-analysis-cost { display:flex; align-items:center; gap:8px; font-size:0.75rem; color:#e2e8f0; padding:6px 10px; background:rgba(0,0,0,0.3); border-radius:4px; margin-bottom:8px; }
.breed-cost-fail { color:#f87171; }
.breed-cost-ok { color:#4ade80; }
.breed-cost-no { color:#f87171; font-size:0.65rem; }
.breed-analysis-box { background:rgba(0,0,0,0.3); border:1px solid #2a2d33; border-radius:6px; padding:10px; margin-bottom:8px; }
.breed-analysis-label { font-size:0.65rem; color:#94a3b8; }
.breed-analysis-range { font-size:0.8rem; color:#e2e8f0; font-weight:600; margin-top:2px; }
.breed-range-phero { color:#a855f7; }
.breed-actions { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.breed-btn { padding:8px 16px; border:none; border-radius:6px; cursor:pointer; font-family:'VT323',monospace; font-size:0.85rem; letter-spacing:1px; transition:all 0.2s; }
.breed-btn:disabled { opacity:0.4; cursor:not-allowed; }
.breed-btn-primary { background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; border:1px solid #fbbf24; }
.breed-btn-primary:hover:not(:disabled) { box-shadow:0 0 12px rgba(245,158,11,0.5); transform:translateY(-1px); }
.breed-btn-phero { background:linear-gradient(135deg,#a855f7,#7c3aed); color:#fff; border:1px solid #c084fc; }
.breed-btn-phero:hover:not(:disabled) { box-shadow:0 0 12px rgba(168,85,247,0.5); transform:translateY(-1px); }
.breed-error-msg { font-size:0.6rem; color:#f87171; margin-top:4px; text-align:center; }
.breed-steps { display:flex; flex-direction:column; gap:8px; margin-top:12px; text-align:left; }
.breed-step { display:flex; align-items:flex-start; gap:8px; font-size:0.65rem; color:#cbd5e1; }
.breed-step-num { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--tibia-border-gold); color:#000; font-weight:700; font-size:0.65rem; flex-shrink:0; }
.breed-incubator-slot { display:flex; align-items:center; gap:8px; padding:8px; border-radius:6px; border:1px solid #2a2d33; background:rgba(0,0,0,0.3); }
.breed-slot-active { border-color:var(--tibia-border-gold); background:rgba(198,161,82,0.06); }
.breed-slot-empty .breed-incubator-empty-icon { font-size:1.2rem; color:#3e3f42; margin-right:4px; }
.breed-slot-empty span { font-size:0.7rem; color:#555; }
.breed-incubator-sprite { width:36px; height:36px; image-rendering:pixelated; filter:brightness(0.5) sepia(1) hue-rotate(30deg); }
.breed-incubator-info { flex:1; }
.breed-incubator-name { font-size:0.7rem; color:#e2e8f0; font-weight:600; }
.breed-incubator-kills { font-size:0.6rem; color:#94a3b8; margin:2px 0; }
.breed-incubator-bar { height:4px; background:#1e293b; border-radius:2px; overflow:hidden; }
.breed-incubator-fill { height:100%; background:linear-gradient(90deg,#f59e0b,#22c55e); border-radius:2px; transition:width 0.3s; }
.breed-stats { font-size:0.6rem; color:#64748b; margin-top:auto; padding-top:6px; border-top:1px solid #1e293b; display:flex; justify-content:space-between; }
.breed-box-section { border-top:1px solid var(--tibia-border-gold); padding:8px; }
.breed-box-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.breed-search { flex:1; min-width:150px; padding:5px 10px; background:rgba(0,0,0,0.5); border:1px solid #3e3f42; border-radius:4px; color:#e2e8f0; font-size:0.7rem; outline:none; }
.breed-search:focus { border-color:var(--tibia-border-gold); }
.breed-sort { padding:5px 8px; background:rgba(0,0,0,0.5); border:1px solid #3e3f42; border-radius:4px; color:#e2e8f0; font-size:0.65rem; outline:none; }
.breed-box-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(75px,1fr)); gap:6px; max-height:200px; overflow-y:auto; padding:2px; }
.breed-box-grid::-webkit-scrollbar { width:4px; }
.breed-box-grid::-webkit-scrollbar-thumb { background:#3e3f42; border-radius:2px; }
.breed-box-card { background:rgba(0,0,0,0.4); border:1px solid #2a2d33; border-radius:6px; padding:4px; text-align:center; cursor:pointer; transition:all 0.2s; }
.breed-box-card:hover { border-color:var(--tibia-border-gold); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.5); }
.breed-card-selected { border-color:#f59e0b !important; background:rgba(245,158,11,0.1); box-shadow:0 0 8px rgba(245,158,11,0.3); }
.breed-card-shiny { border-color:#fbbf24; }
.breed-box-sprite { width:48px; height:48px; image-rendering:pixelated; }
.breed-box-name { font-size:0.55rem; color:#e2e8f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.breed-box-info { font-size:0.5rem; color:#94a3b8; display:flex; justify-content:center; gap:4px; }
.breed-box-lvl { font-size:0.5rem; color:#64748b; }
.breed-box-empty { text-align:center; color:#555; font-size:0.7rem; padding:20px; grid-column:1/-1; }


/* ══════════════════════════════════════════════════
   MOBILE RESPONSIVE (.device-mobile)
   ══════════════════════════════════════════════════ */
.device-mobile .breed-main {
  flex-direction: column !important;
  gap: 6px !important;
  min-height: auto !important;
  padding: 6px !important;
}
.device-mobile .breed-col-pair {
  flex: none !important;
  width: 100% !important;
}
.device-mobile .breed-col-analysis {
  flex: none !important;
  width: 100% !important;
}
.device-mobile .breed-col-incubator {
  flex: none !important;
  width: 100% !important;
}
.device-mobile .breed-pair-slots {
  flex-direction: row !important;
  gap: 6px !important;
}
.device-mobile .breed-slot {
  padding: 6px !important;
}
.device-mobile .breed-slot-sprite {
  width: 44px !important;
  height: 44px !important;
}
.device-mobile .breed-btn {
  min-height: 44px !important;
  font-size: 0.78rem !important;
}
.device-mobile .breed-box-grid {
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)) !important;
  max-height: 150px !important;
}
.device-mobile .breed-box-sprite {
  width: 38px !important;
  height: 38px !important;
}
.device-mobile .breed-box-name {
  font-size: 0.5rem !important;
}
.device-mobile .breed-topbar {
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-size: 0.65rem !important;
}
.device-mobile .breed-section-title {
  font-size: 0.72rem !important;
}
.device-mobile .breed-search {
  min-width: 100px !important;
}