:root{
  --oc-red: #DD1A15;

  --oc-bg: #10141A;        /* oscuro, no negro */
  --oc-surface: #161C24;   /* tarjetas */
  --oc-surface-2: #1D2530; /* inputs / tablas */
  --oc-text: #EAF0F8;
  --oc-muted: #AEB8C7;
  --oc-border: rgba(255,255,255,.10);
  --oc-shadow: 0 12px 30px rgba(0,0,0,.40);
}

html, body { height: 100%; }

body{
  background: radial-gradient(1200px 700px at 20% 0%, #1A2230 0%, var(--oc-bg) 55%, #0B0F14 100%);
  color: var(--oc-text);
}

/* Bootstrap helpers */
.text-body, .text-dark { color: var(--oc-text) !important; }
.bg-white, .bg-light { background-color: transparent !important; }

/* Cards / containers */
.card, .oc-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  background-color: var(--oc-surface) !important;
  border: 1px solid var(--oc-border) !important;
  border-radius: 16px;
  box-shadow: var(--oc-shadow);
  color: var(--oc-text);
}

/* Inputs */
.form-control, .form-select, .form-check-input, textarea, input{
  background-color: var(--oc-surface-2) !important;
  border: 1px solid var(--oc-border) !important;
  color: var(--oc-text) !important;
}
.form-control::placeholder{ color: rgba(234,240,248,.55) !important; }
.form-control:focus, .form-select:focus{
  border-color: rgba(221,26,21,.65) !important;
  box-shadow: 0 0 0 .25rem rgba(221,26,21,.15) !important;
}

/* Labels */
.form-label { color: var(--oc-muted); }

/* Tables */
.table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--oc-text);
  --bs-table-border-color: var(--oc-border);
}
.table thead th{
  color: var(--oc-muted);
  border-bottom-color: var(--oc-border);
}
.table tbody tr:hover{
  background: rgba(255,255,255,.03);
}

/* Alerts */
.alert{
  border: 1px solid var(--oc-border);
  color: var(--oc-text);
}
.alert-success{ background: rgba(46,204,113,.10); }
.alert-danger{ background: rgba(231,76,60,.10); }

/* Buttons */
.btn-oc{
  background: var(--oc-red);
  border-color: var(--oc-red);
  color: #fff;
}
.btn-oc:hover{ filter: brightness(.95); color:#fff; }
.btn-oc-outline{
  border: 1px solid rgba(221,26,21,.75);
  color: #fff;
}
.btn-oc-outline:hover{ background: rgba(221,26,21,.12); color:#fff; }

/* Top area */
.oc-topbar{ padding: 18px 0 10px; }
.oc-logo{ display:flex; justify-content:center; align-items:center; }
.oc-logo svg{ height: 44px; width:auto; }

.oc-nav{
  background: rgba(8,10,14,.40);
  border: 1px solid var(--oc-border);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}