/**
 * assets/css/forms.css
 * Estilos de formularios: inputs, selects, textareas, validación.
 * Depende de: variables.css
 */

/* ── Form Group ───────────────────────────────────────────────────────────── */
.form-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

/* ── Labels ───────────────────────────────────────────────────────────────── */
.form-label {
  font-size:   var(--text-sm);
  font-weight: var(--weight-medium);
  color:       var(--color-text-muted);
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
}

.form-label .required {
  color:      var(--color-danger);
  font-size:  var(--text-xs);
}

/* ── Inputs / Select / Textarea ───────────────────────────────────────────── */
.form-control {
  width:            100%;
  padding:          var(--space-3) var(--space-4);
  background-color: var(--color-secondary);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-md);
  color:            var(--color-text);
  font-family:      var(--font-body);
  font-size:        var(--text-sm);
  line-height:      1.5;
  transition:       border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-height:       44px;
  appearance:       none;
  -webkit-appearance: none;
}

.form-control::placeholder {
  color: var(--color-text-dim);
}

.form-control:focus {
  outline:      none;
  border-color: var(--color-accent);
  box-shadow:   0 0 0 3px var(--color-accent-glow);
}

.form-control:disabled,
.form-control[readonly] {
  opacity:    0.6;
  cursor:     not-allowed;
  background-color: var(--color-muted);
}

/* Select con flecha personalizada */
select.form-control {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394A3B8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right var(--space-3) center;
  padding-right:       var(--space-8);
  cursor:              pointer;
}

/* Textarea */
textarea.form-control {
  min-height:  100px;
  resize:      vertical;
}

/* ── Validación ───────────────────────────────────────────────────────────── */
.form-control.is-invalid {
  border-color: var(--color-danger);
  box-shadow:   0 0 0 3px var(--color-danger-bg);
}

.form-control.is-valid {
  border-color: var(--color-accent);
}

.form-error {
  font-size:  var(--text-xs);
  color:      var(--color-danger);
  display:    flex;
  align-items:center;
  gap:        var(--space-1);
}

.form-helper {
  font-size: var(--text-xs);
  color:     var(--color-text-dim);
}

/* ── Form Grid ────────────────────────────────────────────────────────────── */
.form-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-4);
}

.form-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.form-col-full { grid-column: 1 / -1; }

@media (max-width: 767px) {
  .form-grid,
  .form-grid-3 { grid-template-columns: 1fr; }
}

/* ── Checkbox / Radio custom ──────────────────────────────────────────────── */
.form-check {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  cursor:      pointer;
}

.form-check-input {
  width:            18px;
  height:           18px;
  background-color: var(--color-secondary);
  border:           2px solid var(--color-border);
  border-radius:    var(--radius-sm);
  appearance:       none;
  -webkit-appearance: none;
  cursor:           pointer;
  transition:       background-color var(--transition-fast), border-color var(--transition-fast);
  flex-shrink:      0;
}

.form-check-input:checked {
  background-color: var(--color-accent);
  border-color:     var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath fill='white' d='M1 4l3 3 5-6'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
}

.form-check-label {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
  cursor:    pointer;
}

/* ── Formulario de login ──────────────────────────────────────────────────── */
.login-page {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      radial-gradient(circle at 10% 20%, rgb(89, 92, 230) 0%, rgb(20, 16, 80) 90%);
  padding:         var(--space-4);
  position:        relative;
  overflow:        hidden;
}

.login-page::before {
  content:    '';
  position:   absolute;
  width:      600px;
  height:     600px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
  top:        -200px;
  right:      -100px;
  z-index:    0;
  pointer-events: none;
}

.login-card {
  width:            100%;
  max-width:        440px;
  background:       rgba(255, 255, 255, 0.92);
  backdrop-filter:  blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:           1px solid rgba(255, 255, 255, 0.4);
  border-radius:    var(--radius-2xl);
  padding:          var(--space-8) var(--space-10);
  box-shadow:       0 25px 50px -12px rgba(15, 23, 42, 0.25);
  z-index:          1;
}

.login-logo {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-3);
  margin-bottom:  var(--space-6);
  text-align:     center;
}

.login-logo-img {
  width: 280px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: var(--space-4);
}

.login-subtitle {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}

.login-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

/* ── Input con ícono ──────────────────────────────────────────────────────── */
.input-icon-wrapper {
  position: relative;
}

.input-icon-wrapper .form-control {
  padding-left: var(--space-10);
}

.input-icon {
  position:  absolute;
  left:      var(--space-3);
  top:       50%;
  transform: translateY(-50%);
  color:     var(--color-text-dim);
  pointer-events: none;
  display:   flex;
  align-items: center;
}

/* ── Toggle de contraseña ─────────────────────────────────────────────────── */
.password-toggle {
  position:   absolute;
  right:      var(--space-3);
  top:        50%;
  transform:  translateY(-50%);
  background: none;
  border:     none;
  color:      var(--color-text-dim);
  cursor:     pointer;
  padding:    var(--space-1);
  display:    flex;
  align-items:center;
  transition: color var(--transition-fast);
}

.password-toggle:hover { color: var(--color-text); }

/* ── Filtros de tabla ─────────────────────────────────────────────────────── */
.filters-bar {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  flex-wrap:   wrap;
}

.filter-control {
  min-width:  150px;
  max-width:  200px;
  flex:       1;
}

.search-control {
  min-width: 240px;
  flex:      2;
}

@media (max-width: 767px) {
  .filters-bar      { flex-direction: column; }
  .filter-control,
  .search-control   { max-width: 100%; min-width: auto; }
}

/* ── Clases utilitarias de Login sin estilos inline ─────────────────────── */
.login-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: var(--text-xs);
  color: var(--color-text-dim);
}

.login-footer-brand {
  margin-top: var(--space-1);
  font-size: 10px;
}

.login-footer-link {
  color: var(--color-accent);
  text-decoration: underline;
}

.login-btn-block {
  width: 100%;
  margin-top: 0.5rem;
}

.login-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  margin-right: 8px;
}

/* ── Formulario Público ───────────────────────────────────────────────────── */
.form-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  background-color: var(--color-bg);
}

.form-card {
  width: 100%;
  max-width: 720px;
  background: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.form-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.form-header-logo-img {
  height: 64px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

.form-header-title {
  font-size: var(--text-xl);
  font-family: var(--font-heading);
  margin: 0;
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-4) 0 var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}



.client-alert {
  display: none;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}