/* IPSE App — estilos compartidos · design system estilo Twenty (grayscale + acento IPSE, claro/oscuro) */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --p:#7C3AED; --pd:#6D28D9; --pb:#F3EEFD; --pb2:#E4D9FB;
  --ink:#18181B; --slate:#52525B; --slate2:#8E8E93; --slate3:#B0B0B6;
  --line:#E7E7E9; --line2:#F1F1F2;
  --bg:#F7F7F8; --white:#FFFFFF; --hover:#F5F5F6;
  --green:#188544; --green-bg:#E7F5EC;
  --red:#D93025;   --red-bg:#FCEAE8;
  --amber:#B45309; --amber-bg:#FBF1DC;
  --blue:#2463EB;  --blue-bg:#E9F0FD;
  --shadow:0 1px 2px rgba(16,16,24,0.04);
  --shadow-lg:0 10px 34px rgba(16,16,24,0.14);
  color-scheme:light;
}
[data-theme=dark]{
  --p:#A78BFA; --pd:#C4B5FD; --pb:#33275C; --pb2:#443579;
  --ink:#ECECEE; --slate:#B4B4BB; --slate2:#7C7C85; --slate3:#5E5E66;
  --line:#2A2A2E; --line2:#232328;
  --bg:#161619; --white:#1C1C21; --hover:#232328;
  --green:#4ADE80; --green-bg:#16351F;
  --red:#F87171;   --red-bg:#3D1D1D;
  --amber:#FBBF24; --amber-bg:#3A2E12;
  --blue:#60A5FA;  --blue-bg:#1B2A4A;
  --shadow:0 1px 2px rgba(0,0,0,0.35);
  --shadow-lg:0 10px 34px rgba(0,0,0,0.5);
  color-scheme:dark;
}
html,body{ height:100% }
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg); color:var(--ink); font-size:13.5px;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{ color:var(--pd); text-decoration:none }
a:hover{ text-decoration:underline }

/* ---- Top bar ---- */
.topbar{
  background:var(--white); border-bottom:1px solid var(--line);
  padding:10px 24px; position:sticky; top:0; z-index:50;
}
.topbar .wrap{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand svg{ width:28px; height:28px; }
.brand .ipse-logo-img{ height:34px; width:auto; max-width:200px; }
[data-theme=dark] .brand .ipse-logo-img{ background:#fff; border-radius:8px; padding:3px 8px; }
.brand .name{ font-weight:600; font-size:15px; letter-spacing:-0.3px; color:var(--ink); display:none; }
.brand .name span{ color:var(--p); }
.brand .sub{ display:inline-flex; }
.auth-card .brand{ justify-content:center; }
.auth-card .brand .ipse-logo-img{ height:44px; }
.brand .sub{
  font-family:'IBM Plex Mono',monospace; font-size:10px;
  color:var(--slate2); text-transform:uppercase; letter-spacing:1.2px;
  margin-left:6px; padding:3px 7px;
  background:var(--line2); border-radius:5px; color:var(--slate); font-weight:600;
}
.userchip{
  display:flex; align-items:center; gap:9px;
  padding:5px 9px 5px 5px; border:1px solid var(--line);
  border-radius:8px; background:var(--white); font-size:12.5px; font-weight:500;
}
.userchip .avatar{
  width:24px; height:24px; border-radius:6px;
  background:var(--p);
  color:#fff; font-weight:700; font-size:11px;
  display:flex; align-items:center; justify-content:center;
}
[data-theme=dark] .userchip .avatar{ color:#1C1C21; }
.userchip .role-tag{
  font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  padding:2px 6px; border-radius:5px; background:var(--pb); color:var(--pd); cursor:pointer;
}
.userchip button{
  background:none; border:none; cursor:pointer; padding:4px 8px;
  font-size:12px; color:var(--slate2); border-left:1px solid var(--line);
  margin-left:4px; font-family:inherit;
}
.userchip button:hover{ color:var(--red) }
.iconbtn{
  border:1px solid var(--line); background:var(--white); border-radius:8px;
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--slate); flex-shrink:0;
}
.iconbtn:hover{ background:var(--hover); }
.iconbtn svg{ width:15px; height:15px; }

/* ---- Auth pages ---- */
.auth-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--bg);
}
.auth-card{
  width:100%; max-width:420px;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:36px; box-shadow:var(--shadow);
}
.auth-card .brand{ justify-content:center; margin-bottom:10px; }
.auth-card h1{
  font-weight:600; letter-spacing:-0.4px;
  font-size:22px; line-height:1.25; text-align:center; margin-bottom:6px;
}
.auth-card .sub{
  text-align:center; color:var(--slate2); font-size:13.5px; margin-bottom:26px;
}
.auth-card form{ display:flex; flex-direction:column; gap:14px; }
.auth-card label{
  display:flex; flex-direction:column; gap:6px;
  font-size:13px; font-weight:500; color:var(--ink);
}
.auth-card input{
  font-family:inherit; font-size:14px;
  padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--white); color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
