/* ===== Àrea privada EiC — estils aïllats sota #eic-app ===== */
#eic-app{
  --bg:#f4f5f6; --paper:#fff; --text:#1c1d1f; --text-soft:#6b7178;
  --line:#d7dbe0; --line-soft:#e8eaed; --red:#d6291e; --red-dark:#b21f16;
  --red-soft:#fbe7e5; --dark:#25272a; --grey:#eceef0; --grey-mid:#c7cbd1;
  color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
#eic-app *{box-sizing:border-box;margin:0;padding:0}
#eic-app button{font:inherit;cursor:pointer}
#eic-app a{color:inherit}

/* ---------- LOGIN ---------- */
#eic-app .login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;background:radial-gradient(120% 80% at 50% -10%, #fff 0%, var(--bg) 62%)}
#eic-app .login-card{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:38px 34px 30px;width:100%;max-width:400px;text-align:center;
  box-shadow:0 10px 34px rgba(28,29,31,.10);position:relative;overflow:hidden}
#eic-app .login-card .top{position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--red),#8f8f92 60%,var(--grey-mid))}
#eic-app .login-card img{width:118px;height:118px;object-fit:contain;margin:6px auto 16px;display:block}
#eic-app .login-card h2{font-size:1.25rem}
#eic-app .login-card .hint{color:var(--text-soft);font-size:.85rem;margin:8px 0 22px}
#eic-app .field{text-align:left;margin-bottom:16px}
#eic-app .field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
#eic-app .field input,#eic-app .field select{width:100%;font:inherit;font-size:.98rem;padding:11px 13px;
  border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--text)}
#eic-app .field input:focus,#eic-app .field select:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(214,41,30,.15)}
#eic-app .passwrap{position:relative;display:flex;align-items:center}
#eic-app .passwrap input{padding-right:72px}
#eic-app .toggle{position:absolute;right:8px;border:none;background:none;font:inherit;font-size:.82rem;
  font-weight:600;color:var(--text-soft);padding:6px 8px;border-radius:5px}
#eic-app .toggle:hover{color:var(--red)}
#eic-app .btn-primary{width:100%;background:var(--red);color:#fff;border:none;border-radius:6px;
  padding:12px;font-weight:700;font-size:1rem}
#eic-app .btn-primary:hover{background:var(--red-dark)}
#eic-app .login-err{background:var(--red-soft);color:var(--red-dark);border-radius:6px;
  padding:9px 12px;font-size:.85rem;margin-bottom:14px;text-align:left}

/* ---------- DASHBOARD ---------- */
#eic-app .dash{display:flex;min-height:100vh}
#eic-app .dash-side{width:230px;background:var(--dark);color:#e7e9eb;display:flex;flex-direction:column;flex-shrink:0}
#eic-app .dash-side .logo{display:flex;align-items:center;gap:10px;padding:18px;font-weight:800;
  font-size:.98rem;color:#fff;text-decoration:none;border-bottom:1px solid #34373b}
#eic-app .dash-side .logo img{width:34px;height:34px;object-fit:contain}
#eic-app .dash-side nav{display:flex;flex-direction:column;padding:10px 0;flex:1}
#eic-app .dash-side nav button{background:none;border:none;color:#c2c6ca;text-align:left;
  padding:12px 18px;font-size:.95rem;border-left:3px solid transparent}
#eic-app .dash-side nav button:hover{background:#2f3236;color:#fff}
#eic-app .dash-side nav button.active{background:#2f3236;color:#fff;border-left-color:var(--red);font-weight:700}
#eic-app .dash-side .logout{margin:12px 14px 18px;background:transparent;border:1px solid #45484c;
  color:#c2c6ca;border-radius:6px;padding:10px;text-align:center;text-decoration:none;font-size:.9rem}
