/**
 * cmu-global.css
 * Carioca MU — Sistema de diseño unificado
 * Cargar DESPUÉS de bootstrap.css y style.css en el index.php del template
 * 
 * Qué hace este archivo:
 *  1. Define las variables --cmu-* usadas por los módulos nuevos (downloads, news, etc.)
 *  2. Pisa los componentes Bootstrap usados por los módulos viejos (panel, form-control, btn, etc.)
 *  3. Unifica tipografía, colores y espaciado en toda la web
 *  Sin tocar ningún .php
 */

@import url('https://fonts.googleapis.com/css2?family=Lustria&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ============================================================
   1. VARIABLES GLOBALES
   ============================================================ */
:root {
  /* Paleta base */
  --cmu-bg:          #0e0e0e;
  --cmu-panel:       #111111;
  --cmu-panel2:      #161616;
  --cmu-panel3:      #1a1a1a;
  --cmu-border:      #1f1f1f;
  --cmu-border-hi:   #2e2e2e;

  /* Texto */
  --cmu-ink:         #d0d0d0;
  --cmu-muted:       #787878;
  --cmu-faint:       #4a4a4a;

  /* Acento dorado */
  --cmu-gold:        #e2b93b;
  --cmu-gold-alt:    #f1c40f;
  --cmu-gold-dark:   #a07e22;
  --cmu-gold-faint:  rgba(226,185,59,.08);

  /* Acento rojo */
  --cmu-red:         #c0392b;
  --cmu-red-alt:     #e74c3c;
  --cmu-red-faint:   rgba(192,57,43,.10);

  /* Extra */
  --cmu-green:       #25D366;

  /* Tipografía */
  --cmu-font:        'Montserrat', sans-serif;
  --cmu-serif:       'Lustria', serif;
}

/* ============================================================
   2. BASE GLOBAL
   ============================================================ */
body {
  font-family: var(--cmu-font);
  color: var(--cmu-ink);
  background-color: var(--cmu-bg);
}

a {
  color: var(--cmu-gold);
  text-decoration: none;
}
a:hover {
  color: var(--cmu-gold-alt);
  text-decoration: none;
}

/* ============================================================
   3. PAGE TITLE
   Usado por: casi todos los módulos viejos
   ============================================================ */
.page-title {
  font-family: var(--cmu-serif);
  font-size: 20px;
  font-weight: 400;
  color: #f0f0f0;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--cmu-red), var(--cmu-gold)) 1;
}
.page-title span {
  color: inherit;
}

/* ============================================================
   4. PANELES BOOTSTRAP
   Usado por: addstats, contact, buyzen, mypassword, etc.
   ============================================================ */
.panel {
  background: var(--cmu-panel2);
  border: 1px solid var(--cmu-border-hi);
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 20px;
}
.panel-body {
  padding: 20px;
}
.panel-heading {
  background: var(--cmu-panel3);
  border-bottom: 1px solid var(--cmu-border-hi);
  color: var(--cmu-gold);
  font-family: var(--cmu-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 0;
}
.panel-footer {
  background: var(--cmu-panel3);
  border-top: 1px solid var(--cmu-border);
  padding: 10px 20px;
}

/* ============================================================
   5. FORMULARIOS BOOTSTRAP
   Usado por: addstats, contact, mypassword, forgotpassword, buyzen
   ============================================================ */
.form-control {
  background: var(--cmu-panel3) !important;
  border: 1px solid var(--cmu-border-hi) !important;
  border-radius: 0 !important;
  color: var(--cmu-ink) !important;
  font-family: var(--cmu-font);
  font-size: 13px;
  height: 38px;
  padding: 8px 12px;
  box-shadow: none !important;
  transition: border-color .15s;
}
.form-control:focus {
  border-color: var(--cmu-gold-dark) !important;
  background: #1c1c1c !important;
  outline: none !important;
}
.form-control::placeholder {
  color: var(--cmu-faint);
}
textarea.form-control {
  height: auto;
  resize: vertical;
}
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23787878'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px;
}

.form-group {
  margin-bottom: 14px;
}
label,
.control-label {
  color: var(--cmu-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

/* ============================================================
   6. BOTONES BOOTSTRAP
   Usado por: prácticamente todos los módulos viejos
   ============================================================ */
.btn {
  border-radius: 0;
  font-family: var(--cmu-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 8px 18px;
  transition: filter .15s, background .15s;
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--cmu-gold);
  color: #111;
  border: 1px solid var(--cmu-gold-dark);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--cmu-gold-alt);
  color: #111;
  filter: brightness(1.08);
}
.btn-default {
  background: var(--cmu-panel3);
  color: var(--cmu-ink);
  border: 1px solid var(--cmu-border-hi);
}
.btn-default:hover {
  background: #222;
  color: var(--cmu-gold);
}
.btn-danger {
  background: var(--cmu-red);
  color: #fff;
  border: 1px solid #8b1a10;
}
.btn-danger:hover {
  background: var(--cmu-red-alt);
  color: #fff;
}
.btn-sm, .btn-xs {
  padding: 5px 12px;
  font-size: 11px;
}

/* ============================================================
   7. TABLAS
   Usado por: clearpk, reset, unstick, resetstats, rankings viejos
   ============================================================ */
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--cmu-panel2);
  font-family: var(--cmu-font);
  font-size: 13px;
  color: var(--cmu-ink);
}
.table th {
  background: var(--cmu-panel3);
  color: var(--cmu-gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cmu-border-hi);
  border-top: none;
}
.table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--cmu-border);
  vertical-align: middle;
  color: var(--cmu-ink);
}
.table > tbody > tr:last-child > td {
  border-bottom: none;
}
.table > tbody > tr:hover > td {
  background: rgba(255,255,255,.02);
}
.table-striped > tbody > tr:nth-child(odd) > td {
  background: rgba(255,255,255,.015);
}
.table-bordered {
  border: 1px solid var(--cmu-border-hi);
}
.table-bordered td,
.table-bordered th {
  border: 1px solid var(--cmu-border);
}
.table-condensed td,
.table-condensed th {
  padding: 6px 12px;
}

