/************************************************************
   RESET CONTROLADO DEL THEME DE OSTICKET
************************************************************/

/* Elimina interferencias visuales del theme */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    height: 100%;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  }
  
  /* Oculta contenedores del theme */
  #container, #content, #page, #header, #nav, #footer,
  #logo, #breadcrumbs, .breadcrumbs,
  .lang, .language-selector, .flush, .front-page {
    display: none !important;
  }
  
  /* No ocultar loginBox ni el contenido de login.inc.php */
  /*.login-panel, .login-panel * {
    display: initial;
  }*/
  
  /* Reset suave (NO rompe inputs) */
  .login-panel input,
  .login-panel select,
  .login-panel textarea {
    box-sizing: border-box;
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
  }
  
  /* Reset de botones por seguridad */
  .login-panel input[type="submit"],
  .login-panel input[type="button"],
  .login-panel button {
    box-sizing: border-box;
    font: inherit;
    cursor: pointer;
  }
  
  
  /************************************************************
     VARIABLES
  ************************************************************/
  :root {
    --blue-900:#0b0f3b;
    --blue-800:#131a63;
    --red-500:#e84a5f;
    --red-600:#e23b52;
    --text:#0e1333;
    --muted:#6a6f85;
    --shadow:0 10px 30px rgba(16,24,40,.12);
  }
  
  
  /************************************************************
     LAYOUT SPLIT 50/50
  ************************************************************/
  .login-split-page {
    min-height:100vh;
    display:flex;
    position:relative;
    overflow:hidden;
    background:#fff;
  }
  
  /* columnas */
  .login-left, .login-right{
    flex:1 1 50%;
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    /*padding:clamp(24px,4vw,56px);*/
  }
  
  .login-left{
    background:var(--blue-800);
    color:#fff;
  }
  
  .login-right{
    background:#fff;
    color:var(--text);
  }
  
  /************************************************************
     DIAGONALES INFERIORES
  ************************************************************/
  .login-left::after{
    content:"";
    position:absolute; inset:0;
    background:var(--blue-900);
    clip-path:polygon(0 66%, 100% 100%, 0 100%);
    z-index:1;
  }
  
  .login-right::after{
    content:"";
    position:absolute; inset:0;
    background:var(--red-500);
    clip-path:polygon(0 100%, 100% 70%, 100% 100%);
    z-index:1;
  }
  
  
  /************************************************************
     PANEL INTERNO
  ************************************************************/
  .login-panel{
    width:min(520px,100%);
    position:relative;
    z-index:2;
  }
  
  
  /************************************************************
     ESTILOS PARA LOGIN.INC.PHP
  ************************************************************/
  
  /* Titulares del login */
  .login-panel h1,
  .login-panel h2 {
    font-size:clamp(20px,2.2vw,28px);
    font-weight:700;
    margin:0 0 18px 0;
  }
  
  /* textos */
  .login-panel p,
  .login-panel label,
  .login-panel small {
    font-size:14.5px;
    line-height:1.4;
  }
  
  /* Colores dentro del panel izquierdo */
  .login-left .login-panel p,
  .login-left .login-panel label,
  .login-left .login-panel small {
    color:rgba(255,255,255,.85);
  }
  
  /* Inputs del login */
  .login-left .login-panel input[type="text"],
  .login-left .login-panel input[type="email"],
  .login-left .login-panel input[type="password"]{
    width:100%;
    height:44px;
    padding:0 12px;
    margin:8px 0;
    font-size:15px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,.35);
    background:#fff;
    color:#0e1333;
  }
  
  /* Mensajes de error osTicket */
  .login-panel .error,
  .login-panel .error-banner,
  .login-panel #msg_error {
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
    padding:10px 12px;
    border-radius:6px;
    margin-bottom:10px;
  }
  
  /* Botón submit nativo del login */
  .login-left .login-panel input[type="submit"]{
    height:36px;
    padding:0 16px;
    border-radius:6px;
    background:var(--red-500);
    color:#fff;
    font-weight:700;
    font-size:15px;
    margin-top:12px;
    border:none;
  }
  
  .login-left .login-panel input[type="submit"]:hover{
    background:var(--red-600);
  }
  
  /* Links (crear cuenta, recuperar pass, etc.) */
  .login-left .login-panel a{
    color:#fff;
    font-weight:700;
    text-decoration:none;
  }
  .login-left .login-panel a:hover{ text-decoration:underline; }
  
  
  /************************************************************
     PANEL DERECHO - SOPORTE REMOTO
  ************************************************************/
  .support-title{
    font-size:clamp(20px,2.2vw,28px);
    font-weight:700;
    margin:0 0 10px 0;
    color:var(--blue-800);
  }
  
  .support-subtitle{
    margin:0 0 18px 0;
    color:var(--muted);
    font-size:14.5px;
    white-space: pre-line;

  }
  
  .support-row {
    display: flex;
    align-items: center;   /* ← alineación vertical */
    gap: 12px;
    flex-wrap: nowrap;     /* ← evita que se rompa a 2 líneas */
    margin-top: 10px;
  }
  
  .support-row input{
    flex:1 1 220px;
    height:44px;
    padding:0 12px;
    border-radius:6px;
    border:1px solid rgba(13,19,51,.15);
    background:#fff;
    font-size:15px;
  }
  
  .login-btn{
    height:40px;
    padding:0 16px;
    border:none;
    border-radius:6px;
    font-weight:700;
    cursor:pointer;
    background:var(--red-500);
    color:#fff;
  }
  .login-btn:hover{ background:var(--red-600); }
  
  .divider{
    display:block;     
    height:1px;
    background:rgba(13,19,51,.12);
    margin:18px 0 14px;
  }
  
  
  /************************************************************
     LOGO CENTRAL
  ************************************************************/
  .center-logo{
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:96px;
    height:96px;
    border-radius:999px;
    background:#fff;
    box-shadow:var(--shadow);
    display:grid;
    place-items:center;
    z-index:5;
  }
  
  .center-logo img{
    width:56px;
    height:56px;
    object-fit:contain;
  }
  
  
  /************************************************************
     RESPONSIVE
  ************************************************************/
  @media (max-width:980px){
    .login-split-page{ flex-direction:column; }
    .login-left, .login-right{
      min-height:auto;
      padding:32px 22px;
    }
    .login-left::after,
    .login-right::after{
      display:none;
    }
    .login-left{ padding-bottom:70px; }
    .login-right{ padding-top:70px; }
  }
  

  /* Forzar visibilidad de cualquier mensaje de error osTicket */