#eic-app .dash-side .logout:hover{border-color:var(--red);color:#fff}
#eic-app .dash-main{flex:1;padding:26px 32px;overflow:auto;background:var(--bg)}
#eic-app .panel{display:none}
#eic-app .panel.active{display:block}
#eic-app .dash-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:14px}
#eic-app .dash-topbar h2{font-size:1.4rem}
#eic-app .dash-topbar .muted{color:var(--text-soft);font-size:.9rem}

#eic-app .add-box{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:16px;
  display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:20px}
#eic-app .add-box .field{margin-bottom:0;flex:1;min-width:150px}
#eic-app .btn-sm{background:var(--red);color:#fff;border:none;border-radius:6px;padding:11px 16px;
  font-weight:700;font-size:.9rem;white-space:nowrap}
#eic-app .btn-sm:hover{background:var(--red-dark)}
#eic-app .btn-sm.ghost{background:#fff;color:var(--text-soft);border:1px solid var(--line)}
#eic-app .btn-sm.ghost:hover{color:var(--red);border-color:var(--grey-mid)}

#eic-app table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);
  border-radius:8px;overflow:hidden}
#eic-app th,#eic-app td{text-align:left;padding:12px 14px;font-size:.92rem;border-bottom:1px solid var(--line-soft)}
#eic-app th{background:var(--grey);font-size:.8rem;letter-spacing:.3px;color:var(--text-soft);text-transform:uppercase}
#eic-app tr:last-child td{border-bottom:none}
#eic-app .empty{color:var(--text-soft);font-size:.9rem;padding:16px;text-align:center}

#eic-app .tag{display:inline-block;font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:20px}
#eic-app .tag-red{background:var(--red-soft);color:var(--red-dark)}
#eic-app .tag-dark{background:#e4e6e8;color:var(--dark)}
#eic-app .tag-grey{background:var(--grey);color:var(--text-soft)}

#eic-app .calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-bottom:22px}
#eic-app .calc-card{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:18px}
#eic-app .calc-card h3{font-size:1rem;margin-bottom:4px}
#eic-app .calc-card .desc{color:var(--text-soft);font-size:.85rem;margin-bottom:14px}
#eic-app .calc-card .row{display:flex;gap:10px;flex-wrap:wrap}
#eic-app .calc-card .row .field{flex:1;min-width:110px}
#eic-app .calc-result{margin-top:14px;padding:12px 14px;background:var(--grey);border-radius:6px;font-size:1.05rem;font-weight:700}
#eic-app .calc-result span{color:var(--red-dark)}
#eic-app .calc-card .save{margin-top:12px;display:flex;gap:10px}
#eic-app .calc-card .save input{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:6px;font:inherit}

#eic-app .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#eic-app .cal-head button{background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px 14px;font-weight:700}
#eic-app .cal-head button:hover{border-color:var(--grey-mid)}
#eic-app .cal-head .month{font-weight:700;font-size:1.1rem}
#eic-app .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
#eic-app .cal-grid .dow{font-size:.72rem;text-transform:uppercase;color:var(--text-soft);text-align:center;padding:4px 0;font-weight:700}
#eic-app .cal-cell{background:var(--paper);border:1px solid var(--line);border-radius:6px;min-height:74px;padding:6px 8px;cursor:pointer;font-size:.85rem}
#eic-app .cal-cell:hover{border-color:var(--red)}
#eic-app .cal-cell.muted{background:var(--grey);color:var(--grey-mid);cursor:default}
#eic-app .cal-cell.muted:hover{border-color:var(--line)}
#eic-app .cal-cell.sel{border-color:var(--red);box-shadow:0 0 0 2px rgba(214,41,30,.18)}
#eic-app .cal-cell .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-top:4px}
#eic-app .cal-events{margin-top:18px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:16px}
#eic-app .cal-events h4{margin-bottom:10px}
#eic-app .cal-events form{display:flex;gap:10px;margin-bottom:12px}
#eic-app .cal-events form input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:6px;font:inherit}
#eic-app .task-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
#eic-app .task-row:last-child{border-bottom:none}
#eic-app .task-row .title{flex:1}
#eic-app .task-row.done .title{text-decoration:line-through;color:var(--text-soft)}
#eic-app .list-box{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 16px}

