/* cdfp-picker.css — Viztruck Swizzle: puertos CDFP 0-3 (2026-10-24) */
.cdfp-host { flex-basis: 100%; width: 100%; }
.cdfp-pick { margin-top: 8px; border: 1px solid #e34948; border-radius: 8px; padding: 10px; background: #fff; }
.cdfp-q { font-size: 13px; font-weight: 700; color: #222; margin-bottom: 8px; }
.cdfp-reason { font-size: 11px; font-weight: 600; color: #c62828; border: 1px solid #e34948; border-radius: 6px; padding: 1px 7px; margin-left: 4px; }
.cdfp-panel {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
    background: #e4e7ec; border: 1.5px solid #a9b0bb; border-radius: 10px; padding: 8px 10px 10px;
}
.cdfp-port { position: relative; text-align: center; min-width: 0; }
.cdfp-label { font-size: 12px; font-weight: 800; letter-spacing: .4px; color: #1f3b63; margin-bottom: 4px; }
.cdfp-btn {
    width: 100% !important; margin: 0 !important; height: 40px; padding: 0 4px !important; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px; position: relative;
    background: #f6f7f9; border: 2px solid #9aa3b0; border-radius: 7px; min-height: 40px;
}
.cdfp-btn:hover:not([disabled]) { border-color: #e34948; }
.cdfp-btn:focus-visible { outline: 2px solid #1e5fae; outline-offset: 2px; }
.cdfp-jack { width: 46px; max-width: 70%; height: 22px; background: #0b0f15; border: 1.5px solid #7d8798; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.cdfp-in { width: 70%; height: 7px; background: #1d2633; border-radius: 2px; }
.cdfp-leds { display: flex; flex-direction: column; gap: 5px; }
.cdfp-leds i { width: 7px; height: 7px; border-radius: 50%; display: block; background: #2a78d6; }
.cdfp-ck { display: none; position: absolute; top: -9px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: #e34948; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; }
.cdfp-port.on .cdfp-label { color: #c62828; }
.cdfp-port.on .cdfp-btn { border-color: #e34948; box-shadow: 0 0 0 2px rgba(227,73,72,.3); }
.cdfp-port.on .cdfp-leds i { background: #e34948; }
.cdfp-port.on .cdfp-ck { display: block; }
.cdfp-port.locked .cdfp-label { color: #8a919c; }
.cdfp-port.locked .cdfp-btn { opacity: .45; cursor: not-allowed; }
.cdfp-port.locked .cdfp-leds i { background: #8a919c; }
.cdfp-lock { font-size: 10px; color: #777; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdfp-note { font-size: 11.5px; color: #777; margin-top: 6px; }
.cdfp-qa { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 12px; }
.cdfp-mini {
    width: auto !important; margin: 0 !important; font-size: 12px; padding: 4px 11px; border-radius: 999px;
    border: 1px solid #c9cdd6; background: #fff; color: #444; cursor: pointer;
}
.cdfp-cnt { margin-left: auto; color: #666; }
.cdfp-chip { background: rgba(227,73,72,.12); color: #c62828; border-radius: 4px; padding: 1px 6px; margin-left: 4px; font-weight: 700; }
.cdfp-act { display: flex; gap: 8px; margin-top: 10px; }
.cdfp-act button { flex: 1; width: auto !important; margin: 0 !important; padding: 9px; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; min-height: 40px; }
.cdfp-cancel { background: #fff; border: 1px solid #c9cdd6; color: #444; }
.cdfp-go { background: #d93838; border: none; color: #fff; }
.cdfp-go:disabled { background: #b9bec7; cursor: not-allowed; }
.ps-ticket-ports { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: #c62828; background: rgba(227,73,72,.1); border-radius: 4px; padding: 1px 6px; }

/* ===== Dark mode ===== */
body.dark-mode .cdfp-pick { background: #252a33; border-color: #ff5a5a; }
body.dark-mode .cdfp-q { color: #f0f2f5; }
body.dark-mode .cdfp-reason { color: #ff8a8a; border-color: #ff5a5a; background: rgba(255,90,90,.12); }
body.dark-mode .cdfp-panel { background: #151a23; border-color: #3a4458; }
body.dark-mode .cdfp-label { color: #8fb8ff; }
body.dark-mode .cdfp-btn { background: #232c3c; border-color: #4a5263; }
body.dark-mode .cdfp-btn:hover:not([disabled]) { border-color: #ff5a5a; }
body.dark-mode .cdfp-leds i { background: #4da3ff; }
body.dark-mode .cdfp-port.on .cdfp-label { color: #ff7a7a; }
body.dark-mode .cdfp-port.on .cdfp-btn { border-color: #ff5a5a; box-shadow: 0 0 0 2px rgba(255,90,90,.35); }
body.dark-mode .cdfp-port.on .cdfp-leds i, body.dark-mode .cdfp-ck { background: #ff5a5a; }
body.dark-mode .cdfp-port.locked .cdfp-label, body.dark-mode .cdfp-lock, body.dark-mode .cdfp-note, body.dark-mode .cdfp-cnt { color: #a0a4ab; }
body.dark-mode .cdfp-port.locked .cdfp-leds i { background: #6b717c; }
body.dark-mode .cdfp-mini, body.dark-mode .cdfp-cancel { background: transparent; border-color: #4a5263; color: #c3c6cc; }
body.dark-mode .cdfp-chip { background: rgba(255,90,90,.15); color: #ff8a8a; }
body.dark-mode .cdfp-go:disabled { background: #4a5263; color: #a0a4ab; }
body.dark-mode .ps-ticket-ports { color: #ff8a8a; background: rgba(255,90,90,.15); }

.ps-create-row.has-cdfp { flex-wrap: wrap; }
.ps-create-btn.cdfp-active { background: #e34948 !important; border-color: #e34948 !important; color: #fff !important; }

/* MiniSAS Stonehedge: MS1 / MS0 (2026-10-25) */
.cdfp-kind-ms .cdfp-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 320px; margin: 0 auto; }
.cdfp-kind-ms .cdfp-label { font-size: 13px; }
.cdfp-kind-ms .cdfp-btn { height: 62px; min-height: 62px; gap: 8px; }
.cdfp-jack-ms { width: auto; max-width: none; height: auto; display: grid; grid-template-columns: repeat(2, 18px); gap: 4px; padding: 4px; }
.cdfp-jack-ms span { height: 16px; background: #1d2633; border-radius: 2px; position: relative; }
.cdfp-jack-ms span::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 2px; background: #b08a3c; }
.cdfp-kind-ms .cdfp-leds i { width: 8px; height: 8px; }

/* Swizzle de Bandar: nombres mas largos ("Swizzle 1") */
.cdfp-kind-swz .cdfp-label { font-size: 11.5px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ciclo Swizzle Bandar (2026-11-04): puerto ya reemplazado en el ciclo */
.cdfp-port.cdfp-rep .cdfp-label { color: #15803d; }
.cdfp-port.cdfp-rep .cdfp-btn { border-color: #16a34a; }
.cdfp-port.cdfp-rep .cdfp-leds i { background: #22c55e; }
.cdfp-port.cdfp-rep .cdfp-btn:disabled { opacity: .8; cursor: not-allowed; }
.cdfp-port.cdfp-rep.on .cdfp-label { color: #c62828; }
.cdfp-port.cdfp-rep.on .cdfp-btn { border-color: #e34948; }
.cdfp-repl { font-size: 10px; font-weight: 700; color: #15803d; margin-top: 3px; white-space: nowrap; }
.cdfp-note-rep { color: #15803d; }
body.dark-mode .cdfp-port.cdfp-rep .cdfp-label, body.dark-mode .cdfp-repl, body.dark-mode .cdfp-note-rep { color: #86efac; }
body.dark-mode .cdfp-port.cdfp-rep .cdfp-btn { border-color: #16a34a; }
body.dark-mode .cdfp-port.cdfp-rep.on .cdfp-label { color: #ff7a7a; }
body.dark-mode .cdfp-port.cdfp-rep.on .cdfp-btn { border-color: #ff5a5a; }