/* ============================================================
   Yakamada Box — app.css
   Dark mode por defecto. Light mode: html.light
   ============================================================ */

/* ----------------------------------------------------------
   Variables
   ---------------------------------------------------------- */
:root {
    --bg:            #121212;
    --surface:       #1e1e1e;
    --surface2:      #2a2a2a;
    --surface3:      #383838;
    --text:          #f0f0f0;
    --text-muted:    #9e9e9e;
    --accent:        #e53935;
    --accent-hover:  #c62828;
    --accent-light:  rgba(229, 57, 53, 0.12);
    --green:         #43a047;
    --yellow:        #fbc02d;
    --blue:          #1e88e5;
    --border:        #333333;
    --shadow:        rgba(0, 0, 0, 0.5);
    --input-bg:      #2a2a2a;
    --input-border:  #444444;
    --input-focus:   #e53935;
    --radius:        10px;
    --radius-sm:     6px;
    --appbar-h:      56px;
    --font:          'Segoe UI', system-ui, -apple-system, sans-serif;
}

html.light {
    --bg:           #f0f2f5;
    --surface:      #ffffff;
    --surface2:     #f4f4f6;
    --surface3:     #e4e4ea;
    --text:         #1a1a2e;
    --text-muted:   #666680;
    --accent-light: rgba(229, 57, 53, 0.08);
    --border:       #dddde4;
    --shadow:       rgba(0, 0, 0, 0.1);
    --input-bg:     #ffffff;
    --input-border: #ccccda;
}

/* ----------------------------------------------------------
   Reset y base
   ---------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family:      var(--font);
    background-color: var(--bg);
    color:            var(--text);
    min-height:       100vh;
    line-height:      1.6;
    transition:       background-color .25s, color .25s;
}

a {
    color:           var(--accent);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

button, input, textarea, select {
    font-family: inherit;
    font-size:   inherit;
}

/* ----------------------------------------------------------
   AppBar
   ---------------------------------------------------------- */
.appbar {
    position:      fixed;
    top: 0; left: 0; right: 0;
    height:        var(--appbar-h);
    background:    var(--surface);
    border-bottom: 1px solid var(--border);
    display:       flex;
    align-items:   center;
    padding:       0 16px;
    gap:           12px;
    z-index:       100;
    box-shadow:    0 2px 8px var(--shadow);
    transition:    background .25s, border-color .25s;
}

.appbar-brand {
    position:        absolute;
    left:            50%;
    transform:       translateX(-50%);
    text-decoration: none;
    color:           inherit;
    pointer-events:  auto;
}
.appbar-brand:hover { text-decoration: none; opacity: .85; }

.appbar-title {
    font-size:      1.25rem;
    font-weight:    700;
    color:          var(--text);
    letter-spacing: -.3px;
    white-space:    nowrap;
}

.appbar-actions {
    display:     flex;
    align-items: center;
    gap:         2px;
    flex-shrink: 0;
    margin-left: auto;
}

.btn-icon {
    background:      none;
    border:          none;
    cursor:          pointer;
    color:           var(--text-muted);
    font-size:       1.1rem;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background .2s, color .2s;
    text-decoration: none;
}

.btn-icon:hover {
    background:      var(--surface2);
    color:           var(--text);
    text-decoration: none;
}

.appbar-avatar {
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none;
    color:           var(--text-muted);
    font-size:       1.75rem;
    width:           36px;
    height:          36px;
    border-radius:   50%;
    overflow:        hidden;
    transition:      opacity .2s;
    flex-shrink:     0;
}

.appbar-avatar:hover { opacity: .8; text-decoration: none; }

.appbar-avatar img {
    width:        100%;
    height:       100%;
    object-fit:   cover;
    border-radius: 50%;
}

/* ----------------------------------------------------------
   Main content (bajo appbar fijo)
   ---------------------------------------------------------- */
.main-content {
    padding:    calc(var(--appbar-h) + 24px) 16px 40px;
    max-width:  1200px;
    margin:     0 auto;
}

