@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

  :root{
    --ink:#14213D;
    --ink-2:#1F2C4F;
    --ink-3:#2B3A63;
    --brass:#B08D57;
    --brass-light:#D9BD8C;
    --stone:#F4F1E9;
    --stone-2:#E9E3D3;
    --stone-3:#DCD4BE;
    --text:#1B1F2A;
    --slate:#5B6478;
    --sage:#6E8F74;
    --sage-bg:#E7EEE6;
    --brick:#A6453D;
    --white:#FFFFFF;
    --radius:14px;
    --shadow: 0 8px 24px rgba(20,33,61,0.10);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--stone);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.serif{font-family:'Fraunces',serif;}

  /* ---------- topbar ---------- */
  .topbar{
    position:sticky; top:0; z-index:50;
    background:var(--ink);
    color:var(--stone);
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 28px;
    border-bottom:1px solid var(--ink-3);
  }
  .wordmark{
    display:flex; align-items:center; gap:10px;
    font-family:'Fraunces',serif; font-weight:500; font-size:19px;
    letter-spacing:0.02em;
  }
  .wordmark .dot{color:var(--brass);}
  .role-switch{display:flex; gap:6px; background:var(--ink-2); padding:4px; border-radius:999px;}
  .role-btn{
    border:none; background:transparent; color:var(--stone-2);
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
    padding:8px 16px; border-radius:999px; cursor:pointer;
    transition:all .18s ease;
  }
  .role-btn.active{background:var(--brass); color:var(--ink);}
  .role-btn:not(.active):hover{color:var(--white);}

  .demo-banner{
    background:var(--stone-2);
    color:var(--slate);
    font-size:12.5px;
    text-align:center;
    padding:8px 12px;
    border-bottom:1px solid var(--stone-3);
    letter-spacing:0.01em;
  }
  .demo-banner b{color:var(--text);}

  main{max-width:1080px; margin:0 auto; padding:36px 24px 80px;}
  .view{animation:fade .35s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

  .eyebrow{
    text-transform:uppercase; letter-spacing:0.12em; font-size:11.5px;
    color:var(--brass); font-weight:700; margin-bottom:6px;
  }
  .view h1{font-size:28px; font-weight:500; margin:0 0 4px; color:var(--ink);}
  .view .sub{color:var(--slate); font-size:14.5px; margin-bottom:28px;}

  .section{margin-bottom:40px;}
  .section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px;}
  .section-head h2{font-size:18px; font-weight:500; margin:0; color:var(--ink);}
  .section-head .hint{font-size:12.5px; color:var(--slate);}

  .btn{
    font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px;
    border:none; border-radius:9px; padding:10px 18px; cursor:pointer;
    transition:transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease;
  }
  .btn:active{transform:scale(0.97);}
  .btn-brass{background:var(--brass); color:var(--ink);}
  .btn-brass:hover{background:var(--brass-light);}
  .btn-brass:active{background:#9c7c48;}
  .btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--stone-3);}
  .btn-ghost:hover{border-color:var(--brass); color:var(--brass);}
  .btn-ghost:active{background:var(--stone-2);}
  .topbar .btn-ghost{background:var(--ink-3); color:var(--stone); border:1px solid var(--ink-3);}
  .topbar .btn-ghost:hover{background:var(--brass); color:var(--ink); border-color:var(--brass);}
  .btn-sm{padding:6px 12px; font-size:12.5px;}

  /* ---------- avisos flotantes (toast) ---------- */
  .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(--white); border-radius:12px;
    padding:14px 16px; box-shadow:0 12px 32px rgba(20,33,61,0.22); border-left:4px solid var(--sage);
    animation:toastIn .3s ease; font-size:13.5px; line-height:1.4; font-family:'Inter',sans-serif;
  }
  .toast.error{border-left-color:var(--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(--sage);}
  .toast.error .icon{color:var(--brick);}
  .toast .txt{color:var(--ink);}
  .toast .txt b{display:block; font-size:14px; margin-bottom:2px;}
  .toast .close{margin-left:auto; background:none; border:none; color:var(--slate); cursor:pointer; font-size:15px; padding:0 0 0 8px;}

  /* ---------- cards ---------- */
  .card{
    background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
    border:1px solid var(--stone-3); padding:20px;
  }
  .company-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px;}
  .company-card{cursor:pointer;}
  .company-card .name{font-weight:600; font-size:15.5px; margin-bottom:4px;}
  .badge{
    display:inline-block; font-size:11px; font-weight:700; padding:3px 9px;
    border-radius:999px; letter-spacing:0.02em;
  }
  .badge-pilot{background:var(--stone-2); color:var(--slate);}
  .badge-active{background:var(--sage-bg); color:var(--sage);}
  .badge-plan{background:var(--ink); color:var(--brass-light);}
  .company-card .meta{font-size:12.5px; color:var(--slate); margin:10px 0 12px;}
  .cupo-bar{height:6px; background:var(--stone-2); border-radius:99px; overflow:hidden;}
  .cupo-fill{height:100%; background:var(--ink-3); border-radius:99px;}

  .add-company-card{
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
    border:1.5px dashed var(--stone-3); border-radius:var(--radius); color:var(--slate);
    cursor:pointer; min-height:120px; font-size:13.5px; font-weight:600;
  }
  .add-company-card:hover{border-color:var(--brass); color:var(--brass);}

  .sem-dot{width:11px; height:11px; border-radius:50%; flex-shrink:0; margin-top:3px;}
  .sem-dot.sem-green{background:var(--sage);}
  .sem-dot.sem-amber{background:#C9A227;}
  .sem-dot.sem-red{background:var(--brick);}
  .avg-row{display:flex; align-items:baseline; justify-content:space-between; margin-top:10px;}
  .avg-num{font-family:'Fraunces',serif; font-size:20px; color:var(--ink);}
  .avg-lbl{font-size:11.5px; font-weight:700;}
  .avg-lbl.sem-green{color:var(--sage);}
  .avg-lbl.sem-amber{color:#9C7B1D;}
  .avg-lbl.sem-red{color:var(--brick);}
  .theme-select-wrap{margin-top:12px; padding-top:12px; border-top:1px solid var(--stone-2);}
  .theme-select-wrap label{margin-bottom:4px;}
  .theme-select-wrap select{font-size:13px; padding:7px 9px;}
  .theme-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px;}
  .theme-card .name{font-weight:600; font-size:15px; margin-bottom:6px;}
  .theme-card .meta{margin-bottom:2px;}
  .file-chosen{font-size:12px; color:var(--sage); margin-top:5px; font-weight:600;}

  .inline-form{background:var(--white); border:1px solid var(--stone-3); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); margin-top:14px;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
  .form-row.full{grid-template-columns:1fr;}
  label{display:block; font-size:12px; font-weight:600; color:var(--slate); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.03em;}
  input, textarea{
    width:100%; font-family:'Inter',sans-serif; font-size:14px; padding:9px 11px;
    border:1px solid var(--stone-3); border-radius:8px; background:var(--stone); color:var(--text);
  }
  input:focus, textarea:focus{outline:none; border-color:var(--brass);}
  textarea{resize:vertical; min-height:64px;}
  select{
    width:100%; font-family:'Inter',sans-serif; font-size:14px; padding:9px 11px;
    border:1px solid var(--stone-3); border-radius:8px; background:var(--stone); color:var(--text);
    cursor:pointer;
  }
  select:focus{outline:none; border-color:var(--brass);}
  .plan-hint{font-size:11.5px; color:var(--slate); margin-top:5px; line-height:1.4;}

  /* content publish form pieces */
  .piece-row{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--stone-2);}
  .piece-row:last-child{border-bottom:none;}
  .piece-num{
    width:28px; height:28px; border-radius:50%; background:var(--ink); color:var(--brass-light);
    font-family:'Fraunces',serif; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .piece-body{flex:1;}
  .piece-title{font-weight:600; font-size:14px; margin-bottom:6px;}

  /* ---------- admin empresa: user list ---------- */
  .user-row{
    display:flex; align-items:center; gap:14px; padding:13px 4px; border-bottom:1px solid var(--stone-2);
  }
  .user-row:last-child{border-bottom:none;}
  .avatar{
    width:36px; height:36px; border-radius:50%; background:var(--ink-2); color:var(--brass-light);
    display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; flex-shrink:0;
  }
  .user-name{font-weight:600; font-size:14px; width:170px; flex-shrink:0;}
  .progress-track{flex:1; height:8px; background:var(--stone-2); border-radius:99px; overflow:hidden;}
  .progress-fill{height:100%; background:var(--brass); border-radius:99px; transition:width .4s ease;}
  .progress-pct{width:42px; text-align:right; font-size:13px; font-weight:700; color:var(--ink); flex-shrink:0;}
  .you-tag{font-size:10.5px; background:var(--brass); color:var(--ink); padding:2px 7px; border-radius:99px; font-weight:700; margin-left:6px;}

  .kpi-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px;}
  .kpi{background:var(--white); border:1px solid var(--stone-3); border-radius:var(--radius); padding:18px 20px;}
  .kpi .num{font-family:'Fraunces',serif; font-size:30px; color:var(--ink);}
  .kpi .lbl{font-size:12.5px; color:var(--slate); margin-top:2px;}

  .expand-caret{color:var(--slate); font-size:12px; width:14px; text-align:center; flex-shrink:0;}
  .last-access{font-size:11px; color:var(--slate); width:90px; text-align:right; flex-shrink:0;}
  .private-note{font-size:12px; color:var(--slate); font-style:italic; margin-top:14px; padding-top:10px; border-top:1px solid var(--stone-3);}
  .add-user-tabs{display:flex; gap:8px; background:var(--stone); padding:4px; border-radius:10px; width:fit-content;}
  .tab-btn{border:none; background:transparent; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; color:var(--slate); cursor:pointer;}
  .tab-btn.active{background:var(--ink); color:var(--brass-light);}

  /* ---------- admin de empresa: pestanas "Gestionar mi equipo" / "Mi progreso" ---------- */
  .main-tabs{display:flex; gap:6px; margin-bottom:24px; border-bottom:1px solid var(--stone-3);}
  .main-tab{
    font-family:'Inter',sans-serif; padding:11px 18px; font-size:14px; font-weight:600;
    color:var(--slate); border:none; background:none; cursor:pointer;
    border-bottom:2px solid transparent; margin-bottom:-1px;
  }
  .main-tab.active{color:var(--ink); border-bottom-color:var(--brass);}
  .main-tab:hover:not(.active){color:var(--ink);}

  /* ---------- admin de empresa: panel "Temas de tu empresa" ---------- */
  .company-theme-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px;}
  .company-theme-card{
    border-radius:12px; padding:14px 16px; border:1.5px solid var(--stone-3); background:var(--white);
    display:flex; flex-direction:column; gap:8px; min-height:80px; justify-content:space-between;
  }
  .company-theme-card.active{border-color:var(--brass); background:#FBF6EC;}
  .company-theme-card .ct-pilar{font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--slate);}
  .company-theme-card.active .ct-pilar{color:var(--brass);}
  .company-theme-card .ct-name{font-size:13.5px; font-weight:600; line-height:1.3; color:var(--ink);}
  .company-theme-card:not(.active) .ct-name{color:var(--slate);}
  .company-theme-card .ct-lock{font-size:12px;}
  .company-theme-card .ct-estado{font-size:11.5px; color:var(--slate);}
  .company-theme-card.active .ct-estado{color:var(--sage);}
  .company-theme-card:not(.active){opacity:0.78;}

  .detail-panel{background:var(--stone); border-radius:10px; padding:16px 18px 18px 68px; margin:2px 0 12px;}
  .detail-h{font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--brass); font-weight:700; margin-bottom:8px;}
  .detail-note{font-size:12.5px; color:var(--slate); font-style:italic; margin-top:2px;}
  .detail-note-box{background:var(--white); border:1px solid var(--stone-3); border-radius:8px; padding:12px 14px; font-size:13px; color:var(--text); font-style:italic; line-height:1.5;}

  .comentario-card{background:#FBF6EC; border-left:4px solid var(--brass); border-radius:10px; padding:16px 20px; margin-top:6px;}
  .comentario-quote{font-family:'Fraunces',Georgia,serif; font-size:22px; color:var(--brass); line-height:1; margin-bottom:4px;}
  .comentario-texto{font-size:14px; color:var(--ink); font-style:italic; line-height:1.5;}
  .sin-comentario{font-size:12.5px; color:var(--slate); font-style:italic; padding:10px 2px;}

  /* ---------- admin de empresa: etapas de avance (color de la barra + etiqueta) ---------- */
  .progress-fill.sin{background:var(--stone-3);}
  .progress-fill.camino{background:#C9A227;}
  .progress-fill.avanzando{background:var(--brass);}
  .progress-fill.completo{background:var(--sage);}
  .stage-pill{flex-shrink:0; font-size:11px; font-weight:700; padding:4px 10px; border-radius:99px; width:132px; text-align:center;}
  .stage-pill.sin{background:var(--stone-2); color:var(--slate);}
  .stage-pill.camino{background:#FBF3DE; color:#8A6D14;}
  .stage-pill.avanzando{background:#FBF6EC; color:#8A6836;}
  .stage-pill.completo{background:var(--sage-bg); color:var(--sage);}

  /* ---------- admin de empresa: "Como va tu equipo, de un vistazo" ---------- */
  .composicion{background:var(--white); border:1px solid var(--stone-3); border-radius:var(--radius); padding:18px 20px; margin-bottom:20px;}
  .composicion-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px;}
  .composicion-head h3{font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:var(--ink); margin:0;}
  .composicion-head span{font-size:12px; color:var(--slate);}
  .comp-bar{display:flex; height:14px; border-radius:99px; overflow:hidden; background:var(--stone-2);}
  .comp-seg{height:100%;}
  .comp-seg.sin{background:var(--stone-3);}
  .comp-seg.camino{background:#C9A227;}
  .comp-seg.avanzando{background:var(--brass);}
  .comp-seg.completo{background:var(--sage);}
  .comp-legend{display:flex; gap:18px; margin-top:12px; flex-wrap:wrap;}
  .comp-legend-item{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--slate);}
  .comp-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
  .comp-dot.sin{background:var(--stone-3);}
  .comp-dot.camino{background:#C9A227;}
  .comp-dot.avanzando{background:var(--brass);}
  .comp-dot.completo{background:var(--sage);}

  /* ---------- admin de empresa: "camino" de pasos en el detalle de un colaborador ---------- */
  .detail-tema{margin-bottom:22px;}
  .detail-tema:last-child{margin-bottom:0;}
  .detail-tema-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
  .detail-tema-head .nombre{font-family:'Fraunces',serif; font-size:15px; color:var(--ink); font-weight:600;}
  .detail-tema-head .ring-mini-pct{font-size:12px; font-weight:700; color:var(--brass);}
  .camino{display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding:4px 2px 8px; margin-bottom:4px;}
  .paso{display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:82px; position:relative;}
  .paso-linea{position:absolute; top:17px; left:-41px; width:82px; height:2px; background:var(--stone-3); z-index:0;}
  .paso-linea.hecha{background:var(--sage);}
  .paso:first-child .paso-linea{display:none;}
  .paso-dot{
    width:34px; height:34px; border-radius:50%; background:var(--white); border:2px solid var(--stone-3);
    display:flex; align-items:center; justify-content:center; font-size:14px; z-index:1; position:relative;
  }
  .paso-dot.hecho{background:var(--sage); border-color:var(--sage);}
  .paso-dot.hecho .icono{filter:brightness(0) invert(1);}
  .paso-label{font-size:10.5px; color:var(--slate); text-align:center; margin-top:6px; line-height:1.3; max-width:78px;}
  .paso.hecho .paso-label{color:var(--ink); font-weight:600;}

  @media (max-width:640px){.detail-panel{padding-left:18px;}}

  /* ---------- usuario view ---------- */
  .user-hero{display:flex; gap:28px; align-items:center; background:var(--ink); color:var(--stone); border-radius:18px; padding:28px 32px; margin-bottom:34px;}
  .user-hero .txt{flex:1;}
  .user-hero .eyebrow2{color:var(--brass-light); text-transform:uppercase; letter-spacing:0.14em; font-size:11.5px; font-weight:700; margin-bottom:8px;}
  .user-hero h1{color:var(--white); font-size:25px; margin:0 0 8px;}
  .user-hero p{color:var(--stone-2); font-size:13.5px; max-width:420px; margin:0;}

  .sendero{position:relative; padding-left:26px;}
  .sendero::before{
    content:''; position:absolute; left:13px; top:8px; bottom:8px; width:2px; background:var(--stone-3);
  }
  .sendero-fill{position:absolute; left:13px; top:8px; width:2px; background:var(--brass); transition:height .4s ease;}
  .node{position:relative; padding:0 0 26px 20px; cursor:pointer;}
  .node:last-child{padding-bottom:0;}
  .node-dot{
    position:absolute; left:-26px; top:0; width:28px; height:28px; border-radius:50%;
    background:var(--white); border:2px solid var(--stone-3); display:flex; align-items:center; justify-content:center;
    transition:all .2s ease; z-index:1;
  }
  .node.done .node-dot{background:var(--brass); border-color:var(--brass);}
  .node-dot svg{width:13px; height:13px;}
  .node-card{background:var(--white); border:1px solid var(--stone-3); border-radius:12px; padding:14px 18px; transition:border-color .15s ease;}
  .node:hover .node-card{border-color:var(--brass);}
  .node-kind{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--brass); font-weight:700; margin-bottom:4px;}
  .node-title{font-weight:600; font-size:14.5px; margin-bottom:3px;}
  .node-meta{font-size:12.5px; color:var(--slate);}
  .node.done .node-title{color:var(--slate); text-decoration:line-through; text-decoration-color:var(--stone-3);}

  /* ---------- biblioteca de temas (usuario) ---------- */
  .lib-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px;}
  .lib-card{border-radius:var(--radius); padding:18px 20px; min-height:96px; display:flex; flex-direction:column; justify-content:center;}
  .lib-card.lib-open{background:var(--white); border:1px solid var(--stone-3); cursor:pointer; transition:border-color .15s ease, transform .15s ease;}
  .lib-card.lib-open:hover{border-color:var(--brass); transform:translateY(-1px);}
  .lib-card.lib-locked{background:var(--stone-2); border:1px dashed var(--stone-3); opacity:0.75;}
  .lib-lock{font-size:16px; margin-bottom:6px;}
  .lib-name{font-weight:600; font-size:14.5px; margin-bottom:4px; color:var(--ink);}
  .lib-card.lib-locked .lib-name{color:var(--slate);}
  .lib-hint{font-size:12px; color:var(--slate);}

  /* ---------- biblioteca de recursos (usuario) ---------- */
  .recurso-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; margin-bottom:8px;}
  .recurso-card{
    background:var(--white); border:1px solid var(--stone-3); border-radius:12px; padding:16px 18px;
    display:flex; gap:13px; align-items:flex-start; text-decoration:none; color:inherit;
    transition:border-color .15s ease, transform .15s ease;
  }
  .recurso-card:hover{border-color:var(--brass); transform:translateY(-1px);}
  .recurso-icono{
    width:38px; height:38px; border-radius:9px; background:var(--sage-bg); color:var(--sage);
    display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;
  }
  .recurso-icono.video{background:#FBF3DE; color:#9C7B1D;}
  .recurso-icono.pdf{background:#FBEAEA; color:#A6453D;}
  .recurso-titulo{font-weight:600; font-size:14px; color:var(--ink); line-height:1.35; margin-bottom:4px;}
  .recurso-meta{font-size:11.5px; color:var(--slate);}
  .recurso-meta .tema{color:var(--brass); font-weight:600;}
  .recurso-flecha{margin-left:auto; color:var(--stone-3); font-size:14px; align-self:center;}
  .recurso-card:hover .recurso-flecha{color:var(--brass);}

  .save-msg{font-size:12.5px;}
  .save-msg.save-ok{color:var(--sage);}
  .save-msg.save-error{color:var(--brick);}

  .reto-box{background:var(--white); border:1px solid var(--stone-3); border-radius:var(--radius); padding:22px 24px; margin-top:10px;}
  .reto-box.box-privada{border-left:4px solid var(--slate);}
  .reto-box.box-compartida{border-left:4px solid var(--brass); background:#FFFDF8;}
  .reto-box.box-compartida textarea{background:#FBF6EC;}
  .box-head{display:flex; align-items:center; gap:9px; margin-bottom:4px;}
  .box-head .icono{font-size:15px;}
  .box-head h3{font-size:14.5px; font-weight:600; color:var(--ink); font-family:'Fraunces',Georgia,serif;}
  .box-hint{font-size:12.5px; color:var(--slate); margin-bottom:12px;}
  .reto-item{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--stone-2); cursor:pointer;}
  .reto-item:last-child{border-bottom:none;}
  .checkbox{
    width:20px; height:20px; border-radius:6px; border:2px solid var(--stone-3); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; transition:all .15s ease;
  }
  .checkbox.checked{background:var(--sage); border-color:var(--sage);}
  .checkbox svg{width:11px; height:11px;}
  .reto-text{font-size:14px;}
  .reto-item.done .reto-text{color:var(--slate); text-decoration:line-through; text-decoration-color:var(--stone-3);}

  .ring-wrap{display:flex; align-items:center; gap:18px; flex-shrink:0;}
  .ring-num{font-family:'Fraunces',serif; font-size:24px; fill:var(--white);}

  /* ---------- modal de contenido ---------- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(20,33,61,0.55); z-index:200;
    display:flex; align-items:center; justify-content:center; padding:20px;
    animation:fade .2s ease;
  }
  .modal-box{
    background:var(--white); border-radius:16px; max-width:560px; width:100%;
    max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(20,33,61,0.35);
  }
  .modal-head{display:flex; align-items:flex-start; justify-content:space-between; padding:22px 24px 4px;}
  .modal-kind{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--brass); font-weight:700; margin-bottom:6px;}
  .modal-title{font-family:'Fraunces',serif; font-size:19px; color:var(--ink); line-height:1.3; margin:0;}
  .modal-close{background:none; border:none; font-size:20px; color:var(--slate); cursor:pointer; padding:4px 8px; line-height:1;}
  .modal-close:hover{color:var(--brick);}
  .modal-body{padding:18px 24px 8px;}
  .modal-media{border-radius:10px; overflow:hidden; background:var(--ink); margin-bottom:12px;}
  .modal-media video{display:block; width:100%; max-height:300px;}
  .modal-audio-wrap{background:var(--stone); border-radius:10px; padding:20px; margin-bottom:12px; text-align:center;}
  .modal-audio-wrap audio{width:100%;}
  .modal-note{font-size:12px; color:var(--slate); font-style:italic; margin:0 0 14px;}
  .doc-preview{
    background:var(--stone); border:1px solid var(--stone-3); border-radius:10px; padding:22px;
    margin-bottom:12px; font-size:12.5px; color:var(--slate); line-height:1.7;
  }
  .doc-preview .doc-page{background:var(--white); border:1px solid var(--stone-3); border-radius:6px; padding:16px 18px; margin-bottom:10px;}
  .doc-preview .doc-page:last-child{margin-bottom:0;}
  .doc-preview .doc-h{font-family:'Fraunces',serif; font-size:14px; color:var(--ink); margin-bottom:6px;}
  .doc-preview .doc-line{height:7px; background:var(--stone-2); border-radius:4px; margin-bottom:6px;}
  .toolkit-list{list-style:none; margin:0 0 14px; padding:0;}
  .toolkit-list li{display:flex; gap:8px; align-items:flex-start; font-size:13.5px; padding:6px 0; color:var(--text);}
  .toolkit-list li::before{content:'—'; color:var(--brass); flex-shrink:0;}
  .modal-actions{display:flex; gap:10px; padding:14px 24px 24px; border-top:1px solid var(--stone-2); margin-top:8px;}
  .btn-complete{flex:1;}
  .btn-complete.done{background:var(--sage); color:var(--white);}

  .reset-link{background:none; border:none; color:var(--slate); font-size:12px; text-decoration:underline; cursor:pointer; margin-top:30px;}
  .reset-link:hover{color:var(--brick);}

  .more-users{color:var(--slate); font-size:12.5px; padding:10px 4px 0;}

  @media (max-width:640px){
    .form-row{grid-template-columns:1fr;}
    .kpi-row{grid-template-columns:1fr;}
    .user-hero{flex-direction:column; align-items:flex-start;}
    .topbar{flex-direction:column; gap:10px; align-items:flex-start;}
  }
/* ---------- login ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--ink); padding:20px;
}
.login-card{
  background:var(--white); border-radius:18px; padding:40px 36px; max-width:380px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
}
.login-card .wordmark{color:var(--ink); justify-content:center; margin-bottom:24px; font-size:20px;}
.login-card .wordmark .dot{color:var(--brass);}
.login-error{
  background:#FBEAEA; color:var(--brick); font-size:13px; padding:10px 14px;
  border-radius:8px; margin-bottom:14px; display:none;
}
.login-error.show{display:block;}
.login-info{
  background:var(--sage-bg); color:var(--sage); font-size:13px; padding:10px 14px;
  border-radius:8px; margin-bottom:14px; display:none;
}
.login-info.show{display:block;}
.full-loader{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  color:var(--slate); font-family:'Inter',sans-serif; background:var(--stone);
}

/* ---------- admin empresa: alta de colaboradores ---------- */
.excel-preview{margin:10px 0; max-height:220px; overflow-y:auto; border:1px solid var(--stone-3); border-radius:8px;}
.cupo-lleno-box{border-color:var(--brick); color:var(--brick);}
code{background:var(--white); padding:2px 6px; border-radius:4px; border:1px solid var(--stone-3); font-family:'Courier New',monospace; font-size:12.5px;}
.cred-highlight{background:#FBF3DE; border:2px solid var(--brass); border-radius:var(--radius); padding:18px 20px; margin-top:14px; box-shadow:0 4px 14px rgba(176,141,87,0.28);}
.cred-highlight .cred-alert-label{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:#5C3F16; margin-bottom:10px;}
.cred-highlight code{background:#fff; padding:2px 6px; border-radius:4px; border:1px solid rgba(92,63,22,0.3); font-family:'Courier New',monospace; font-size:12.5px;}
.cred-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--stone-2); font-size:13px;}
.cred-row:last-child{border-bottom:none;}
.cred-row .status-ok{color:var(--sage); font-weight:600;}
.cred-row .status-error{color:var(--brick); font-weight:600;}

/* ---------- guía: tour y Ayuda (colaborador y Admin de Empresa) ---------- */
.topbar .btn-ghost + .btn-ghost{margin-left:8px;}

.tour-overlay{position:fixed; inset:0; z-index:240; pointer-events:none;}
.tour-dim{position:fixed; inset:0; background:rgba(20,33,61,0.62); opacity:0; pointer-events:none; transition:opacity .3s ease;}
.tour-dim.on{opacity:1; pointer-events:auto;}
.tour-spotlight{position:fixed; border-radius:14px; pointer-events:none; box-shadow:0 0 0 3000px rgba(20,33,61,0.62); transition:all .35s cubic-bezier(.4,0,.2,1); opacity:0;}
.tour-spotlight.on{opacity:1; pointer-events:auto;}
.tour-card{position:fixed; z-index:242; width:290px; background:var(--white); border-radius:14px; padding:20px 22px; box-shadow:0 16px 40px rgba(20,33,61,0.25); opacity:0; pointer-events:none; transition:opacity .25s ease;}
.tour-card.on{opacity:1; pointer-events:auto;}
.tour-step-icon{font-size:20px; margin-bottom:8px;}
.tour-card h3{font-size:15.5px; margin-bottom:6px; color:var(--ink);}
.tour-card p{font-size:12.8px; color:var(--slate); margin:0 0 16px; line-height:1.5;}
.tour-foot{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.tour-dots{display:flex; gap:5px;}
.tour-dot{width:6px; height:6px; border-radius:50%; background:var(--stone-3);}
.tour-dot.active{background:var(--brass); width:16px; border-radius:4px;}
.tour-actions{display:flex; align-items:center; gap:12px;}
.tour-skip{font-family:'Inter',sans-serif; font-size:12px; color:var(--slate); background:none; border:none; cursor:pointer; text-decoration:underline;}
.tour-next{font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; background:var(--brass); color:var(--ink); border:none; border-radius:8px; padding:8px 16px; cursor:pointer;}
.tour-next:hover{background:var(--brass-light);}

.ayuda-overlay{position:fixed; inset:0; background:rgba(20,33,61,0.45); z-index:220; opacity:0; pointer-events:none; transition:opacity .25s ease;}
.ayuda-overlay.on{opacity:1; pointer-events:auto;}
.ayuda-drawer{position:fixed; top:0; right:0; bottom:0; width:340px; max-width:90vw; background:var(--white); z-index:221; box-shadow:-10px 0 30px rgba(20,33,61,0.18); transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column;}
.ayuda-drawer.on{transform:translateX(0);}
.ayuda-head{padding:20px 22px 16px; border-bottom:1px solid var(--stone-2); display:flex; align-items:center; justify-content:space-between; flex-shrink:0;}
.ayuda-head h3{font-size:17px;}
.ayuda-close{background:none; border:none; font-size:19px; color:var(--slate); cursor:pointer; line-height:1; padding:4px;}
.ayuda-tour-btn{margin:16px 22px 4px; background:var(--stone); border:1px solid var(--stone-3); border-radius:10px; padding:12px 14px; font-size:12.6px; font-weight:600; color:var(--ink); text-align:left; cursor:pointer; display:flex; align-items:center; gap:10px; font-family:'Inter',sans-serif; flex-shrink:0;}
.ayuda-tour-btn:hover{background:var(--stone-2);}
.ayuda-list{overflow-y:auto; padding:8px 10px 20px;}
.ayuda-item{border-bottom:1px solid var(--stone-2);}
.ayuda-q{width:100%; text-align:left; background:none; border:none; padding:14px 12px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:'Inter',sans-serif;}
.ayuda-q .car{font-size:13px; color:var(--brass); transition:transform .2s ease; flex-shrink:0;}
.ayuda-item.open .ayuda-q .car{transform:rotate(90deg);}
.ayuda-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.ayuda-item.open .ayuda-a{max-height:220px;}
.ayuda-a p{padding:0 12px 14px; font-size:12.5px; color:var(--slate); margin:0; line-height:1.55;}