@media (max-width:820px){
  #eic-app .dash{flex-direction:column}
  #eic-app .dash-side{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center}
  #eic-app .dash-side nav{flex-direction:row;flex-wrap:wrap;padding:6px}
  #eic-app .dash-side nav button{border-left:none;border-bottom:3px solid transparent;padding:10px 12px}
  #eic-app .dash-side nav button.active{border-left:none;border-bottom-color:var(--red)}
}


/* ===== Menú visual després del login ===== */
#eic-app .portal{min-height:100vh;display:flex;flex-direction:column;background:#000}
#eic-app .util{background:#25272a;height:34px;display:flex;align-items:center;justify-content:flex-end;padding:0 18px;flex:0 0 auto}
#eic-app .util a{color:#c9ccd0;font-size:.82rem;text-decoration:none}
#eic-app .util a:hover{color:#fff}
#eic-app .phead{background:#fff;padding:12px 22px;display:flex;align-items:center;border-bottom:1px solid #e2e5e8;flex:0 0 auto}
#eic-app .phead img{height:46px;width:46px;object-fit:contain;display:block}
#eic-app .pview{display:none}
#eic-app .pview.active{display:flex;flex-direction:column;flex:1}
#eic-app .menu-area{background:#000;flex:1;display:flex;align-items:center;justify-content:center;padding:56px 24px}
#eic-app .tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;max-width:760px}
#eic-app .tile{width:150px;height:114px;background:linear-gradient(180deg,#ffffff,#eceef1);
  border:2px solid #d6291e;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;color:#3a3d41;position:relative;overflow:hidden;
  box-shadow:0 0 18px 1px rgba(214,41,30,.38),0 6px 16px rgba(0,0,0,.35);
  transition:transform .14s ease,box-shadow .18s ease,border-color .14s ease}
#eic-app .tile::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:0;height:3px;background:var(--red);opacity:0;transition:width .18s ease,opacity .18s ease}
#eic-app .tile:hover{transform:translateY(-4px);border-color:#b21f16;box-shadow:0 0 46px 10px rgba(214,41,30,.88),0 12px 24px rgba(0,0,0,.45)}
#eic-app .tile:hover::after{width:58%;opacity:1}
#eic-app .tile:hover svg{color:var(--red)}
#eic-app .tile svg{width:32px;height:32px;color:#2b2e31;transition:color .14s}
#eic-app .tile span{font-weight:600;font-size:.9rem;letter-spacing:.1px}
#eic-app .menu-red{height:4px;background:var(--red)}
#eic-app .menu-white{background:#fff;min-height:64px}
#eic-app .secbar{background:#fff;border-bottom:1px solid #e2e5e8;padding:10px 22px}
#eic-app .secbar a.back{color:var(--red-dark);font-weight:700;text-decoration:none;font-size:.95rem}
#eic-app .secbar a.back:hover{text-decoration:underline}
#eic-app #view-section .dash-main{flex:1}
@media(max-width:680px){#eic-app .tiles{max-width:340px;gap:16px}}
@media(max-width:380px){#eic-app .tile{width:132px;height:104px}}
@media(min-width:1024px){
  #eic-app .menu-area{padding:72px 32px}
  #eic-app .tiles{max-width:900px;gap:34px}
  #eic-app .tile{width:196px;height:154px;border-radius:16px;gap:14px}
  #eic-app .tile svg{width:40px;height:40px}
  #eic-app .tile span{font-size:1rem}
}
@media(min-width:1440px){
  #eic-app .menu-area{padding:88px 40px}
  #eic-app .tiles{max-width:1120px;gap:48px}
  #eic-app .tile{width:236px;height:186px}
  #eic-app .tile svg{width:48px;height:48px}
  #eic-app .tile span{font-size:1.08rem}
}