/* general-table-ui (clearpk, unstick, resetstats) */
.general-table-ui {
  width: 100%;
  border-collapse: collapse;
  background: var(--cmu-panel2);
  border: 1px solid var(--cmu-border-hi);
}
.general-table-ui th {
  background: var(--cmu-panel3);
  color: var(--cmu-gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cmu-border-hi);
}
.general-table-ui td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--cmu-border);
  font-size: 13px;
  color: var(--cmu-ink);
}

/* ============================================================
   8. RANKINGS (módulos viejos — grandresets, etc.)
   ============================================================ */
.rankings-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--cmu-font);
  font-size: 13px;
}
.rankings-table th {
  background: var(--cmu-panel3);
  color: var(--cmu-gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cmu-border-hi);
}
.rankings-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--cmu-border);
  color: var(--cmu-ink);
  background: var(--cmu-panel2);
}
.rankings-table tr:hover td {
  background: rgba(255,255,255,.02);
}
.rankings-table-place {
  color: var(--cmu-gold);
  font-weight: 600;
  font-size: 13px;
}
.rankings-update-time {
  color: var(--cmu-faint);
  font-size: 11px;
  text-align: right;
  padding: 6px 0;
}
.online-status-indicator {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cmu-green);
  margin-right: 5px;
  vertical-align: middle;
}

/* ============================================================
   9. MODULE REQUIREMENTS
   Usado por: clearpk, reset, unstick, resetstats
   ============================================================ */
.module-requirements {
  background: var(--cmu-panel2);
  border: 1px solid var(--cmu-border-hi);
  border-left: 3px solid var(--cmu-gold);
  padding: 14px 18px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--cmu-muted);
}
.module-requirements p {
  margin: 4px 0;
}

/* ============================================================
   10. ALERTAS / MENSAJES DEL SISTEMA
   Usado por: message('success',...) y message('error',...)
   ============================================================ */
.alert {
  border-radius: 0;
  font-family: var(--cmu-font);
  font-size: 13px;
  padding: 12px 16px;
  border: 1px solid transparent;
  margin-bottom: 16px;
}
.alert-success {
  background: rgba(37,211,102,.08);
  border-color: rgba(37,211,102,.25);
  color: #7fe8a8;
}
.alert-danger,
.alert-error {
  background: var(--cmu-red-faint);
  border-color: rgba(192,57,43,.3);
  color: #e87e74;
}
.alert-warning {
  background: var(--cmu-gold-faint);
  border-color: rgba(226,185,59,.25);
  color: var(--cmu-gold);
}
.alert-info {
  background: rgba(52,152,219,.08);
  border-color: rgba(52,152,219,.25);
  color: #7ab8e8;
}

/* ============================================================
   11. LABELS / BADGES BOOTSTRAP
   ============================================================ */
.label {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  border-radius: 0;
  font-family: var(--cmu-font);
}
.label-default  { background: var(--cmu-panel3); color: var(--cmu-muted); border: 1px solid var(--cmu-border-hi); }
.label-primary  { background: var(--cmu-gold-faint); color: var(--cmu-gold); border: 1px solid var(--cmu-gold-dark); }
.label-success  { background: rgba(37,211,102,.1); color: #7fe8a8; border: 1px solid rgba(37,211,102,.2); }
.label-danger   { background: var(--cmu-red-faint); color: #e87e74; border: 1px solid rgba(192,57,43,.3); }
.label-warning  { background: var(--cmu-gold-faint); color: var(--cmu-gold); border: 1px solid rgba(226,185,59,.25); }
.label-info     { background: rgba(52,152,219,.08); color: #7ab8e8; border: 1px solid rgba(52,152,219,.2); }

.badge {
  background: var(--cmu-red);
  color: #fff;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
}

/* ============================================================
   12. SCROLLBAR GLOBAL (Webkit)
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cmu-panel); }
::-webkit-scrollbar-thumb { background: var(--cmu-border-hi); }
::-webkit-scrollbar-thumb:hover { background: var(--cmu-faint); }

/* ============================================================
   13. UTILIDADES
   ============================================================ */
.text-gold   { color: var(--cmu-gold) !important; }
.text-red    { color: var(--cmu-red) !important; }
.text-muted  { color: var(--cmu-muted) !important; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.nopadding   { padding: 0 !important; }
hr {
  border: none;
  border-top: 1px solid var(--cmu-border-hi);
  margin: 20px 0;
}