:root{
  /* Paleta clara, liviana */
  --bg: #f7f9fc;
  --paper: #ffffff;
  --ink: #1f2937;       /* texto principal */
  --muted: #6b7280;     /* texto secundario */
  --line: #e5e7eb;      /* bordes suaves */

  --brand1: #5b7cfa;    /* azul violáceo */
  --brand2: #2ed4d3;    /* aqua suave */
  --ring: rgba(91,124,250,.20);

  --shadow: 0 12px 30px rgba(2, 8, 23, .06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--ink);
  background:
    radial-gradient(900px 420px at 15% -10%, #eef4ff 0%, transparent 65%),
    radial-gradient(900px 420px at 110% 0%, #effcfb 0%, transparent 65%),
    var(--bg);
}

/* CONTENEDOR GENERAL */
.wrap{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:40px 24px;
}

/* CARD A DOS COLUMNAS (orientado a escritorio) */
.card-grid{
  width:min(1100px, 96vw);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: 56% 44%;
  overflow:hidden;
}

/* COLUMNA IZQUIERDA: HERO CLARO */
.card-hero{
  padding:48px 48px 36px;
  background:
    linear-gradient(180deg, rgba(91,124,250,.08), rgba(46,212,211,.06) 70%, transparent),
    var(--paper);
}
.hero-top{ display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.logo-dot{ width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg, var(--brand1), var(--brand2)); box-shadow:0 0 0 6px var(--ring); }
.brand{ font-weight:800; letter-spacing:.3px; color:#3443ff; }

.hero-title{ margin:8px 0 6px; font-size:2rem; line-height:1.2; font-weight:800; }
.hero-sub{ margin:0 0 20px; color:var(--muted); }

.benefits{ margin:18px 0 22px; padding-left:20px; color:#475569; }
.benefits li{ margin:6px 0; }

.muted-link{ color:var(--muted); }
.muted-link a{ color:#334155; font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* COLUMNA DERECHA: FORM */
.card-form{
  padding:40px;
  border-left:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.9));
}
.form-title{ margin:0 0 4px; font-size:1.4rem; font-weight:800; }
.form-sub{ margin:0 0 18px; color:var(--muted); }

.alert{ padding:10px 12px; border-radius:10px; margin-bottom:12px; font-weight:600; }
.alert.ok{ background:#ecfdf5; color:#065f46; border:1px solid #bbf7d0; }
.alert.err{ background:#fef2f2; color:#7f1d1d; border:1px solid #fecaca; }

/* FORM ELEMENTS */
.label{ display:block; margin:12px 0 6px; color:#475569; font-weight:600; font-size:.95rem; }
.input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  outline:none;
  font-size:1rem;
  transition: box-shadow .15s, border-color .15s, transform .02s;
}
.input::placeholder{ color:#9aa3af; }
.input:focus{
  border-color: var(--brand1);
  box-shadow: 0 0 0 4px var(--ring);
}

/* ACCIONES */
.form-row{
  display:flex; gap:12px; align-items:center; justify-content:flex-end; margin-top:18px;
}
.btn{
  appearance:none; border:none; cursor:pointer;
  padding:12px 16px; border-radius:12px; font-weight:700; transition:transform .04s, box-shadow .1s;
}
.btn:active{ transform: translateY(1px); }

.btn.primary{
  color:#fff;
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  box-shadow: 0 10px 24px rgba(91,124,250,.25);
}
.btn.primary:hover{ box-shadow:0 12px 30px rgba(91,124,250,.34); }

.btn.ghost{
  background:#fff;
  color:#334155;
  border:1px solid var(--line);
}

.fine-print{ margin-top:16px; color:var(--muted); font-size:.9rem }

/* RESPONSIVO */
@media (max-width: 980px){
  .card-grid{ grid-template-columns: 1fr; }
  .card-form{ border-left:none; border-top:1px solid var(--line); }
  .form-row{ justify-content:space-between; }
}




/* ====== LAYOUT FULLSCREEN ====== */
.layout{ min-height:100dvh; display:flex; flex-direction:column; }
.topbar{
  height:64px; display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10;
}
.topbar-left{ display:flex; align-items:center; gap:14px; }
.nav{ display:flex; gap:10px; margin-left:10px; }
.nav-link{ padding:8px 10px; border-radius:10px; color:#475569; text-decoration:none; }
.nav-link:hover{ background:#f3f4f6; }
.nav-link.active{ background:#eef2ff; color:#3730a3; font-weight:700; }

.topbar-right{ display:flex; align-items:center; gap:10px; }

.content{
  flex:1; padding:18px 20px 28px; max-width:1400px; width:100%; margin:0 auto;
}

/* Welcome banner */
.welcome{
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  color:#fff; border-radius:16px; padding:18px 18px; display:flex;
  align-items:center; justify-content:space-between; box-shadow: var(--shadow);
  margin-bottom:16px;
}
.welcome-cta{ display:flex; gap:10px; }

/* Grids */
.grid{ display:grid; gap:14px; margin-top:14px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px){ .grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px){ .grid-3, .grid-2{ grid-template-columns: 1fr; } }

/* KPI cards */
.kpi{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow: var(--shadow);}
.kpi-title{ color:#64748b; font-weight:600; }
.kpi-value{ font-size:2.2rem; font-weight:800; margin:6px 0; color:#0f172a; }
.kpi-foot{ color:#94a3b8; font-size:.9rem; }

/* Panels */
.panel{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow: var(--shadow);}
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.panel h3{ margin:0; }
.list{ margin:0; padding-left:18px; color:#475569; }
.quick-links{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.qitem{
  display:block; text-decoration:none; color:#0f172a; background:#f8fafc; border:1px solid var(--line);
  border-radius:12px; padding:12px; text-align:center; font-weight:700;
}
.qitem:hover{ background:#eef2ff; border-color:#c7d2fe; }

/* Botón/enlace "Ver todo" */
.see-all{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; text-decoration:none;
  color:#0f172a; background:#f3f4f6;
  border:1px solid var(--line); border-radius:999px;
  padding:8px 14px;
  transition: background .15s, border-color .15s, transform .04s, box-shadow .15s;
}
.see-all::after{
  content:""; width:14px; height:14px;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>') center/contain no-repeat;
  background:#0f172a;
  transition: transform .15s;
}
.see-all:hover{
  background:#eef2ff; border-color:#c7d2fe;
  box-shadow:0 6px 18px rgba(99,102,241,.12);
}
.see-all:hover::after{ transform: translateX(3px); }
.see-all:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(99,102,241,.28);
}