:root { font-family: system-ui, sans-serif; color: #1f2933; background: #f5f7fa; }
.container { max-width: 32rem; margin: 3rem auto; padding: 0 1rem; }
.card { display: flex; flex-direction: column; gap: .5rem; background: #fff; padding: 1.5rem; border-radius: .5rem; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
input { padding: .5rem; font-size: 1rem; border: 1px solid #cbd2d9; border-radius: .25rem; }
button { padding: .5rem 1rem; font-size: 1rem; cursor: pointer; }
.error { color: #b42318; margin: 0; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.inline { display: inline; }
.container { max-width: 56rem; }
.nav { display: flex; gap: 1rem; }
.who { display: flex; gap: .75rem; align-items: center; }
.bar { flex-wrap: wrap; margin-bottom: 1rem; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.filters .advanced { flex-basis: 100%; }
.advanced summary { cursor: pointer; color: #1f4e79; }
.advanced .badge { background: #1f4e79; color: #fff; border-radius: .6rem; padding: 0 .45rem; font-size: .8rem; }
.advanced-fields { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: end; margin-top: .4rem; }
.advanced-fields label { display: flex; flex-direction: column; font-size: .85rem; color: #52606d; }
.advanced .hint { font-size: .8rem; }
.check { display: flex; gap: .25rem; align-items: center; }
table.leads { width: 100%; border-collapse: collapse; background: #fff; }
table.leads th, table.leads td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid #e4e7eb; }
.due-overdue { color: #b42318; font-weight: 600; }
.due-today { color: #b54708; font-weight: 600; }
.pager { display: flex; gap: 1rem; margin-top: 1rem; }
.card { margin-bottom: 1rem; }
.meta, .hint { color: #52606d; margin: .25rem 0; }
.fields { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
.fields dt { font-weight: 600; }
.fields dd { margin: 0; }
.stack { display: flex; flex-direction: column; gap: .4rem; }
fieldset { border: 1px solid #e4e7eb; border-radius: .25rem; display: flex; flex-direction: column; gap: .3rem; }
.notice { color: #05603a; }
.notes { white-space: pre-wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 40rem) { table.leads th, table.leads td { padding: .4rem; } .fields { grid-template-columns: 1fr; } }
.history { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.history li { background: #f8fafc; border: 1px solid #e4e7eb; border-radius: .25rem; padding: .4rem .6rem; }
.history summary { cursor: pointer; }
.when { font-weight: 600; }
.preview { color: #3e4c59; }
.followup { border-left: 3px solid #cbd2d9; padding-left: .75rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* --- Hito 6A.10b: layout compacto, barra superior y ficha en dos columnas ------------------------- */
.container { max-width: 78rem; margin: 0 auto 2rem; padding: 0 1.25rem; }
h1 { font-size: 1.6rem; margin: .5rem 0 .75rem; }
h2 { font-size: 1.15rem; margin: 0 0 .25rem; }
h3 { font-size: 1rem; margin: .6rem 0 .2rem; }
.card { padding: .9rem 1.1rem; gap: .35rem; margin-bottom: .9rem; }
.topbar { background: #243b53; color: #e4e7eb; padding: .45rem 1rem; margin: 0 0 1rem;
          border-radius: 0 0 .5rem .5rem; flex-wrap: nowrap; gap: 1rem; }
.topbar a { color: #fff; text-decoration: none; white-space: nowrap; }
.topbar a:hover, .topbar a:focus { text-decoration: underline; }
.topbar .nav { gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.topbar .who { white-space: nowrap; font-size: .95rem; }
.topbar button { padding: .25rem .7rem; font-size: .9rem; }
#back-to-list { color: #bcccdc; }
.head h1 { margin: 0; }
.meta-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1.5rem; }
.meta-row .meta { margin: 0; }
.cols { display: grid; grid-template-columns: 1fr; gap: .9rem; align-items: start; margin-bottom: .9rem; }
.cols > .card { margin-bottom: 0; }
.col-stack { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.col-stack > .card { margin-bottom: 0; }
.location .address { margin: 0; overflow-wrap: anywhere; }
.location-links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0; }
@media (min-width: 60rem) { .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 48rem) { .topbar { flex-wrap: wrap; } .topbar .who { white-space: normal; flex-wrap: wrap; } }
.login, .login-title { max-width: 26rem; margin-left: auto; margin-right: auto; }
.login-title { margin-top: 3rem; }
.task-last { color: #52606d; }
td.task-last { max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
th a.sort { color: inherit; text-decoration: none; white-space: nowrap; }
th a.sort:hover, th a.sort:focus { text-decoration: underline; }
th a.sort .arrow { color: #9aa5b1; font-weight: 400; }
th a.sort-active .arrow { color: #1f2933; font-weight: 700; }
.task-meeting { color: #1849a9; font-weight: 600; }
/* Bloques de la etapa: visibles solo si la etapa elegida los necesita. Sin :has() (navegadores antiguos)
   se ven siempre, como antes: degradan sin perder funcionalidad. El servidor valida igual en ambos casos. */
@supports selector(:has(*)) {
  .stage-extra { display: none; }
  form:has(select[name="target_stage"] option[value="not_interested"]:checked) .stage-extra-reason,
  form:has(select[name="target_stage"] option[value="lost"]:checked) .stage-extra-reason,
  form:has(select[name="target_stage"] option[value="meeting_scheduled"]:checked) .stage-extra-meeting {
    display: flex; flex-direction: column; gap: .3rem;
  }
}