/* EasyPlanus — Design System / Theme
   Paleta: deep #0D2C6D · teal #00B894 · teal-dark #007a5f
   Tipografia: Montserrat (SemiBold para titulos/marca) */
@import 'easyplanus-tokens.css';

:root{
    --brand-deep:#0D2C6D; --brand-teal:#00B894;
    --brand-grad:linear-gradient(135deg,#0D2C6D,#00B894);
    --navy:#0D2C6D; --blue:#0D2C6D;
    --bg:#eef2f3; --surface:#ffffff; --surface-2:#f5f9f9; --surface-3:#edf3f3;
    --border:#e1e8e9; --border-strong:#cbd6d7;
    --text:#0f1f2e; --text-muted:#5a6b78; --text-faint:#97a5ad;
    --accent:#00B894; --accent-soft:#def7f4; --accent-ink:#007a5f;
    --total-ink:#007a5f; --total-bg:#d6f5f0; --total-br:#a8e9e0;
    --limited-ink:#b45309; --limited-bg:#fdedce; --limited-br:#f3dca7;
    --none-ink:#64748b; --none-bg:#eef2f3; --none-br:#dbe3e4;
    --pro-ink:#0D2C6D; --pro-bg:#def7f4; --pro-br:#a8e9e0;
    --sidebar:#0D2C6D; --sidebar-ink:#aebfce; --sidebar-ink-active:#ffffff; --sidebar-active:#1a3d7a;
    --btn-bg:#00B894; --btn-fg:#0D2C6D;
    --shadow:0 1px 2px rgba(13,44,109,.07), 0 8px 24px rgba(13,44,109,.07);
    --shadow-pop:0 12px 40px rgba(13,44,109,.20);
    --radius:14px; --radius-sm:9px;
  }
  [data-theme="dark"]{
    --brand-deep:#0D2C6D; --brand-teal:#00B894;
    --brand-grad:linear-gradient(135deg,#16357f,#00B894);
    --navy:#cdd9e6; --blue:#2fd4b4;
    --bg:#08111c; --surface:#101b29; --surface-2:#162232; --surface-3:#1c2a3c;
    --border:#27384c; --border-strong:#374b62;
    --text:#e6edf5; --text-muted:#93a4b6; --text-faint:#697a8c;
    --accent:#1fd6b4; --accent-soft:#0c2c30; --accent-ink:#5fe3cf;
    --total-ink:#5fe3cf; --total-bg:#0c2c2a; --total-br:#16463f;
    --limited-ink:#f2c073; --limited-bg:#33260f; --limited-br:#4d3a18;
    --none-ink:#9aa6b6; --none-bg:#202c40; --none-br:#33415a;
    --pro-ink:#7fe7d3; --pro-bg:#0c2c30; --pro-br:#1c4a4a;
    --sidebar:#06101c; --sidebar-ink:#8595a8; --sidebar-ink-active:#ffffff; --sidebar-active:#13314a;
    --btn-bg:#00B894; --btn-fg:#0D2C6D;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
    --shadow-pop:0 16px 48px rgba(0,0,0,.55);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);
    -webkit-font-smoothing:antialiased;transition:background .25s ease,color .25s ease;font-size:14px;line-height:1.5}
  .app{display:grid;grid-template-columns:228px 1fr;min-height:100vh}

  /* ---------- Sidebar ---------- */
  .sidebar{background:var(--sidebar);color:var(--sidebar-ink);padding:20px 14px;display:flex;flex-direction:column;gap:4px;transition:background .25s ease}
  .brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px}
  .brand .mark{width:30px;height:30px;border-radius:8px;background:var(--brand-grad);display:grid;place-items:center;
    font-family:Montserrat,sans-serif;font-weight:700;color:#fff;font-size:13px;letter-spacing:.3px;flex:none}
  .brand .name{font-family:Montserrat,sans-serif;font-weight:600;color:#fff;font-size:16px;letter-spacing:.2px}
  .brand .name small{display:block;font-family:Montserrat;font-weight:400;font-size:10px;color:var(--sidebar-ink);letter-spacing:.3px;opacity:.8}
  .nav-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--sidebar-ink);opacity:.55;padding:14px 8px 6px;font-weight:600}
  .nav-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;color:var(--sidebar-ink);
    font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,color .15s}
  .nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
  .nav-item.active{background:var(--sidebar-active);color:var(--sidebar-ink-active)}
  .nav-item svg{width:17px;height:17px;flex:none;opacity:.9}
  .sidebar .spacer{flex:1}
  .org{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:rgba(255,255,255,.05);margin-top:8px}
  .org .av{width:28px;height:28px;border-radius:7px;background:var(--brand-grad);display:grid;place-items:center;color:#fff;font-weight:600;font-size:12px;flex:none}
  .org .meta{font-size:12px;line-height:1.25;overflow:hidden}
  .org .meta b{color:#fff;font-weight:600;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
  .org .meta span{color:var(--sidebar-ink);font-size:11px}

  /* ---------- Topbar ---------- */
  .main{display:flex;flex-direction:column;min-width:0}
  .topbar{height:60px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;
    justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:5;transition:background .25s,border-color .25s}
  .crumbs{font-size:13px;color:var(--text-muted);display:flex;align-items:center;gap:8px}
  .crumbs b{color:var(--text);font-weight:600}
  .crumbs .sep{color:var(--text-faint)}
  .top-actions{display:flex;align-items:center;gap:8px}
  .plan-pill{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px 6px 4px 12px;font-size:12px;color:var(--text-muted);font-weight:500}
  .seg{display:inline-flex;background:var(--surface-3);border-radius:999px;padding:2px;gap:2px}
  .seg button{border:0;background:transparent;color:var(--text-muted);font:inherit;font-size:11.5px;font-weight:600;
    padding:4px 11px;border-radius:999px;cursor:pointer;transition:all .15s}
  .seg button.on{background:var(--surface);color:var(--accent-ink);box-shadow:0 1px 3px rgba(20,33,61,.12)}
  [data-plan="pro"] .seg button.pro-on{background:var(--brand-grad);color:#fff;box-shadow:0 2px 8px rgba(0,184,148,.35)}
  .icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);
    display:grid;place-items:center;cursor:pointer;transition:all .15s}
  .icon-btn:hover{color:var(--text);border-color:var(--border-strong);background:var(--surface-2)}
  .icon-btn svg{width:18px;height:18px}
  .sun{display:none}[data-theme="dark"] .sun{display:block}[data-theme="dark"] .moon{display:none}

  /* ---------- Content ---------- */
  .scroll{flex:1;overflow:auto;padding:26px;display:flex;justify-content:center}
  .panel{width:100%;max-width:780px}
  .page-head{margin-bottom:20px}
  .page-head h1{font-family:Montserrat,sans-serif;font-size:23px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
  .page-head p{color:var(--text-muted);margin-top:5px;font-size:13.5px}

  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:background .25s,border-color .25s}
  .card + .card{margin-top:18px}
  .card-h{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
  .card-h .t{font-weight:600;font-size:14.5px;color:var(--text);display:flex;align-items:center;gap:9px}
  .card-h .t .n{width:22px;height:22px;border-radius:6px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-size:12px;font-weight:700;font-family:Montserrat,sans-serif}
  .card-h .sub{font-size:12px;color:var(--text-muted);font-weight:400;margin-top:2px}
  .card-b{padding:20px}

  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .field{display:flex;flex-direction:column;gap:6px}
  .field.full{grid-column:1/-1}
  label{font-size:12.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
  label .opt{font-weight:400;color:var(--text-faint);font-size:11.5px}
  input,select{width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-2);
    color:var(--text);font:inherit;font-size:13.5px;transition:border-color .15s,box-shadow .15s,background .25s}
  input::placeholder{color:var(--text-faint)}
  input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--surface)}
  select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23697587' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
  .hint{font-size:11.5px;color:var(--text-muted)}

  /* ---------- Permissions ---------- */
  .badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.02em;
    padding:3px 9px;border-radius:999px;border:1px solid var(--pro-br);background:var(--pro-bg);color:var(--pro-ink);text-transform:uppercase}
  .badge svg{width:12px;height:12px}
  .perm-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;border-radius:11px;
    background:var(--surface-2);border:1px solid var(--border);margin-bottom:4px}
  .perm-bar .txt{font-size:12.5px;color:var(--text-muted)}
  .perm-bar .txt b{color:var(--text);font-weight:600}
  .switch{position:relative;width:42px;height:24px;flex:none;cursor:pointer}
  .switch input{opacity:0;width:0;height:0}
  .switch .track{position:absolute;inset:0;background:var(--border-strong);border-radius:999px;transition:background .2s}
  .switch .thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
  .switch input:checked + .track{background:var(--brand-grad)}
  .switch input:checked ~ .thumb{transform:translateX(18px)}
  .switch.locked{opacity:.55;cursor:not-allowed}

  .matrix-wrap{position:relative;margin-top:14px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
  table{width:100%;border-collapse:collapse}
  thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);font-weight:600;
    padding:11px 16px;background:var(--surface-3);border-bottom:1px solid var(--border)}
  thead th.c{text-align:center;width:96px}
  tbody td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
  tbody tr:last-child td{border-bottom:0}
  tbody tr:hover{background:var(--surface-2)}
  .mod{display:flex;align-items:center;gap:11px}
  .mod .mi{width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:none}
  .mod .mi svg{width:16px;height:16px}
  .mod .ml b{font-weight:600;font-size:13px;color:var(--text);display:block}
  .mod .ml span{font-size:11.5px;color:var(--text-muted)}
  td.c{text-align:center}

  /* three-state segmented per row */
  .tri{display:inline-flex;border:1px solid var(--border-strong);border-radius:999px;padding:2px;background:var(--surface-2);gap:2px}
  .tri button{border:0;background:transparent;cursor:pointer;font:inherit;font-size:11px;font-weight:600;color:var(--text-faint);
    padding:4px 9px;border-radius:999px;transition:all .14s;min-width:34px}
  .tri button:disabled{cursor:not-allowed}
  .tri button.on[data-v="total"]{background:var(--total-bg);color:var(--total-ink);border:1px solid var(--total-br)}
  .tri button.on[data-v="limited"]{background:var(--limited-bg);color:var(--limited-ink);border:1px solid var(--limited-br)}
  .tri button.on[data-v="none"]{background:var(--none-bg);color:var(--none-ink);border:1px solid var(--none-br)}
  .matrix-wrap.locked .tri{opacity:.85}
  .matrix-wrap.locked tbody{filter:saturate(.6)}

  /* Pro lock overlay */
  .lock{position:absolute;inset:0;background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(2px);
    display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;z-index:2}
  [data-plan="starter"] .matrix-wrap.locked .lock{display:flex}
  .lock .ring{width:46px;height:46px;border-radius:12px;background:var(--pro-bg);border:1px solid var(--pro-br);display:grid;place-items:center;color:var(--pro-ink)}
  .lock .ring svg{width:22px;height:22px}
  .lock h4{font-size:14.5px;font-weight:600;color:var(--text)}
  .lock p{font-size:12.5px;color:var(--text-muted);max-width:340px}
  .btn-pro{display:inline-flex;align-items:center;gap:7px;background:var(--brand-grad);color:#fff;border:0;
    padding:9px 16px;border-radius:10px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;box-shadow:0 4px 14px rgba(0,184,148,.32)}
  .btn-pro:hover{filter:brightness(1.06)}

  .legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:13px;font-size:11.5px;color:var(--text-muted)}
  .legend i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
  .dot{width:9px;height:9px;border-radius:3px;display:inline-block}

  /* footer actions */
  .foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;flex-wrap:wrap}
  .foot .note{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:7px}
  .foot .note svg{width:15px;height:15px;color:var(--text-faint)}
  .btns{display:flex;gap:10px}
  .btn{padding:10px 18px;border-radius:10px;font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;transition:all .15s;border:1px solid transparent}
  .btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text)}
  .btn-ghost:hover{background:var(--surface-2)}
  .btn-primary{background:var(--btn-bg);color:var(--btn-fg);box-shadow:0 4px 14px rgba(0,184,148,.32)}
  [data-theme="dark"] .btn-primary{box-shadow:0 4px 16px rgba(0,184,148,.35)}
  .btn-primary:hover{filter:brightness(1.07)}

  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--brand-deep);color:#fff;
    padding:12px 20px;border-radius:11px;font-size:13px;font-weight:500;box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;
    transition:all .3s;display:flex;align-items:center;gap:9px;z-index:30}
  [data-theme="dark"] .toast{background:#0f3a52}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .toast svg{width:17px;height:17px}

  @media(max-width:880px){
    .app{grid-template-columns:1fr}.sidebar{display:none}
    .grid2{grid-template-columns:1fr}
    thead th.c{width:auto}
  }