:root{
  --bg:#0B111A;
  --panel:#0F1623;
  --panel-2:#121B2A;
  --text:#E9EEF6;
  --muted:#9AA5B1;
  --brand-1:#FFD86B;   /* sunrise */
  --brand-2:#FFB34D;   /* mango  */
  --brand-3:#8B5CF6;   /* violet */
  --ok:#22C55E;
  --warn:#F59E0B;
  --danger:#EF4444;
  --border:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.18);
}

html,body{background:var(--bg); color:var(--text);}

.container{
  max-width:1100px; margin:0 auto; padding:16px;
}

.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
}

h1,h2,h3{letter-spacing:.2px}

/* banner motivador */
.banner{
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
  color:#1A1A1A; border-radius:14px; padding:12px 16px; display:flex; gap:10px; align-items:center;
}
.banner .sub{opacity:.85; font-size:.95rem}

/* inputs accesibles */
input[type="text"], input[type="search"], input[type="number"],
select, textarea{
  width:100%; background:#0E141F; color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:10px 12px;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
textarea{min-height:110px; resize:vertical}
input::placeholder, textarea::placeholder{color:#7F8A99}
input:focus, textarea:focus, select:focus{
  border-color:#5B8CFF; box-shadow:0 0 0 3px rgba(91,140,255,.18);
}

/* botones */
.btn{
  background:#11161F; color:#fff; border:1px solid #2B3442;
  padding:10px 14px; border-radius:12px; cursor:pointer;
}
.btn:hover{filter:brightness(1.06)}
.btn-primary{
  background:linear-gradient(135deg,var(--brand-2),var(--brand-3));
  border:none;
}

/* lista de cards (kb) */
.kb-list{display:grid; gap:12px}
.kb-item{padding:14px; border-radius:14px}
.kb-item .meta{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:.9rem}
.tag{background:#0E141F; border:1px solid var(--border); padding:4px 8px; border-radius:999px;}

/* header derecha (ocultaremos Salir si viene embebido) */
.header-right{display:flex; gap:12px; align-items:center}

/* responsive */
@media (min-width: 720px){
  .toolbar{display:grid; grid-template-columns:1fr 180px auto auto; gap:10px}
}
@media (max-width: 719px){
  .toolbar{display:grid; grid-template-columns:1fr; gap:10px}
  .header-right{flex-wrap:wrap; justify-content:flex-end}
}

/* ======== Layout base y tipografía ======== */
:root{
  --page-max: 1160px;
  --space-1: 6px;  --space-2: 10px; --space-3: 14px;
  --space-4: 18px; --space-5: 24px; --space-6: 32px;
  --radius: 14px;
}

/* Fondo suave y centrado del contenido */
body{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,216,107,.08), transparent 60%),
    linear-gradient(180deg, #0B111A, #0A0F17 60%, #0A0F17);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

/* contenedor de página */
.container, main{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-6);
}

/* escalado de títulos accesible */
h1{ font-size: clamp(22px, 2.2vw + 16px, 32px); margin: var(--space-4) 0 var(--space-2); }
h2{ font-size: clamp(18px, 1.8vw + 12px, 26px); margin: var(--space-4) 0 var(--space-2); }
h3{ font-size: clamp(16px, 1.6vw + 8px, 22px);  margin: var(--space-3) 0 var(--space-2); }

/* texto de lectura (prosa) */
.prose{
  color: var(--text);
  line-height: 1.72;
  letter-spacing: .2px;
}
.prose p{ margin: .6em 0; }
.prose small, .muted{ color: var(--muted); }

/* ======== Superficies / tarjetas ======== */
.section{
  margin: var(--space-5) 0;
}
.surface{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* tarjeta con padding cómodo */
.card{
  composes: surface;
  padding: var(--space-4);
}

/* Rejilla responsiva (cards)  */
.grid{
  display: grid; gap: var(--space-3);
}
@media (min-width: 900px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ======== “Tablas” responsivas (listado KB/anuncios/retos) ======== */
.table{
  display: grid;
  gap: var(--space-2);
}
.table .row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0E141F;
}
.table .title{ font-weight: 700; }
.table .right{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* en pantallas grandes, ponemos 3 columnas */
@media (min-width: 1080px){
  .table .row{ grid-template-columns: 1.6fr .8fr auto; }
  .table .meta{ color: var(--muted); }
}

/* ======== Inputs y botones (contraste) ======== */
.input, .select, .textarea{
  width: 100%;
  background: #0E141F;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
.input::placeholder, .textarea::placeholder{ color: #93a0b6; }

/* barra de acciones */
.toolbar{
  composes: surface;
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
}
@media (min-width: 720px){
  .toolbar{ grid-template-columns: 1fr 180px auto auto; }
}

/* chips / tags */
.pill{
  display: inline-block; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 999px;
  background: #0e141f; color: var(--text); font-size: 12px;
}

/* ======== Mejoras visuales del HERO/HUB ======== */
.hero-wrap{ padding: var(--space-4) var(--space-4); }
.hub{ padding-top: var(--space-4); }
.hub-grid{ gap: var(--space-3); }
.tile{ min-height: 148px; }

/* ======== Accesibilidad / motion ======== */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ======== Scrollbar sutil (opcional) ======== */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{ background: #1a2433; border-radius: 10px; }