/* === POD RACKS/SLOTS PANEL === */

.ps-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0);
    z-index: 10000;
    transition: background 0.32s ease;
}
.ps-overlay.ps-overlay-visible { background: rgba(0,0,0,0.55); }

.ps-panel {
    position: fixed;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: top 0.32s cubic-bezier(0.2,0.8,0.2,1), left 0.32s cubic-bezier(0.2,0.8,0.2,1),
                width 0.32s cubic-bezier(0.2,0.8,0.2,1), height 0.32s cubic-bezier(0.2,0.8,0.2,1),
                opacity 0.22s ease;
}

.ps-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #eee; flex-shrink: 0;
}
.ps-panel-title { font-size: 16px; font-weight: 600; color: #222; }
.ps-panel-actions { display: flex; align-items: center; gap: 10px; }
.ps-export-check {
    display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #666;
    cursor: pointer; white-space: nowrap;
}
.ps-export-check input { width: 14px; height: 14px; accent-color: #185FA5; cursor: pointer; }
.ps-export-btn {
    border: 1px solid #185FA5; background: #fff; color: #185FA5; font-size: 12px; font-weight: 600;
    cursor: pointer; padding: 6px 12px; border-radius: 6px; width: auto !important; margin-top: 0 !important;
    display: inline-flex; align-items: center; gap: 5px;
}
.ps-export-btn:hover { background: rgba(24,95,165,0.06); }
.ps-close-btn {
    border: none; background: transparent; font-size: 18px; line-height: 1;
    cursor: pointer; color: #888; padding: 4px; width: auto !important;
}
.ps-close-btn:hover { color: #333; }

.ps-panel-body { padding: 18px; overflow-y: auto; flex: 1; }

.ps-rack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 230px);
    justify-content: center;
    gap: 16px 18px;
}
.ps-rack-card {
    background: #fafbfc; border: 1px solid #eee; border-radius: 10px; padding: 14px 16px;
}
.ps-rack-card-wide {
    grid-column: span 2;
    /* justify-self: start; */
    padding-left: 8px;
    padding-right: 8px;
}
.ps-rack-title { font-size: 14px; font-weight: 600; color: #185FA5; margin: 0 0 10px; text-align: center; }
.ps-rack-columns { display: flex; gap: 9px; justify-content: center; }
.ps-rack-card-wide .ps-rack-columns { gap: 6px; }
.ps-rack-column { display: flex; flex-direction: column; gap: 4px; }

.ps-rack-bulk-bar { display: flex; gap: 6px; justify-content: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid #eee; }
.ps-rack-bulk-btn {
    width: 26px !important; height: 26px; padding: 0; margin-top: 0 !important; border-radius: 5px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px;
    border: 0.5px solid;
}
.ps-rack-bulk-btn:disabled { opacity: 0.5; cursor: default; }
.ps-rack-bulk-start { border-color: #185FA5; color: #185FA5; background: #fff; }
.ps-rack-bulk-complete { border-color: #1D9E75; color: #fff; background: #1D9E75; }
.ps-rack-bulk-reject { border-color: #E24B4A; color: #A32D2D; background: #fff; }

.ps-tray {
    font-size: 11px; text-align: center; padding: 4px 7px; border-radius: 4px;
    background: #eef0f3; color: #666; min-width: 42px;
}
.ps-tray-occupied {
    background: #f7c1c1; color: #791f1f; font-weight: 600; cursor: default;
    animation: ps-pulse-subtle 3s ease-in-out infinite;
}

/* "En progreso": nada pendiente en el slot, todo lo activo ya se esta
   trabajando -- mismo pulso sutil que el rojo, mismos colores de acento
   azul ya usados en cable-badges.js para RJ45 Blue (consistencia visual). */
.ps-tray-in-progress {
    background: #b5d4f4; color: #0c447c; font-weight: 600; cursor: default;
    animation: ps-pulse-subtle 3s ease-in-out infinite;
}

/* Flash de "completado": 30s solido en verde (sin pulso, es una
   confirmacion, no una alerta), mismos colores de acento verde que
   cable-badges.js usa para MiniSAS. Despues de los 30s, pod-slots.js hace
   un refresco silencioso que reemplaza esta clase por el estado real. */
.ps-tray-completed-flash {
    background: #c0dd97 !important; color: #27500a !important; font-weight: 700;
    animation: none !important; cursor: default;
}

/* Bus Bar activo, sin ticket de cable en ese slot (rojo/azul siempre
   ganan). Mismo morado que cable-badges.js usa para el badge "Bus Bar". */
.ps-tray-busbar {
    background: #CECBF6; color: #3C3489; font-weight: 600; cursor: default;
    animation: ps-pulse-subtle 3s ease-in-out infinite;
}

/* Yellow Flag: "danado, sin ticket todavia". Solo se ve cuando NO hay
   ticket activo (rojo siempre gana). Amarillo brillante a proposito --
   es una alerta fisica, tiene que saltar a la vista. */
.ps-tray-flagged {
    background: #ffe600; color: #4a3c00; font-weight: 700;
    box-shadow: 0 0 0 2px #ffb300 inset;
    animation: ps-pulse-strong 1.1s ease-in-out infinite;
}
/* Cuando el slot YA tiene ticket/bus bar (rojo/azul/morado) Y ademas esta
   marcado en amarillo: se ve el borde encima del color que ya tiene, en
   vez de taparlo -- avisa "hay ticket, pero el dano fisico real (el
   tape/conector) todavia no esta resuelto". No toca background ni
   animation -- eso ya lo pone la clase de estado (occupied/in-progress/
   busbar) que sigue aplicada al mismo tiempo. */
.ps-tray-flag-border {
    box-shadow: 0 0 0 3px #ffb300 inset;
}
.ps-tray-flag-clickable { cursor: pointer; }
.ps-tray-flag-clickable:hover { filter: brightness(0.95); }
.ps-tray-flag-loading { opacity: 0.6; pointer-events: none; }

/* Parpadeo: sutil en rojo/azul (se mira todo el turno, no debe cansar la
   vista), notorio en amarillo (alerta puntual, poco frecuente, debe
   llamar la atencion). Se anima 'filter' en vez de colores exactos
   para que funcione igual en modo claro y oscuro sin duplicar reglas. */
@keyframes ps-pulse-subtle { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(0.9); } }
@keyframes ps-pulse-strong { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }
@media (prefers-reduced-motion: reduce) {
    .ps-tray-occupied, .ps-tray-in-progress, .ps-tray-busbar, .ps-tray-flagged { animation: none; }
}

.ps-loading, .ps-empty, .ps-error {
    padding: 30px; text-align: center; color: #888; font-size: 13px;
}
.ps-error { color: #c0392b; }

.ps-tray-tooltip {
    position: fixed; transform: translate(-50%, -110%);
    background: #1e222a; color: #fff; font-size: 11px; line-height: 1.4;
    padding: 6px 10px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 10001; pointer-events: none; white-space: nowrap;
}
.ps-tray-tooltip.hidden { display: none; }

/* ===================== TICKET DETAIL MODAL (por slot) ===================== */
.ps-tray-clickable { cursor: pointer; }
.ps-tray-clickable:hover { filter: brightness(0.92); }

.ps-ticket-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    z-index: 10010; display: flex; align-items: stretch; justify-content: flex-end;
    opacity: 0; transition: opacity 0.25s ease;
}
.ps-ticket-overlay.ps-ticket-overlay-open { opacity: 1; }
.ps-ticket-modal {
    background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,0.25);
    width: 380px; max-width: 90vw; height: 100%; display: flex; flex-direction: column; overflow: hidden;
    border-radius: 0; transform: translateX(100%); transition: transform 0.28s ease;
}
.ps-ticket-overlay.ps-ticket-overlay-open .ps-ticket-modal { transform: translateX(0); }
.ps-ticket-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid #eee; font-weight: 600; font-size: 14px; color: #222;
    flex-shrink: 0;
}
.ps-ticket-modal-body { padding: 10px 12px; overflow-y: auto; flex: 1; }

/* Yellow Flag adentro del panel (ya no clic directo sobre el cuadrito) */
.ps-flag-toggle-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 8px; margin-bottom: 6px; border-bottom: 1px solid #eee; font-size: 12px; font-weight: 600; color: #4a3c00;
}

/* Seccion "Pedir nuevo" (abajo, despues de los tickets existentes) */
.ps-create-heading {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: #999; margin: 14px 0 8px; padding-top: 10px; border-top: 1px solid #eee;
}
.ps-create-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px; border-radius: 8px; margin-bottom: 6px; background: #f8f9fa;
}
.ps-create-type { font-size: 12px; font-weight: 600; color: #222; }
.ps-create-reason-btns { display: flex; gap: 4px; flex-shrink: 0; }
.ps-create-btn {
    font-size: 10px; padding: 5px 8px; border-radius: 5px; cursor: pointer; font-weight: 600;
    border: 0.5px solid #185FA5; color: #185FA5; background: #fff; width: auto !important; margin-top: 0 !important;
}
.ps-create-btn:hover { background: rgba(24,95,165,0.06); }
.ps-create-btn:disabled { opacity: 0.5; cursor: default; }
.ps-create-btn-busbar { border-color: #3C3489; color: #3C3489; }
.ps-create-btn-busbar:hover { background: rgba(60,52,137,0.06); }

.ps-ticket-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
    padding: 10px 8px; border-bottom: 1px solid #f0f0f0;
}
.ps-ticket-row:last-child { border-bottom: none; }
.ps-ticket-info { flex: 1; min-width: 0; }
.ps-ticket-type { font-size: 13px; font-weight: 600; color: #222; }
.ps-ticket-meta { font-size: 11px; color: #888; margin-top: 2px; }
.ps-ticket-status-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }

.ps-ticket-status-badge { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
.ps-ticket-elapsed { font-size: 10px; color: #999; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.ps-ticket-elapsed i { font-size: 11px; }
.ps-status-pending { background: #fdecd2; color: #854F0B; }
.ps-status-in_progress { background: #d7e8fa; color: #185FA5; }
.ps-status-completed { background: #d4f5e0; color: #0F6E56; }

.ps-ticket-actions { display: flex; gap: 4px; }
.ps-ticket-btn {
    font-size: 10px; padding: 4px 8px; border-radius: 5px; cursor: pointer; font-weight: 600;
    border: 0.5px solid; width: auto !important; margin-top: 0 !important;
}
.ps-ticket-btn:disabled { opacity: 0.5; cursor: default; }
.ps-ticket-btn-start { border-color: #185FA5; color: #185FA5; background: #fff; }
.ps-ticket-btn-complete { border-color: #1D9E75; color: #fff; background: #1D9E75; }
.ps-ticket-btn-reject { border-color: #E24B4A; color: #A32D2D; background: #fff; }
.ps-ticket-btn-transfer { border-color: #3C3489; color: #3C3489; background: #fff; }
.ps-ticket-btn-transfer:hover { background: rgba(60,52,137,0.06); }

/* Fila recien completada: fondo verde por 30s antes de desaparecer */
.ps-ticket-row[data-status="completed"] { background: rgba(29,158,117,0.12); border-radius: 8px; }

/* ===================== DARK MODE ===================== */
body.dark-mode .ps-panel { background: #1e222a; }
body.dark-mode .ps-panel-header { border-color: #383d47; }
body.dark-mode .ps-export-btn { background: #1e222a; border-color: #2E7FCB; color: #85B7EB; }
body.dark-mode .ps-export-check { color: #a0a4ab; }
body.dark-mode .ps-panel-title { color: #f0f2f5; }
body.dark-mode .ps-rack-card { background: #252a33; border-color: #383d47; }
body.dark-mode .ps-tray { background: #383d47; color: #a0a4ab; }
body.dark-mode .ps-tray-occupied { background: #6b2c2c; color: #f7c1c1; }
body.dark-mode .ps-tray-in-progress { background: #0c447c; color: #b5d4f4; }
body.dark-mode .ps-tray-completed-flash { background: #27500a !important; color: #c0dd97 !important; }
body.dark-mode .ps-tray-busbar { background: #3C3489; color: #CECBF6; }

/* Ticket detail modal */
body.dark-mode .ps-ticket-modal { background: #1e222a; }
body.dark-mode .ps-ticket-modal-header { border-color: #383d47; color: #f0f2f5; }
body.dark-mode .ps-flag-toggle-row { border-color: #383d47; color: #ffe600; }
body.dark-mode .ps-create-heading { color: #6b7080; border-color: #383d47; }
body.dark-mode .ps-create-row { background: #252a33; }
body.dark-mode .ps-create-type { color: #e2e4e8; }
body.dark-mode .ps-create-btn { background: #1e222a; border-color: #2E7FCB; color: #85B7EB; }
body.dark-mode .ps-create-btn-busbar { border-color: #8b7fd6; color: #b8b0ea; }
body.dark-mode .ps-ticket-row { border-color: #2e333c; }
body.dark-mode .ps-ticket-type { color: #e2e4e8; }
body.dark-mode .ps-ticket-meta { color: #a0a4ab; }
body.dark-mode .ps-status-pending { background: rgba(186,117,23,0.25); color: #F5B860; }
body.dark-mode .ps-status-in_progress { background: rgba(24,95,165,0.25); color: #85B7EB; }
body.dark-mode .ps-status-completed { background: rgba(29,158,117,0.25); color: #6EE7B7; }
body.dark-mode .ps-ticket-elapsed { color: #6b7080; }
body.dark-mode .ps-ticket-btn-start { background: #1e222a; border-color: #2E7FCB; color: #85B7EB; }
body.dark-mode .ps-ticket-btn-reject { background: #1e222a; border-color: #E86B6A; color: #F87171; }
body.dark-mode .ps-ticket-btn-transfer { background: #1e222a; border-color: #8b7fd6; color: #b8b0ea; }
body.dark-mode .ps-ticket-row[data-status="completed"] { background: rgba(29,158,117,0.18); }
body.dark-mode .ps-rack-bulk-bar { border-color: #383d47; }
body.dark-mode .ps-rack-bulk-start { background: #1e222a; border-color: #2E7FCB; color: #85B7EB; }
body.dark-mode .ps-rack-bulk-reject { background: #1e222a; border-color: #E86B6A; color: #F87171; }

/* ===================== AVISO / CONFIRMACION (psAlert / psConfirm) ===================== */
.ps-notice-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    z-index: 10020; display: flex; align-items: center; justify-content: center;
}
.ps-notice-modal {
    background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    width: 320px; max-width: 90vw; padding: 18px 20px; text-align: center;
}
.ps-notice-message { font-size: 13px; color: #333; line-height: 1.5; margin-bottom: 16px; white-space: pre-line; }
.ps-notice-actions { display: flex; gap: 8px; justify-content: center; }
.ps-notice-btn {
    flex: 1; padding: 8px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer;
    width: auto !important; margin-top: 0 !important; border: 1px solid #ccc;
}
.ps-notice-btn-ok, .ps-notice-btn-confirm { background: #185FA5; border-color: #185FA5; color: #fff; }
.ps-notice-btn-cancel { background: #fff; color: #555; }

body.dark-mode .ps-notice-modal { background: #1e222a; }
body.dark-mode .ps-notice-message { color: #e2e4e8; }
body.dark-mode .ps-notice-btn-cancel { background: #252a33; border-color: #383d47; color: #a0a4ab; }