/* Innovate Research Centers — estilos del sistema de reclutamiento.
   Base blanca, esquinas redondeadas en todo, logo arriba a la izquierda. */
:root {
    --blue: #0f4c81;
    --blue-dark: #0b3a63;
    --accent: #1b9aaa;
    --ink: #1d2733;
    --muted: #6b7a89;
    --line: #dbe4ec;
    --bg: #f4f7fa;
    --danger: #b3261e;
    --radius: 14px;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.45rem; margin: 0.6em 0; }
h2 { font-size: 1.1rem; margin: 0 0 0.6em; }
h3 { font-size: 1rem; margin: 0.8em 0 0.4em; }

/* ---------- barra superior ---------- */
.topbar {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 12px 18px; position: sticky; top: 0; z-index: 10;
}
.brand img { height: 78px; display: block; }
.mainnav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.mainnav a {
    padding: 7px 12px; border-radius: 999px; color: var(--ink); font-size: 0.92rem;
}
.mainnav a:hover { background: var(--bg); text-decoration: none; }
.mainnav a.on { background: var(--blue); color: #fff; }
.userbox { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: var(--muted); }
.userbox a.lang {
    border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--ink);
}
.langswitch { display: inline-flex; gap: 6px; }
.langswitch a.lang.on { background: var(--blue); color: #fff; border-color: var(--blue); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 18px; }
.foot { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 22px 0 30px; }
.flash {
    max-width: 1240px; margin: 14px auto 0; background: #e7f4ea; color: #14532d;
    border: 1px solid #bfe3c8; border-radius: var(--radius); padding: 10px 14px;
}
.flash.err { background: #fdecea; color: var(--danger); border-color: #f5c6c2; }

/* ---------- tarjetas y rejillas ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px; margin-bottom: 16px;
}
.card.ok { border-color: #bfe3c8; background: #f2faf4; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex; gap: 8px; align-items: center; background: var(--bg);
    border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--ink);
}
.chip strong { color: var(--blue); }
.tag {
    background: #e3eef7; color: var(--blue-dark); border-radius: 999px;
    padding: 2px 10px; font-size: 0.82rem; white-space: nowrap;
}

/* ---------- tablas ---------- */
table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
table.kv th { width: 38%; }
table.list { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

/* ---------- formularios ---------- */
label { display: block; font-size: 0.88rem; color: var(--muted); margin-bottom: 10px; }
input, select, textarea {
    width: 100%; margin-top: 4px; padding: 9px 11px; font: inherit; color: var(--ink);
    border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
label.check { display: flex; align-items: center; gap: 8px; color: var(--ink); }
label.check input { width: auto; margin: 0; }
form.form { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
form.form .wide, form.mini .wide { grid-column: 1 / -1; }
form.mini { display: block; border-top: 1px dashed var(--line); margin-top: 12px; padding-top: 6px; }
.searchbar { display: flex; gap: 8px; margin-bottom: 14px; }
.searchbar input { flex: 1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- botones ---------- */
.btn {
    display: inline-block; background: linear-gradient(135deg, #4888c8, #0f4c81); color: #fff; border: none; cursor: pointer;
    padding: 9px 18px; border-radius: 999px; font: inherit; font-size: 0.93rem;
    box-shadow: 0 2px 8px rgba(15, 76, 129, 0.22);
}
.btn:hover { background: linear-gradient(135deg, #2e63a8, #0b3a63); text-decoration: none; }
.btn.go { background: linear-gradient(135deg, #6cae33, #4e8a24); box-shadow: 0 2px 8px rgba(78, 138, 36, 0.25); }
.btn.go:hover { background: linear-gradient(135deg, #5c9a2b, #3f701d); }
.btn.alt { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
.btn.small { padding: 5px 12px; font-size: 0.85rem; }
.btn.danger { background: var(--danger); }
form.inline { display: inline-flex; gap: 8px; align-items: center; margin: 10px 0; }
form.inline select { width: auto; }

/* ---------- pipeline ---------- */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; }
.kcol {
    flex: 0 0 240px; background: #eef3f8; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 10px;
}
.kcol h2 { font-size: 0.95rem; display: flex; justify-content: space-between; }
.kcol .count { background: var(--blue); color: #fff; border-radius: 999px; padding: 0 9px; }
.kcard {
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 9px 10px; margin-bottom: 9px;
}
.kcard form.move { display: flex; gap: 6px; margin-top: 7px; }
.kcard form.move select { flex: 1; padding: 5px 8px; }

/* ---------- login y formulario publico ---------- */
.loginbox { max-width: 420px; margin: 8vh auto; padding: 0 16px; text-align: center; }
.loginlogo { max-width: 340px; width: 100%; height: auto; margin-bottom: 14px; }
.loginbox .card { text-align: left; }
.formpage { max-width: 640px; margin: 4vh auto; padding: 0 16px; }
.formpage h1 { text-align: center; }
.langrow { text-align: center; color: var(--muted); }
details summary { cursor: pointer; color: var(--blue); margin: 8px 0; }

@media (max-width: 720px) {
    form.form { grid-template-columns: 1fr; }
    .topbar { position: static; padding: 10px 12px; }
    .brand img { height: 58px; }
}

/* ---------- v2: dashboard atractivo + recuperacion ---------- */
/* Paleta viva tomada del logo de Innovate (helice azul #4888c8 / verde
   #6cae33), esquinas redondeadas en todo, sin librerias externas. */
.dashhead {
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px; flex-wrap: wrap; margin-bottom: 6px;
}
.quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.quicklbl { color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px; margin: 10px 0 18px;
}
.stat {
    display: flex; flex-direction: column; gap: 2px; justify-content: center;
    min-height: 104px; padding: 16px 18px; border-radius: 18px; color: #fff;
    box-shadow: 0 6px 16px rgba(15, 76, 129, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 76, 129, 0.24); }
.stat .num { font-size: 2.15rem; font-weight: 700; line-height: 1.05; }
.stat .lbl { font-size: 0.92rem; font-weight: 600; opacity: 0.94; }
.grad-total { background: linear-gradient(135deg, #0f4c81, #4888c8); }
.grad-upcoming { background: linear-gradient(135deg, #0b3a63, #1b9aaa); }
.grid2 { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 16px; align-items: start; }
.bars { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 2px; }
.brow { display: grid; grid-template-columns: 150px 1fr 74px; align-items: center; gap: 10px; }
.blbl { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.btrack { background: #eef3f8; border-radius: 999px; height: 16px; overflow: hidden; display: block; }
.bfill { display: block; height: 100%; border-radius: 999px; min-width: 4px; }
.bval { font-size: 0.9rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.uplist { list-style: none; margin: 0; padding: 0; }
.uplist li {
    display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; margin-bottom: 8px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
}
.udt { font-weight: 700; color: var(--blue-dark); font-size: 0.92rem; }
.upn { font-size: 0.95rem; }
.ups { color: var(--muted); font-size: 0.85rem; }
.forgot { text-align: center; margin: 12px 0 4px; font-size: 0.92rem; }

@media (max-width: 900px) {
    .grid2 { grid-template-columns: 1fr; }
    .brow { grid-template-columns: 110px 1fr 64px; }
}

/* ---------- v3: sistema visual unificado en TODAS las vistas ---------- */
/* Misma paleta del dashboard v2 (azul #4888c8 / verde #6cae33 del logo y
   los colores por etapa), extendida a pipeline, pacientes, ficha,
   calendario, estudios, cola de salida, ajustes y formularios.
   Logo protagonista (orden de Jose): barra superior con logo de 78px de
   alto (58px en movil) y logo de 340px en ingreso, formulario publico y
   restablecimiento, siempre con las proporciones del PNG original.
   Esquinas redondeadas en todo; sin librerias externas. */
body { background: linear-gradient(180deg, #e9f1f8, var(--bg) 300px); background-attachment: fixed; }
.topbar { box-shadow: 0 1px 10px rgba(29, 39, 51, 0.07); }
.mainnav a.on { background: linear-gradient(135deg, #4888c8, #0f4c81); }
.card { box-shadow: 0 2px 10px rgba(29, 39, 51, 0.05); }
.card h2 { display: flex; align-items: center; gap: 9px; }
.card h2::before {
    content: ""; flex: 0 0 auto; width: 5px; height: 1.02em; border-radius: 3px;
    background: linear-gradient(180deg, #4888c8, #6cae33);
}
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(72, 136, 200, 0.18); }

/* chips de etapa: pastilla suave con punto del color de la etapa */
.tag.stg { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; padding: 3px 11px; }
.tag.stg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.stg-new_lead { background: #e2edf9; color: #2e63a8; }
.stg-new_lead::before { background: #4888c8; }
.stg-contacted { background: #ddf3f6; color: #0f7585; }
.stg-contacted::before { background: #1b9aaa; }
.stg-potential { background: #ebf5dd; color: #4e8a24; }
.stg-potential::before { background: #6cae33; }
.stg-appointment { background: #fcefd6; color: #96600a; }
.stg-appointment::before { background: #f0a12b; }
.stg-enrolled { background: #ddf2e8; color: #1c7350; }
.stg-enrolled::before { background: #2f9e6e; }
.stg-not_eligible { background: #e9eef2; color: #5f7183; }
.stg-not_eligible::before { background: #93a5b5; }

/* distintivos de tipo de cita */
.tag.kind { font-weight: 600; }
.kind-screening { background: #fcefd6; color: #96600a; }
.kind-appointment { background: #e2edf9; color: #2e63a8; }
.kind-callback { background: #ddf3f6; color: #0f7585; }

/* pipeline: columna y tarjetas con el color de su etapa */
.kcol { box-shadow: 0 2px 8px rgba(29, 39, 51, 0.05); }
.kcard { box-shadow: 0 1px 4px rgba(29, 39, 51, 0.07); }
.kcol-new_lead { border-top: 5px solid #4888c8; }
.kcol-new_lead h2 { color: #2e63a8; }
.kcol-new_lead .count { background: linear-gradient(135deg, #4888c8, #2e63a8); }
.kcol-new_lead .kcard { border-left: 4px solid #4888c8; }
.kcol-contacted { border-top: 5px solid #1b9aaa; }
.kcol-contacted h2 { color: #0f7585; }
.kcol-contacted .count { background: linear-gradient(135deg, #1b9aaa, #0f7585); }
.kcol-contacted .kcard { border-left: 4px solid #1b9aaa; }
.kcol-potential { border-top: 5px solid #6cae33; }
.kcol-potential h2 { color: #4e8a24; }
.kcol-potential .count { background: linear-gradient(135deg, #6cae33, #4e8a24); }
.kcol-potential .kcard { border-left: 4px solid #6cae33; }
.kcol-appointment { border-top: 5px solid #f0a12b; }
.kcol-appointment h2 { color: #96600a; }
.kcol-appointment .count { background: linear-gradient(135deg, #f0a12b, #d17d06); }
.kcol-appointment .kcard { border-left: 4px solid #f0a12b; }
.kcol-enrolled { border-top: 5px solid #2f9e6e; }
.kcol-enrolled h2 { color: #1c7350; }
.kcol-enrolled .count { background: linear-gradient(135deg, #2f9e6e, #1c7350); }
.kcol-enrolled .kcard { border-left: 4px solid #2f9e6e; }
.kcol-not_eligible { border-top: 5px solid #93a5b5; }
.kcol-not_eligible h2 { color: #5f7183; }
.kcol-not_eligible .count { background: linear-gradient(135deg, #93a5b5, #5f7183); }
.kcol-not_eligible .kcard { border-left: 4px solid #93a5b5; }

/* tablas pulidas: sombra, encabezado con tinte y filas suaves */
table.list { box-shadow: 0 2px 10px rgba(29, 39, 51, 0.06); }
table.list th { background: linear-gradient(180deg, #f2f7fb, #e7eff6); color: var(--blue-dark); }
table.list tr:nth-child(even) td { background: #f8fbfd; }
table.list tr:hover td { background: #eef5fb; }

/* buscador destacado de pacientes */
.searchbar {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 12px; box-shadow: 0 2px 10px rgba(29, 39, 51, 0.05); align-items: center;
}
.searchbar input { margin-top: 0; border-radius: 999px; padding: 10px 16px; font-size: 1rem; }

/* acentos por seccion (ficha del paciente y ajustes) */
.card.sec-data, .card.sform { border-top: 4px solid #4888c8; }
.card.sec-data h2::before, .card.sform h2::before { background: #4888c8; }
.card.sec-foll, .card.schan { border-top: 4px solid #1b9aaa; }
.card.sec-foll h2::before, .card.schan h2::before { background: #1b9aaa; }
.card.sec-comm, .card.sweb { border-top: 4px solid #6cae33; }
.card.sec-comm h2::before, .card.sweb h2::before { background: #6cae33; }
.card.sec-appt, .card.spass { border-top: 4px solid #f0a12b; }
.card.sec-appt h2::before, .card.spass h2::before { background: #d17d06; }
.card.sback { border-top: 4px solid #5f7183; }
.card.sback h2::before { background: #5f7183; }

/* estudios en tarjetas */
.studygrid { align-items: start; }
.studycard h2 { margin-bottom: 4px; }
.studycard .smeta { color: var(--muted); margin: 2px 0 12px; font-size: 0.92rem; }
.studycard .srow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.studycard .snum { font-size: 1.9rem; font-weight: 700; color: var(--blue-dark); line-height: 1; }
.studycard .slbl { color: var(--muted); font-size: 0.88rem; }
.studycard form { margin-top: 12px; }
.studycard.off { opacity: 0.72; }
.tag.stag-on { background: #ddf2e8; color: #1c7350; font-weight: 600; }
.tag.stag-off { background: #e9eef2; color: #5f7183; font-weight: 600; }

/* cola de salida: distintivos de estado con color */
.obadge {
    display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
    padding: 2px 11px; font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
.obadge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ob-pending { background: #fcefd6; color: #96600a; }
.ob-sent { background: #ddf2e8; color: #1c7350; }
.ob-failed { background: #fdecea; color: #b3261e; }
.chip.ob-pending { background: #fcefd6; border-color: #f0d9a8; color: #96600a; }
.chip.ob-sent { background: #ddf2e8; border-color: #bfe3c8; color: #1c7350; }
.chip.ob-failed { background: #fdecea; border-color: #f5c6c2; color: #b3261e; }
.chip.ob-pending strong, .chip.ob-sent strong, .chip.ob-failed strong { color: inherit; }

/* encabezado con gradiente del formulario publico y de restablecimiento */
.formhero {
    background: linear-gradient(135deg, #0f4c81 0%, #4888c8 55%, #6cae33 135%);
    border-radius: 18px; padding: 26px 20px 16px; text-align: center;
    box-shadow: 0 8px 20px rgba(15, 76, 129, 0.22); margin-bottom: 18px;
}
.formhero .loginlogo { background: #fff; border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; }
.formhero h1 { color: #fff; margin: 0.2em 0 0.3em; }
.formhero .langrow { color: rgba(255, 255, 255, 0.85); margin: 0 0 6px; }
.formhero .langrow a { color: #fff; font-weight: 600; }
.formpage .card { box-shadow: 0 4px 16px rgba(29, 39, 51, 0.08); }

/* ingreso: tarjeta con sombra y acento superior */
.loginbox .card { box-shadow: 0 6px 20px rgba(29, 39, 51, 0.10); border-top: 4px solid #4888c8; }

/* ---------- v4: TODAS las vistas con el lenguaje del dashboard ---------- */
/* Orden de Jose tras ver la v3: las paginas internas deben verse COMO EL
   DASHBOARD — botones grandes de colores, cuadros grandes blancos con
   colores, todo el espacio cubierto con plenitud (nada resumido ni
   arrinconado arriba). Cada vista abre con banda de encabezado con
   gradiente + fila de tarjetas de estadisticas grandes (.stats/.stat,
   las mismas clases del dashboard) + contenido en tarjetas blancas
   grandes (.bigcard). El dashboard NO cambia: es la referencia. */

/* banda de encabezado de vista */
.vhead {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    background: linear-gradient(120deg, #0f4c81 0%, #4888c8 55%, #1b9aaa 110%);
    border-radius: 18px; padding: 24px 28px; margin-bottom: 18px;
    box-shadow: 0 8px 22px rgba(15, 76, 129, 0.22);
}
.vhead h1 { color: #fff; font-size: 1.9rem; margin: 0; line-height: 1.15; }
.vhead-act { display: flex; gap: 10px; flex-wrap: wrap; }

/* botones grandes (primarios con gradiente ya definido; variantes v4) */
.btn.big { padding: 14px 30px; font-size: 1.06rem; font-weight: 700; }
.btn.biglight {
    display: inline-block; background: #fff; color: var(--blue-dark); border: none; cursor: pointer;
    padding: 14px 30px; border-radius: 999px; font: inherit; font-size: 1.06rem; font-weight: 700;
    box-shadow: 0 4px 14px rgba(11, 58, 99, 0.28);
}
.btn.biglight:hover { background: #eaf3fb; text-decoration: none; }
.btn.outline {
    background: #fff; color: var(--blue); border: 2px solid var(--blue); box-shadow: none;
    padding: 13px 28px; font-size: 1.02rem; font-weight: 700;
}
.btn.outline:hover { background: #eef5fb; text-decoration: none; }

/* tarjetas blancas grandes de contenido */
.bigcard {
    border-radius: 18px; padding: 24px 26px;
    box-shadow: 0 6px 20px rgba(29, 39, 51, 0.08);
}
.bigcard > h2 { font-size: 1.28rem; margin-bottom: 0.7em; }
.bigcard p { font-size: 1rem; line-height: 1.55; }
.card.bigcard form .btn, form.bigcardform .btn { padding: 12px 26px; font-size: 1rem; }
.bigcardform {
    border-radius: 18px; padding: 26px 28px;
    box-shadow: 0 6px 20px rgba(29, 39, 51, 0.08);
}
.bigcardform > h2 { font-size: 1.28rem; }

/* tablas dentro de tarjeta grande: filas con aire */
.tablecard { padding: 12px 16px; min-height: 240px; }
.tablecard table.list { border: none; box-shadow: none; border-radius: 0; }
.tablecard table th, .tablecard table td { padding: 13px 10px; font-size: 0.98rem; }

/* estados vacios amplios y amables */
.emptystate { text-align: center; padding: 52px 26px; }
.emptystate .emptybig { font-size: 1.18rem; color: var(--muted); margin: 0 0 20px; line-height: 1.5; }

/* buscador y lookup grandes (pacientes) */
.searchbar.bigsearch { padding: 18px; border-radius: 18px; gap: 12px; }
.searchbar.bigsearch input { font-size: 1.06rem; padding: 14px 20px; }
.lookupform { display: flex; gap: 12px; align-items: stretch; }
.lookupform input { flex: 1; margin-top: 0; font-size: 1.02rem; padding: 12px 16px; }

/* pipeline v4: columnas-tarjeta que llenan el alto, encabezado con el
   gradiente COMPLETO de la etapa y el conteo en numero grande */
.kanban { align-items: stretch; min-height: calc(100vh - 320px); }
.kcol {
    flex: 1 1 0; min-width: 208px; display: flex; flex-direction: column;
    background: #fff; border-radius: 18px; padding: 0 12px 14px;
    box-shadow: 0 6px 18px rgba(29, 39, 51, 0.08);
}
.kcol-new_lead, .kcol-contacted, .kcol-potential,
.kcol-appointment, .kcol-enrolled, .kcol-not_eligible { border-top: none; }
.kcol h2.khead {
    margin: 0 -12px 14px; padding: 16px; border-radius: 18px 18px 0 0;
    color: #fff; font-size: 1.06rem; display: flex; align-items: center;
    justify-content: space-between; gap: 10px;
}
.kcol-new_lead h2.khead { background: linear-gradient(135deg, #4888c8, #2e63a8); color: #fff; }
.kcol-contacted h2.khead { background: linear-gradient(135deg, #1b9aaa, #0f7585); color: #fff; }
.kcol-potential h2.khead { background: linear-gradient(135deg, #6cae33, #4e8a24); color: #fff; }
.kcol-appointment h2.khead { background: linear-gradient(135deg, #f0a12b, #d17d06); color: #fff; }
.kcol-enrolled h2.khead { background: linear-gradient(135deg, #2f9e6e, #1c7350); color: #fff; }
.kcol-not_eligible h2.khead { background: linear-gradient(135deg, #93a5b5, #5f7183); color: #fff; }
.kcol .knum {
    font-size: 2rem; font-weight: 800; line-height: 1;
    background: rgba(255, 255, 255, 0.24); border-radius: 12px; padding: 5px 13px;
}
.kbody { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kempty {
    flex: 1; min-height: 170px; display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--muted); font-size: 0.96rem;
    background: var(--bg); border: 2px dashed var(--line); border-radius: 14px; padding: 26px 12px;
}
.kcard { padding: 14px; border-radius: 14px; }
.kcard strong { font-size: 1.03rem; }
.kcard form.move select { padding: 8px 10px; }
.kcard form.move .btn { padding: 8px 15px; }

/* ficha del paciente: encabezado grande con banda de color de su etapa */
.phead {
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    padding: 24px 26px; margin-bottom: 16px; box-shadow: 0 6px 20px rgba(29, 39, 51, 0.08);
}
.phead::before {
    content: ""; display: block; height: 9px; border-radius: 99px;
    background: var(--pg, linear-gradient(90deg, #4888c8, #2e63a8)); margin-bottom: 16px;
}
.phead h1 {
    font-size: 1.95rem; margin: 0; display: flex; align-items: center;
    gap: 14px; flex-wrap: wrap; line-height: 1.2;
}
.tag.stg.big { font-size: 1rem; padding: 9px 19px; color: #fff; }
.tag.stg.big::before { background: #fff; }
.tag.stg-new_lead.big { background: linear-gradient(135deg, #4888c8, #2e63a8); }
.tag.stg-contacted.big { background: linear-gradient(135deg, #1b9aaa, #0f7585); }
.tag.stg-potential.big { background: linear-gradient(135deg, #6cae33, #4e8a24); }
.tag.stg-appointment.big { background: linear-gradient(135deg, #f0a12b, #d17d06); }
.tag.stg-enrolled.big { background: linear-gradient(135deg, #2f9e6e, #1c7350); }
.tag.stg-not_eligible.big { background: linear-gradient(135deg, #93a5b5, #5f7183); }
.pstats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pstat {
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
    padding: 9px 16px; font-size: 0.94rem; color: var(--muted);
    display: inline-flex; align-items: baseline; gap: 7px;
}
.pstat strong { font-size: 1.3rem; color: var(--blue-dark); line-height: 1; }

/* estudios v4: banda de gradiente y numero mas grande */
.studycard { padding: 0; overflow: hidden; }
.studycard .sband { padding: 17px 22px; }
.studycard.on .sband { background: linear-gradient(135deg, #2f9e6e, #1c7350); }
.studycard.off .sband { background: linear-gradient(135deg, #93a5b5, #5f7183); }
.studycard .sband h2 { color: #fff; margin: 0; font-size: 1.3rem; }
.studycard .sband h2::before { display: none; }
.studycard .studybody { padding: 18px 22px 22px; }
.studycard .snum { font-size: 2.8rem; }
.studycard .slbl { font-size: 0.95rem; }

/* ajustes v4: banda de encabezado de color por seccion */
.card.bigcard.setcard > h2 {
    margin: -24px -26px 16px; padding: 15px 26px; color: #fff;
    border-radius: 18px 18px 0 0; font-size: 1.22rem;
}
.card.bigcard.setcard > h2::before { display: none; }
.bigcard.sform > h2 { background: linear-gradient(135deg, #4888c8, #2e63a8); }
.bigcard.schan > h2 { background: linear-gradient(135deg, #1b9aaa, #0f7585); }
.bigcard.sweb > h2 { background: linear-gradient(135deg, #6cae33, #4e8a24); }
.bigcard.sback > h2 { background: linear-gradient(135deg, #93a5b5, #5f7183); }
.bigcard.spass > h2 { background: linear-gradient(135deg, #f0a12b, #d17d06); }

@media (max-width: 900px) {
    .vhead { padding: 20px; }
    .vhead h1 { font-size: 1.55rem; }
    .kanban { min-height: 0; }
    .kcol { min-height: 300px; }
    .phead h1 { font-size: 1.6rem; }
    .bigcard { padding: 20px; }
    .card.bigcard.setcard > h2 { margin: -20px -20px 14px; padding: 13px 20px; }
}

/* ---------- v5: pipeline en bandas horizontales por etapa ----------
   Cada etapa es una banda de ancho completo, una debajo de la otra:
   tarjeta blanca grande con encabezado en el gradiente COMPLETO de su
   etapa y el conteo en numero grande (el mismo lenguaje que las
   tarjetas del dashboard), y las tarjetas de paciente en rejilla
   horizontal dentro de la banda. Las reglas .kanban/.kcol de la v4
   quedan arriba pero ya no se usan. */
.pbands { display: flex; flex-direction: column; gap: 18px; }
.pband {
    background: #fff; border-radius: 18px; padding: 0 16px 16px;
    box-shadow: 0 6px 18px rgba(29, 39, 51, 0.08);
}
.pband h2.pband-head {
    margin: 0 -16px 16px; padding: 16px 20px; border-radius: 18px 18px 0 0;
    color: #fff; font-size: 1.18rem; display: flex; align-items: center;
    justify-content: space-between; gap: 10px;
}
.pband h2.pband-head::before { display: none; }
.pband-new_lead h2.pband-head { background: linear-gradient(135deg, #4888c8, #2e63a8); }
.pband-contacted h2.pband-head { background: linear-gradient(135deg, #1b9aaa, #0f7585); }
.pband-potential h2.pband-head { background: linear-gradient(135deg, #6cae33, #4e8a24); }
.pband-appointment h2.pband-head { background: linear-gradient(135deg, #f0a12b, #d17d06); }
.pband-enrolled h2.pband-head { background: linear-gradient(135deg, #2f9e6e, #1c7350); }
.pband-not_eligible h2.pband-head { background: linear-gradient(135deg, #93a5b5, #5f7183); }
.pband .pband-num {
    font-size: 2rem; font-weight: 800; line-height: 1;
    background: rgba(255, 255, 255, 0.24); border-radius: 12px; padding: 5px 13px;
}
.pgrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}
.pgrid .kcard { margin-bottom: 0; }
.pempty {
    min-height: 110px; display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--muted); font-size: 0.96rem;
    background: var(--bg); border: 2px dashed var(--line); border-radius: 14px; padding: 24px 14px;
}
@media (max-width: 720px) {
    .pgrid { grid-template-columns: 1fr; }
    .pband h2.pband-head { font-size: 1.05rem; }
}