/* SINTRACOMFACOR · panel de administración */
:root {
  --azul: #1B5CAA; --azul-700: #154989; --azul-100: #E6EEFB; --cielo: #F4F8FE;
  --sol: #FFC72C; --sol-100: #FFF1C7; --naranja: #F57C1F; --naranja-100: #FFE6D6;
  --tinta: #16233F; --tinta-2: #4A5878; --linea: #D6E0F0;
  --ok: #157347; --ok-bg: #E1F4EA; --error: #B42318; --error-bg: #FEECEA;
  --f-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --f-texto: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 var(--f-texto); color: var(--tinta); background: var(--cielo); }
a { color: var(--azul); }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; border-radius: 4px; }
.mono { font-family: ui-monospace, Menlo, monospace; }
.muted { color: var(--tinta-2); }
.right { text-align: right; }

.shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.side { background: var(--azul-700); color: #DCE6FA; padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.side__logo { background: #fff; border-radius: 12px; padding: 8px 10px; margin-bottom: 16px; display: block; }
.side__logo img { display: block; width: 100%; height: auto; }
.side a.nav-i, .side button.nav-i { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; color: #DCE6FA; text-decoration: none; font-weight: 600; background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; text-align: left; width: 100%; }
.side a.nav-i:hover, .side button.nav-i:hover { background: rgba(255,255,255,.08); }
.side a.nav-i.on { background: var(--sol); color: var(--tinta); }
.side__sep { height: 1px; background: rgba(255,255,255,.16); margin: 10px 4px; }
.side__user { margin-top: auto; font-size: 14px; padding: 12px 12px 4px; color: #B9C9EA; }
.pill { background: var(--naranja); color: #fff; border-radius: 999px; padding: 1px 9px; font-size: 13px; font-weight: 700; }
.side a.on .pill { background: var(--tinta); }

.main { padding: 28px clamp(18px, 3vw, 40px) 60px; min-width: 0; }
.page-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-h h1 { font: 700 28px/1.2 var(--f-display); color: var(--azul-700); margin: 0; letter-spacing: -.01em; }
.page-h p { margin: 4px 0 0; color: var(--tinta-2); }
h2.sec { font: 600 19px var(--f-display); color: var(--azul-700); margin: 30px 0 12px; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; border: 1.5px solid transparent; font: 600 15px var(--f-texto); text-decoration: none; cursor: pointer; background: var(--azul); color: #fff; }
.btn:hover { background: var(--azul-700); color: #fff; }
.btn--line { background: #fff; color: var(--azul); border-color: #B9C7E0; }
.btn--line:hover { background: var(--azul-100); color: var(--azul-700); }
.btn--ok { background: var(--ok); } .btn--ok:hover { background: #0f5c39; }
.btn--no { background: #fff; color: var(--error); border-color: #E7B4AF; } .btn--no:hover { background: var(--error-bg); color: var(--error); }
.btn--sol { background: var(--sol); color: var(--tinta); } .btn--sol:hover { background: #FFD35A; color: var(--tinta); }
.btn--sm { padding: 6px 12px; font-size: 14px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.card { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 18px 20px; }
.card--k { border-top: 4px solid var(--azul); }
.card--k:nth-child(2) { border-top-color: var(--sol); } .card--k:nth-child(3) { border-top-color: var(--naranja); } .card--k:nth-child(4) { border-top-color: var(--azul-700); }
.card .k { font: 700 34px/1 var(--f-display); color: var(--azul-700); }
.card .l { color: var(--tinta-2); font-size: 14.5px; margin-top: 6px; }
.panel { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 20px 22px; margin-bottom: 18px; }
.panel h2 { font: 600 18px var(--f-display); margin: 0 0 12px; color: var(--azul-700); }

.tbl-wrap { background: #fff; border: 1px solid var(--linea); border-radius: 14px; overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; font-weight: 600; color: var(--tinta-2); font-size: 13.5px; padding: 11px 14px; background: #F0F5FC; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tbl td { padding: 11px 14px; border-bottom: 1px solid #E7EDF7; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: #FAFCFF; }
.tbl a.row-link { font-weight: 600; text-decoration: none; }
.tbl a.row-link:hover { text-decoration: underline; }
.empty-row td { text-align: center; color: var(--tinta-2); padding: 28px; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--azul-100); color: var(--azul-700); white-space: nowrap; }
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--no { background: var(--error-bg); color: var(--error); }
.badge--pend { background: var(--sol-100); color: #7A5A00; }
.badge--gris { background: #ECEFF5; color: var(--tinta-2); }
.badge--nar { background: var(--naranja-100); color: #A64106; }

.notice { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; background: var(--azul-100); color: var(--azul-700); }
.notice--error { background: var(--error-bg); color: var(--error); }
.notice--ok { background: var(--ok-bg); color: var(--ok); }
.notice--aviso { background: var(--sol-100); color: #5A4300; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; }
.f { display: flex; flex-direction: column; gap: 4px; }
.f label { font-weight: 600; font-size: 14.5px; }
.f input:not([type=checkbox]):not([type=radio]), .f select, .f textarea, input.in, select.in, textarea.in { width: 100%; padding: 9px 12px; border: 1.5px solid #B9C7E0; border-radius: 9px; font: inherit; background: #fff; color: var(--tinta); }
.f textarea { min-height: 110px; resize: vertical; }
.f--wide { grid-column: 1 / -1; }
.f .hint { font-size: 13.5px; color: var(--tinta-2); }
.inline-check { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.filters .f { min-width: 170px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tab { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1.5px solid #B9C7E0; text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--tinta); }
.tab.on { background: var(--azul); border-color: var(--azul); color: #fff; }

dl.kv { display: grid; grid-template-columns: 210px 1fr; gap: 0; margin: 0; }
dl.kv dt, dl.kv dd { padding: 8px 0; border-bottom: 1px solid #E7EDF7; margin: 0; }
dl.kv dt { color: var(--tinta-2); font-size: 14.5px; }
dl.kv dd { font-weight: 600; }
.two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }

/* Reunión */
.agenda { list-style: none; counter-reset: pt; margin: 0; padding: 0; }
.agenda li { counter-increment: pt; border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px 14px; margin-bottom: 10px; background: #fff; }
.agenda .t { font-weight: 700; display: flex; gap: 10px; align-items: center; }
.agenda .t::before { content: counter(pt); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sol); font: 700 14px var(--f-display); }
.sol-row { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid #E7EDF7; }
.sol-row:last-child { border-bottom: 0; }
.sol-row .who { font-weight: 700; }
.sol-row .meta { font-size: 14px; color: var(--tinta-2); }
.sol-row .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sol-row .motivo { grid-column: 1 / -1; display: flex; gap: 8px; }
.sol-row .motivo[hidden] { display: none; }
.asist { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 16px; }
.asist label { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.closebar { position: sticky; bottom: 0; background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 14px 18px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; box-shadow: 0 -6px 20px rgba(15,46,107,.08); }
.preview { width: 100%; height: 520px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
img.preview { height: auto; max-height: 620px; object-fit: contain; }

/* Acceso */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(180deg, var(--azul-100), var(--cielo)); }
.login__card { width: min(420px, 100%); background: #fff; border: 1px solid var(--linea); border-top: 6px solid var(--sol); border-radius: 16px; padding: 28px; }
.login__card img { width: 220px; height: auto; display: block; margin: 0 auto 18px; }
.login__card h1 { font: 700 22px var(--f-display); color: var(--azul-700); margin: 0 0 16px; text-align: center; }
.login__card .f { margin-bottom: 14px; }
.login__card .btn { width: 100%; justify-content: center; padding: 12px; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .side__logo { width: 150px; margin: 0 8px 0 0; }
  .side__sep, .side__user { display: none; }
  .two { grid-template-columns: 1fr; }
  dl.kv { grid-template-columns: 1fr; }
  dl.kv dt { border-bottom: 0; padding-bottom: 0; }
}

.login__alt { text-align: center; margin: 16px 0 0; font-size: 14.5px; }
.notice--aviso a { color: inherit; }

/* Ficha de afiliado */
.ficha-grid { display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:start; }
@media(max-width:700px){ .ficha-grid { grid-template-columns:1fr; } }
.ficha-foto-col { display:flex; flex-direction:column; align-items:center; gap:10px; }
.ficha-foto { width:180px; height:180px; border-radius:50%; overflow:hidden; background:var(--fondo-2); border:3px solid var(--linea); display:grid; place-items:center; }
.foto-img { width:100%; height:100%; object-fit:cover; }
.foto-placeholder { width:100%; height:100%; display:grid; place-items:center; font:700 64px var(--f-display); color:var(--azul); }
.foto-form { text-align:center; }
.ficha-estado { padding:4px 14px; border-radius:99px; font:600 13px var(--f-texto); }
.estado--activo { background:#E8F5E9; color:#2E7D32; }
.estado--retirado { background:#FFEBEE; color:#C62828; }
.estado--pendiente { background:#FFF8E1; color:#F57F17; }
.ficha-badge { padding:3px 12px; border-radius:99px; font:600 12px var(--f-texto); margin-top:4px; }
.badge--junta { background:#E3EEFF; color:var(--azul); }
.badge--mep { background:#F3E5F5; color:#7B1FA2; }
.ficha-datos { display:flex; flex-direction:column; gap:20px; }
.ficha-sec { background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:18px 20px; }
.ficha-sec__h { font:700 15px var(--f-display); color:var(--azul); margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--linea); }
.dl { display:grid; grid-template-columns:160px 1fr; gap:6px 16px; font-size:14px; margin:0; }
.dl dt { color:var(--tinta-2); font-weight:600; }
.dl dd { margin:0; color:var(--tinta); }

/* Reuniones */
.tabs { display:flex; gap:4px; margin:0 0 20px; border-bottom:2px solid var(--linea); }
.tab { padding:8px 18px; font:600 14px var(--f-display); color:var(--tinta-2); text-decoration:none; border-radius:6px 6px 0 0; border:1px solid transparent; border-bottom:none; }
.tab--activa { background:#fff; border-color:var(--linea); color:var(--azul); margin-bottom:-2px; }
.quorum-bar { display:flex; gap:20px; align-items:center; background:#F8F9FB; border:1px solid var(--linea); border-radius:var(--radio); padding:12px 18px; margin:0 0 20px; font-size:14px; }
.quorum-bar--ok { background:#F0FAF0; border-color:#A5D6A7; }
.q-ok { color:#2E7D32; font-weight:700; }
.q-falta { color:#C62828; font-weight:700; }
.tr--presente td { background:#F0FAF0; }
.orden-dia { white-space:pre-wrap; font-family:inherit; font-size:14px; margin:6px 0 0; background:var(--fondo-2); border-radius:6px; padding:10px 14px; }
.sec-h { font:700 16px var(--f-display); color:var(--azul); margin:24px 0 12px; }
.dl--4 { grid-template-columns: repeat(4,auto); }
.mt-12 { margin-top:12px; } .mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; } .mb-20 { margin-bottom:20px; }
.card { background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:20px 22px; }