:root {
  --fondo: #f3f5f8;
  --tarjeta: #ffffff;
  --texto: #1d2733;
  --suave: #5b6b7c;
  --borde: #dde3ea;
  --marca: #1f5fa8;
  --marca-oscura: #174a85;
  --ok: #1d7a46;
  --ok-fondo: #e5f5ec;
  --alerta: #9a5b00;
  --alerta-fondo: #fff3dc;
  --error: #b3261e;
  --error-fondo: #fdeceb;
  --curso: #1f5fa8;
  --curso-fondo: #e6effa;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

.contenedor { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
main.contenedor { padding-top: 24px; padding-bottom: 48px; }

.barra { background: var(--marca); color: #fff; }
.barra-interior { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; flex-wrap: wrap; }
.marca { color: #fff; text-decoration: none; font-weight: 600; font-size: 17px; }
.marca span { font-weight: 400; opacity: .8; margin-left: 6px; }
.salir { display: flex; align-items: center; gap: 10px; margin: 0; }
.salir .usuario { opacity: .9; }
.barra .boton.secundario { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }

h1 { font-size: 22px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h2 { font-size: 17px; margin: 0 0 12px; }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  overflow-x: auto;
}
.tarjeta.angosta { max-width: 460px; margin: 40px auto; }

.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rejilla > .tarjeta { margin-bottom: 20px; }
@media (max-width: 760px) { .rejilla { grid-template-columns: 1fr; gap: 0; } }

label { display: block; font-weight: 600; margin: 12px 0 4px; }
input[type=text], input[type=password], input[type=file] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borde);
  border-radius: 7px;
  font: inherit;
  background: #fff;
}
input:focus { outline: 2px solid var(--marca); outline-offset: 1px; }

.boton {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 18px;
  border: 1px solid var(--marca);
  border-radius: 7px;
  background: var(--marca);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.boton:hover { background: var(--marca-oscura); }
.boton:disabled { opacity: .6; cursor: wait; }
.boton.secundario { background: #fff; color: var(--marca); margin-top: 0; padding: 5px 12px; font-weight: 500; }
.boton.secundario:hover { background: var(--curso-fondo); }

.nota { color: var(--suave); font-size: 13.5px; margin: 12px 0 0; }
.resumen { font-size: 16px; }

.aviso { padding: 11px 14px; border-radius: 8px; margin: 0 0 18px; border: 1px solid transparent; }
.aviso.ok { background: var(--ok-fondo); color: var(--ok); border-color: #b9e2c9; }
.aviso.error { background: var(--error-fondo); color: var(--error); border-color: #f3c3bf; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
th { color: var(--suave); font-weight: 600; font-size: 13px; }
td form { margin: 0; }
a { color: var(--marca); }

.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.etiqueta.ok { background: var(--ok-fondo); color: var(--ok); }
.etiqueta.alerta { background: var(--alerta-fondo); color: var(--alerta); }
.etiqueta.error { background: var(--error-fondo); color: var(--error); }
.etiqueta.curso { background: var(--curso-fondo); color: var(--curso); }
.etiqueta.neutra { background: #eceff3; color: var(--suave); }

.datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.datos dt { color: var(--suave); }
.datos dd { margin: 0; word-break: break-word; }
code.hash { font-size: 12px; word-break: break-all; }

.advertencias { margin: 0; padding-left: 20px; color: var(--alerta); }

.pasos { list-style: none; margin: 0; padding: 0; }
.pasos li { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--borde); }
.pasos li.error { color: var(--error); }
.pasos .hora { color: var(--suave); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.pasos pre { margin: 0; font: inherit; white-space: pre-wrap; word-break: break-word; }