/* ----------------------------------------------------------
   Auth layout (centrado)
   ---------------------------------------------------------- */
.auth-wrapper {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         16px;
}

.auth-card {
    background:    var(--surface);
    border-radius: var(--radius);
    padding:       40px 36px;
    width:         100%;
    max-width:     420px;
    box-shadow:    0 8px 32px var(--shadow);
    border:        1px solid var(--border);
}

.auth-logo {
    text-align:    center;
    margin-bottom: 28px;
}

.auth-logo .fa-dumbbell {
    font-size:     2.6rem;
    color:         var(--accent);
    display:       block;
    margin-bottom: 10px;
}

.auth-brand {
    font-size:      1.7rem;
    font-weight:    800;
    color:          var(--text);
    letter-spacing: -.5px;
    margin-bottom:  4px;
}

.auth-subtitle {
    color:     var(--text-muted);
    font-size: .875rem;
}

.auth-footer {
    text-align:  center;
    margin-top:  20px;
    font-size:   .9rem;
    color:       var(--text-muted);
}

/* ----------------------------------------------------------
   Formularios
   ---------------------------------------------------------- */
.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display:       block;
    margin-bottom: 6px;
    font-size:     .875rem;
    font-weight:   500;
    color:         var(--text-muted);
}

.input-icon {
    position: relative;
    display:  flex;
    align-items: center;
}

.input-icon > i {
    position:       absolute;
    left:           12px;
    color:          var(--text-muted);
    font-size:      .875rem;
    pointer-events: none;
    z-index:        1;
}

.input-icon input {
    width:         100%;
    padding:       11px 44px 11px 38px !important;
    background:    var(--input-bg);
    border:        1px solid var(--input-border);
    border-radius: var(--radius-sm);
    color:         var(--text);
    outline:       none;
    transition:    border-color .2s, box-shadow .2s;
}

.input-icon input[type="password"] {
    padding-left: 46px !important;
}

.input-icon input:focus {
    border-color: var(--input-focus);
    box-shadow:   0 0 0 3px var(--accent-light);
}

.input-icon input::placeholder {
    color:   var(--text-muted);
    opacity: .7;
}

/* Inputs sin ícono */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
    width:         100%;
    padding:       11px 14px;
    background:    var(--input-bg);
    border:        1px solid var(--input-border);
    border-radius: var(--radius-sm);
    color:         var(--text);
    outline:       none;
    transition:    border-color .2s, box-shadow .2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    border-color: var(--input-focus);
    box-shadow:   0 0 0 3px var(--accent-light);
}

input::placeholder,
textarea::placeholder {
    color:   var(--text-muted);
    opacity: .7;
}

.toggle-password {
    position:      absolute;
    right:         10px;
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         var(--text-muted);
    font-size:     .9rem;
    padding:       6px;
    border-radius: 4px;
    transition:    color .2s;
    z-index:       1;
}

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

/* ----------------------------------------------------------
   Botones
   ---------------------------------------------------------- */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         11px 20px;
    border-radius:   var(--radius-sm);
    border:          none;
    cursor:          pointer;
    font-size:       1rem;
    font-weight:     500;
    text-decoration: none;
    transition:      background .2s, opacity .2s, transform .1s;
    white-space:     nowrap;
}

.btn:active { transform: scale(.98); }

.btn-primary {
    background: var(--accent);
    color:      #fff;
}

.btn-primary:hover {
    background:      var(--accent-hover);
    text-decoration: none;
    color:           #fff;
}

.btn-secondary {
    background: var(--surface2);
    color:      var(--text);
    border:     1px solid var(--border);
}

.btn-secondary:hover {
    background:      var(--surface3);
    text-decoration: none;
    color:           var(--text);
}

.btn-danger {
    background: var(--accent);
    color:      #fff;
    border:     none;
}

.btn-outline {
    background:  transparent;
    color:       var(--accent);
    border:      1px solid var(--accent);
}

