/* GENERALES */
:root {
  --primary-color: #667eea;
  --secondary-color: #764ba2;
  --light-bg: #f5f5f5;
  --white: #ffffff;
  --text-light: #f0f0f0;
  --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  --border-radius: 8px;
  --transition: all 0.3s ease;
}

body {
    background-color: aliceblue;
  }
  /* LOGIN */
  .login-form {
    max-width: 400px;
    margin: 50px auto;
  }
  .login-form form {
    color:black;
    margin-bottom: 15px;
    background: #ffff;
    -webkit-box-shadow: 10px 10px 26px -2px rgba(0, 0, 0, 0.27);
    -moz-box-shadow: 10px 10px 26px -2px rgba(0, 0, 0, 0.27);
    box-shadow: 10px 10px 26px -2px rgba(0, 0, 0, 0.27);
    padding: 50px;
  }
  .login-form h2 {
    margin: 0 0 20px;
  }
  .form-control,
  .btn {
    min-height: 38px;
    border-radius: 2px;
  }
  .btn {
    font-size: 15px;
    font-weight: bold;
  }
  /*------------ BOTONES---------- */
  
  .btnPrimary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    border: none;
    transition: var(--transition);
  }

  .btnPrimary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  }

  /* Modal-specific subtle button styles for better hierarchy */
  #modalEditarArticulos .btn,
  .modal#modalDetalles .btn {
    border-radius: 24px;
    font-weight: 600;
    transition: var(--transition);
  }

  /* Outline variants (subtle) */
  .btn-outline-primary {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid rgba(102, 126, 234, 0.18);
  }
  .btn-outline-primary:hover,
  .btn-outline-primary:focus {
    background: rgba(102, 126, 234, 0.06);
    box-shadow: 0 6px 18px rgba(102,126,234,0.08);
    outline: none;
  }

  .btn-outline-secondary {
    background: transparent;
    color: #6c757d;
    border: 1px solid rgba(108,117,125,0.14);
  }
  .btn-outline-secondary:hover,
  .btn-outline-secondary:focus {
    background: rgba(108,117,125,0.04);
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
    outline: none;
  }

  .btn-outline-danger {
    background: transparent;
    color: #b00020;
    border: 1px solid rgba(176,0,32,0.12);
  }
  .btn-outline-danger:hover,
  .btn-outline-danger:focus {
    background: rgba(176,0,32,0.06);
    box-shadow: 0 6px 18px rgba(176,0,32,0.06);
    outline: none;
  }

  /* Subtle filled primary for main actions (Add/Save) */
  .btn-primary-filled {
    background: linear-gradient(90deg, rgba(102,126,234,0.95), rgba(118,75,162,0.95));
    color: var(--white);
    border: none;
    box-shadow: 0 6px 18px rgba(102,126,234,0.12);
  }
  .btn-primary-filled:hover,
  .btn-primary-filled:focus {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(102,126,234,0.18);
    outline: none;
  }

  /* Focus styles for accessibility */
  .btn:focus {
    box-shadow: 0 0 0 4px rgba(102,126,234,0.08);
  }

  /* Make modal action buttons full-width on small screens */
  @media (max-width: 767px) {
    #modalEditarArticulos .btn,
    .modal#modalDetalles .btn { width: 100%; }
  }