:root{
  --sf-green:#58A190;
  --sf-green-dark:#25806f;
  --sf-mint:#EFF2F1;
  --sf-ink:#0f1e17;
  --sf-text:#2f3a37;
  --sf-hl-bg: rgba(131,233,140,.64);
  --sf-hl-bd: rgba(25,230,42,.4);
}

/* base */
html,body{height:100%;}
body{margin:0;}

/* layout */
.sf-wrapper, .sf-wrapper * { box-sizing: border-box; }
.sf-wrapper{
  font-family:'Poppins', Arial, sans-serif; background:#fff; min-height:100vh;
  width:min(100%,1200px); margin:20px auto 0; padding:clamp(16px,2.5vw,24px); border-radius:10px;
}
.sf-header{ display:flex; align-items:center; justify-content:center; position:relative; margin-bottom:30px; }
.sf-brand{ display:flex; align-items:center; gap:14px; }
.sf-logo-badge{ width:78px; height:78px; display:flex; align-items:center; justify-content:center; background:#FFF; border-radius:12px; box-shadow:inset 0 0 0 1px #D6DDE3;}
.sf-logo{ width:70px; height:auto; display:block; }
.sf-brand-text h1{ margin:0; color:#0A0A0A; font-weight:600; letter-spacing:-.02em; font-size:clamp(32px,6vw,56px); line-height:1.1;}
.sf-brand-text p{ margin:6px 0 0; color:#2B7D66; font-weight:600; font-size:clamp(14px,2.5vw,20px); }
.sf-help{ position:absolute; right:0; top:0; background:var(--sf-green); color:#fff; border:none; border-radius:10px; padding:8px 12px; cursor:pointer; }

.sf-content{ display:flex; gap:24px; flex-wrap:wrap; margin-top:10px; }
.sf-card{ background:var(--sf-mint); border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.08); padding:20px; flex:1 1 360px; min-width:260px;}
.sf-left{ max-width:420px; }
.sf-card h3{ text-align:center; margin:0 0 14px; color: var(--sf-green-dark); font-weight: 600;}

.sf-label{ display:block; font-weight:600; margin:6px 0 6px; }
.sf-input{ width:100%; border:1px solid #cfd8d5; border-radius:8px; padding:10px 12px; background:#fff; font-size:14px;}
.sf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin-top:12px; margin-bottom:6px; }
.sf-field label{ font-size:13px; color:#38564f; display:block; margin-bottom:4px; }
.sf-actions{ display:flex; justify-content:center; margin-top:14px; }
.sf-btn{ background:var(--sf-green); color:#fff; border:none; border-radius:999px; padding:10px 18px; cursor:pointer; font-weight:600;}
.sf-btn.ghost{ background:var(--sf-green); color:#fff; border:none; border-radius:12px; padding:8px 14px; font-weight:600;}

.sf-stats p{ margin:4px 0; color:var(--sf-text); font-size:clamp(12px,1.8vw,14px); }
.sf-table-head{ margin-top:10px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.sf-downloads{ display:flex; gap:10px; }

/* CONTENEDOR SCROLLABLE CON ALTURA LIMITADA */
.sf-table-wrap{
  margin-top:8px; background:#fff; border:1px solid #d5e2de; border-radius:12px;
  overflow:auto; /* scroll X/Y */
  max-height:60vh;         /* soporte general */
  max-height:60dvh;        /* viewport dinámico moderno */
  -webkit-overflow-scrolling:touch;
}
.sf-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; table-layout:fixed; }
.sf-table thead th{
  position:sticky; top:0; z-index:2; background:#fff; padding:10px; text-align:left;
  border-bottom:1px solid #d5e2de; box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.sf-table tbody tr:nth-child(odd) td{ background:#B6E3D3; }
.sf-table tbody tr:nth-child(even) td{ background:#e6f2ee; }
.sf-table th, .sf-table td{ padding:10px; white-space:normal; word-break:break-word; overflow-wrap:anywhere; }

@media (max-width:840px){
  .sf-grid{ grid-template-columns:1fr; }
  .sf-card{ flex:1 1 100%; }
}

/* ===== MODAL (custom, sin Bootstrap) ===== */
.modal{ position:fixed; inset:0; z-index:1050; display:none; overflow:auto; outline:0; }
.modal::before{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; transition:opacity .15s linear; }
.modal.show{ display:block; }
.modal.show::before{ opacity:1; }

.modal.fade{ transition: opacity .15s linear; opacity:0; }
.modal.fade.show{ opacity:1; }

.modal-dialog{ position:relative; width:auto; margin:.5rem; pointer-events:none; max-width:700px; }
@media (min-width:576px){ .modal-dialog{ margin:1.75rem auto; } }
.modal.fade .modal-dialog{ transform:translate(0,-25%); transition:transform .3s ease-out; }
.modal.fade.show .modal-dialog{ transform:translate(0,0); }

.modal-content{ pointer-events:auto; background:#fff; border:1px solid #d9e5e2; border-radius:12px;
                box-shadow:0 10px 30px rgba(0,0,0,.35); overflow:hidden; }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
               border-bottom:1px solid #e6efe9; }
.modal-title{ margin:0; font-weight:600; color:#ffffff; }
.modal-body{ padding:16px; }

/* Tema del header del modal */
.fs-modal__header{ background:var(--sf-green); }
.fs-modal__subtitle{ margin:14px 0 6px; font-weight:600; color:#2B7D66; }
.fs-modal__list{ margin:0 0 10px 18px; }
.fs-modal__divider{ border:0; border-top:1px solid #e6efe9; margin:14px 0; }
.fs-modal__footnote{ font-size:13px; color:#56756c; }

/* Botón cerrar */
.close{ background:transparent; border:0; font-size:28px; line-height:1; color:#3b4b46; cursor:pointer; }
.close:hover{ opacity:.7; }

/* ===== OVERLAY DE CARGA ===== */
.sf-loading{
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(255,255,255,.75); backdrop-filter: blur(1.5px);
  z-index: 2147483647;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.sf-loading__box{
  background: #fff; border: 1px solid #d9e5e2; border-radius: 12px; padding: 20px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15); display: flex; align-items: center; gap: 12px;
}
.sf-loading__spinner{
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--sf-green); border-top-color: transparent; animation: spin .8s linear infinite;
}
.sf-loading__text{ font-weight: 600; color: var(--sf-green-dark); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Resaltado de coincidencias */
.highlight{
  background: var(--sf-hl-bg);
  box-shadow: 0 0 0 2px var(--sf-hl-bd) inset;
  border-radius: 4px;
  padding: 0 2px;
  font-weight: 700;
  color: var(--sf-ink);
}