/* ===== Workele Theme ================================================== */
:root{
  --brand:#63C092;         /* verde principal */
  --brand-600:#54ac83;
  --brand-700:#43946f;
  --bg:#f6faf8;
  --text:#0f172a;
  --muted:#63728a;
  --card:#ffffff;
  --line:#e5edf0;
  --ring:rgba(99,192,146,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:var(--bg);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* ================= Appbar con logo (solo imagen) ================= */
.appbar{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; padding:12px 18px;
  box-shadow:0 4px 16px rgba(15,23,42,.04);
}
.appbar a.logo-link{display:flex; align-items:center}
.appbar img.logo{height:56px; width:auto; display:block;}  /* ← más grande */
@media (max-width:680px){ .appbar img.logo{height:40px;} }

/* si hubiera un .brand por error, se oculta */
.appbar .brand{display:none !important;}

/* ================= Layout / tarjetas ================= */
.container{max-width:1080px; margin:24px auto; padding:0 16px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px;
  box-shadow:0 6px 24px rgba(15,23,42,.04);
}
h1,h2,h3{margin:10px 0 14px}
h2{font-size:28px}

/* ================= Botones ================= */
.btn{
  --bg:#fff; --fg:var(--text); --bd:var(--line);
  appearance:none; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  border-radius:12px; padding:12px 18px; font-weight:700; cursor:pointer;
  transition:.15s ease transform,.15s ease box-shadow,.15s ease background;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.06)}
.btn:active{transform:translateY(0)}
.btn.primary{
  --bg:linear-gradient(135deg,var(--brand),var(--brand-700)); --fg:#fff; --bd:transparent;
  border:none; color:#fff;
  box-shadow:0 10px 26px rgba(99,192,146,.35);
}

/* ================= Inputs estilo bootstrap ================= */
input[type="text"],input[type="tel"],input[type="number"],input[type="password"],
input[type="search"],input:not([type]),select,textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:#fff; outline:none; transition:.15s ease border-color,.15s ease box-shadow;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand-600);
  box-shadow:0 0 0 4px var(--ring);
}

/* Grids pequeñas */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:720px){ .grid2{grid-template-columns:1fr} }

/* ================= Tablas “tipo DataTable” ================= */
.table{
  width:100%; border-collapse:separate; border-spacing:0; background:#fff; overflow:hidden;
  border:1px solid var(--line); border-radius:14px;
}
.table th,.table td{padding:12px 14px; border-bottom:1px solid var(--line)}
.table th{
  text-align:left; font-size:.85rem; text-transform:uppercase; letter-spacing:.02em;
  color:var(--muted); background:linear-gradient(180deg,#fbfdfc,#f2f7f4);
  position:sticky; top:0; z-index:1;
}
.table tbody tr:nth-child(odd){background:#fbfdfc}
.table tbody tr:hover{background:#eef7f1}
.table td:last-child,.table th:last-child{border-right:none}
.table td:first-child,.table th:first-child{border-left:none}

.dt-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 2px;
}
.dt-search{flex:1; max-width:360px; position:relative}
.dt-search input{padding-left:36px;}
.dt-search svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.55}

/* Textos secundarios */
.mut{color:var(--muted); font-size:.9rem}

/* ================= Helpers de páginas ================= */
.auth-wrap{max-width:520px; margin:32px auto;}