.auth-card input:focus{
  outline:none; border-color:var(--p);
  box-shadow:0 0 0 3px rgba(124,58,237,0.14);
}
.auth-card button.primary{
  background:var(--ink); color:var(--bg); border:none; padding:11px 20px;
  font-size:14px; font-weight:600; border-radius:8px; cursor:pointer;
  transition:opacity .15s; font-family:inherit; margin-top:6px;
}
.auth-card button.primary:hover{ opacity:.87; }
.auth-card button.primary:disabled{ opacity:0.5; cursor:not-allowed; }
.auth-card .alt{ text-align:center; font-size:13px; color:var(--slate2); margin-top:18px; }
.msg{
  padding:10px 13px; border-radius:8px; font-size:13px; font-weight:500; display:none;
}
.msg.error{ background:var(--red-bg); color:var(--red); border:1px solid var(--red-bg); display:block; }
.msg.success{ background:var(--green-bg); color:var(--green); border:1px solid var(--green-bg); display:block; }

/* ---- App content ---- */
.app-shell{ max-width:1280px; margin:0 auto; padding:28px 24px 64px; }
.app-shell h2{
  font-weight:600; font-size:20px; letter-spacing:-0.4px; margin-bottom:6px;
}
.app-shell .lead{ color:var(--slate2); font-size:13.5px; margin-bottom:24px; }

/* KPI grid */
.kpi-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px; margin-bottom:24px;
}
.kpi{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; box-shadow:var(--shadow);
}
.kpi .label{
  font-size:11px; letter-spacing:.2px;
  color:var(--slate2); font-weight:500; margin-bottom:8px;
}
.kpi .value{
  font-weight:600; font-size:24px; color:var(--ink); line-height:1.1; letter-spacing:-0.5px;
}
.kpi .delta{
  margin-top:8px; font-size:11.5px; font-weight:500;
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 7px; border-radius:5px;
}
.kpi .delta.pos{ color:var(--green); background:var(--green-bg); }
.kpi .delta.neg{ color:var(--red); background:var(--red-bg); }
.kpi .delta.neutral{ color:var(--slate2); background:var(--line2); }

/* Cards / sections */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:20px; box-shadow:var(--shadow); margin-bottom:18px;
}
.card h3{
  font-size:14px; font-weight:600; color:var(--ink); margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
}
.card h3 .badge{
  font-size:10px; font-weight:600; padding:2px 7px; border-radius:5px;
  background:var(--pb); color:var(--pd); text-transform:uppercase; letter-spacing:.8px;
}

ul.bare{ list-style:none; }
ul.bare li{
  padding:11px 0; border-bottom:1px solid var(--line2);
  display:flex; gap:12px; align-items:flex-start;
}
ul.bare li:last-child{ border-bottom:none; }
.dot{
  width:8px; height:8px; border-radius:50%; margin-top:7px; flex-shrink:0;
}
.dot.red{ background:var(--red) } .dot.amber{ background:var(--amber) }
.dot.green{ background:var(--green) } .dot.blue{ background:var(--blue) }

/* Buttons (in-app) */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:7px; font-size:12.5px; font-weight:500;
  cursor:pointer; border:1px solid var(--line); background:var(--white);
  color:var(--ink); font-family:inherit; transition:background .15s;
  text-decoration:none; box-shadow:var(--shadow);
}
.btn:hover{ background:var(--hover); text-decoration:none; }
.btn.primary{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.btn.primary:hover{ opacity:.87; background:var(--ink); }
.btn.danger{ color:var(--red); }
.btn.danger:hover{ background:var(--red-bg); }
.btn.sm{ padding:4px 10px; font-size:12px; }

/* Tables */
table{ width:100%; border-collapse:collapse; font-size:13px; }
table th{
  text-align:left; padding:8px 12px; font-weight:500; color:var(--slate2);
  font-size:11.5px; letter-spacing:.2px;
  border-bottom:1px solid var(--line); background:var(--bg);
}
table td{
  padding:10px 12px; border-bottom:1px solid var(--line2); color:var(--ink);
}
table tr:last-child td{ border-bottom:none; }
table tbody tr:hover{ background:var(--hover); }
.tag{
  display:inline-block; padding:2px 8px; border-radius:5px;
  font-size:11px; font-weight:600; letter-spacing:.2px;
}
.tag.activo{ background:var(--green-bg); color:var(--green) }
.tag.propuesta{ background:var(--blue-bg); color:var(--blue) }
.tag.prospecto{ background:var(--pb); color:var(--pd) }
.tag.pausa{ background:var(--amber-bg); color:var(--amber) }
.tag.cerrado{ background:var(--line2); color:var(--slate2) }
.tag.perdido{ background:var(--red-bg); color:var(--red) }
.tag.alta{ background:var(--red-bg); color:var(--red) }
.tag.media{ background:var(--amber-bg); color:var(--amber) }
.tag.baja{ background:var(--line2); color:var(--slate2) }
.tag.admin{ background:var(--ink); color:var(--bg) }
.tag.cliente{ background:var(--green-bg); color:var(--green) }
.tag.inversionista{ background:var(--blue-bg); color:var(--blue) }
.tag.active{ background:var(--green-bg); color:var(--green) }
.tag.suspended{ background:var(--red-bg); color:var(--red) }

/* Selects sueltos (tablas admin) */
select{
  font-family:inherit; font-size:12.5px; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:6px; padding:4px 7px;
}

/* Vault browser */
.vault-grid{
  display:grid; grid-template-columns:280px 1fr; gap:16px; min-height:480px;
}
.vault-tree{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:14px; overflow-y:auto; max-height:70vh;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px;
}
.vault-tree ul{ list-style:none; padding-left:14px; }
.vault-tree > ul{ padding-left:0; }
.vault-tree li{ padding:3px 4px; cursor:pointer; color:var(--slate); border-radius:5px; }
.vault-tree li:hover{ color:var(--ink); background:var(--hover); }
.vault-tree li.dir::before{ content:'📁 '; }
.vault-tree li.file::before{ content:'📄 '; }
.vault-tree li.active{ color:var(--pd); font-weight:700; background:var(--pb); }
.vault-content{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:24px; overflow-y:auto; max-height:70vh;
  font-family:'IBM Plex Mono',monospace; font-size:13px;
  white-space:pre-wrap; word-break:break-word;
  line-height:1.6;
}

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,10,14,0.45); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.modal{
  background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px;
  max-width:520px; width:100%; box-shadow:var(--shadow-lg);
}
.modal h3{ font-size:16px; font-weight:600; margin-bottom:14px; }
.modal form{ display:flex; flex-direction:column; gap:12px; }
.modal label{
  font-size:12.5px; font-weight:500; color:var(--ink);
  display:flex; flex-direction:column; gap:5px;
}
.modal input, .modal select, .modal textarea{
  font-family:inherit; font-size:13.5px; color:var(--ink); background:var(--white);
  padding:8px 11px; border:1px solid var(--line); border-radius:7px;
}
.modal input:focus, .modal select:focus, .modal textarea:focus{
  outline:none; border-color:var(--p); box-shadow:0 0 0 3px rgba(124,58,237,0.14);
}
.modal textarea{ min-height:80px; resize:vertical; }
.modal .actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }

