/* busbar-reasons.css — motivos de ticket de Bus Bar + modal "¿Se reemplazó?" (2026-10-14) */

/* Fila de "Pedir nuevo" de Bus Bar en el panel del POD: 4 motivos no caben
   al lado del nombre, se apilan debajo. */
.ps-create-row.ps-create-row-busbar { flex-direction: column; align-items: stretch; gap: 6px; }
.ps-create-row-busbar .ps-create-reason-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ps-create-row-busbar .ps-create-btn { white-space: normal; line-height: 1.25; padding: 6px 8px; }
.ps-create-row-busbar .ps-create-btn.bb-create-damaged { border-color: #C62828; color: #C62828; }
.ps-create-row-busbar .ps-create-btn.bb-create-damaged:hover { background: rgba(198,40,40,0.06); }

/* Etiqueta de motivo (Pending Requests) */
.bb-reason-badge {
    display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 10px; font-weight: 600;
    margin-left: 4px; vertical-align: middle; border: 1px solid transparent;
}
.bb-reason-damaged          { background: #FF0000; color: #fff; }
.bb-reason-needs_inspection { background: #FFF4D6; color: #7A5600; border-color: #E8C670; }
.bb-reason-no_power         { background: #E7ECF3; color: #34495E; border-color: #B8C4D3; }
.bb-reason-debris           { background: #F1E8DF; color: #6B4A2B; border-color: #D3BFA9; }

/* Modal "¿Se reemplazó la barra?" */
.bb-replaced-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    z-index: 10030; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.bb-replaced-modal {
    background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    width: 380px; max-width: 100%; padding: 20px; text-align: center;
}
.bb-replaced-icon {
    width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(60,52,137,0.1); color: #3C3489; font-size: 20px;
}
.bb-replaced-title { font-size: 15px; font-weight: 700; color: #222; margin-bottom: 6px; }
.bb-replaced-meta { font-size: 12px; color: #555; line-height: 1.5; margin-bottom: 12px; }
.bb-replaced-hint {
    text-align: left; font-size: 11.5px; color: #555; line-height: 1.55;
    background: #f6f7f9; border-radius: 8px; padding: 8px 10px; margin-bottom: 16px;
}
.bb-replaced-actions { display: flex; gap: 8px; }
.bb-replaced-btn {
    flex: 1; padding: 9px 6px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer;
    width: auto !important; margin-top: 0 !important; border: 1px solid #ccc; background: #fff; color: #555;
}
.bb-replaced-no  { border-color: #3C3489; color: #3C3489; }
.bb-replaced-yes { background: #3C3489; border-color: #3C3489; color: #fff; }
.bb-replaced-btn:hover { filter: brightness(0.96); }

@media (max-width: 420px) {
    .bb-replaced-actions { flex-direction: column-reverse; }
}

/* ===== Dark mode ===== */
body.dark-mode .ps-create-row-busbar .ps-create-btn.bb-create-damaged { border-color: #F87171; color: #F87171; background: #1e222a; }
body.dark-mode .bb-reason-needs_inspection { background: #3a3016; color: #F3D27A; border-color: #6b5520; }
body.dark-mode .bb-reason-no_power         { background: #252d38; color: #B8C7DA; border-color: #3d4a5c; }
body.dark-mode .bb-reason-debris           { background: #33291f; color: #DDBF9F; border-color: #5c4632; }
body.dark-mode .bb-replaced-modal { background: #1e222a; }
body.dark-mode .bb-replaced-icon  { background: rgba(139,127,214,0.18); color: #b8b0ea; }
body.dark-mode .bb-replaced-title { color: #e2e4e8; }
body.dark-mode .bb-replaced-meta  { color: #a0a4ab; }
body.dark-mode .bb-replaced-meta strong { color: #e2e4e8; }
body.dark-mode .bb-replaced-hint  { background: #252a33; color: #a0a4ab; }
body.dark-mode .bb-replaced-hint strong { color: #e2e4e8; }
body.dark-mode .bb-replaced-btn   { background: #252a33; border-color: #383d47; color: #a0a4ab; }
body.dark-mode .bb-replaced-no    { border-color: #8b7fd6; color: #b8b0ea; }
body.dark-mode .bb-replaced-yes   { background: #5a4fb8; border-color: #5a4fb8; color: #fff; }

/* ===== Modal de cierre: reemplazo + comentario + foto (2026-10-16b) ===== */
.bb-close-modal { width: 420px; text-align: left; max-height: calc(100vh - 32px); overflow-y: auto; }
.bb-close-modal .bb-replaced-title, .bb-close-modal .bb-replaced-meta { text-align: center; }
.bb-close-progress { text-align: center; font-size: 11px; font-weight: 700; color: #3C3489; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.bb-close-label { font-size: 12px; font-weight: 700; color: #333; margin: 12px 0 6px; }
.bb-req { color: #C62828; }
.bb-opt { color: #999; font-weight: 400; }
.bb-close-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bb-choice {
    text-align: left; border: 1.5px solid #ddd; border-radius: 8px; background: #fff; padding: 9px 10px; cursor: pointer;
    width: auto !important; margin-top: 0 !important; display: flex; flex-direction: column; gap: 3px; color: #333;
}
.bb-choice strong { font-size: 12.5px; }
.bb-choice span { font-size: 11px; color: #777; line-height: 1.35; }
.bb-choice.selected { border-color: #3C3489; background: rgba(60,52,137,0.07); box-shadow: 0 0 0 2px rgba(60,52,137,0.15); }
.bb-close-comment {
    width: 100%; box-sizing: border-box; border: 1px solid #ccc; border-radius: 8px; padding: 8px 10px;
    font: inherit; font-size: 13px; resize: vertical; min-height: 64px; color: #222; background: #fff;
}
.bb-close-comment:focus { outline: none; border-color: #3C3489; box-shadow: 0 0 0 2px rgba(60,52,137,0.15); }
.bb-close-photo {
    display: flex; align-items: center; justify-content: center; min-height: 64px; border: 1.5px dashed #bbb; border-radius: 8px;
    cursor: pointer; color: #555; font-size: 12.5px; font-weight: 600; overflow: hidden; background: #fafafa;
}
.bb-close-photo input { display: none; }
.bb-close-photo-empty i { font-size: 18px; vertical-align: -3px; margin-right: 4px; }
.bb-close-preview { display: block; max-width: 100%; max-height: 220px; object-fit: contain; }
.bb-close-photo-remove {
    margin-top: 6px !important; width: auto !important; background: none; border: none; color: #C62828; font-size: 11.5px; cursor: pointer; padding: 0;
}
.bb-close-error { margin: 10px 0 0; font-size: 12px; color: #C62828; background: rgba(198,40,40,0.07); border-radius: 6px; padding: 7px 9px; }
.bb-close-modal .bb-replaced-actions { margin-top: 16px; }

body.dark-mode .bb-close-progress { color: #b8b0ea; }
body.dark-mode .bb-close-label { color: #e2e4e8; }
body.dark-mode .bb-choice { background: #252a33; border-color: #383d47; color: #e2e4e8; }
body.dark-mode .bb-choice span { color: #a0a4ab; }
body.dark-mode .bb-choice.selected { border-color: #8b7fd6; background: rgba(139,127,214,0.14); box-shadow: 0 0 0 2px rgba(139,127,214,0.2); }
body.dark-mode .bb-close-comment { background: #252a33; border-color: #383d47; color: #e2e4e8; }
body.dark-mode .bb-close-photo { background: #20242c; border-color: #4a505c; color: #a0a4ab; }
body.dark-mode .bb-close-error { color: #F87171; background: rgba(248,113,113,0.1); }
.bb-close-modal [hidden] { display: none !important; }
body.dark-mode .bb-close-modal .bb-req { color: #F87171 !important; }
body.dark-mode .bb-close-modal .bb-opt { color: #8a919c !important; }
/* X para cerrar (el modal ya no se cierra con clic afuera ni Esc) */
.bb-close-modal { position: relative; }
.bb-close-x {
    position: absolute; top: 8px; right: 10px; width: 30px !important; height: 30px; margin: 0 !important; padding: 0;
    border: none; background: none; font-size: 24px; line-height: 1; color: #888; cursor: pointer; border-radius: 6px;
}
.bb-close-x:hover { background: rgba(0,0,0,0.06); color: #333; }
body.dark-mode .bb-close-x { color: #a0a4ab; }
body.dark-mode .bb-close-x:hover { background: rgba(255,255,255,0.08); color: #fff; }