/* EDOM Territorial — móvil primero: los líderes trabajan desde el celular, a veces con mala señal en las veredas.
   Sin fuentes externas a propósito: una hoja de Google Fonts frenaba el arranque varios segundos. */
:root {
	--verde: #0f5132; --verde-2: #198754; --verde-claro: #e8f3ec; --oro: #f4c542; --fondo: #f4f7f5; --tarjeta: #fff;
	--texto: #1f2a24; --muted: #5f6f66; --borde: #d7e2db; --peligro: #b42318; --pend: #b26a00; --radio: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.45 system-ui, -apple-system, Segoe UI, sans-serif; }
body.ter-sin-scroll { overflow: hidden; }
a { color: var(--verde-2); }
h1 { font-size: 1.4rem; margin: 4px 0 12px; }
h2 { font-size: 1.05rem; margin: 22px 0 10px; color: var(--verde); }
input, select, textarea { font: inherit; width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; color: var(--texto); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--verde-2); outline-offset: 0; border-color: transparent; }
.ter-boot, .ter-vacio { padding: 32px 16px; text-align: center; color: var(--muted); }
.ter-error { margin: 16px 0; padding: 14px; border-radius: 10px; background: #fdecea; color: var(--peligro); }
.ter-muted { color: var(--muted); font-size: .9rem; }
.ter-falta { color: var(--peligro); font-weight: 600; }

/* Botones */
.ter-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--borde); background: #fff; color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; }
.ter-btn--primario { background: var(--verde); border-color: var(--verde); color: #fff; }
.ter-btn--peligro { color: var(--peligro); border-color: #f2c1bc; }
.ter-btn--peligro.ter-btn--primario, form .ter-btn--peligro { background: var(--peligro); color: #fff; border-color: var(--peligro); }
.ter-btn--sm { padding: 6px 10px; font-size: .85rem; }
.ter-btn--grande { width: 100%; padding: 16px; font-size: 1.1rem; }
.ter-btn:disabled { opacity: .6; cursor: default; }
.ter-link { border: 0; background: none; color: var(--peligro); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; padding: 0 4px; }

/* Shell */
.ter-shell { min-height: 100vh; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.ter-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--verde); color: #fff; }
.ter-header__marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ter-header__marca b, .ter-header__nombre { display: block; }
.ter-header__marca small, .ter-header__nombre small { display: block; font-size: .75rem; opacity: .8; }
.ter-header__logo { font-size: 1.5rem; }
.ter-header__user { display: flex; align-items: center; gap: 10px; text-align: right; min-width: 0; }
.ter-header__nombre { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.ter-salir { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 1.1rem; cursor: pointer; flex: 0 0 auto; }
.ter-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; overflow-x: auto; background: #fff; border-top: 1px solid var(--borde); padding-bottom: env(safe-area-inset-bottom); }
.ter-nav__btn { flex: 1 0 72px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; }
.ter-nav__btn span { font-size: 1.3rem; }
.ter-nav__btn.is-active { color: var(--verde); }
.ter-view { max-width: 960px; margin: 0 auto; padding: 16px; }
@media (min-width: 900px) {
	.ter-shell { padding: 0 0 0 220px; }
	.ter-nav { top: 0; right: auto; width: 220px; flex-direction: column; border-top: 0; border-right: 1px solid var(--borde); padding-top: 76px; }
	.ter-nav__btn { flex: 0 0 auto; flex-direction: row; gap: 10px; padding: 12px 20px; font-size: .95rem; }
	.ter-nav__btn.is-active { background: var(--verde-claro); }
	.ter-header { position: fixed; left: 0; right: 0; z-index: 30; }
	.ter-view { padding-top: 92px; }
}

/* Avisos */
.ter-aviso, .ter-alerta, .ter-ok { display: block; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; text-decoration: none; }
.ter-aviso { background: var(--verde-claro); color: var(--verde); }
.ter-alerta { background: #fff4e0; color: #7a4a00; border: 1px solid #f3d29a; }
.ter-ok { background: var(--verde-claro); color: var(--verde); font-weight: 600; }
.ter-toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; background: var(--verde); color: #fff; font-weight: 600; opacity: 0; pointer-events: none; transition: .2s; z-index: 60; }
.ter-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.ter-toast.is-malo { background: var(--peligro); }

/* Inicio */
.ter-hola { font-size: 1.6rem; }
.ter-grandes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.ter-grande { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; padding: 14px; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); color: var(--texto); text-decoration: none; font-weight: 700; text-align: center; }
.ter-grande span { font-size: 2rem; }
.ter-grande b { position: absolute; top: 10px; right: 12px; padding: 2px 8px; border-radius: 99px; background: var(--oro); font-size: .85rem; }
.ter-grande--primario { grid-column: 1 / -1; background: var(--verde); color: #fff; border-color: var(--verde); min-height: 110px; font-size: 1.2rem; }
.ter-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ter-kpi { padding: 14px; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); }
.ter-kpi span { display: block; font-size: .8rem; color: var(--muted); }
.ter-kpi b { font-size: 1.5rem; color: var(--verde); }
.ter-zonas { display: grid; gap: 8px; }
.ter-zona { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); }
.ter-zona summary { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.ter-zona summary::-webkit-details-marker { display: none; }
.ter-zona__nombre { font-weight: 700; }
.ter-zona__coord { font-size: .85rem; color: var(--muted); grid-column: 1; }
.ter-zona__num { font-size: .85rem; text-align: right; }
.ter-zona__det { border-top: 1px solid var(--borde); padding: 6px 14px 10px; }
.ter-fila { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--borde); font-size: .9rem; }
.ter-zonas > .ter-fila { background: #fff; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--borde); }
.ter-fila.is-pend { color: var(--muted); }

/* Formularios y tarjetas */
.ter-form { display: grid; gap: 14px; max-width: 560px; }
.ter-form label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
.ter-check { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 500 !important; }
.ter-check input { width: 24px; height: 24px; flex: 0 0 auto; margin: 0; }
.ter-autoriza { padding: 14px; border-radius: 12px; background: #fffbea; border: 1px solid #f1e2a8; }
.ter-autoriza p { margin: 0 0 8px; }
.ter-autoriza__texto { padding: 12px; border-radius: 10px; background: #fff; border-left: 4px solid var(--oro); font-size: .95rem; }
.ter-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ter-filtros input, .ter-filtros select { flex: 1 1 180px; width: auto; }
.ter-lista { display: grid; gap: 10px; }
.ter-card { padding: 14px; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); }
.ter-card.is-inactivo { opacity: .6; }
.ter-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ter-card__acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ter-tel { text-decoration: none; font-weight: 600; white-space: nowrap; }
.ter-badge { display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--verde-claro); color: var(--verde); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.ter-badge--pend { background: #fff1d6; color: var(--pend); }
.ter-asig { margin-top: 6px; font-size: .9rem; }
.ter-aud { padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--borde); font-size: .9rem; }
.ter-aud__f { color: var(--muted); margin-right: 6px; font-size: .8rem; }

/* Árbol */
.ter-arbol { display: grid; gap: 6px; }
.ter-nodo { background: #fff; border: 1px solid var(--borde); border-radius: 10px; }
.ter-nodo > summary, .ter-nodo--hoja { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; cursor: pointer; }
.ter-nodo--hoja { cursor: default; }
.ter-nodo__nom small { color: var(--muted); font-weight: 400; }
.ter-nodo__resp { flex: 1 1 100%; font-size: .8rem; }
.ter-nodo__resp:empty { display: none; }
.ter-nodo__acc { margin-left: auto; display: flex; gap: 6px; }
.ter-nodo__hijos { display: grid; gap: 6px; padding: 0 8px 8px 18px; }

/* Guía */
.ter-guia { display: grid; gap: 12px; margin-bottom: 18px; }
.ter-guia__paso { display: flex; gap: 12px; padding: 14px; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); }
.ter-guia__paso > span { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; font-weight: 800; }
.ter-guia__paso p { margin: 4px 0 0; color: var(--muted); }

/* Modal */
.ter-modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: flex-end; justify-content: center; background: rgba(15,30,20,.45); }
.ter-modal.is-open { display: flex; }
.ter-modal__panel { position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: #fff; }
.ter-modal__panel h3 { margin: 0 40px 14px 0; }
.ter-modal__x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--verde-claro); font-size: 1rem; cursor: pointer; }
@media (min-width: 700px) { .ter-modal { align-items: center; } .ter-modal__panel { border-radius: 18px; } }

/* Login */
.ter-login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: linear-gradient(160deg, var(--verde) 0%, #1d6b45 60%, var(--fondo) 60%); }
.ter-login__card { width: 100%; max-width: 380px; display: grid; gap: 12px; padding: 28px 22px; border-radius: 20px; background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.15); text-align: center; }
.ter-login__card h1 { margin: 0; }
.ter-login__logo { font-size: 2.6rem; }
.ter-login__error { color: var(--peligro); min-height: 1.2em; font-size: .9rem; }
.ter-pass { position: relative; }
.ter-pass input { padding-right: 50px; }
.ter-pass button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 1.2rem; cursor: pointer; }

/* Fase 2: actividades, avisos, capacitación e informes. */
.ter-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ter-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 4px 0 12px; }
.ter-tab { flex: 0 0 auto; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--borde); background: #fff; font: inherit; font-weight: 600; font-size: .9rem; color: var(--muted); cursor: pointer; }
.ter-tab.is-active { background: var(--verde); border-color: var(--verde); color: #fff; }
.ter-badge--ok { background: #d1f0dc; color: #0f5132; }
.ter-act__desc, .ter-aviso-card__txt { margin: 8px 0 0; white-space: pre-line; }
.ter-act__rep { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--fondo); font-size: .9rem; }
.ter-act__rep small { color: var(--muted); }
.ter-label { display: block; font-size: .9rem; margin-bottom: 6px; }
.ter-checks { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--borde); border-radius: 10px; max-height: 220px; overflow-y: auto; }
.ter-aviso-card.is-nuevo { border-left: 5px solid var(--oro); }
.ter-nav__btn { position: relative; }
.ter-nav__n { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--peligro); color: #fff; font-size: .7rem; font-style: normal; line-height: 18px; text-align: center; }
@media (min-width: 900px) { .ter-nav__n { position: static; margin-left: auto; } }
.ter-cap-estado { display: inline-block; padding: 8px 14px; border-radius: 99px; font-weight: 700; background: #fff4e0; color: #7a4a00; }
.ter-cap-estado--aprobada { background: #d1f0dc; color: var(--verde); }
.ter-quiz fieldset { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; background: #fff; display: grid; gap: 8px; }
.ter-quiz legend { font-weight: 700; padding: 0 6px; }
.ter-material { display: block; text-decoration: none; color: var(--texto); font-weight: 600; }
.ter-fila--cap { grid-template-columns: 1fr auto auto; background: #fff; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borde); }
.ter-mat__fila { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
@media (max-width: 600px) { .ter-mat__fila { grid-template-columns: 1fr auto; } .ter-mat__fila [data-mt] { grid-column: 1 / -1; } }
.ter-filtros--rep select, .ter-filtros--rep input { flex: 1 1 160px; }
.ter-rep__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 8px 0; }
.ter-rep__cab h2 { margin: 0 0 4px; }
.ter-tabla-wrap { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
.ter-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ter-tabla th, .ter-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--borde); text-align: left; white-space: nowrap; }
.ter-tabla th { background: var(--verde-claro); color: var(--verde); font-size: .8rem; position: sticky; top: 0; }
.ter-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.ter-tabla tfoot td { font-weight: 800; background: var(--fondo); }

/* Fase 3: sin señal, notificaciones, alertas y semáforo. */
.ter-cola { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ter-push { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ter-alertas { display: grid; gap: 6px; }
.ter-alerta-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--borde); border-left-width: 5px; color: var(--texto); text-decoration: none; font-size: .92rem; }
.ter-alerta-item--alta { border-left-color: var(--peligro); }
.ter-alerta-item--media { border-left-color: var(--oro); }
.ter-alerta-item--info { border-left-color: var(--verde-2); }
.ter-sem { font-size: .78rem; font-weight: 700; white-space: nowrap; }
.ter-sem--rojo { color: var(--peligro); }
.ter-sem--amarillo { color: #8a5b00; }
.ter-sem--verde { color: var(--verde); }