/* 🎨 Paleta clara */
:root {
 --green: #4caf50;
 --red: #ff4c4c;
 --background: #f9f9f9;
 --input-bg: #ffffff;
 --dialog-bg: #ffffff;
 --text: #222222;
 --textwhite: white;
 --accent: #0d6efd;

 --transition: 0.3s ease;
 --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 --radius: 8px;
 --colorvital: #00adc6;

 --shadowinicial: 0 40px 80px rgba(0, 0, 0, 0.1);
 --radiusinicial: 40px;
}

html,
body {
 height: 100%;
 margin: 0;
 padding: 0;
}

body {
 font-family: sans-serif;
 color: var(--textwhite);
 background: linear-gradient(to left, #00adc6, #007a99);
 box-shadow: var(--shadow);
 box-sizing: border-box;
}

/* 🧩 Inputs y botones */
input,
button,
textarea {
 border-radius: var(--radius);
 border: 1px solid #ccc;
 padding: 0.6em 1em;
 transition: var(--transition);
 box-shadow: var(--shadow);
 background-color: var(--input-bg);
 color: var(--text);
}

button:hover {
 background-color: var(--green);
 color: var(--textwhite) !important;
}

.login-ui .login-dialog .buttons input[type='submit'] {
 width: 100% !important;
 margin: 0 !important;
 color: #222222 !important;
 background-color: #ffffff !important;
 font-weight: lighter;
}

.login-ui.ng-isolate-scope.initial {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: wrap !important;
 justify-content: start !important;
 align-items: stretch !important;
 align-content: center !important;

 background-color: var(--colorvital) !important;

 background-image: url('app/ext/custom-namespace/images/logo.png');
 background-repeat: no-repeat;
 background-size: cover;
 background-position: -150px center;
 aspect-ratio: 1 / 1;

 border-radius: var(--radiusinicial);
 box-shadow: var(--shadowinicial);
 box-sizing: border-box !important;

 height: 50vh !important;

 max-width: 800px;

 margin-left: 25%;
 margin-top: 10%;
}

.login-ui {
 background-color: var(--background);
 box-sizing: border-box !important;
}

/* 📦 Diálogo principal */
.login-dialog {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: wrap !important;
 justify-content: start !important;
 align-items: stretch !important;
 align-content: center !important;
 gap: 2% !important;

 margin-left: auto;

 width: auto;
 max-width: 400px;
 background-color: transparent !important;

 border-top-right-radius: 15%;
 border-bottom-right-radius: 15%;
 box-shadow: var(--shadow);
 overflow: hidden;

 z-index: 999;
 margin-top: -4%;
 /* height: auto !important; */
 height: 130%;
}

.login-dialog {
 background: linear-gradient(to right, #00adc6, #007a99);
 transition: var(--transition);
}

.login-dialog:hover {
 transform: scale(1.2); /* Aumenta al 110% */
}

.login-ui .login-dialog::before {
 content: 'Datos de usuario';
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 max-width: 300px;

 color: var(--textwhite) !important;
 font-size: 1.5rem;
 font-weight: bold;
 padding: 0.1rem;
 flex-shrink: 0;
}

.login-ui .login-dialog .logo {
 background-image: url('app/ext/custom-namespace/images/logo.png');
 display: none !important;
}

.login-ui .login-fields .labeled-field .field-header {
 display: block !important;
 position: relative;
 background-color: transparent !important;
 color: var(--textwhite) !important;
 font-size: 1rem;
 opacity: 1;
}

.login-ui.error p.login-error {
 background-color: var(--red);
 color: var(--textwhite) !important;
 padding: 1em;
 border-radius: var(--radius);
}

.app-name.ng-binding {
 display: none !important;
}

.login-ui .login-dialog .version .version-number {
 display: none !important;
}

.page-tabs .page-list li a[href]:visited {
 color: var(--textwhite) !important;
}

.menu-dropdown .menu-contents {
 background-color: var(--colorvital) !important;
 background: linear-gradient(to right, #00adc6, #007a99);
}

.logged-out-modal ng-scope {
 background-color: var(--colorvital) !important;
 background: linear-gradient(to left, #00adc6, #007a99);
}

#section-header-all-connections {
 /* display: none !important; */
 font-size: medium;
 font-weight: lighter;
}

.connection-list-ui {
 display: grid;
 grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales */
 gap: 1rem;
}
/* Hijos 1 y 3 → 25% (1 columna) */
.connection-list-ui > div:nth-child(1),
.connection-list-ui > div:nth-child(3) {
 grid-column: span 1;
}

/* Hijos 2 y 4 → 75% (3 columnas) */
.connection-list-ui > div:nth-child(2),
.connection-list-ui > div:nth-child(4) {
 grid-column: span 3;
}

.connection-list-ui {
 align-items: start; /* cada celda usa su propia altura */
}

.connection-list-ui > div {
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 padding: 0.5rem;
 border-radius: 12px;
}

div.recent-connections {
 text-align: center;
 display: flex;
}

div.all-connections {
 display: block;
 align-content: flex-start;
 padding: 1rem;
 background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.8), rgba(224, 247, 250, 0.8)) !important;
 --webkit-backdrop-filter: blur(6px);
 border-radius: 12px !important;
}

.all-connections .connection .icon.rdp,
.all-connections .connection .icon.vnc,
.all-connections .connection .icon.expand {
 width: 64px;
 height: 64px;

 background-size: 64px 64px;
 filter: brightness(0) saturate(100%) invert(36%) sepia(93%) saturate(747%) hue-rotate(72deg) brightness(95%) contrast(90%);
}

.all-connections .connection-group.empty.balancer > .caption .icon,
.all-connections .connection-group > .caption .icon.expand {
 width: 32px;
 height: 32px;
 background-size: 32px 32px;
 filter: none;
}

.user-menu .menu-dropdown .menu-contents li a {
 width: 32px;
 height: 32px;
 background-size: 32px 32px;
 padding-left: 50px;
 box-sizing: content-box;
 white-space: nowrap;
 line-height: 30px;
 padding-top: 20px;
}

.group-list-page .icon.expand {
 width: 32px;
 height: 32px;
 background-size: 32px 32px;
 filter: none;
}

.connection-group a,
.connection-group a:hover,
.connection-group a:visited,
.connection a,
.connection a:hover,
.connection a:visited,
.user-group a,
.user-group a:hover,
.user-group a:visited,
.user a,
.user a:hover,
.user a:visited {
 text-decoration: none;
 color: white;
}

.menu-dropdown .menu-contents li a {
 display: block;
 cursor: pointer;
 color: white;
 text-decoration: none;
 padding: 0.75em;
}
.topConex {
 position: relative;
 margin-top: 1rem;
 padding: 0.5rem 1rem;
 box-sizing: border-box;
 display: flex;
 justify-content: space-between;
 align-items: center;
 float: right;
 z-index: 5000;
 width: 100%;
 height: 64px;
 background-color: var(--colorvital) !important;
 background: linear-gradient(to left, #00adc6, #007a99);
}

.navigation {
 background: black !important;
 color: #fff !important;
}

.navigation a:hover {
 background-color: #009933;
 color: black;
}

.navigation a {
 float: left;
 color: white;
 text-align: center;
 padding: 12px;
 text-decoration: none;
 line-height: 25px;
 border-radius: 4px;
}
.navigation {
 display: flex;
 justify-content: space-between;
 align-items: center;
 height: inherit;
 max-width: unset;
 float: right;
}

.navigation {
 padding-left: 88px;
 padding-right: 88px;
}

.navigation {
 position: fixed;
 left: 0;
 top: 0;
 right: 0;
 z-index: 100;
 width: 100%;
 height: 64px;
 background: #1b74da;
 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.client-status-modal .notification {
 background: transparent;
 color: #fff;
 width: 100%;
 max-width: 100%;
 padding: 1em;
 text-align: center;
 border: none;
 margin-top: 15rem;
}

.client-status-modal .notification .button {
 border-radius: var(--radius);
 padding: 0.6em 1em;
 transition: var(--transition);
 box-shadow: var(--shadow);
 color: var(--text);
}

.modal-contents {
 background-color: var(--colorvital) !important;

 background-image: url('app/ext/custom-namespace/images/logo.png');
 background-repeat: no-repeat;
 background-size: cover;
 background-position: -150px center;
 aspect-ratio: 1 / 1;

 border-radius: var(--radiusinicial);
 box-shadow: var(--shadowinicial);
 box-sizing: border-box !important;

 height: 50vh !important;

 max-width: 800px;

 margin-left: 25%;
 margin-top: 0%;
}

.logged-out-modal guac-modal {
 background-color: var(--colorvital) !important;
 background: linear-gradient(to right, #00adc6, #007a99);
 z-index: 20;
}

.logged-out-modal .notification {
 display: inline-block;
 max-width: 18rem;
 width: 100%;
 margin-left: 40%;
 margin-top: 10%;
 background-color: var(--colorvital) !important;
 border-radius: 10px;
}

.global-status-modal {
 background-color: red !important;
}

.header .filter input {
 display: none !important;
}

/* Pantallas medianas (tablets) */
@media (max-width: 768px) {
 .login-ui.ng-isolate-scope.initial {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  top: 0%;
  left: 0%;
  max-height: 100%;
  width: 100%;

  background-size: contain;
  background-position: -100px center;
 }
 .login-ui {
  padding: 10px;
  text-align: center;
  width: 100%;
  max-height: 100%;
 }
}

#file-transfer-dialog .transfer-manager {
 background-color: #222222 !important;
 display: -ms-flexbox;
 -ms-flex-align: stretch;
 -ms-flex-direction: column;
 display: -moz-box;
 -moz-box-align: stretch;
 -moz-box-orient: vertical;
 display: -webkit-box;
 -webkit-box-align: stretch;
 -webkit-box-orient: vertical;
 display: -webkit-flex;
 -webkit-align-items: stretch;
 -webkit-flex-direction: column;
 display: flex;
 align-items: stretch;
 flex-direction: column;
 max-width: inherit;
 max-height: inherit;
 border: 1px solid rgba(0, 0, 0, 0.5);
 box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}
.menu.open {
 background-color: var(--colorvital) !important;
 background: linear-gradient(to left, #00adc6, #007a99);
}

/* #guac-menu {
 left: auto !important;
 right: 0 !important;
} */
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/* Label/tag denoting the user that shared a connection */
.jdbc-share-tag {

    background: #0095ff;
    padding: 0.25em;

    -moz-border-radius:    0.25em;
    -webkit-border-radius: 0.25em;
    -khtml-border-radius:  0.25em;
    border-radius:         0.25em;

    color: white;
    font-size: 0.75em;
    font-weight: bold;

}