@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* Todo aquí vive bajo .ag para no chocar con las clases del prototipo
   viejo (styles.css) que todavía usan las otras pantallas. */
.ag{
  --ag-verde:#163226;
  --ag-dorado:#B4985D;
  --ag-dorado-light:#CDB37E;
  --ag-marfil:#FDFCFA;
  --ag-marfil-2:#F5F1E8;
  --ag-carbon:#222321;
  --ag-carbon-soft:rgba(34,35,33,0.66);
  --ag-sage:#6E8F74;
  --ag-sage-bg:#E7EEE6;
  --ag-amber:#C9A227;
  --ag-amber-bg:#FBF3DE;
  --ag-brick:#A6453D;
  --ag-brick-bg:#FBEAEA;
  --ag-radius:16px;

  font-family:'Montserrat', sans-serif;
  background:var(--ag-marfil);
  color:var(--ag-carbon);
  min-height:100vh;
}
.ag *{box-sizing:border-box;}
.ag img{max-width:100%; display:block;}
.ag a{text-decoration:none; color:inherit;}

/* ---------- topbar ---------- */
.ag-topbar{
  position:sticky; top:0; z-index:50;
  background:var(--ag-verde);
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
}
.ag-topbar .ag-logo{height:34px; width:auto;}

/* ---------- botones ---------- */
.ag-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Montserrat', sans-serif; font-weight:600; font-size:13.5px;
  padding:11px 22px; border-radius:999px; cursor:pointer; border:none;
  transition:transform .08s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.ag-btn:active{transform:scale(0.97);}
.ag-btn-dorado{background:var(--ag-dorado); color:var(--ag-verde);}
.ag-btn-dorado:hover{background:var(--ag-dorado-light);}
.ag-btn-dorado:active{background:#A88A4E;}
.ag-btn-ghost-light{background:transparent; color:var(--ag-marfil); border:1.5px solid rgba(253,252,250,0.45);}
.ag-btn-ghost-light:hover{border-color:var(--ag-marfil); background:rgba(253,252,250,0.08);}
.ag-btn-ghost{background:transparent; color:var(--ag-verde); border:1.5px solid rgba(22,50,38,0.25);}
.ag-btn-ghost:hover{border-color:var(--ag-verde);}
.ag-btn-ghost:active{background:rgba(22,50,38,0.06);}
.ag-btn-sm{padding:8px 16px; font-size:12.5px;}
.ag-btn[disabled]{opacity:0.5; cursor:not-allowed;}

/* ---------- avisos flotantes (toast), mismos tonos del panel ---------- */
.toast-stack{position:fixed; top:20px; right:20px; display:flex; flex-direction:column; gap:10px; z-index:9999; width:min(360px, calc(100vw - 32px));}
.toast{
  display:flex; gap:12px; align-items:flex-start; background:var(--ag-marfil); border-radius:12px;
  padding:14px 16px; box-shadow:0 12px 32px rgba(22,35,30,0.28); border-left:4px solid var(--ag-sage);
  animation:toastIn .3s ease; font-size:13.5px; line-height:1.4; font-family:'Montserrat', sans-serif;
}
.toast.error{border-left-color:var(--ag-brick);}
@keyframes toastIn{from{opacity:0; transform:translateX(24px);} to{opacity:1; transform:translateX(0);}}
.toast .icon{font-size:17px; line-height:1; margin-top:1px; color:var(--ag-sage);}
.toast.error .icon{color:var(--ag-brick);}
.toast .txt{color:var(--ag-carbon);}
.toast .txt b{display:block; font-size:14px; margin-bottom:2px;}
.toast .close{margin-left:auto; background:none; border:none; color:var(--ag-carbon-soft); cursor:pointer; font-size:15px; padding:0 0 0 8px;}

/* ---------- tarjeta recién creada: un brillo breve para ubicarla ---------- */
.ag-card-new{animation:agSettle 1.8s ease-out;}
@keyframes agSettle{
  0%{box-shadow:0 0 0 0 rgba(180,152,93,0); border-color:rgba(22,50,38,0.1);}
  15%{box-shadow:0 0 0 4px rgba(180,152,93,0.35); border-color:var(--ag-dorado);}
  100%{box-shadow:0 0 0 0 rgba(180,152,93,0); border-color:rgba(22,50,38,0.1);}
}

/* ---------- layout general ---------- */
.ag-main{max-width:1120px; margin:0 auto; padding:40px 24px 90px;}
.ag-eyebrow{
  text-transform:uppercase; letter-spacing:0.12em; font-size:11.5px;
  font-weight:700; color:var(--ag-dorado); margin-bottom:6px;
}
.ag-main h1{font-size:27px; font-weight:700; margin:0 0 6px; color:var(--ag-verde);}
.ag-main .ag-sub{color:var(--ag-carbon-soft); font-size:14px; margin:0 0 30px;}

.ag-section{margin-bottom:48px;}
.ag-section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; gap:12px; flex-wrap:wrap;}
.ag-section-head h2{font-size:18.5px; font-weight:700; margin:0; color:var(--ag-verde);}
.ag-section-head .ag-hint{font-size:12.5px; color:var(--ag-carbon-soft);}

