/* A-LAB — Mi plantilla. Usa alab-tokens.css, alab-ui.css y alab-shell.css.
   Las clases zone, slot, resultItem, alab-modal y squad-controls las arma MiPlantilla.js: no renombrar. */

.page--wide { max-width: none; }
[hidden] { display: none !important; }

.plantillaMainArea { display: flex; gap: 20px; align-items: stretch; min-height: 640px; }

/* Cancha ------------------------------------------------------------- */
.pitchContainer { container-type: inline-size; flex: 1; min-width: 0; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; min-height: 560px; padding: 12px; }
.pitch.horizontal {
  position: relative; width: 100%; height: 100%; min-height: 536px; overflow: hidden;
  background-color: var(--brand-tint);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 5%, rgba(27, 103, 70, .05) 5% 10%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 105 68' preserveAspectRatio='none' fill='none' stroke='%231B6746' stroke-opacity='0.45' stroke-width='0.5'%3E%3Cpath d='M52.5 0v68M0 0h105v68H0V0z'/%3E%3Ccircle cx='52.5' cy='34' r='9.15'/%3E%3Cpath d='M0 13.84h16.5v40.32H0M0 24.84h5.5v18.32H0M105 13.84H88.5v40.32h16.5M105 24.84h-5.5v18.32h5.5'/%3E%3Cpath d='M16.5 25.32a9.15 9.15 0 0 1 0 17.36M88.5 25.32a9.15 9.15 0 0 0 0 17.36'/%3E%3Ccircle cx='11' cy='34' r='0.4' fill='%231B6746' fill-opacity='0.5'/%3E%3Ccircle cx='94' cy='34' r='0.4' fill='%231B6746' fill-opacity='0.5'/%3E%3Ccircle cx='52.5' cy='34' r='0.4' fill='%231B6746' fill-opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%, 100% 100%;
  border-radius: var(--r-md);
}
.zones { position: absolute; inset: 0; z-index: 10; }

