* { margin:0; padding:0; box-sizing:border-box; }

:root {
    --magenta:     #d946ef;
    --turquesa:    #00d9ff;
    --mint:        #10b981;
    --dark:        #1c193e;
    --light:       #f8f9fa;
    --white:       #ffffff;
    --text:        #333;
    --gray-light:  #f3f4f6;
    --gray-border: #e5e7eb;
}

html, body { height:100%; font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; color:var(--text); background:var(--light); }

/* ── AUTH PAGES ─────────────────────────── */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, #1c193e 0%, #2d2a5e 50%, #1c193e 100%);
}

.auth-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 36px 36px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 24px 60px rgba(28,25,62,.3);
}

.auth-header { text-align:center; margin-bottom:28px; }
.auth-icon { font-size:3rem; margin-bottom:12px; }
.auth-header h1 { font-size:1.6rem; font-weight:900; color:var(--dark); margin-bottom:6px; }
.auth-header p { font-size:.92rem; color:#666; }

.section-label { font-size:.78rem; font-weight:700; color:var(--turquesa); text-transform:uppercase; letter-spacing:.8px; margin-bottom:12px; border-top:1px solid var(--gray-border); padding-top:16px; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:500px) { .form-row { grid-template-columns:1fr; } }

.form-group { margin-bottom:16px; }
.form-label { font-size:.85rem; font-weight:700; color:#374151; display:block; margin-bottom:6px; }
.form-input {
    width:100%; padding:12px 14px;
    border:2px solid var(--gray-border);
    border-radius:10px; font-size:.95rem;
    transition:border-color .2s;
}
.form-input:focus { outline:none; border-color:var(--turquesa); }

.btn-primary {
    width:100%; padding:13px;
    background: linear-gradient(135deg, var(--magenta), #a855f7);
    color:#fff; border:none; border-radius:10px;
    font-weight:700; font-size:1rem; cursor:pointer;
    transition:opacity .2s; margin-top:6px;
}
.btn-primary:hover { opacity:.88; }

.alert { padding:12px 16px; border-radius:10px; font-size:.9rem; margin-bottom:18px; }
.alert-error { background:#fef2f2; color:#b91c1c; border:1px solid #fca5a5; }

.info-box { background:var(--gray-light); border-radius:10px; padding:12px 14px; font-size:.85rem; color:#555; margin-bottom:16px; border-left:3px solid var(--turquesa); }

.auth-footer { text-align:center; margin-top:20px; }
.auth-footer a { font-size:.88rem; color:#aaa; text-decoration:none; }
.auth-footer a:hover { color:var(--magenta); }

/* ── PANEL HEADER ───────────────────────── */
.creador-header {
    background:#fff;
    border-bottom:3px solid var(--turquesa);
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    position:sticky; top:0; z-index:100;
    padding:14px 24px;
}
.header-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.header-brand { display:flex; align-items:center; gap:12px; }
.header-icon { font-size:2rem; }
.header-title { font-size:1.15rem; font-weight:900; color:var(--dark); line-height:1.1; }
.header-sub { font-size:.78rem; color:var(--turquesa); font-weight:600; letter-spacing:.5px; text-transform:uppercase; }

.header-user { display:flex; align-items:center; gap:14px; }
.header-nombre { font-weight:700; color:var(--dark); font-size:.95rem; }
.btn-logout {
    padding:8px 18px; background:var(--gray-light);
    color:#666; border:1px solid var(--gray-border);
    border-radius:8px; text-decoration:none; font-size:.85rem; font-weight:600;
    transition:all .2s;
}
.btn-logout:hover { background:var(--magenta); color:#fff; border-color:var(--magenta); }

/* ── PANEL BODY ─────────────────────────── */
.creador-container { max-width:1100px; margin:0 auto; padding:32px 20px 60px; }

/* Stats grid */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
@media(max-width:768px) { .stats-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:400px) { .stats-grid { grid-template-columns:1fr; } }

.stat-card {
    background:#fff;
    border-radius:16px;
    padding:22px 20px;
    box-shadow:0 2px 12px rgba(28,25,62,.07);
    border-top:4px solid transparent;
    position:relative; overflow:hidden;
}
.stat-ganado   { border-top-color:var(--magenta); }
.stat-pagado   { border-top-color:var(--mint); }
.stat-pendiente{ border-top-color:#f59e0b; }
.stat-recursos { border-top-color:var(--turquesa); }

.stat-icon  { font-size:1.6rem; margin-bottom:10px; }
.stat-label { font-size:.78rem; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.stat-value { font-size:1.7rem; font-weight:900; color:var(--dark); line-height:1.1; }
.stat-sub   { font-size:.78rem; color:#aaa; margin-top:4px; }

/* Sections */
.panel-section {
    background:#fff;
    border-radius:16px;
    padding:28px;
    box-shadow:0 2px 12px rgba(28,25,62,.07);
    margin-bottom:20px;
}
.section-title { font-size:1rem; font-weight:900; color:var(--dark); margin-bottom:18px; display:flex; align-items:center; gap:8px; }

/* Chart */
.chart-wrapper { position:relative; height:260px; }

/* Materiales table */
.mat-table { width:100%; border-collapse:collapse; }
.mat-table th { padding:10px 12px; text-align:left; font-size:.78rem; color:#888; text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid var(--gray-border); }
.mat-table td { padding:12px 12px; border-bottom:1px solid var(--gray-border); font-size:.92rem; vertical-align:middle; }
.mat-table tr:last-child td { border-bottom:none; }
.mat-table tr:hover td { background:#fafafa; }

.mat-icono { font-size:1.5rem; margin-right:10px; }
.mat-titulo { font-weight:700; color:var(--dark); }
.mat-nivel  { font-size:.8rem; color:#888; margin-top:2px; }
.badge-aprobado    { background:#d1fae5; color:#065f46; padding:3px 10px; border-radius:20px; font-size:.78rem; font-weight:700; }
.badge-pendiente-m { background:#fef3c7; color:#92400e; padding:3px 10px; border-radius:20px; font-size:.78rem; font-weight:700; }
.badge-rechazado   { background:#fee2e2; color:#b91c1c; padding:3px 10px; border-radius:20px; font-size:.78rem; font-weight:700; }
.nota-rechazo      { font-size:.78rem; color:#b91c1c; margin-top:5px; font-style:italic; line-height:1.4; }

.ganancia-num { font-weight:900; color:var(--magenta); font-size:1rem; }
.tabla-loading { text-align:center; color:#aaa; padding:40px; }

/* ── SECCIÓN CABECERA CON BOTÓN ── */
.section-header-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.btn-subir-toggle {
    background: linear-gradient(135deg, var(--turquesa), #00b8d9);
    color: var(--dark);
    border: none;
    padding: 9px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
    transition: opacity .2s;
}
.btn-subir-toggle:hover { opacity: .85; }

/* ── FORMULARIO SUBIR RECURSO ── */
.form-subir-wrap {
    border-top: 2px solid var(--gray-border);
    padding-top: 22px;
    margin-bottom: 24px;
}
.form-subir-seccion {
    font-size: .73rem;
    font-weight: 800;
    color: var(--turquesa);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 12px;
    margin-top: 20px;
    padding-bottom: 7px;
    border-bottom: 1.5px solid var(--gray-border);
}
.form-subir-seccion:first-child { margin-top: 0; }
.form-subir-msg {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 16px;
}
.form-subir-msg.ok    { background:#d1fae5; color:#065f46; }
.form-subir-msg.error { background:#fee2e2; color:#b91c1c; }

.cr-form-row   { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:600px) { .cr-form-row { grid-template-columns:1fr; } }
.cr-form-group { margin-bottom:14px; }
.cr-label      { display:block; font-size:.82rem; font-weight:700; color:#374151; margin-bottom:6px; }
.cr-input, .cr-select, .cr-textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--gray-border);
    border-radius: 9px;
    font-size: .92rem;
    font-family: inherit;
    background: #fff;
    color: var(--text);
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.cr-input:focus, .cr-select:focus, .cr-textarea:focus {
    outline: none;
    border-color: var(--turquesa);
    box-shadow: 0 0 0 3px rgba(0,217,255,.12);
}
.cr-textarea   { resize: vertical; min-height: 86px; }
.cr-gratis-lbl { display:flex; align-items:center; gap:7px; margin-top:8px; font-size:.82rem; font-weight:600; color:var(--mint); cursor:pointer; }
.cr-gratis-lbl input { accent-color: var(--mint); width:15px; height:15px; }

.cr-file-wrap {
    border: 2px dashed var(--turquesa);
    border-radius: 12px;
    padding: 22px 18px;
    text-align: center;
    cursor: pointer;
    background: rgba(0,217,255,.03);
    transition: background .2s, border-color .2s;
}
.cr-file-wrap:hover { background: rgba(0,217,255,.07); border-color: #00b8d9; }
.cr-file-icon { font-size: 1.8rem; display: block; margin-bottom: 6px; }
.cr-file-text { font-size: .85rem; color: #888; }
.cr-file-text.selected { color: var(--mint); font-weight: 700; }

.icon-selector-c { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
.icon-opt-c {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    border: 1.5px solid var(--gray-border);
    border-radius: 9px;
    cursor: pointer;
    background: #fff;
    transition: all .15s;
}
.icon-opt-c:hover  { border-color: var(--turquesa); background: rgba(0,217,255,.06); }
.icon-opt-c.active { border-color: var(--magenta); background: rgba(217,70,239,.08); box-shadow: 0 0 0 2px rgba(217,70,239,.18); }

.cr-form-actions { display:flex; gap:12px; align-items:center; margin-top:22px; padding-top:18px; border-top:1.5px solid var(--gray-border); flex-wrap:wrap; }
.btn-subir-submit {
    padding: 12px 30px;
    background: linear-gradient(135deg, var(--magenta), #a855f7);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: opacity .2s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(217,70,239,.25);
}
.btn-subir-submit:hover    { opacity: .88; box-shadow: 0 6px 18px rgba(217,70,239,.35); }
.btn-subir-submit:disabled { opacity: .5; cursor: default; box-shadow: none; }
.btn-subir-cancel {
    padding: 12px 22px;
    background: none;
    border: 1.5px solid var(--gray-border);
    border-radius: 10px;
    font-weight: 600;
    font-size: .9rem;
    color: #777;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.btn-subir-cancel:hover { border-color: #bbb; color: #444; }

/* Historial */
.hist-table { width:100%; border-collapse:collapse; }
.hist-table th { padding:10px 12px; text-align:left; font-size:.78rem; color:#888; text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid var(--gray-border); }
.hist-table td { padding:11px 12px; border-bottom:1px solid var(--gray-border); font-size:.9rem; }
.hist-table tr:last-child td { border-bottom:none; }

/* Datos cobro */
.datos-cobro { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:600px) { .datos-cobro { grid-template-columns:1fr; } }
.dato-item { background:var(--gray-light); border-radius:12px; padding:16px; }
.dato-label { display:block; font-size:.75rem; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.dato-value { display:block; font-weight:700; color:var(--dark); font-size:.95rem; }
.dato-hint { font-size:.82rem; color:#aaa; margin-top:12px; }