/* Bloque <style> de allsafedl-admin(2).html, copiado verbatim en cuanto a
   VALORES (colores, spacing, tamaños) — cada selector quedó prefijado con
   `.admin-page ` (scope de descendiente), mismo criterio que
   styles-familia.css en la fase 003. Necesario acá también: el admin
   define `.sidebar` (el panel de navegación, 248px de ancho) que colisiona
   con `.familia-page .sidebar` (el aside de la ficha de versión) si se
   carga sin scope — sin este fix, visitar /admin rompería el layout del
   sidebar en cualquier ficha de programa, porque las tres hojas de estilo
   se cargan juntas en el mismo index.html shell en cada ruta.

   `*`, `body`, `.mono`, `.display` del bloque original NO se repiten acá
   — son duplicados exactos (o ya cubiertos) de las mismas reglas que ya
   carga styles.css; ver colaboraciones/007-catalogo-real-admin.md. */

  :root{
    --bg:#0A0D13; --bg-panel:#12161F; --bg-panel-2:#171C27;
    --border:#222937; --border-soft:#1A2029;
    --text:#E7ECF3; --text-muted:#8993A6; --text-dim:#5B6577;
    --accent:#00D9B5; --accent-soft:rgba(0,217,181,0.1); --accent-dim:#0A5C4E;
    --blue:#7EA8FF; --blue-soft:rgba(126,168,255,0.1);
    --warn:#FFB020; --warn-soft:rgba(255,176,32,0.1);
    --danger:#FF5470; --danger-soft:rgba(255,84,112,0.1);
  }
  .admin-page button{font-family:inherit; cursor:pointer;}
  .admin-page input, .admin-page select, .admin-page textarea{font-family:inherit;}

  .admin-page .shell{display:flex; min-height:100vh;}

  /* SIDEBAR */
  .admin-page .sidebar{width:248px; flex-shrink:0; background:var(--bg-panel); border-right:1px solid var(--border-soft);
    position:sticky; top:0; height:100vh; display:flex; flex-direction:column;}
  .admin-page .sb-logo{display:flex; align-items:center; gap:9px; padding:22px 20px; border-bottom:1px solid var(--border-soft); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px;}
  .admin-page .sb-badge{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--text-dim); border:1px solid var(--border); padding:2px 6px; border-radius:4px; margin-left:auto;}
  .admin-page .sb-nav{flex:1; padding:16px 12px; overflow-y:auto;}
  .admin-page .nav-item{display:flex; align-items:center; gap:11px; padding:10px 14px; border-radius:8px; color:var(--text-muted);
    font-size:13.5px; font-weight:500; margin-bottom:2px; border:none; background:none; width:100%; text-align:left;}
  .admin-page .nav-item:hover{background:var(--bg-panel-2); color:var(--text);}
  .admin-page .nav-item.active{background:var(--accent-soft); color:var(--accent);}
  .admin-page .nav-item svg{flex-shrink:0;}
  .admin-page .sb-foot{padding:16px 20px; border-top:1px solid var(--border-soft); display:flex; align-items:center; gap:10px;}
  .admin-page .avatar{width:32px; height:32px; border-radius:8px; background:var(--bg-panel-2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12.5px; color:var(--accent); flex-shrink:0;}
  .admin-page .sb-foot-name{font-size:13px; font-weight:600;}
  .admin-page .sb-foot-role{font-size:11px; color:var(--text-dim);}

  /* MAIN */
  .admin-page .main{flex:1; min-width:0;}
  .admin-page .topbar{position:sticky; top:0; z-index:40; background:rgba(10,13,19,0.92); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border-soft); padding:18px 32px; display:flex; align-items:center; justify-content:space-between;}
  .admin-page .topbar h2{font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:700;}
  .admin-page .topbar-sub{font-size:12.5px; color:var(--text-dim); margin-top:2px;}
  .admin-page .topbar-actions{display:flex; align-items:center; gap:12px;}
  .admin-page .content{padding:32px; max-width:1320px;}
  .admin-page .view{display:none;}
  .admin-page .view.active{display:block;}

  .admin-page .btn{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; padding:10px 16px; border-radius:8px; border:1px solid var(--border); background:var(--bg-panel); color:var(--text);}
  .admin-page .btn:hover{border-color:var(--border-strong,var(--text-dim));}
  .admin-page .btn-accent{background:var(--accent); color:#06110E; border:none;}
  .admin-page .btn-accent:hover{filter:brightness(1.05);}
  .admin-page .btn-sm{padding:6px 11px; font-size:12.5px; border-radius:6px;}
  .admin-page .btn-icon{width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; border:1px solid var(--border); background:var(--bg-panel); color:var(--text-muted);}
  .admin-page .btn-icon:hover{color:var(--text); border-color:var(--text-dim);}
  .admin-page .btn-icon.danger:hover{color:var(--danger); border-color:rgba(255,84,112,0.4);}

  .admin-page .search-input{background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; padding:9px 14px 9px 36px; font-size:13.5px; color:var(--text); width:260px; position:relative;}
  .admin-page .search-wrap{position:relative;}
  .admin-page .search-wrap svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-dim);}

  /* METRIC CARDS */
  .admin-page .metric-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:32px;}
  .admin-page .metric-card{background:var(--bg-panel); border:1px solid var(--border); border-radius:14px; padding:20px;}
  .admin-page .m-label{font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); margin-bottom:12px;}
  .admin-page .m-value{font-family:'Space Grotesk',sans-serif; font-size:27px; font-weight:700; margin-bottom:6px;}
  .admin-page .m-trend{font-size:12px; display:flex; align-items:center; gap:4px;}
  .admin-page .trend-up{color:var(--accent);} .admin-page .trend-down{color:var(--danger);}

  .admin-page .panel-row{display:grid; grid-template-columns:1.6fr 1fr; gap:20px; margin-bottom:32px;}
  .admin-page .panel{background:var(--bg-panel); border:1px solid var(--border); border-radius:14px; padding:24px;}
  .admin-page .panel h3{font-family:'Space Grotesk',sans-serif; font-size:16px; margin-bottom:18px;}
  .admin-page .chart-wrap{height:220px;}

  .admin-page .rank-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border-soft);}
  .admin-page .rank-row:last-child{border-bottom:none;}
  .admin-page .rank-num{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-dim); width:16px;}
  .admin-page .rank-name{flex:1; font-size:13.5px; font-weight:500;}
  .admin-page .rank-bar-track{width:70px; height:5px; background:var(--bg-panel-2); border-radius:3px; overflow:hidden; margin-right:10px;}
  .admin-page .rank-bar-fill{height:100%; background:var(--accent);}
  .admin-page .rank-val{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-muted); width:56px; text-align:right;}

  .admin-page .activity-row{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-soft); font-size:13px;}
  .admin-page .activity-row:last-child{border-bottom:none;}
  .admin-page .activity-dot{width:6px; height:6px; border-radius:50%; background:var(--accent); margin-top:6px; flex-shrink:0;}
  .admin-page .activity-text{color:var(--text-muted);}
  .admin-page .activity-time{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-dim); margin-top:2px;}

  /* TABLE */
  .admin-page .table-card{background:var(--bg-panel); border:1px solid var(--border); border-radius:14px; overflow:hidden;}
  .admin-page .table-toolbar{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border-soft); flex-wrap:wrap; gap:12px;}
  .admin-page .filter-chips{display:flex; gap:8px; flex-wrap:wrap;}
  .admin-page .fchip{font-family:'JetBrains Mono',monospace; font-size:11.5px; padding:6px 12px; border-radius:16px; border:1px solid var(--border); color:var(--text-muted);}
  .admin-page .fchip.active{background:var(--accent-soft); border-color:rgba(0,217,181,.4); color:var(--accent);}
  .admin-page table{width:100%; border-collapse:collapse;}
  .admin-page th{text-align:left; font-family:'JetBrains Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); padding:11px 20px; border-bottom:1px solid var(--border); background:var(--bg-panel-2);}
  .admin-page td{padding:14px 20px; border-bottom:1px solid var(--border-soft); font-size:13.5px; vertical-align:middle;}
  .admin-page tr:last-child td{border-bottom:none;}
  .admin-page tr.row-clickable:hover td{background:var(--bg-panel-2);}
  .admin-page .cell-name{display:flex; align-items:center; gap:11px;}
  .admin-page .row-icon{width:34px; height:34px; border-radius:8px; background:var(--bg-panel-2); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; color:var(--accent); flex-shrink:0;}
  .admin-page .cell-name-txt .n-main{font-weight:600; font-size:13.5px;}
  .admin-page .cell-name-txt .n-sub{font-size:11.5px; color:var(--text-dim);}
  .admin-page .row-actions{display:flex; gap:6px; justify-content:flex-end;}

  .admin-page .badge{font-family:'JetBrains Mono',monospace; font-size:10.5px; padding:4px 9px; border-radius:5px; border:1px solid; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;}
  .admin-page .b-teal{color:var(--accent); border-color:rgba(0,217,181,.35); background:var(--accent-soft);}
  .admin-page .b-blue{color:var(--blue); border-color:rgba(126,168,255,.35); background:var(--blue-soft);}
  .admin-page .b-warn{color:var(--warn); border-color:rgba(255,176,32,.35); background:var(--warn-soft);}
  .admin-page .b-danger{color:var(--danger); border-color:rgba(255,84,112,.35); background:var(--danger-soft);}
  .admin-page .b-gray{color:var(--text-dim); border-color:var(--border); background:var(--bg-panel-2);}

  .admin-page .toggle{position:relative; width:36px; height:20px; border-radius:10px; background:var(--bg-panel-2); border:1px solid var(--border); flex-shrink:0;}
  .admin-page .toggle.on{background:var(--accent-dim); border-color:var(--accent);}
  .admin-page .toggle-dot{position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:50%; background:var(--text-dim); transition:transform .15s;}
  .admin-page .toggle.on .toggle-dot{background:var(--accent); transform:translateX(16px);}

  /* DRAWER / MODAL */
  .admin-page .overlay{position:fixed; inset:0; z-index:100; background:rgba(6,8,12,.7); backdrop-filter:blur(3px); display:none; justify-content:flex-end;}
  .admin-page .overlay.open{display:flex;}
  .admin-page .drawer{width:100%; max-width:520px; background:var(--bg-panel); border-left:1px solid var(--border); height:100vh; overflow-y:auto; box-shadow:-30px 0 60px -20px rgba(0,0,0,.5);}
  /* .drawer-full: los formularios de familia/versión ocupan la ventana
     completa (pedido explícito, antes eran un panel lateral de 520px) —
     sin max-width, .drawer ya llena todo el overlay (width:100% ya
     estaba); el contenido interno se centra en una columna legible en
     vez de estirarse de punta a punta en pantallas anchas. */
  .admin-page .drawer.drawer-full{max-width:none; border-left:none;}
  .admin-page .drawer-full .drawer-head{padding:22px 32px;}
  .admin-page .drawer-full .drawer-body{max-width:640px; margin:0 auto; padding:28px 32px 60px;}
  .admin-page .drawer-head{display:flex; align-items:center; justify-content:space-between; padding:20px 26px; border-bottom:1px solid var(--border-soft); position:sticky; top:0; background:var(--bg-panel); z-index:2;}
  .admin-page .drawer-head h3{font-family:'Space Grotesk',sans-serif; font-size:17px;}
  .admin-page .drawer-close{background:none; border:none; color:var(--text-dim); font-size:18px; padding:4px;}
  .admin-page .drawer-body{padding:24px 26px 40px;}
  .admin-page .form-group{margin-bottom:18px;}
  .admin-page .form-group label{display:block; font-size:12.5px; font-weight:600; color:var(--text-muted); margin-bottom:7px;}
  .admin-page .form-group input, .admin-page .form-group select, .admin-page .form-group textarea{
    width:100%; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:13.5px; color:var(--text);}
  .admin-page .form-group textarea{resize:vertical; min-height:70px;}
  .admin-page .form-check{display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--border-soft); border-radius:8px; background:var(--bg);}
  .admin-page .form-check input{width:16px; height:16px; accent-color:var(--accent);}
  .admin-page .drawer-foot{display:flex; gap:10px; padding-top:8px;}
  .admin-page .drawer-foot .btn{flex:1; justify-content:center;}

  .admin-page .versions-mini{border:1px solid var(--border-soft); border-radius:10px; overflow:hidden; margin-top:8px;}
  .admin-page .vmini-row{display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid var(--border-soft); font-size:13px;}
  .admin-page .vmini-row:last-child{border-bottom:none;}

  .admin-page .tab-switch{display:flex; gap:6px; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:4px; margin-bottom:22px;}
  .admin-page .tab-btn{flex:1; background:none; border:none; color:var(--text-dim); font-size:13px; font-weight:600; padding:9px; border-radius:6px;}
  .admin-page .tab-btn.active{background:var(--bg-panel-2); color:var(--accent);}

  /* METRICS VIEW */
  .admin-page .calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .admin-page .calc-result{text-align:center; padding:28px 20px;}
  .admin-page .calc-result .r-label{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-dim); text-transform:uppercase; margin-bottom:10px;}
  .admin-page .calc-result .r-value{font-family:'Space Grotesk',sans-serif; font-size:38px; font-weight:700; color:var(--accent); margin-bottom:6px;}
  .admin-page .calc-result .r-sub{font-size:12.5px; color:var(--text-muted);}

  @media (max-width:1300px){
    .admin-page .metric-grid{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width:1100px){
    .admin-page .metric-grid{grid-template-columns:1fr 1fr;}
    .admin-page .panel-row{grid-template-columns:1fr;}
    .admin-page .calc-grid{grid-template-columns:1fr;}
  }
  @media (max-width:800px){
    .admin-page .sidebar{display:none;}
    .admin-page .metric-grid{grid-template-columns:1fr;}
  }