body {
        margin: 0;
        padding: 0;
        font-family: "Segoe UI", sans-serif;
        background: oklch(48.381% 0.24633 274.857);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      .container {
        background: #ffffff;
        padding: 30px;
        border-radius: 20px;
        
        width: 300px;
      }

      .tabs {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
      }

      .tabs button {
        flex: 1;
        padding: 10px;
        border: none;
        background: none;
        font-weight: bold;
        cursor: pointer;
        border-radius: 10px;
        transition: 0.3s;
      }

      .tabs button.active {
        background: #1965de;
        box-shadow: inset 2px 2px 5px #388ceb, inset -2px -2px 5px #388ceb;
      }

      .form {
        display: none;
        flex-direction: column;
      }

      .form.active {
        display: flex;
      }

      input {
        margin: 10px 0;
        padding: 12px;
        border-radius: 10px;
        border: none;
        background: #e0e5ec;
        box-shadow: inset 4px 4px 6px #c8ccd1, inset -4px -4px 6px #f0f5fa;
      }

      .btn {
        margin-top: 10px;
        padding: 12px;
        background: #1965de;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-weight: bold;
        box-shadow: 6px 6px 10px #c2c8d0, -6px -6px 10px #ffffff;
        transition: 0.4s;
      }

      .btn:hover {
        background: #d6dce4;
      }

      .or {
        text-align: center;
        margin: 15px 0 10px;
        font-size: 0.85em;
        color: #666;
      }

      .socials {
        display: flex;
        justify-content: space-around;
      }

      .social {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        background: #ffffff;
        box-shadow: 6px 6px 10px #c2c8d0, -6px -6px 10px #ffffff;
        font-size: 1.2em;
        cursor: pointer;
      }
      .logo {
    display: block;
    margin: 0 auto 20px; /* centra y da espacio abajo */
    width: 120px; /* ajusta el tamaño del logo */
    height: auto; /* mantiene proporción */
}

/* --- ESTILO GENERAL PARA EL SELECT (ROL) --- */
select[name="role_id"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #f9fafb;
  color: #111827;
  font-size: 14px;
  appearance: none; /* Quita el estilo nativo del navegador */
  outline: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, #f9fafb, #f9fafb),
    url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%231f2937' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

/* Hover y foco */
select[name="role_id"]:hover {
  border-color: #2563eb;
}

select[name="role_id"]:focus {
  border-color: #2563eb;
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.3);
  background-color: #fff;
}

/* Opciones dentro del menú */
select[name="role_id"] option {
  background: #fff;
  color: #111827;
  padding: 10px;
}