/* =========================================================
   MAGNEX BARBER — CORE STYLESHEET v5
   Componentes genéricos: botones, formularios, tarjetas,
   tipografía y utilidades.
   Layout y sidebar → sidebar.css
   ========================================================= */

/* =========================================================
   1. VARIABLES
   ========================================================= */
:root {
  --bg:   #070a10;
  --bg2:  #0a0d16;
  --bg3:  #0f1220;

  --glass:  rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.04);
  --line:   rgba(255,255,255,.08);

  --text:  #f0f2fa;
  --muted: rgba(240,242,250,.6);

  --y:  #ffc107;
  --y2: #ffd86a;
  --y3: #d7a92b;

  --r-lg: 18px;
  --r-md: 14px;

  --shadow:      0 18px 55px rgba(0,0,0,.5);
  --shadow-soft: 0 12px 35px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

/* =========================================================
   2. BODY
   ========================================================= */
body.mx-body {
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   3. TARJETAS
   ========================================================= */
.mx-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  backdrop-filter: blur(14px);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow);
}

/* =========================================================
   4. TIPOGRAFÍA
   ========================================================= */
.mx-h1    { margin: 0 0 8px; font-size: 24px; font-weight: 800; }
.mx-muted { color: var(--muted); }
.mx-small { font-size: 12px; opacity: .78; }

/* =========================================================
   5. ALERTAS
   ========================================================= */
.mx-alert {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,193,7,.35);
  background: rgba(255,193,7,.08);
  font-size: 13px;
}

/* =========================================================
   6. FORMULARIOS
   ========================================================= */
.mx-form { display: grid; gap: 10px; margin-top: 12px; }

.mx-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.mx-form select,
.mx-form textarea {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.3);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.mx-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.mx-form select:focus,
.mx-form textarea:focus {
  border-color: rgba(255,193,7,.55);
  box-shadow: 0 0 0 3px rgba(255,193,7,.08);
}

.mx-form select option { background: var(--bg3); color: var(--text); }

.mx-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  user-select: none;
  line-height: 1.25;
}

.mx-check input[type="checkbox"] { width: 16px; height: 16px; margin: 2px 0 0; }
.mx-check a { color: var(--y); font-weight: 700; text-decoration: none; }
.mx-check a:hover { text-decoration: underline; }

/* =========================================================
   7. BOTONES
   ========================================================= */
.mx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s, background .12s, border-color .12s, box-shadow .12s;
}

.mx-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.09); }

a.mx-btn, a.mx-btn:hover,
a.mx-btn:focus, a.mx-btn:active { text-decoration: none; color: var(--text); }

.mx-btn-primary {
  border-color: rgba(255,193,7,.45);
  background: linear-gradient(135deg, rgba(255,216,106,.22) 0%, rgba(255,193,7,.12) 100%);
  box-shadow: 0 8px 24px rgba(255,193,7,.1);
}

.mx-btn-primary:hover {
  background: linear-gradient(135deg, rgba(255,216,106,.3) 0%, rgba(255,193,7,.16) 100%);
  box-shadow: 0 12px 30px rgba(255,193,7,.16);
}

.mx-btn-lg {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  font-weight: 800;
  font-size: .92rem;
}

.mx-btn-disabled,
button.mx-btn-disabled,
button.mx-btn:disabled,
.mx-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

.mx-btn-danger-soft {
  border-color: rgba(239,68,68,.25);
  background: rgba(239,68,68,.08);
  color: #fecaca;
}

.mx-btn-danger-soft:hover {
  background: rgba(239,68,68,.13);
  border-color: rgba(239,68,68,.35);
}

/* =========================================================
   8. UTILIDADES
   ========================================================= */
.mx-row  { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mx-row2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; flex-wrap: wrap; }
.t-right     { text-align: right; }
.mt8         { margin-top: 8px; }
.mx-linkbtn  { color: var(--y); text-decoration: none; font-weight: 700; font-size: 13px; }
.mx-linkbtn:hover { text-decoration: underline; }
.mx-nav-div  { height: 1px; background: rgba(255,255,255,.05); margin: 8px 0; }