.login-panel .error,
.login-panel .error-banner,
.login-panel .errorBanner,
.login-panel .msg,
.login-panel #msg_error,
.login-panel .notice,
.login-panel .warning {
    display: block !important;
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600;
}

/* Estilo para errores en panel izquierdo */
.login-left .login-panel .error,
.login-left .login-panel .error-banner,
.login-left .login-panel #msg_error {
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    color:#fff !important;
}

/* Estilo para otros tipos de mensaje */
.login-panel .msg,
.login-panel .notice {
    background: rgba(0,0,0,.07) !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    color: #0e1333 !important;
}


/* Forzar visibilidad de cualquier mensaje de error osTicket */
.login-panel .error,
.login-panel .error-banner,
.login-panel .errorBanner,
.login-panel .msg,
.login-panel #msg_error,
.login-panel .notice,
.login-panel .warning {
    display: block !important;
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600;
}

/* Estilo para errores en panel izquierdo */
.login-left .login-panel .error,
.login-left .login-panel .error-banner,
.login-left .login-panel #msg_error {
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    color:#fff !important;
}

/* Estilo para otros tipos de mensaje */
.login-panel .msg,
.login-panel .notice {
    background: rgba(0,0,0,.07) !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    color: #0e1333 !important;
}

.actions-row{
    display:flex;
    gap:12px;
    margin-top:10px;
    flex-wrap:wrap;
    align-items:center;
  }
  
  .left-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1 1 180px;
  }
  
  .right-actions{
    flex:1 1 300px;
    text-align:right; /* si lo quieres a la derecha */
  }
  
  @media (max-width:600px){
    .right-actions{ text-align:left; }
  }