/* ═══════════════════════════════════════════════════════════════════
   iFlexo · Capa visual compartida (Registro NC y Mis NC)
   Se carga DESPUÉS del <style> original de cada página: solo agrega o
   sobrescribe presentación. No define ninguna regla de display para las
   clases que usa el JavaScript (step/active, open, show, sel, on…).
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Mismos nombres que ya usan las páginas (y los estilos en línea del JS) */
  --bg:#f5f6f8; --surface:#ffffff; --surface2:#f3f4f6; --border:#e4e7ec; --border2:#d0d5dd;
  --orange:#e8601a; --orange2:#cf5312; --orangeL:rgba(232,96,26,.08);
  --blue:#2f5bd3; --blue2:#2f5bd3; --blueL:rgba(47,91,211,.07); --blueDark:#1d3a8a;
  --green:#12936a; --greenL:rgba(18,147,106,.09);
  --red:#d92d20; --redL:rgba(217,45,32,.07);
  --amber:#dc8a06; --amberL:rgba(220,138,6,.10);
  --text:#101828; --text2:#475467; --text3:#8a94a6;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px -6px rgba(16,24,40,.10);
  --shadowMd:0 1px 2px rgba(16,24,40,.04),0 4px 16px -6px rgba(16,24,40,.10);

  /* Nuevos (solo capa visual) */
  --ink:#101828;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-lg:0 12px 32px -8px rgba(16,24,40,.18),0 4px 8px -4px rgba(16,24,40,.06);
  --ring:0 0 0 4px rgba(232,96,26,.14);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-check-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --i-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --i-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  --i-building:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E");
  --i-coins:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M18.09 10.37A6 6 0 1 1 10.34 18M7 6h1v4M16.71 13.88l.7.71-2.82 2.82'/%3E%3C/svg%3E");
  --i-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --i-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
  --i-refresh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
}

*{-webkit-font-smoothing:antialiased;}
html{scroll-behavior:auto;}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;}
body::before{display:none;}

/* ── Encabezado ─────────────────────────────────────────────────────── */
.header{height:64px;padding:0 28px;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);box-shadow:none;}
.logo{font-family:var(--font);color:var(--text);font-size:15px;font-weight:700;gap:12px;}
.logo .logo-dot{display:none;}
.logo-mark{width:30px;height:30px;display:block;flex-shrink:0;}
.logo-txt{display:flex;flex-direction:column;line-height:1.1;}
.logo-name{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--text);}
.logo-sub{font-size:11px;font-weight:500;color:var(--text3);letter-spacing:.01em;}
.app-sep{width:1px;height:26px;background:var(--border);margin:0 6px;}
.app-name{font-size:14px;font-weight:600;color:var(--text2);}
.hdr-pill,.nc-badge,.header-badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--text2);background:var(--surface2);border:1px solid var(--border);padding:6px 12px;border-radius:999px;}
.nc-badge::before,.header-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--orange);}

/* ── Botones base ───────────────────────────────────────────────────── */
.btn-sec{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 14px;border-radius:10px;
  background:#fff;border:1px solid var(--border2);color:var(--text);font-family:var(--font);font-size:13px;font-weight:600;
  cursor:pointer;box-shadow:var(--shadow-xs);transition:background .15s,border-color .15s,box-shadow .15s;white-space:nowrap;}
.btn-sec:hover{background:var(--surface2);border-color:#c2c8d2;}
.btn-sec:focus-visible{outline:none;box-shadow:var(--ring);}
.btn-sec.sm{height:32px;padding:0 11px;font-size:12.5px;border-radius:9px;}
.ico-refresh::before{content:'';width:15px;height:15px;background:currentColor;-webkit-mask:var(--i-refresh) center/contain no-repeat;mask:var(--i-refresh) center/contain no-repeat;}

/* ── Campos ─────────────────────────────────────────────────────────── */
input[type=text],input[type=number],input[type=password],select,textarea{
  font-family:var(--font);background-color:#fff;border:1px solid var(--border2);border-radius:10px;color:var(--text);
  font-size:14.5px;padding:11px 14px;box-shadow:var(--shadow-xs);transition:border-color .15s,box-shadow .15s;}
textarea{line-height:1.6;}
input:focus,select:focus,textarea:focus{border-color:var(--orange);background-color:#fff;box-shadow:var(--ring);outline:none;}
input::placeholder,textarea::placeholder{color:#98a2b3;}
input[readonly]{opacity:1;background:var(--surface2);color:var(--text2);box-shadow:none;}

/* Buscador con lista */
.ss-input{background:#fff;border:1px solid var(--border2);border-radius:10px;font-size:14.5px;box-shadow:var(--shadow-xs);}
.ss-input:focus{border-color:var(--orange);background:#fff;box-shadow:var(--ring);}
.ss-input.has-value{background-color:#fff;border-color:var(--border2);color:var(--text);font-weight:600;}
.ss-ico{color:#98a2b3;}
.ss-clear{width:26px;height:26px;border-radius:7px;color:var(--text3);font-size:17px;line-height:1;}
.ss-clear:hover{background:var(--surface2);color:var(--text);}
.ss-drop{top:calc(100% + 6px);border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:var(--shadow-lg);background:#fff;}
.ss-item{border-bottom:none;border-radius:8px;padding:10px 12px;font-size:13.5px;color:var(--text);}
.ss-item:hover{background:var(--surface2);color:var(--text);}

/* ── Estados de carga y vacíos ──────────────────────────────────────── */
.spinner{width:26px;height:26px;border:2.5px solid var(--border);border-top-color:var(--orange);margin:36px auto;}
.empty{padding:44px 20px;}
.empty-icon{width:56px;height:56px;border-radius:16px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;font-size:24px;}
.empty-title{font-family:var(--font);font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.01em;}
.empty-desc{font-size:13.5px;color:var(--text2);max-width:360px;margin:0 auto;line-height:1.6;}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:8px;border:2px solid var(--bg);}

@media(max-width:600px){
  .header{padding:0 16px;height:58px;}
  .app-sep,.app-name,.logo-sub{display:none;}
  .logo-mark{width:26px;height:26px;}
}