/* ---------- kpis ---------- */
.ag-kpi-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:38px;}
.ag-kpi{background:#fff; border:1px solid rgba(22,50,38,0.1); border-radius:var(--ag-radius); padding:20px 22px;}
.ag-kpi .ag-num{font-size:28px; font-weight:700; color:var(--ag-verde);}
.ag-kpi .ag-lbl{font-size:12.5px; color:var(--ag-carbon-soft); margin-top:2px;}

/* ---------- tarjetas genéricas ---------- */
.ag-card{background:#fff; border:1px solid rgba(22,50,38,0.1); border-radius:var(--ag-radius); padding:22px;}

/* ---------- empresas ---------- */
.ag-company-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;}
.ag-company-card .ag-name{font-weight:700; font-size:15.5px; margin-bottom:6px; color:var(--ag-verde);}
.ag-badge{display:inline-block; font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:999px; letter-spacing:0.02em; text-transform:uppercase;}
.ag-badge-pilot{background:var(--ag-marfil-2); color:var(--ag-carbon-soft);}
.ag-badge-active{background:var(--ag-sage-bg); color:var(--ag-sage);}
.ag-company-card .ag-meta{font-size:12.5px; color:var(--ag-carbon-soft); margin:10px 0 12px;}
.ag-cupo-bar{height:6px; background:var(--ag-marfil-2); border-radius:99px; overflow:hidden;}
.ag-cupo-fill{height:100%; background:var(--ag-verde); border-radius:99px;}
.ag-sem-row{display:flex; align-items:center; gap:8px; margin-top:14px;}
.ag-sem-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
.ag-sem-dot.green{background:var(--ag-sage);}
.ag-sem-dot.amber{background:var(--ag-amber);}
.ag-sem-dot.red{background:var(--ag-brick);}
.ag-sem-label{font-size:12px; font-weight:600; color:var(--ag-carbon-soft);}
.ag-theme-select-wrap{margin-top:14px; padding-top:14px; border-top:1px solid var(--ag-marfil-2);}
.ag-theme-select-wrap label{display:block; font-size:11px; font-weight:700; color:var(--ag-carbon-soft); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:5px;}

.ag-add-tile{
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  border:1.5px dashed rgba(22,50,38,0.25); border-radius:var(--ag-radius); color:var(--ag-carbon-soft);
  cursor:pointer; min-height:150px; font-size:13.5px; font-weight:600; background:transparent;
  transition:transform .08s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.ag-add-tile:active{transform:scale(0.98); background:rgba(22,50,38,0.04);}
.ag-add-tile:hover{border-color:var(--ag-dorado); color:var(--ag-verde);}

/* ---------- formularios ---------- */
.ag-form{background:#fff; border:1px solid rgba(22,50,38,0.1); border-radius:var(--ag-radius); padding:24px; margin-top:16px;}
.ag-form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.ag-form-row.full{grid-template-columns:1fr;}
.ag label{display:block; font-size:11.5px; font-weight:700; color:var(--ag-carbon-soft); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:6px;}
.ag input, .ag select, .ag textarea{
  width:100%; font-family:'Montserrat', sans-serif; font-size:14px; padding:10px 12px;
  border:1px solid rgba(22,50,38,0.18); border-radius:8px; background:var(--ag-marfil); color:var(--ag-carbon);
}
.ag input:focus, .ag select:focus, .ag textarea:focus{outline:none; border-color:var(--ag-dorado);}
.ag textarea{resize:vertical; min-height:60px;}

/* ---------- temas ---------- */
.ag-theme-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px;}
.ag-theme-card .ag-name{font-weight:700; font-size:15px; margin-bottom:6px; color:var(--ag-verde);}
.ag-theme-card .ag-meta{font-size:12.5px; color:var(--ag-carbon-soft); margin-bottom:2px;}

.ag-piece-row{display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--ag-marfil-2);}
.ag-piece-row:last-child{border-bottom:none;}
.ag-piece-num{
  width:26px; height:26px; border-radius:50%; background:var(--ag-verde); color:var(--ag-dorado-light);
  font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
}
.ag-piece-body{flex:1;}
.ag-file-chosen{font-size:12px; color:var(--ag-sage); margin-top:5px; font-weight:600;}

/* ---------- toast / mensajes ---------- */
.ag-msg-error{color:var(--ag-brick); font-size:13px;}

.ag-danger-zone{margin-top:28px; padding-top:18px; border-top:1px solid rgba(22,50,38,0.12);}
.ag-btn-danger{background:transparent; color:var(--ag-brick); border:1.5px solid rgba(166,69,61,0.45);}
.ag-btn-danger:hover{background:var(--ag-brick-bg); border-color:var(--ag-brick);}
.ag-btn-danger-solid{background:var(--ag-brick); color:#fff;}
.ag-btn-danger-solid:hover{background:#8F3A33;}
.ag-btn-danger-solid:active{background:#7A322C;}
.ag-danger-box{background:var(--ag-brick-bg); border:1.5px solid var(--ag-brick); border-radius:12px; padding:16px 18px; margin-top:10px;}
.ag-danger-box p{margin:0 0 12px; font-size:13.5px; color:var(--ag-carbon); line-height:1.5;}
.ag-msg-ok{color:var(--ag-sage); font-size:13px;}

.ag-cred-box{background:var(--ag-amber-bg); border:2px solid var(--ag-amber); border-radius:12px; padding:16px 18px; margin-top:16px; box-shadow:0 4px 14px rgba(201,162,39,0.22);}
.ag-cred-box .ag-cred-label{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:#8A6B00; margin-bottom:8px !important;}
.ag-cred-box code{background:#fff; padding:2px 6px; border-radius:4px; border:1px solid rgba(138,107,0,0.3); font-family:'Courier New',monospace; font-size:12.5px;}

/* ---------- pilares / desbloqueo de temas por empresa ---------- */
.ag-badge-pilar{background:var(--ag-marfil-2); color:var(--ag-verde); margin-bottom:8px;}
.ag-pilar-group{margin-bottom:16px;}
.ag-pilar-label{font-size:11px; font-weight:700; color:var(--ag-dorado); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:8px;}
.ag-checkbox-row{display:flex; align-items:center; gap:9px; padding:7px 0; font-size:13.5px; color:var(--ag-carbon); cursor:pointer;}
.ag-checkbox-row input{width:auto; accent-color:var(--ag-dorado);}

@media (max-width:640px){
  .ag-kpi-row{grid-template-columns:1fr;}
  .ag-form-row{grid-template-columns:1fr;}
}