@media (max-width:720px){
  .vault-grid{ grid-template-columns:1fr; }
  .vault-tree{ max-height:280px; }
  .app-shell h2{ font-size:18px; }
  .kpi .value{ font-size:20px; }
  .auth-card{ padding:26px 22px; }
}

/* ============================================================
   UX + Accesibilidad
   ============================================================ */

/* Solo para lectores de pantalla */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Salto al contenido (teclado) */
.skip-link{
  position:absolute; left:-999px; top:8px; z-index:200;
  background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:8px;
  font-size:13px; font-weight:600;
}
.skip-link:focus{ left:8px; text-decoration:none; }

/* Foco visible consistente en todo lo interactivo */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid rgba(124,58,237,0.45); outline-offset:2px; border-radius:8px;
}

/* Mostrar/ocultar contraseña */
.field-pwd{ position:relative; }
.field-pwd input{ width:100%; padding-right:46px; }
.pwd-toggle{
  position:absolute; right:8px; bottom:8px;
  background:none; border:none; cursor:pointer; padding:5px 8px;
  font-size:12px; font-weight:600; color:var(--slate2); font-family:inherit;
  border-radius:6px;
}
.pwd-toggle:hover{ color:var(--pd); background:var(--pb); }

/* Pista de fuerza de contraseña */
.pwd-hint{ font-size:12px; font-weight:500; color:var(--slate2); margin-top:-2px; }
.pwd-hint.weak{ color:var(--red); }
.pwd-hint.ok{ color:var(--amber); }
.pwd-hint.strong{ color:var(--green); }

/* Spinner en botones */
.spin{
  display:inline-block; width:14px; height:14px; vertical-align:-2px;
  border:2px solid rgba(255,255,255,0.45); border-top-color:#fff;
  border-radius:50%; animation:ipse-spin .7s linear infinite; margin-right:7px;
}
[data-theme=dark] .spin{ border-color:rgba(0,0,0,0.35); border-top-color:#1C1C21; }
@keyframes ipse-spin{ to{ transform:rotate(360deg) } }

/* Skeletons de carga del dashboard */
.skel-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px; margin-bottom:24px;
}
.skel{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:18px; box-shadow:var(--shadow);
}
.skel .bar{
  height:11px; border-radius:6px; margin-bottom:12px;
  background:linear-gradient(90deg,var(--line2) 25%,var(--line) 37%,var(--line2) 63%);
  background-size:400% 100%; animation:ipse-shimmer 1.4s ease infinite;
}
.skel .bar.lg{ height:24px; width:60%; margin-top:6px; }
.skel .bar.sm{ width:40%; }
@keyframes ipse-shimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }

/* Estado de error / vacío reutilizable */
.state{
  text-align:center; padding:44px 24px; color:var(--slate2);
  background:var(--white); border:1px solid var(--line); border-radius:10px;
}
.state .ico{ font-size:30px; margin-bottom:10px; }
.state h3{ color:var(--ink); font-size:15px; font-weight:600; margin-bottom:6px; justify-content:center; }
.state .btn{ margin-top:14px; }

/* Respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important; animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}