:root {
      --coral: #FF7E67;
      --coral-hover: #ff6b52;
      --cyan: #00E5FF;
      --dark: #1A1A1A;
      --bg: #F0F4F8;
      --white: #FFFFFF;
      --text-gray: #718096;
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', -apple-system, sans-serif;
  }

  body {
      background: linear-gradient(135deg, #F0F4F8 0%, #E2E8F0 100%);
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
  }

  /* Contenedor Principal */
  .auth-container {
      background: var(--white);
      width: 100%;
      max-width: 450px;
      padding: 40px;
      border-radius: 30px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
      text-align: center;
  }

  .logo-area {
      margin-bottom: 30px;
  }

  .logo-area span {
      font-size: 3rem;
  }

  .logo-area h1 {
      font-size: 1.8rem;
      font-weight: 800;
      color: var(--dark);
      letter-spacing: -1px;
      margin-top: 10px;
  }

  .tabs {
      display: flex;
      background: #EDF2F7;
      padding: 5px;
      border-radius: 15px;
      margin-bottom: 30px;
  }

  .tab-btn {
      flex: 1;
      padding: 10px;
      border: none;
      background: none;
      font-weight: 600;
      color: var(--text-gray);
      cursor: pointer;
      border-radius: 10px;
      transition: 0.3s;
  }

  .tab-btn.active {
      background: var(--white);
      color: var(--dark);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }

  /* Formularios */
  form {
      display: flex;
      flex-direction: column;
      gap: 15px;
  }

  .input-group {
      text-align: left;
  }

  .input-group label {
      display: block;
      font-size: 0.85rem;
      font-weight: 600;
      margin-bottom: 5px;
      color: var(--dark);
      margin-left: 5px;
  }

  input {
      width: 100%;
      padding: 14px 20px;
      border-radius: 12px;
      border: 2px solid #EDF2F7;
      background: #F8FAFC;
      outline: none;
      font-size: 1rem;
      transition: 0.3s;
  }

  input:focus {
      border-color: var(--cyan);
      background: white;
  }

  .btn-auth {
      background: var(--coral);
      color: white;
      border: none;
      padding: 16px;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      margin-top: 10px;
      box-shadow: 0 8px 20px rgba(255, 126, 103, 0.3);
      transition: 0.3s;
  }

  .btn-auth:hover {
      background: var(--coral-hover);
      transform: translateY(-2px);
  }

  .forgot-pass {
      display: block;
      margin-top: 15px;
      font-size: 0.85rem;
      color: var(--coral);
      text-decoration: none;
      font-weight: 600;
  }



  .footer-text {
      margin-top: 30px;
      font-size: 0.8rem;
      color: var(--text-gray);
  }

  a {
      text-decoration: none;
      color: blue;
      font-weight: bold;
  }

  
      .img-logo{
    height: 90px;
    width: 90px ;
}