* {
  box-sizing: border-box;
  text-decoration: none;
}

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

body {
  font-weight: bold;
  background-color: #131313;
  color: white;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ====== LOGIN ====== */

/* Contenedor principal: 2 columnas a pantalla completa */
.login {
  display: flex;
  min-height: 100vh;
}

/* Las dos cajas ocupan 50% cada una */
.box-1,
.box-2 {
  flex: 1;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Lado izquierdo */
.box-1 {
  background-image: url('http://localhost/erp/vistas/img/operatiswall.png');
  background-position: 2%;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Lado derecho */
.box-2 {
  background-color: #191919;
  border-left: 1px solid #ffffff0f;
}

/* Caja del form */
.login-box{
  width: 360px;           /* ✅ ancho fijo prolijo */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-box h2{
  margin: 0 0 14px 0;
}

/* Form en columna, todo alineado */
.login-box form{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* labels alineados a la izquierda */
.login-box label{
  font-size: .9rem;
  color: #ffffffba;
  font-weight: 700;
  margin-top: 6px;
}

/* inputs de texto/password */
.login-box input[type="text"],
.login-box input[type="password"]{
  width: 100%;
  background-color: #191919;
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  border: 1px solid #ffffff73;
  color: white;
  transition: all ease .1s;
  outline: none;
  cursor: text;          /* ✅ cursor correcto */
  margin: 0;             /* ✅ sin auto-centro */
}

.login-box input[type="text"]:focus,
.login-box input[type="password"]:focus{
  border-color: #54a7ff;
  box-shadow: 0 0 0 3px rgba(84,167,255,.2);
}

/* link */
.login-box a{
  color: #54a7ff;
  font-size: 12px;
  margin: 6px 0 10px 0;
  transition: all ease .1s;
}
.login-box a:hover{
  color:#b0d6ff;
}

/* password wrapper */
.password-field {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.password-field input {
  padding-right: 2.6rem; /* espacio para ojo */
}

/* ✅ ojo bien centrado vertical */
.password-field i {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #aaa;
  font-size: 1rem;
}

/* ✅ SOLO el submit es botón */
.login-box .boton{
  margin-top: 6px;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: 4px;
  border: 1px solid #ffffff73;
  background: transparent;
  color: white;
  font-weight: 700;
  cursor: pointer;
  transition: all ease .1s;
}

.login-box .boton:hover{
  background-color:#ffffff73;
}


/* VISTA DEL CHAT */

/* ====== CHAT PAGE ====== */
.chat-page{
  background:white;
  color:white;
  height:100vh;
  overflow: hidden;
  display:flex;
  flex-direction:column;
}

/* NAV */
.chat-nav{
  position:sticky;
  top:0;
  z-index:10;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  background:#0b0d12;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.chat-brand{
  display:flex;
  gap:8px;
  align-items:center;
  font-weight:700;
  letter-spacing:.3px;
  color:#fff;
}
.chat-brand i{ color:#3b82f6; }

/* USER CHIP */
.user-chip{
  display:flex;
  align-items:center;
  gap:8px;
  background:#121521;
  border:1px solid rgba(255,255,255,.08);
  padding:6px 10px;
  border-radius:6px;
  color:#e5e7eb;
  cursor:pointer;
  transition:.15s ease;
}
.user-chip:hover{ background:#171b2a; }
.user-dot{
  width:8px; height:8px; border-radius:50%;
  background:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.15);
}
.user-name{
  font-size:.9rem;
  font-weight:600;
}
.user-chip i{ font-size:.8rem; opacity:.8; }

/* DROPDOWN */
.user-menu{
  position:absolute;
  right:14px;
  top:58px;
  background:#0b0d12;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  min-width:180px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  overflow:hidden;
}
.user-menu a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  color:#e5e7eb;
  text-decoration:none;
  font-size:.9rem;
}
.user-menu a:hover{
  background:#121521;
}
.hidden{ display:none; }

/* WRAP */
.chat-wrap{
  width:100%;
  max-width:820px;
  margin:0 auto;
  flex:1;
  display:flex;
  flex-direction:column;
  padding:14px;
  gap:12px;
  min-height:0;           
  padding-bottom:20px;
}

/* CHAT BOX */
.chat-box{
  flex:1;
  min-height:0;   
  overflow-y:auto;        
  background:#efefef;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  border-radius:6px;
}

/* MESSAGES */
.msg{
  max-width:85%;
  padding:10px 12px;
  border-radius:12px;
  font-size:.95rem;
  line-height:1.35;
  white-space:pre-wrap;
}
.msg.me{
  align-self: flex-end;
    background: #414245;
    color: white;
    border-top-right-radius: 6px;
}
.msg.bot{
  align-self: flex-start;
  background: #dbdbdb;
  color: #000000;
  border-radius: 12px 12px 12px 0px;
  font-weight: 500;
  font-size: 14px;
}

/* INPUT */
.chat-input{
  display:flex;
  gap:8px;
}
.chat-input input{
  flex:1;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:#efefef;
  color:black;
  outline:none;
}
.chat-input input:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.18);
}
.send-btn{
  padding:0 18px;
  border:1px solid #ffffff3d;
  border-radius:6px;
  background:#393939;
  color:#ffffff;
  font-weight:700;
  cursor:pointer;
  transition:.15s ease;
}
.send-btn:hover{ filter:brightness(1.05); }


.footer-text{
    color: black;
    text-align: center;
    font-weight: 300;
    font-size: 13px;
}



/* ====== SCROLLBAR CUSTOM (solo chat) ====== */

/* Firefox */
.chat-page .chat-box{
  scrollbar-width: thin;              /* thin | auto | none */
  scrollbar-color: #5b5b5b #efefef;   /* thumb  track */
}

/* Chrome / Edge / Safari */
.chat-page .chat-box::-webkit-scrollbar{
  width: 8px;                        /* ancho de la barra */
}

.chat-page .chat-box::-webkit-scrollbar-track{
  background: #0b0d12;               /* fondo del canal */
  border-radius: 999px;
}

.chat-page .chat-box::-webkit-scrollbar-thumb{
  background: #3a3a3a;               /* barra */
  border-radius: 999px;
  border: 2px solid #0b0d12;         /* separa del track */
}

.chat-page .chat-box::-webkit-scrollbar-thumb:hover{
  background: #6b6b6b;               /* hover */
}

.chat-page .chat-box::-webkit-scrollbar-thumb:active{
  background: #8b8b8b;               /* mientras arrastrás */
}

.chat-page .chat-box::-webkit-scrollbar-corner{
  background: transparent;
}

/* PARTE DE AJUSTAR PRECIOS */

.btn-green{
  background:#22c55e;
  color:#04110b;
  font-weight:800;
  border:none;
  padding:9px 12px;
  border-radius:8px;
  cursor:pointer;
}

.btn-blue{
  background:#3b82f6;
  color:white;
  font-weight:800;
  border:none;
  padding:9px 12px;
  border-radius:8px;
  cursor:pointer;
}

.btn-outline{
  background:transparent;
  color:#e5e7eb;
  border:1px solid #ffffff2a;
  padding:9px 12px;
  border-radius:8px;
  cursor:pointer;
}

/* LAYOUT NOTICIAS */

.chat-layout{
    background-color: #0b0d12;
    max-width: 300px;
    width: 200px;
    position: absolute;
    top: 80px;
    border: 1px solid white;
    border-radius: 6px;
    padding: .5rem;
    font-size: 12px;
}