:root{
  --brand:#48C3D9;           /* celeste institucional */
  --brand-700:#2AA5BB;
  --brand-900:#167788;
  --ink:#202124;             /* texto */
  --muted:#6B7280;           /* gris */
  --bg:#F7FAFC;              /* fondo claro */
  --card:#ffffff;            /* superficies */
  --ok:#34a853;              /* verdes estándar */
  --warn:#fbbc05;            /* amarillo */
  --err:#ea4335;             /* rojo */
}
*{box-sizing:border-box}



html,body{height:100%}
body{
  margin:0; font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial; min-height: 100svh;
  color:var(--ink); background:var(--bg);display: grid; grid-template-rows: auto 1fr auto;
}
main { flex: 1 0 auto; }  /* ocupa el alto disponible */


/* Top bar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; background:#fff; border-bottom:1px solid #e5e7eb;
}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{height:40px; width:auto}
.brand-text{display:flex; flex-direction:column}
.brand-country{font-size:12px; color:var(--muted); letter-spacing:.02em}
.brand-title{font-weight:800; color:var(--brand-900); letter-spacing:.03em}

.nav{display:flex; align-items:center; gap:8px}
.nav-link{color:var(--brand-900); text-decoration:none; padding:8px 10px; border-radius:8px}
.nav-link:hover{background:rgba(72,195,217,.12)}

.container{max-width:1100px; margin:24px auto; padding:0 16px}

/* Buttons */
.btn{display:inline-block; border:none; cursor:pointer; border-radius:10px; padding:10px 14px; font-weight:600}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-700)}
.btn-ghost{background:transparent; color:var(--brand-900)}
.btn-ghost:hover{background:rgba(72,195,217,.12)}
.btn-secondary{background:#eef6f8;color:var(--brand-900);border:1px solid #dbe9ed}
.btn-secondary:hover{background:#e3f2f6}
.btn-danger{background:var(--err);color:#fff}
.btn-danger:hover{opacity:.9}
.btn-icon{padding:8px 10px}
.actions{display:flex;gap:6px;flex-wrap:wrap}

/* Cards */
.card{background:var(--card); border:1px solid #e5e7eb; border-radius:14px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card + .card{margin-top:12px}

/* Tables */
.table{width:100%; border-collapse:collapse; background:var(--card); border-radius:12px; overflow:hidden; border:1px solid #e5e7eb}
.table thead{background:rgba(72,195,217,.10)}
.table th,.table td{padding:10px 12px; text-align:left; border-bottom:1px solid #eef2f7}
.table tr:hover td{background:#fafcff}

/* Forms */
label{display:block; margin:10px 0 6px 0; color:var(--muted)}
input[type="text"], input[type="password"], input[type="date"], select, textarea{
  width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px; background:#fff;
}
input:focus, select:focus, textarea:focus{outline:2px solid rgba(72,195,217,.35); border-color:var(--brand)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}

/* Alerts */
.alert{padding:12px 14px; border-radius:10px; margin:12px 0}
.alert-error{background:#fff5f5; color:#8a1f11; border:1px solid #fbd5d5}

/* Footer */
.footer{ padding:18px 16px; display:flex; align-items:center; gap:12px; color:var(--muted)}
.footer-mark{height:28px; width:auto; opacity:.85}
/*.footer::before{content:""; display:block; height:40px; }*/

/* Search Row   */
.search-row{
  display: grid;
  grid-template-columns: 1fr auto; /* input ocupa todo, botón su ancho */
  gap: 8px;
  align-items: center;
}
@media (max-width: 520px){
  .search-row{ grid-template-columns: 1fr; } /* en móvil se apilan */
}

/* Dropdown */
.select-wrap{
  position: relative;
  width: 100%;
}

.select-wrap select{
  /* hereda lo que ya tienes para inputs/selects */
  width:100%;
  padding:10px 40px 10px 12px;         /* espacio para el chevron */
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  line-height:1.45;

  /* quita flecha nativa y unifica estilos */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* foco consistente con el resto */
.select-wrap select:focus{
  outline:2px solid rgba(72,195,217,.35);
  border-color:var(--brand);
}

/* estado hover suave (opcional) */
.select-wrap select:hover{
  border-color:#cbd5e1;
}

/* deshabilitado (opcional) */
.select-wrap select:disabled{
  background:#f4f6f8;
  color:#9ca3af;
  cursor:not-allowed;
}

/* chevron */
.select-wrap::after{
  content:"";
  position:absolute;
  right:12px; top:50%;
  width:14px; height:14px;
  transform:translateY(-50%);
  pointer-events:none;
  background:
    no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%236B7280' d='M7 10l5 5 5-5z'/></svg>");
}

/* IE/Edge legacy */
select::-ms-expand{ display:none; }

/* opcional: estiliza las opciones (limitado por SO/navegador) */
select option{ color:var(--ink); font-size:14px; }

.search-row--surveys{ grid-template-columns: 1fr auto auto; }
@media (max-width:520px){ .search-row--surveys{ grid-template-columns: 1fr; } }

input.form-control, select.form-control {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  height: 36px;
  box-sizing: border-box;
}
input.form-control:focus, select.form-control:focus {
  border-color: #2B4C55;
  outline: none;
}
/* === FORZAR ESTILO UNIFORME DE INPUTS === */
input[type="text"],
input[type="number"],
input[type="date"],
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 14px;
  height: 36px;
  line-height: 1.4;
  box-sizing: border-box;
  background-color: #fff;
  color: #333;
  width: 100%;
}

input[type="number"]:focus,
input[type="text"]:focus,
input[type="date"]:focus,
select.form-control:focus {
  border-color: #2B4C55 !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(43, 76, 85, 0.1);
}

/* === QUITAR SPINNERS EN NÚMEROS === */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* === UNIFICAR ESTILO DE PLACEHOLDER === */
input::placeholder {
  color: #aaa;
}

/* === AJUSTE EXTRA PARA DATE === */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(50%);
  opacity: 0.7;
}

/* === FORZAR UN ESTILO UNIFICADO PARA TODOS LOS INPUTS === */
.unified-input,
.form-control {
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  height: 38px;
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;
  color: #333;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.unified-input:focus,
.form-control:focus {
  border-color: #2b4c55;
  box-shadow: 0 0 0 2px rgba(43, 76, 85, 0.1);
  outline: none;
}

/* === QUITAR SPINNERS === */
.unified-input::-webkit-outer-spin-button,
.unified-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.section {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 16px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.section-header {
  padding: 12px 16px;
  background: #f3f6f9;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.section-header:hover {
  background: #e8f1f7;
}

.toggle-icon {
  transition: transform 0.2s ease;
}

.section.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.section-body {
  padding: 16px;
  display: block;
}

.section.collapsed .section-body {
  display: none;
}