/* Cajas de posición */
.zone { position: absolute; transform: translate(-50%, -50%); width: clamp(112px, 20cqw, 200px); max-height: 96px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: 0 2px 8px rgba(17, 28, 22, .12); overflow: hidden; z-index: 5; transition: border-color .15s, box-shadow .15s; }
.zone:hover { border-color: var(--ink-3); z-index: 30; }
.zone.is-active { border: 2px solid var(--brand); box-shadow: 0 0 0 3px var(--focus), 0 4px 12px rgba(17, 28, 22, .16); z-index: 20; overflow: visible; }
.zone::before { content: attr(data-box); position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font: 600 9px/1 var(--font-data); z-index: 1; }
.zoneList:empty::after { content: "Tocá para asignar"; display: block; padding: 8px 0 0 0; font-size: 11px; color: var(--ink-3); }
.zoneHandle { display: none; cursor: grab; height: 20px; align-items: center; justify-content: center; background: var(--surface-3); color: var(--ink-3); font-size: 10px; letter-spacing: 2px; text-align: center; }
.zoneHandle::after { content: "MOVER"; font-size: 9px; font-weight: 600; letter-spacing: .08em; margin-left: 6px; }
.zones.is-editing .zoneHandle { display: flex; }
.zones.is-editing .zone { border: 1px dashed var(--brand); max-height: 120px; }
.zoneList { overflow-y: auto; padding: 5px 5px 5px 28px; display: flex; flex-direction: column; gap: 3px; min-height: 36px; height: 100%; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.zoneList::-webkit-scrollbar { width: 4px; }
.zoneList::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.zoneList .loading { font-size: 11px; color: var(--ink-3); text-align: center; margin-top: 8px; }

.slot { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: var(--surface-2); border-radius: var(--r-sm); flex-shrink: 0; }
.slot:hover { background: var(--surface-3); }
.slotRank { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; background: var(--brand); color: #fff; font: 600 10px/1 var(--font-data); flex: none; }
.slot img.slotLogo { width: 20px; height: 20px; object-fit: contain; flex: none; }
.slotName { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.slotName:hover { color: var(--brand); text-decoration: underline; }
.slotBtns { display: flex; gap: 2px; flex-shrink: 0; margin-left: auto; }
.actionBtn { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: var(--ink-3); font-size: 9px; cursor: pointer; }
.actionBtn:hover { background: var(--brand-tint-2); color: var(--brand-ink); }
.actionBtn.del:hover { background: var(--bad-bg); color: var(--bad); }

#floatingCard { position: fixed; display: none; background: var(--surface); border: 1px solid var(--line-strong); padding: 8px 12px; border-radius: var(--r-md); box-shadow: var(--shadow-float); z-index: 9999; pointer-events: none; min-width: 140px; color: var(--ink); transform: translateY(-50%); }

/* Panel de búsqueda -------------------------------------------------- */
.searchSidebar { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; max-height: 85vh; }
.addBar { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.addBar .control, .addBar .input { width: 100%; }
.addBar .input.is-locked { background: var(--brand-tint); border-color: var(--brand); }
#btnSearch { display: none !important; }
.addHint { padding: 10px 16px; font-size: var(--fs-sm); color: var(--brand-ink); text-align: center; background: var(--brand-tint); border-bottom: 1px solid var(--line); }
.resultsContainerScroll { flex: 1; overflow-y: auto; padding: 10px; }
.resultsContainerScroll::-webkit-scrollbar { width: 6px; }
.resultsContainerScroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }
.resultItem { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; transition: background-color .12s, border-color .12s; }
.resultItem:hover { background: var(--surface-2); border-color: var(--line); }
.resultItem img.miniLogo { width: 36px; height: 36px; object-fit: contain; flex: none; background: var(--surface-2); border-radius: var(--r-md); padding: 3px; }
.resultMain { flex: 1; min-width: 0; }
.resultName { font-size: var(--fs-md); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultMeta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: var(--fs-xs); color: var(--ink-3); }
.resultMetaSeparator { color: var(--line-strong); }
.resultClub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pos-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 20px; padding: 0 7px; border-radius: var(--r-sm); font: 600 10.5px/1 var(--font-data); letter-spacing: .03em; background: var(--surface-2); color: var(--ink-2); }
.pos-badge.pos-gk { background: var(--pos-gk-bg); color: var(--pos-gk); }
.pos-badge.pos-def { background: var(--pos-def-bg); color: var(--pos-def); }
.pos-badge.pos-wb { background: #DFEEF0; color: #1F6670; }
.pos-badge.pos-mid { background: var(--pos-mid-bg); color: var(--pos-mid); }
.pos-badge.pos-am { background: #EBEFD0; color: #5E6B12; }
.pos-badge.pos-att { background: var(--pos-att-bg); color: var(--pos-att); }

/* Asignación pendiente (desde Mi lista) */
#pendingAssignmentArea:not(:empty) { padding: 12px 16px 0; }
.pendingCard { background: var(--brand-tint); border: 1px solid var(--brand); border-radius: var(--r-md); padding: 10px; width: 100%; }
.pendingCard:hover { background: var(--brand-tint); border-color: var(--brand); cursor: default; }
.pendingHint { color: var(--brand-ink); font-weight: 500; white-space: normal; }
.pendingCancel { flex-shrink: 0; height: 26px; padding: 0 10px; border: 1px solid #E3B8B1; border-radius: 99px; background: var(--surface); color: var(--bad); font: 500 11px/1 var(--font-ui); cursor: pointer; }
.pendingCancel:hover { background: var(--bad-bg); }

/* Formaciones guardadas ----------------------------------------------- */
.squad-controls { display: flex; align-items: center; gap: 6px; margin-right: 6px; }
#squadSelect { height: 38px; min-width: 150px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: 500 var(--fs-md)/1 var(--font-ui); cursor: pointer; }
#squadSelect:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus); }
#btnNewSquad, #btnDeleteSquad { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink-2); font-size: 18px; cursor: pointer; }
#btnNewSquad:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-ink); }
#btnDeleteSquad { font-size: 14px; }
#btnDeleteSquad:hover { background: var(--bad-bg); border-color: #E3B8B1; color: var(--bad); }

/* Modal nueva formación */
.alab-modal-overlay { position: fixed; inset: 0; background: rgba(17, 28, 22, .42); display: none; align-items: center; justify-content: center; z-index: 10000; padding: 16px; }
.alab-modal { background: var(--surface); border: 1px solid var(--line); width: min(380px, 100%); padding: 24px; border-radius: var(--r-lg); box-shadow: var(--shadow-float); }
.alab-modal h3 { margin: 0 0 14px; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.01em; }
.alab-modal input { width: 100%; height: 40px; padding: 0 12px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--ink); font-size: var(--fs-md); }
.alab-modal input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus); }
.alab-modal-btns { display: flex; gap: 10px; justify-content: flex-end; }
.alab-modal-btn { height: 36px; padding: 0 16px; border-radius: var(--r-md); cursor: pointer; font: 500 var(--fs-md)/1 var(--font-ui); border: 1px solid transparent; }
.alab-modal-btn.cancel { background: var(--surface); border-color: var(--line-strong); color: var(--ink-2); }
.alab-modal-btn.cancel:hover { background: var(--surface-2); color: var(--ink); }
.alab-modal-btn.confirm { background: var(--brand); color: #fff; }
.alab-modal-btn.confirm:hover { background: var(--brand-hover); }

@media (max-width: 1400px) {
  .plantillaMainArea { flex-direction: column; }
  .pitchContainer { flex: none; width: 100%; min-height: 600px; }
  .searchSidebar { width: 100%; max-height: none; flex: none; }
  .resultsContainerScroll { max-height: 420px; }
}
@media (max-width: 900px) {
  .slotName { font-size: 10px; }
}
@media (max-width: 640px) {
  .pitchContainer { padding: 6px; min-height: 520px; }
  .squad-controls { width: 100%; margin: 0 0 6px; }
  #squadSelect { flex: 1; }
}