.btn-outline:hover {
    background:      var(--accent-light);
    text-decoration: none;
    color:           var(--accent);
}

.btn-sm {
    padding:   6px 12px;
    font-size: .85rem;
}

.btn-full { width: 100%; }

.btn:disabled,
.btn[disabled] {
    opacity: .5;
    cursor:  not-allowed;
}

/* ----------------------------------------------------------
   Alerts
   ---------------------------------------------------------- */
.alert {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    font-size:     .9rem;
    line-height:   1.5;
}

.alert-danger {
    background: rgba(229, 57, 53, .12);
    border:     1px solid rgba(229, 57, 53, .35);
    color:      #ff7070;
}

html.light .alert-danger {
    color: #c62828;
}

.alert-success {
    background: rgba(67, 160, 71, .12);
    border:     1px solid rgba(67, 160, 71, .35);
    color:      #6abf6e;
}

html.light .alert-success {
    color: #2e7d32;
}

.alert-warning {
    background: rgba(251, 192, 45, .12);
    border:     1px solid rgba(251, 192, 45, .35);
    color:      #f9a825;
}

/* ----------------------------------------------------------
   Password strength
   ---------------------------------------------------------- */
.pw-strength-bar {
    height:        5px;
    border-radius: 3px;
    margin-top:    8px;
    background:    var(--surface3);
    overflow:      hidden;
}

.pw-strength-bar::after {
    content:    '';
    display:    block;
    height:     100%;
    width:      0%;
    background: transparent;
    transition: width .3s, background .3s;
}

