/* LA PESTAÑA «FALLOS DE LA APP» (caja negra, 7-oct-2026). Calcada de briox-admin/boceto-caja-negra.html.
   Todo vive dentro de #cn: no toca nada del resto del panel. */
#cn{
  --cn-card:#fff; --cn-linea:#e4e4e4; --cn-tx:#141414; --cn-tx2:#555; --cn-tx3:#6e6e6e;
  --cn-rojo:#d70015; --cn-verde:#1a7f37; --cn-gris:#8a8a8a; --cn-cebra:#f6f6f6; --cn-cab:#ececec;
  color:var(--cn-tx); font-family:var(--f-app, Poppins, system-ui, sans-serif); font-size:14px; line-height:1.45;
}
#cn *{ box-sizing:border-box; }
#cn .num{ font-variant-numeric:tabular-nums; }
#cn .cn-cab{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
#cn .cn-cab h1{ font-size:30px; font-weight:800; margin:0; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; }
#cn .cn-pild{ display:inline-flex; background:var(--cn-cab); border-radius:999px; padding:3px; margin-left:auto; }
#cn .cn-pild button{ padding:6px 14px; border-radius:999px; font:inherit; font-weight:600; font-size:13px; color:var(--cn-tx2); white-space:nowrap; background:transparent; border:0; cursor:pointer; }
#cn .cn-pild button[aria-pressed="true"]{ background:#fff; color:var(--cn-tx); }
#cn .cn-losas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:32px; }
#cn .cn-losa{ background:var(--cn-card); border:1px solid var(--cn-linea); border-radius:12px; padding:16px; display:flex; align-items:center; gap:12px; }
#cn .cn-losa svg{ width:28px; height:28px; flex:none; }
#cn .cn-losa b{ font-size:26px; font-weight:800; line-height:1.1; display:block; }
#cn .cn-losa span{ display:block; font-size:13px; color:var(--cn-tx2); font-weight:500; margin-top:4px; }
#cn .rojo{ color:var(--cn-rojo); } #cn .verde{ color:var(--cn-verde); } #cn .gris{ color:var(--cn-gris); }
#cn .cn-sec{ display:flex; align-items:center; gap:8px; font-size:20px; font-weight:700; margin:0 0 12px; }
#cn .cn-grupo{ background:var(--cn-card); border:1px solid var(--cn-linea); border-radius:16px; padding:24px; margin-bottom:24px; }
#cn .cn-grupo.prueba{ opacity:.75; }
#cn .cn-gcab{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
#cn .cn-gcab h3{ margin:0; font-size:19px; font-weight:700; display:flex; align-items:center; gap:8px; }
#cn .cn-gcab h3 svg{ width:22px; height:22px; flex:none; }
#cn .cn-meta{ color:var(--cn-tx2); font-size:13.5px; margin-top:6px; }
#cn .cn-der{ margin-left:auto; text-align:right; }
#cn .cn-der b{ font-size:30px; font-weight:800; line-height:1; display:block; margin-top:8px; }
#cn .cn-der span{ font-size:13px; color:var(--cn-tx2); }
#cn .cn-estado{ display:inline-block; padding:4px 10px; border-radius:8px; font-size:12.5px; font-weight:700; color:#fff; white-space:nowrap; }
#cn .cn-estado.r{ background:var(--cn-rojo); } #cn .cn-estado.v{ background:var(--cn-verde); } #cn .cn-estado.g{ background:#9a9a9a; }
#cn .cn-datos{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-top:24px; }
#cn .cn-dato{ background:var(--cn-cebra); border-radius:12px; padding:12px 16px; min-width:0; }
#cn .cn-dato .rot{ font-size:12.5px; color:var(--cn-tx3); font-weight:600; margin-bottom:4px; }
#cn .cn-dato .val{ font-weight:600; overflow-wrap:anywhere; }
#cn .cn-pasos{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-weight:600; }
#cn .cn-pasos i{ font-style:normal; color:var(--cn-tx3); }
#cn .cn-pasos .ultimo{ color:var(--cn-rojo); }
#cn code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; background:#fff; border:1px solid var(--cn-linea); border-radius:6px; padding:2px 6px; overflow-wrap:anywhere; }
#cn .cn-tabla{ overflow-x:auto; margin-top:24px; }
#cn table{ width:100%; border-collapse:collapse; font-size:13.5px; }
#cn th{ background:var(--cn-cab); text-align:left; font-weight:700; font-size:13px; padding:10px 12px; white-space:nowrap; }
#cn th:first-child{ border-radius:10px 0 0 10px; } #cn th:last-child{ border-radius:0 10px 10px 0; }
#cn td{ padding:10px 12px; white-space:nowrap; }
#cn tbody tr:nth-child(even) td{ background:var(--cn-cebra); }
@media (hover:hover){ #cn tbody tr:hover td{ background:#eaeaea; } }
#cn .cn-mas{ color:var(--cn-tx3); font-size:13px; margin-top:8px; }
#cn .cn-vacio{ background:var(--cn-card); border:1px solid var(--cn-linea); border-radius:16px; padding:32px; text-align:center; color:var(--cn-tx2); font-weight:600; }
@media (max-width:820px){
  #cn .cn-losas{ grid-template-columns:1fr; } #cn .cn-datos{ grid-template-columns:1fr; }
  #cn .cn-der{ margin-left:0; text-align:left; } #cn .cn-pild{ margin-left:0; }
}