/*
 * Sonora Teams · Premium workspace
 * Retícula inspirada en herramientas de colaboración: navegación persistente,
 * canales compactos y conversación como superficie principal.
 */

:root {
    --sonora-shell: #11140f;
    --sonora-shell-soft: #1a201a;
    --sonora-sidebar: #253028;
    --sonora-sidebar-hover: #313d34;
    --sonora-accent: #d8f34a;
    --sonora-accent-soft: rgba(216, 243, 74, 0.14);
    --sonora-canvas: #f6f6f1;
    --sonora-surface: #ffffff;
    --sonora-ink-premium: #171a16;
    --sonora-muted-premium: #667067;
    --sonora-hairline: #dde1da;
    --sonora-topbar-height: 44px;
    --sonora-rail-width: 70px;
    --sonora-sidebar-width: 284px;
    --sonora-premium-shadow: 0 18px 55px rgba(15, 20, 15, 0.12);
}

html,
body,
#matrixchat {
    background: var(--sonora-shell) !important;
}

.mx_MatrixChat {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: var(--sonora-topbar-height) 0 0 !important;
    box-sizing: border-box !important;
    background: var(--sonora-shell) !important;
}

/* Barra superior continua, como una aplicación de escritorio. */
.mx_MatrixChat::before {
    content: "";
    position: absolute;
    z-index: 950;
    inset: 0 0 auto;
    height: var(--sonora-topbar-height);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 76% -120%, rgba(216, 243, 74, 0.16), transparent 42%),
        linear-gradient(90deg, #10130f 0%, #182019 52%, #11140f 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
}

.mx_MatrixChat::after {
    content: "SONORA  /  TEAMS";
    position: absolute;
    z-index: 1002;
    top: 0;
    left: 20px;
    height: var(--sonora-topbar-height);
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.92);
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.19em;
    pointer-events: none;
}

