/* assets/css/styles_capacitacion.css */
/*
Paleta (extraída de la imagen aproximada):
--color-primary: #1E5ED6
--color-secondary: #2D6BFF
--color-bg: #F5F7FB
--color-surface: #FFFFFF
--color-text: #1F2937
--color-muted: #6B7280
*/

/* ================= Variables y reset ===================*/
:root{
  --color-primary:#1E5ED6;
  --color-secondary:#2D6BFF;
  --color-bg:#F5F7FB;
  --color-surface:#FFFFFF;
  --color-text:#1F2937;
  --color-muted:#6B7280;

  --space-0:.25rem;
  --space-1:.5rem;
  --space-2:.75rem;
  --space-3:1rem;
  --space-4:1.25rem;
  --space-5:1.75rem;
  --space-6:2.25rem;

  --radius-1:.5rem;
  --radius-2:.75rem;
  --radius-3:1rem;

  --font-system: ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --fs-1:.875rem;
  --fs-2:1rem;
  --fs-3:1.125rem;
  --fs-4:1.25rem;
  --fs-5:1.5rem;

  --fs-btn:1.125rem;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--color-bg);
  color:var(--color-text);
  font:400 var(--fs-2)/1.5 var(--font-system);
}

img{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }

.container{
  width:min(960px,100%);
  padding-inline: clamp(var(--space-3),3vw,var(--space-5));
  margin-inline:auto;
}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(50%);clip:rect(0 0 0 0);overflow:hidden;
}

/* ================= Layout general ======================*/
.site-header{ background:var(--color-surface); border-bottom:1px solid #E5E7EB; }
.header-wrap{ display:flex; align-items:center; gap:var(--space-3); padding-block:var(--space-4); }

.brand{ display:flex; align-items:center; gap:var(--space-2); }
.brand__icon{ width:44px;height:44px;border-radius:50%;background:var(--color-secondary);color:#fff;display:grid;place-items:center;font-weight:700; }
.brand__title{ margin:0; font-size:var(--fs-5); }
.brand__subtitle{ margin:0; color:var(--color-muted); }

.hero{ padding-block:var(--space-2); }
.hero__hint{ margin:0; color:var(--color-muted); }

/* ================= Login compacto ======================*/
.login{ padding-block:var(--space-4); }

.login-form{
  width:min(560px,100%);
  margin-inline:auto;
  background:var(--color-surface);
  border:1px solid #E5E7EB;
  border-radius:var(--radius-3);
  padding:clamp(var(--space-4),4.5vw,var(--space-5));
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}

.field{ display:flex; flex-direction:column; gap:var(--space-1); margin-bottom:var(--space-4); }
label{ font-weight:600; }
input[type="email"],input[type="password"],input[type="text"]{
  appearance:none;border:1px solid #D1D5DB;border-radius:var(--radius-2);padding:.8rem .85rem;background:#fff;outline:none;transition:border-color .15s, box-shadow .15s;
}
input::placeholder{ color:#9CA3AF; }
input:focus{ border-color:var(--color-secondary); box-shadow:0 0 0 4px color-mix(in srgb, var(--color-secondary) 18%, transparent); }
.help{ color:var(--color-muted); font-size:var(--fs-1); }

.form-grid{ display:grid; gap:var(--space-4); }

/* ================= Checks: MISMO tamaño + alineación ======================*/
.checks{
  display:grid;
  gap:var(--space-2);
  margin:var(--space-3) 0;
  border:0; padding:0;
}

/* usamos grid para reservar una columna fija al checkbox */
.check{
  display:grid;
  grid-template-columns: 22px 1fr;  /* ancho fijo para el cuadrado */
  column-gap: var(--space-2);
  align-items:start;                /* alinear con la primera línea del texto */
}

/* checkbox 100% consistente en todos los navegadores */
.check input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width:20px;
  height:20px;
  border:2px solid #9CA3AF;
  border-radius:4px;
  background:#fff;
  margin:0;                /* elimina diferencias de margen */
  display:block;
}

.check input[type="checkbox"]:checked{
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  box-shadow: inset 0 0 0 3px #fff;  /* “tick” simple */
}

.check span{
  display:block;
  line-height:1.45;
}

/* ================= Acciones y botones ===================*/
.actions{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  margin-top:var(--space-2);
  align-items:stretch;
  text-align:center;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; border:1px solid transparent; border-radius:.75rem;
  padding:1rem 1.25rem; cursor:pointer; background:#ECEFF4;
}

.btn--primary{
  background:var(--color-primary);
  color:#fff;
  border-color:var(--color-primary);
  font-size:var(--fs-btn);
  font-weight:600;
  width:100%;
}

.btn--primary:hover,
.btn--primary:focus-visible{ filter:brightness(1.05); }

.btn--link{ background:transparent; border-color:transparent; padding:0; color:var(--color-secondary); }

.inline-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--space-1);
}

.inline-actions .sep{ color:#CBD5E1; }

.muted{ color:var(--color-muted); }
.privacy{ font-size:var(--fs-1); margin:0; }

/* ================= Footer ==============================*/
.site-footer{ padding-block:var(--space-5); color:var(--color-muted); text-align:center; }

/* ================= Media queries =======================*/
@media (min-width:768px){
  .login-form{ width:min(520px,100%); }
  .form-grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1024px){
  .login{ padding-block:var(--space-5); }
}