/* =========================================================
   AEK/KORRIKA branding (reemplazar por colores oficiales)
   ========================================================= */

:root{

  /* ========== PRIMARY SCALE (AEK ORANGE) ========== */
  --aek-primary-50:  #fff4e6;
  --aek-primary-100: #ffe0bf;
  --aek-primary-200: #ffc48c;
  --aek-primary-300: #ffa859;
  --aek-primary-400: #ff912e;
  --aek-primary-500: #ef7f00; /* BASE CORPORATIVO */
  --aek-primary-600: #d97100;
  --aek-primary-700: #b85f00;
  --aek-primary-800: #944c00;
  --aek-primary-900: #6e3800;

  --aek-primary: var(--aek-primary-500);

  /* ========== SECONDARY (IDENTIDAD FUERTE) ========== */
  --aek-secondary: #1a1a1a;
  --aek-secondary-light: #2a2a2a;

  /* ========== ACCENT (APOYO VISUAL) ========== */
  --aek-accent: #003366;       /* azul institucional */
  --aek-accent-light: #00509e;

  /* ========== BACKGROUND SYSTEM ========== */
  --aek-bg: #f8f9fb;
  --aek-surface: #ffffff;
  --aek-surface-alt: #f2f2f2;

  /* ========== TEXT SYSTEM ========== */
  --aek-text: #111111;
  --aek-text-soft: #444444;
  --aek-muted: #6b7280;

  /* ========== BORDERS ========== */
  --aek-border: #e5e7eb;
  --aek-border-strong: #d1d5db;

  /* ========== FEEDBACK COLORS ========== */
  --aek-success: #15803d;
  --aek-warning: #b45309;
  --aek-error:   #b00020;
  --aek-info:    #1d4ed8;

  /* ========== FOCUS ACCESSIBLE ========== */
  --aek-focus: #1d4ed8;

}


*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
  background: var(--aek-bg);
  color: var(--aek-text);
}

.topbar{
  display:flex;
  gap:16px;
  align-items:center;
  padding:16px;
  background: var(--aek-surface);
  border-bottom:1px solid var(--aek-border);
}

.brand{display:flex; gap:12px; align-items:center;}
.logo{height:44px; width:auto; object-fit:contain;}

.title h1{margin:0; font-size:20px;}
.title p{margin:2px 0 0 0; color: var(--aek-muted);}

.container{max-width:780px; margin:24px auto; padding:0 16px;}
.card{
  background: var(--aek-surface);
  border:1px solid var(--aek-border);
  border-radius:12px;
  padding:16px;
}

.tabs{display:flex; gap:8px; margin-bottom:16px;}
.tab{
  border:1px solid var(--aek-border);
  background:transparent;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
}
.tab.active{
  background: var(--aek-primary);
  color:#fff;
  border-color: var(--aek-primary);
}
.tab:focus{outline:3px solid var(--aek-focus); outline-offset:2px;}

.grid{display:grid; grid-template-columns: 1fr; gap:12px;}
@media(min-width:720px){
  .grid{grid-template-columns: 1fr 1fr;}
  .divider{grid-column: 1 / -1;}
}

.field{display:flex; flex-direction:column; gap:6px;}
.label{font-size:14px; font-weight:600;}
input, select{
  padding:10px 10px;
  border:1px solid var(--aek-border);
  border-radius:10px;
  font-size:16px;
  background:#fff;
}
input:focus, select:focus{
  outline:3px solid var(--aek-focus);
  outline-offset:2px;
  border-color: var(--aek-focus);
}
.help{font-size:12px; color: var(--aek-muted);}
.error{min-height:16px; font-size:12px; color:#B00020;}

.divider{
  border:0;
  border-top:1px solid var(--aek-border);
  margin:8px 0;
}

.actions{margin-top:14px; display:flex; align-items:center; gap:12px;}
.btn{
  background: var(--aek-primary);
  color:#fff;
  border:1px solid var(--aek-primary);
  border-radius:12px;
  padding:12px 14px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition: all .2s ease;
}

.btn:hover{
  background: var(--aek-primary-600);
  border-color: var(--aek-primary-600);
}

.btn:active{
  background: var(--aek-primary-700);
  border-color: var(--aek-primary-700);
}

.btn:disabled{opacity:.65; cursor:not-allowed;}
.status{color: var(--aek-muted); font-size:14px;}

.footer{padding:24px 16px; text-align:center; color: var(--aek-muted);}

/* Tab description block */
.tab-description {
  background: linear-gradient(135deg, #fff7f2 0%, #fff3ec 100%);
  border-left: 4px solid #F26522;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(242,101,34,0.08);
}
.tab-desc-intro {
  font-size: 0.9rem;
  color: var(--aek-muted);
  font-style: italic;
  margin: 0 0 2px 0;
}
.tab-desc-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #F26522;
  margin: 0 0 6px 0;
}
.tab-desc-text {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.6;
  margin: 0 0 12px 0;
}
.tab-desc-cta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--aek-muted);
  margin: 0;
}
.tab-desc-icon {
  font-size: 2rem;
  margin: 0 0 8px 0;
  line-height: 1;
}
.tab-desc-signup {
  font-size: 0.95rem;
  font-weight: 700;
  color: #F26522;
  margin: 12px 0 0 0;
  text-align: center;
}
@media(max-width:480px){
  .tab-description { padding: 1rem; }
}