:root { color-scheme: light dark; }
body {
  font-family: Helvetica, Arial, sans-serif;
  max-width: 720px;
  margin: 2rem auto;
  padding: 0 1rem;
  line-height: 1.4;
}
h1 { margin-bottom: 0.25rem; }
.lead { color: #666; margin-top: 0; }
.tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.tab-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #999;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
}
.tab-btn.active { background: #FFD400; border-color: #1a1a1a; font-weight: bold; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 420px; }
label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; }
input, textarea { padding: 0.4rem; font-size: 1rem; }
button { padding: 0.5rem 1rem; margin-top: 0.5rem; width: fit-content; cursor: pointer; }
.result {
  background: #11111108;
  border: 1px solid #ccc;
  padding: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}
.hint { font-size: 0.85rem; color: #666; }
.label-preview { margin-top: 0.5rem; }
.label-preview svg { max-width: 100%; height: auto; border: 1px solid #ccc; }
h3 { margin-top: 1.5rem; }
select { padding: 0.4rem; font-size: 1rem; }
fieldset { border: 1px solid #ccc; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
label.check { flex-direction: row; align-items: center; gap: 0.4rem; }
.estimate { border: 1px solid #ccc; border-left: 6px solid #FFD400; padding: 0.75rem 1rem; margin-top: 1rem; }
.estimate h4 { margin: 0 0 0.5rem; }
/* La etiqueta ocupa a lo mas 45 % y se parte en renglones; con max-content una
   etiqueta larga ("P(pasar seguimiento, 1 año)") empujaba los valores fuera. */
.estimate dl { display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: 0.2rem 1rem; margin: 0.5rem 0; }
.estimate dt { color: #666; }
.estimate dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .estimate { padding: 0.6rem 0.75rem; }
  .estimate dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .estimate dt { font-size: 0.85rem; margin-top: 0.4rem; }
}
.estimate .big { font-size: 1.4rem; font-weight: bold; }
.estimate ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.estimate .warn { color: #a15c00; }
.estimate .ok { color: #1e7e34; }
.estimate .fail { color: #c0392b; }
.estimate ul.criterios { list-style: none; padding-left: 0; }
.estimate .aviso { font-size: 0.85rem; color: #666; border-top: 1px solid #ccc; padding-top: 0.5rem; }
.bandbar { position: relative; height: 18px; background: #8882; margin: 0.25rem 0 1rem; border-radius: 3px; }
.bandbar span { position: absolute; top: 0; bottom: 0; }
.bandbar .band { background: #FFD40099; border: 1px solid #b89600; }
.bandbar .mark { width: 2px; background: currentColor; }
.bandbar .limit { width: 2px; background: #c0392b; }

.label-copy { margin: 0 0 6px; }
.label-copy + .hint { margin: 0 0 18px; font-weight: 600; }
#dos-etiquetas-wrap { display: block; margin: 10px 0 4px; }

.clase-ayuda { border: 1px solid #ccc; border-radius: 4px; padding: 0.5rem 0.75rem; margin: 0.75rem 0; }
.clase-ayuda summary { cursor: pointer; font-weight: bold; }
.clase-candidato { border: 1px solid #ccc; border-left: 6px solid #FFD400; padding: 0.6rem 0.8rem; margin-top: 0.5rem; }
.clase-candidato p { margin: 0.3rem 0 0; }
.clase-candidato .clase-nombre { font-weight: bold; }

.clase-wizard-nav { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.clase-nav-btn { margin-top: 0; padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.clase-pregunta { font-weight: bold; margin: 0 0 0.6rem; }
.clase-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.6rem; }
.clase-opcion {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 0.75rem 0.5rem; margin-top: 0; width: auto;
  border: 1px solid #999; border-radius: 6px; background: transparent; cursor: pointer;
  font-size: 0.8rem; text-align: center; line-height: 1.2;
}
.clase-opcion:hover { border-color: #1a1a1a; background: #FFD40022; }
.clase-icono { width: 40px; height: 40px; }
.clase-icono svg { width: 100%; height: 100%; }
.clase-opcion-nota { font-size: 0.72rem; font-weight: normal; color: #888; line-height: 1.3; }

.deslinde {
  border: 1px solid #b89600; border-left: 6px solid #FFD400; border-radius: 4px;
  padding: 0.6rem 0.8rem; font-size: 0.9rem; margin: 0.75rem 0 1rem;
}
.legal-nota { font-size: 0.78rem; color: #666; margin: 0.25rem 0; }
.pie { border-top: 1px solid #ccc; margin-top: 2.5rem; padding-top: 0.75rem; font-size: 0.85rem; color: #666; }
.borrador { background: #c0392b; color: #fff; padding: 0.5rem 0.75rem; border-radius: 4px; font-weight: bold; }
.legal h2 { font-size: 1.1rem; margin-top: 1.5rem; }
.legal .simplificado { border: 1px solid #ccc; padding: 0 0.9rem 0.3rem; border-radius: 4px; }

.cuenta { border: 1px solid #ccc; border-radius: 4px; padding: 0.6rem 0.8rem; margin: 0 0 1rem; }
.cuenta-acceso { max-width: none; }
.cuenta-acceso button { margin-top: 0; }
.cuenta-activa { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: 0.9rem; }
.cuenta-activa button { margin-top: 0; padding: 0.3rem 0.8rem; }
.cuenta .hint:empty { display: none; }
input[type=file]:disabled { opacity: 0.5; }
/* form y .cuenta-activa usan display:flex, que si no le ganaria al atributo hidden */
[hidden] { display: none !important; }