.mx_MatrixChat > div {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

.mx_MatrixChat > div {
    display: grid !important;
    grid-template-columns: var(--sonora-rail-width) var(--sonora-sidebar-width) 1px minmax(0, 1fr) !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

.mx_MatrixChat > div > .mx_SpacePanel {
    grid-column: 1;
}

.mx_MatrixChat > div > div:has(.mx_LeftPanel_outerWrapper) {
    grid-column: 2;
}

.mx_MatrixChat > div > .mx_Separator {
    grid-column: 3;
}

.mx_MatrixChat > div > div:has(.mx_RoomView_wrapper) {
    grid-column: 4;
}

.mx_MatrixChat > div > .mx_SpacePanel,
.mx_MatrixChat > div > div:has(.mx_LeftPanel_outerWrapper),
.mx_MatrixChat > div > div:has(.mx_RoomView_wrapper) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Rail de espacios: negro, preciso y compacto. */
.mx_SpacePanel {
    width: var(--sonora-rail-width) !important;
    min-width: var(--sonora-rail-width) !important;
    max-width: var(--sonora-rail-width) !important;
    height: 100% !important;
    margin: 0 !important;
    padding-top: 10px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 0 !important;
    color: white !important;
    background: var(--sonora-shell) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.mx_SpacePanel .mx_SpaceButton_selectionWrapper,
.mx_SpacePanel [class*="_triggerButton_"] {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.055) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.mx_SpacePanel .mx_SpaceButton:hover .mx_SpaceButton_selectionWrapper,
.mx_SpacePanel .mx_SpaceButton_active .mx_SpaceButton_selectionWrapper,
.mx_SpacePanel [class*="_triggerButton_"]:hover {
    border-color: rgba(216, 243, 74, 0.45) !important;
    background: rgba(216, 243, 74, 0.12) !important;
    transform: none !important;
}

.mx_SpacePanel .mx_SpaceButton_active .mx_SpaceButton_selectionWrapper::before {
    background: var(--sonora-accent) !important;
}

/* Columna Slack de canales. */
.mx_LeftPanel_outerWrapper {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 22%),
        var(--sonora-sidebar) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.mx_LeftPanel,
.mx_LeftPanel_roomListContainer,
.mx_RoomListPanel {
    width: 100% !important;
    min-width: 0 !important;
    background: transparent !important;
}

/* Element aplica `contain: content` al panel; se neutraliza para que la
   búsqueda pueda vivir realmente en la barra global superior. */
.mx_LeftPanel {
    contain: none !important;
}

.mx_LeftPanel_outerWrapper,
.mx_LeftPanel_outerWrapper h1,
.mx_LeftPanel_outerWrapper h2,
.mx_LeftPanel_outerWrapper button,
.mx_LeftPanel_outerWrapper [role="option"],
.mx_LeftPanel_outerWrapper [role="listbox"] {
    color: rgba(255, 255, 255, 0.92) !important;
}

.mx_RoomListPanel > div:nth-child(2),
.mx_RoomListPanel header {
    min-height: 58px !important;
    padding-inline: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.025) !important;
}

.mx_RoomListPanel h1 {
    font-size: 17px !important;
    font-weight: 670 !important;
    letter-spacing: -0.025em !important;
}

/* La búsqueda de salas se convierte en la búsqueda global superior. */
.mx_RoomListPanel [role="search"] {
    position: fixed !important;
    z-index: 1001 !important;
    top: 6px !important;
    left: 50% !important;
    width: min(460px, 42vw) !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    gap: 5px !important;
    transform: translateX(-50%) !important;
    background: transparent !important;
}

.mx_RoomListPanel [role="search"] button {
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 9px !important;
    color: rgba(255, 255, 255, 0.86) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

.mx_RoomListPanel [role="search"] button:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.mx_RoomListPanel [role="search"] button:last-child {
    flex: 0 0 32px !important;
    width: 32px !important;
    padding: 0 !important;
}

.mx_RoomListPanel [role="search"] button:hover {
    border-color: rgba(216, 243, 74, 0.42) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Filtros discretos y filas densas, sin aspecto de tarjeta. */
.mx_RoomListPanel [role="listbox"] {
    padding-inline: 8px !important;
}

.mx_RoomListPanel [role="listbox"] [role="option"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 38px !important;
    margin: 2px 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.76) !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.mx_RoomListPanel [role="listbox"] [role="option"] > [class*="_container_"] {
    color: inherit !important;
    background: transparent !important;
}

.mx_RoomListPanel [role="listbox"] [role="option"][aria-selected="true"] [class*="_name_"],
.mx_RoomListPanel [role="listbox"] [role="option"][aria-selected="true"] [class*="_subtitle_"] {
    color: white !important;
}

.mx_RoomListPanel [role="listbox"] [role="option"]:hover {
    color: white !important;
    background: var(--sonora-sidebar-hover) !important;
}

.mx_RoomListPanel [role="listbox"] [role="option"][aria-selected="true"] {
    position: relative;
    color: white !important;
    background: var(--sonora-accent-soft) !important;
    box-shadow: inset 0 0 0 1px rgba(216, 243, 74, 0.10) !important;
}

.mx_RoomListPanel [role="listbox"] [role="option"][aria-selected="true"]::before {
    content: "";
    position: absolute;
    inset: 7px auto 7px 0;
    width: 3px;
    border-radius: 99px;
    background: var(--sonora-accent);
}

.mx_RoomListPanel [aria-label="Filtros de la lista de salas"] [role="option"],
.mx_RoomListPanel [aria-label="Room list filters"] [role="option"] {
    min-height: 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    background: rgba(255, 255, 255, 0.045) !important;
}

.mx_RoomListPanel [aria-label="Filtros de la lista de salas"] [role="option"][aria-selected="true"] {
    color: var(--sonora-shell) !important;
    background: var(--sonora-accent) !important;
}

.mx_Separator {
    width: 1px !important;
    min-width: 1px !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #d8ddd6 !important;
}

/* Conversación: la superficie clara domina, como en Slack. */
.mx_RoomView_wrapper,
.mx_RoomView,
.mx_MainSplit,
.mx_RoomView_body,
.mx_RoomView_MessageList,
.mx_HomePage {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--sonora-canvas) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.mx_RoomView_wrapper,
.mx_RoomView {
    height: 100% !important;
    overflow: hidden !important;
}

.mx_RoomHeader {
    width: 100% !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding-inline: 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sonora-hairline) !important;
    border-radius: 0 !important;
    color: var(--sonora-ink-premium) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
}

.mx_RoomHeader h1 {
    font-size: 17px !important;
    font-weight: 680 !important;
    letter-spacing: -0.025em !important;
}

.mx_RoomHeader button {
    border-radius: 9px !important;
}

.mx_RoomHeader button:hover {
    background: #eef1eb !important;
}

.mx_RoomView_MessageList {
    color: var(--sonora-ink-premium) !important;
}

.mx_EventTile {
    padding-block: 4px !important;
}

.mx_EventTile:hover,
.mx_EventTile_selected {
    background: rgba(37, 48, 40, 0.045) !important;
}

.mx_EventTile_senderDetailsLink,
.mx_EventTile_senderDetails {
    color: var(--sonora-ink-premium) !important;
    font-weight: 650 !important;
}

.mx_MessageComposer_wrapper {
    width: calc(100% - 40px) !important;
    max-width: 980px !important;
    box-sizing: border-box !important;
    margin: 0 auto 18px !important;
    border: 1px solid #d5dad2 !important;
    border-radius: 15px !important;
    background: var(--sonora-surface) !important;
    box-shadow: 0 10px 32px rgba(19, 27, 20, 0.09), inset 0 1px 0 #fff !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.mx_MessageComposer {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.mx_MessageComposer_wrapper:focus-within {
    border-color: #82907f !important;
    box-shadow: 0 0 0 3px rgba(70, 94, 73, 0.10), 0 14px 36px rgba(19, 27, 20, 0.11) !important;
}

.mx_MessageComposer button {
    border-radius: 8px !important;
}

/* Menús y popups: lujo sobrio, más cercano a un producto empresarial. */
[role="menu"],
.mx_ContextualMenu,
.mx_EmojiPicker {
    padding: 7px !important;
    border: 1px solid rgba(24, 31, 25, 0.10) !important;
    border-radius: 14px !important;
    color: var(--sonora-ink-premium) !important;
    background: rgba(252, 252, 248, 0.97) !important;
    box-shadow: 0 18px 55px rgba(14, 20, 15, 0.18) !important;
    backdrop-filter: blur(20px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
}

[role="menu"] [role="menuitem"],
.mx_ContextualMenu button {
    min-height: 36px !important;
    border-radius: 8px !important;
}

[role="menu"] [role="menuitem"]:hover,
.mx_ContextualMenu button:hover {
    background: #edf0ea !important;
}

.mx_Dialog_background {
    background: rgba(12, 16, 12, 0.52) !important;
    backdrop-filter: blur(12px) saturate(80%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(80%) !important;
}

.mx_Dialog_border {
    max-width: min(560px, calc(100vw - 32px)) !important;
    padding: 1px !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(216, 243, 74, 0.18)) !important;
    box-shadow: 0 30px 90px rgba(11, 16, 12, 0.28) !important;
}

.mx_Dialog {
    border: 0 !important;
    border-radius: 19px !important;
    background: #fbfbf7 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.mx_Dialog_title {
    font-size: 25px !important;
    font-weight: 670 !important;
    letter-spacing: -0.035em !important;
}

.mx_Dialog .mx_Field input,
.mx_Dialog .mx_Field textarea,
.mx_Dialog input[type="text"],
.mx_Dialog input[type="password"],
.mx_Dialog select {
    border: 1px solid #d5dad2 !important;
    border-radius: 10px !important;
    background: white !important;
    box-shadow: inset 0 1px 2px rgba(24, 31, 25, 0.035) !important;
}

.mx_Dialog_buttons button,
.mx_Dialog_buttons [role="button"] {
    min-height: 40px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.mx_Dialog_buttons .mx_Dialog_primary,
.mx_Dialog button.mx_Dialog_primary {
    color: var(--sonora-shell) !important;
    border-color: #c7df3f !important;
    background: var(--sonora-accent) !important;
    box-shadow: 0 8px 20px rgba(139, 164, 22, 0.18) !important;
}

.mx_ToastContainer .mx_Toast_toast {
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 13px !important;
    color: white !important;
    background: rgba(20, 25, 20, 0.96) !important;
    box-shadow: 0 18px 54px rgba(10, 14, 10, 0.24) !important;
}

/* Portada: más editorial y menos escaparate de tarjetas. */
.mx_HomePage_body {
    width: min(1060px, calc(100% - 64px)) !important;
    padding: 34px 0 50px !important;
}

.mx_HomePage_body > div > div:first-child {
    border: 0 !important;
    border-bottom: 1px solid var(--sonora-hairline) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mx_HomePage_body > div > div:nth-child(2) {
    padding: 62px 8px 42px !important;
}

.mx_HomePage_body > div > div:nth-child(2) > h1 {
    max-width: 760px !important;
    font-size: clamp(50px, 7vw, 82px) !important;
    line-height: 0.94 !important;
}

.mx_HomePage_body > div > div:nth-child(3) {
    gap: 1px !important;
    overflow: hidden;
    border: 1px solid var(--sonora-hairline) !important;
    border-radius: 16px !important;
    background: var(--sonora-hairline) !important;
}

.mx_HomePage_body > div > div:nth-child(3) > div {
    min-height: 168px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: none !important;
}

.mx_HomePage_body > div > div:nth-child(3) > div:nth-child(3) {
    color: var(--sonora-shell) !important;
    background: var(--sonora-accent) !important;
}

/* Mantiene una conversación legible incluso en ventanas de escritorio estrechas. */
@media (max-width: 920px) {
    :root {
        --sonora-rail-width: 62px;
        --sonora-sidebar-width: 238px;
    }

    .mx_MatrixChat::after {
        left: 14px;
        font-size: 9px;
    }

    .mx_RoomListPanel [role="search"] {
        width: min(360px, 40vw) !important;
    }

    .mx_MessageComposer_wrapper {
        width: calc(100% - 24px) !important;
        margin-bottom: 12px !important;
    }
}

@media (max-width: 720px) {
    :root {
        --sonora-rail-width: 58px;
        --sonora-sidebar-width: 220px;
    }

    .mx_MatrixChat {
        min-width: 680px !important;
    }

    .mx_MatrixChat::after {
        content: "SONORA";
    }
}

@media (prefers-reduced-transparency: reduce) {
    .mx_RoomHeader,
    .mx_RoomListPanel [role="search"] button,
    [role="menu"],
    .mx_ContextualMenu,
    .mx_Dialog_background {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}