/* Paleta celeste: dos tonos diferenciados y variables para fácil ajuste */
:root{
    --pos-celeste-fondo: #e9f8ff;    /* tono de fondo general (celeste muy claro) */
    --pos-celeste-recuadro: #9fdfff; /* tono destacado (recuadro/left panel) - más intenso */
    --pos-celeste-campos: #f6feff;   /* tono para área de campos (más suave) */
    --pos-primary: #0b6ef0;          /* color principal (azul) */
    --pos-ghost: rgba(11,110,240,0.08);
    --text-dark: #042b3a;
  }
  
  /* Página */
  .bg-pos-page{
    background-color: var(--pos-celeste-fondo);
    color: var(--text-dark);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  
  /* Card principal */
  .pos-auth-card{
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(4,43,58,0.06);
  }
  
  /* Left panel (resaltado) */
  .pos-panel-left{
    background: linear-gradient(180deg, var(--pos-celeste-recuadro), #cfeeff);
    min-height: 160px;
    color: #fff;
  }
  
  /* Logo circular */
  .pos-logo{
    width:56px;
    height:56px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size:1.05rem;
    box-shadow: 0 6px 18px rgba(11,110,240,0.08);
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  
  /* Right panel (form) */
  .pos-panel-right{
    background: var(--pos-celeste-campos);
  }
  
  /* Botones personalizados */
  .btn-pos-primary{
    background-color: var(--pos-primary);
    border-color: var(--pos-primary);
    color: #fff;
  }
  .btn-pos-primary:hover,
  .btn-pos-primary:focus{
    background-color: #095ed1;
    border-color: #095ed1;
    box-shadow: 0 6px 18px rgba(11,110,240,0.12);
  }
  
  /* Ghost outline for register */
  .btn-outline-pos-ghost{
    border: 1px solid var(--pos-ghost);
    color: var(--text-dark);
    background: transparent;
  }
  
  /* Links in right panel */
  .pos-panel-right .link-pos-muted{
    color: rgba(3,37,51,0.65);
    text-decoration: none;
  }
  
  /* Form control tweaks */
  .pos-panel-right .form-control {
    background: transparent;
    border: 1px solid rgba(3,37,51,0.06);
    height: calc(2.5rem + 2px);
  }
  
  /* Focus state for accessibility */
  .pos-panel-right .form-control:focus {
    box-shadow: 0 0 0 .15rem rgba(11,110,240,0.12);
    border-color: var(--pos-primary);
    background: rgba(255,255,255,0.9);
  }
  
  /* Responsive adjustments */
  @media (max-width: 767.98px){
    .pos-panel-left{
      padding: 1.25rem 1rem;
    }
    .pos-panel-right{
      padding: 1rem;
    }
  }
  
  /* Accessibility: visible focus for keyboard users */
  :focus{
    outline: 3px solid rgba(11,110,240,0.12);
    outline-offset: 2px;
  }