.pw-strength-bar[data-score="0"]::after { width: 0%;   background: transparent; }
.pw-strength-bar[data-score="1"]::after { width: 20%;  background: #e53935; }
.pw-strength-bar[data-score="2"]::after { width: 40%;  background: #fb8c00; }
.pw-strength-bar[data-score="3"]::after { width: 60%;  background: #fbc02d; }
.pw-strength-bar[data-score="4"]::after { width: 80%;  background: #7cb342; }
.pw-strength-bar[data-score="5"]::after { width: 100%; background: #43a047; }

.pw-rules {
    list-style:           none;
    margin-top:           10px;
    display:              grid;
    grid-template-columns: 1fr 1fr;
    gap:                  4px 16px;
}

.pw-rules li {
    font-size:   .8rem;
    color:       var(--text-muted);
    display:     flex;
    align-items: center;
    gap:         6px;
    transition:  color .2s;
    user-select: none;
}

.pw-rules li i { font-size: .75rem; color: var(--text-muted); transition: color .2s; }
.pw-rules li.ok { color: var(--green); }
.pw-rules li.ok i { color: var(--green); }

/* ----------------------------------------------------------
   Cards
   ---------------------------------------------------------- */
.card {
    background:    var(--surface);
    border-radius: var(--radius);
    border:        1px solid var(--border);
    padding:       20px;
    box-shadow:    0 2px 8px var(--shadow);
}

.card-header {
    display:       flex;
    align-items:   center;
    gap:           10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.card-title {
    font-size:   1.1rem;
    font-weight: 600;
}

/* ----------------------------------------------------------
   Tabla
   ---------------------------------------------------------- */
.table-wrapper { overflow-x: auto; }

table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .9rem;
}

th, td {
    padding:    10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    font-weight:    600;
    color:          var(--text-muted);
    background:     var(--surface2);
    font-size:      .8rem;
    text-transform: uppercase;
    letter-spacing: .4px;
}

tr:hover td { background: var(--surface2); }

/* ----------------------------------------------------------
   Badge de rol
   ---------------------------------------------------------- */
.badge {
    display:        inline-flex;
    align-items:    center;
    padding:        3px 9px;
    border-radius:  20px;
    font-size:      .75rem;
    font-weight:    600;
    text-transform: capitalize;
    gap:            4px;
}

.badge-admin      { background: rgba(229, 57, 53, .18);  color: #ef5350; }
.badge-instructor { background: rgba(30, 136, 229, .18); color: #42a5f5; }
.badge-alumno     { background: rgba(67, 160, 71, .18);  color: #66bb6a; }

html.light .badge-admin      { color: #c62828; }
html.light .badge-instructor { color: #1565c0; }
html.light .badge-alumno     { color: #2e7d32; }

/* ----------------------------------------------------------
   Toggle switch
   ---------------------------------------------------------- */
.toggle {
    position: relative;
    display:  inline-block;
    width:    44px;
    height:   24px;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
    position:      absolute;
    cursor:        pointer;
    inset:         0;
    background:    var(--surface3);
    border-radius: 24px;
    transition:    background .2s;
}

.toggle-slider::before {
    content:       '';
    position:      absolute;
    height:        18px;
    width:         18px;
    left:          3px;
    bottom:        3px;
    background:    #fff;
    border-radius: 50%;
    transition:    transform .2s;
}

.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ----------------------------------------------------------
   Avatar de usuario en listas
   ---------------------------------------------------------- */
.user-avatar {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    object-fit:    cover;
    background:    var(--surface3);
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    color:         var(--text-muted);
    font-size:     1.3rem;
    flex-shrink:   0;
    overflow:      hidden;
}

.user-avatar img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* ----------------------------------------------------------
   Page header
   ---------------------------------------------------------- */
.page-header {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 24px;
    flex-wrap:     wrap;
}

.page-title {
    font-size:   1.5rem;
    font-weight: 700;
    flex:        1;
}

/* ----------------------------------------------------------
   Grid helpers
   ---------------------------------------------------------- */
.grid-2 {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   16px;
}

.grid-3 {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
}

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

/* ----------------------------------------------------------
   Stat cards (dashboard)
   ---------------------------------------------------------- */
.stat-card {
    background:    var(--surface);
    border-radius: var(--radius);
    border:        1px solid var(--border);
    padding:       20px;
    display:       flex;
    align-items:   center;
    gap:           16px;
}

.stat-icon {
    font-size:       1.8rem;
    color:           var(--accent);
    width:           52px;
    height:          52px;
    background:      var(--accent-light);
    border-radius:   var(--radius);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.stat-value {
    font-size:   2rem;
    font-weight: 800;
    line-height: 1;
}

.stat-label {
    font-size: .85rem;
    color:     var(--text-muted);
    margin-top: 2px;
}

/* ----------------------------------------------------------
   Search bar
   ---------------------------------------------------------- */
.search-bar {
    display:    flex;
    gap:        8px;
    margin-bottom: 16px;
}

.search-bar .input-icon {
    flex: 1;
}

/* ----------------------------------------------------------
   Utilidades
   ---------------------------------------------------------- */
.text-muted   { color: var(--text-muted); }
.text-accent  { color: var(--accent); }
.text-green   { color: var(--green); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.fw-bold      { font-weight: 700; }
.fw-600       { font-weight: 600; }
.fs-sm        { font-size: .875rem; }
.fs-xs        { font-size: .8rem; }

.mt-0  { margin-top:    0; }
.mt-1  { margin-top:    8px; }
.mt-2  { margin-top:    16px; }
.mt-3  { margin-top:    24px; }
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 8px; }
.mb-2  { margin-bottom: 16px; }
.mb-3  { margin-bottom: 24px; }

.d-flex        { display: flex; }
.d-none        { display: none; }
.align-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1         { gap: 8px; }
.gap-2         { gap: 16px; }
.flex-1        { flex: 1; }
.flex-wrap     { flex-wrap: wrap; }

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 480px) {
    .auth-card {
        padding: 28px 20px;
    }

    .pw-rules {
        grid-template-columns: 1fr;
    }

    .main-content {
        padding: calc(var(--appbar-h) + 16px) 12px 32px;
    }

    .page-header { margin-bottom: 16px; }

    .page-title { font-size: 1.25rem; }
}

@media (max-width: 360px) {
    .auth-card { padding: 20px 14px; }
}