:root{--bg:#00110f;--panel:#001b18;--panel2:#00231e;--line:#075448;--line2:#0a6b57;--green:#13dfa0;--green2:#00b981;--text:#d6f4ef;--muted:#77aaa4;--dim:#427b72;--mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:13px;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer;color:inherit}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:32px;padding:0 24px;background:#001512}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--green);font-size:25px;font-weight:800;letter-spacing:-1px;min-width:212px}.brand-mark{font-size:35px;line-height:1;color:var(--green)}.green{color:var(--green)}.product{display:flex;flex-direction:column;gap:4px}.product strong{font-size:17px;font-weight:600}.product small,.capture-name small{color:var(--muted);font-size:11px;letter-spacing:.3px}.privacy{margin-left:auto;border:1px solid var(--line2);border-radius:6px;padding:9px 15px;display:flex;align-items:center;gap:10px;color:var(--green)}.privacy .shield{font-size:23px}.privacy span:last-child{display:flex;flex-direction:column;gap:3px}.privacy b{font-size:12px}.privacy small{font-size:10px;color:var(--muted)}.app-shell{display:grid;grid-template-columns:274px minmax(0,1fr);min-height:calc(100vh - 132px)}.sidebar{border-right:1px solid var(--line);background:#001613;padding:22px 16px 24px}.side-section h2,.section-heading h2{font-size:13px;font-weight:650;margin:0 0 14px;color:var(--green)}.dropzone{border:1px dashed var(--line2);border-radius:6px;min-height:185px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:16px;text-align:center;cursor:pointer;background:linear-gradient(145deg,rgba(0,66,52,.25),transparent)}.dropzone.dragover{background:#003c30;border-color:var(--green)}.upload-icon{font-size:34px;color:var(--green);transform:rotate(0deg)}.dropzone strong{font-weight:600}.dropzone small{font-size:10px;color:var(--muted);line-height:1.5}.pick-button{display:inline-block;background:var(--green);color:#00241b;border-radius:4px;padding:8px 22px;font-weight:700;margin:3px 0}.side-nav{display:grid;gap:4px;margin:14px -9px 18px}.nav-button{border:1px solid transparent;background:transparent;text-align:left;padding:11px 12px;border-radius:5px;display:flex;align-items:center;gap:10px;color:var(--text);font-size:13px}.nav-button span{flex:1}.nav-button b{font-size:11px;font-weight:500;background:#003e32;color:var(--green);border-radius:5px;padding:4px 7px}.nav-button.active,.nav-button:hover{background:#00352b;border-color:var(--line2);color:var(--green)}.filters{border-top:1px solid var(--line);margin:0 -16px;padding:20px 16px 0}.section-heading{display:flex;align-items:center;justify-content:space-between}.text-button{border:0;background:none;color:var(--green);font-size:11px;padding:0}.filters label{display:grid;gap:6px;margin:13px 0;color:#9ccac3;font-size:11px}.filters input,.filters select,.table-tools input{width:100%;border:1px solid var(--line2);border-radius:5px;background:#00100e;color:var(--text);padding:9px 10px;outline:none}.filters input:focus,.filters select:focus,.table-tools input:focus{border-color:var(--green)}input::placeholder{color:#54857d}.primary-button{border:0;border-radius:5px;background:var(--green2);color:#00241b;font-weight:750;padding:9px 14px;width:100%;margin-top:7px}.primary-button:hover,.pick-button:hover{background:#48f0b8}.hint{color:var(--dim);font-size:10px;line-height:1.5}.main{min-width:0;padding:15px 22px 12px}.capture-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:0 2px 13px}.capture-name{display:flex;align-items:center;gap:12px;min-width:0}.file-icon{font-size:23px;color:var(--green)}.capture-name>div{display:grid;gap:5px;min-width:0}.capture-name strong{font-size:14px;overflow-wrap:anywhere}.toolbar-actions{display:flex;gap:9px}.outline-button{background:transparent;border:1px solid var(--line2);color:var(--green);border-radius:5px;padding:8px 13px;white-space:nowrap}.outline-button:hover,.page-button:hover:not(:disabled){background:#003a2f}.export-wrap{position:relative}.export-menu{position:absolute;z-index:5;right:0;top:39px;min-width:190px;background:#00231e;border:1px solid var(--line2);box-shadow:0 8px 25px #0009;border-radius:5px;padding:5px}.export-menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px;border-radius:4px;font-size:12px}.export-menu button:hover{background:#004337;color:var(--green)}.hidden{display:none!important}.status{font-size:11px;color:var(--muted);padding:8px 0;min-height:30px}.status.error{color:#ff9d9d}.status.success{color:var(--green)}.stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 14px}.stat-card{border:1px solid var(--line);border-radius:6px;background:linear-gradient(120deg,#00231e,#001713);padding:13px 11px;min-height:84px;display:flex;align-items:center;gap:10px;position:relative;overflow:hidden}.stat-icon{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;background:#00372b;color:var(--green);font-size:24px}.stat-card>div:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:4px}.stat-card small{color:var(--muted);font-size:9px;letter-spacing:.5px}.stat-card strong{font-size:20px;line-height:1.1;white-space:nowrap}.stat-card span{font-size:10px;color:var(--muted);white-space:nowrap}.meter{position:absolute;bottom:8px;left:65px;right:12px;height:4px;border-radius:4px;background:#073d33;overflow:hidden}.meter i{display:block;width:0;height:100%;background:var(--green);transition:width .2s}.mini-bars{display:flex;align-items:flex-end;gap:3px;margin-left:auto;height:25px}.mini-bars i{display:block;width:3px;background:var(--green);border-radius:3px 3px 0 0;height:30%}.mini-bars i:nth-child(2){height:65%}.mini-bars i:nth-child(3){height:43%}.mini-bars i:nth-child(4){height:78%}.mini-bars i:nth-child(5){height:48%}.mini-bars i:nth-child(6){height:90%}.mini-bars i:nth-child(7){height:72%}.table-panel,.detail-panel{border:1px solid var(--line2);border-radius:6px;background:rgba(0,20,17,.7);overflow:hidden}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border-bottom:1px solid var(--line)}.panel-heading h2{margin:0;font-size:13px;color:var(--green);font-weight:650}.panel-heading small,.panel-heading>span{font-size:10px;color:var(--muted)}.panel-heading>div:first-child{display:flex;flex-direction:column;gap:4px}.table-tools{display:flex;align-items:center;gap:12px}.table-tools input{width:150px;padding:7px 9px;font-size:11px}.table-tools span{color:var(--muted);font-size:10px;white-space:nowrap}.table-scroll{overflow:auto;max-height:310px;scrollbar-color:#0a6654 #00110f;scrollbar-width:thin}table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:11px;white-space:nowrap}thead{position:sticky;top:0;z-index:1;background:#00251f;color:var(--green)}th{text-align:left;padding:9px 10px;font-family:var(--sans);font-size:9px;letter-spacing:.45px;font-weight:700;border-bottom:1px solid var(--line2)}td{padding:6px 10px;border-bottom:1px solid #07372f;max-width:250px;overflow:hidden;text-overflow:ellipsis}tbody tr{cursor:pointer}tbody tr:nth-child(even){background:rgba(0,48,39,.25)}tbody tr:hover{background:#004638}tbody tr.selected{background:#005341;color:#e5fff8}.protocol-pill{color:var(--green);font-weight:700}.empty{text-align:center;color:var(--muted);padding:30px;white-space:normal}.table-footer{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:10px;color:var(--muted)}.page-button{border:1px solid var(--line);border-radius:4px;background:#001713;padding:6px 9px;margin-left:5px;font-size:10px}.page-button:disabled{opacity:.35;cursor:default}.details-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,1.45fr) minmax(220px,.95fr);gap:12px;margin-top:14px}.detail-panel{min-height:300px}.detail-panel .panel-heading{padding:11px 12px}.detail-content{padding:12px;font-size:11px;line-height:1.65;overflow:auto;max-height:370px}.muted{color:var(--muted);line-height:1.6}.detail-tree{font-family:var(--mono);font-size:10px;line-height:1.65;overflow-wrap:anywhere}.tree-head{color:var(--green);font-weight:700;margin-top:7px}.tree-line{padding-left:14px;border-left:1px solid #0b6756;color:#b2d9d1}.hex-dump{font-family:var(--mono);font-size:10px;line-height:1.7;padding:12px;margin:0;white-space:pre;overflow:auto;max-height:350px;color:#c2e9df}.hex-ascii{color:#71a99d}.summary-line{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid #07372f}.summary-line span:first-child{color:var(--muted)}.summary-line span:last-child{overflow-wrap:anywhere;text-align:right}.conversation-mini{margin-top:12px}.conversation-mini h3{font-size:11px;color:var(--green)}.conversation-mini p{font-family:var(--mono);font-size:10px;line-height:1.6}.alternate-panel{margin-top:14px;padding-bottom:8px}.alternate-panel .panel-heading{border-bottom:1px solid var(--line)}.alt-table-wrap{overflow:auto;max-height:450px}.alt-table-wrap table{font-size:11px}.bar-row{display:grid;grid-template-columns:minmax(90px,160px) 1fr 55px;gap:10px;align-items:center;margin:12px 15px;font-size:11px}.bar-track{height:8px;background:#07372f;border-radius:5px;overflow:hidden}.bar-track i{display:block;height:100%;background:var(--green)}.bar-value{text-align:right;color:var(--muted);font-family:var(--mono)}footer{min-height:54px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 25px;color:var(--muted);font-size:10px;gap:12px}.footer-brand{display:flex;align-items:center;justify-self:start;gap:7px;color:var(--green);font-size:16px;font-weight:800;letter-spacing:-.7px;min-width:0}.footer-brand .brand-logo{width:24px;height:24px}.footer-brand>span{border:0;padding:0;color:var(--green);font-size:16px;font-weight:800;letter-spacing:-.7px}.footer-made{justify-self:center;color:var(--muted);font-size:10px;white-space:nowrap}.footer-description{justify-self:end;color:var(--muted);font-size:10px;text-align:right}noscript{display:block;padding:20px;color:#ff9d9d}@media(max-width:1200px){.app-shell{grid-template-columns:235px minmax(0,1fr)}.main{padding:14px}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.details-grid{grid-template-columns:1fr 1fr}.summary-detail{grid-column:1/-1;min-height:200px}.privacy{padding:7px}.brand{min-width:auto}.product{margin-left:auto}}@media(max-width:850px){.topbar{padding:0 14px;gap:14px}.brand{font-size:20px}.brand-mark{font-size:28px}.product small{display:none}.privacy{display:none}.app-shell{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid var(--line);padding:13px}.side-section h2{margin-bottom:8px}.dropzone{min-height:100px}.side-nav{grid-template-columns:repeat(4,minmax(0,1fr));margin:10px 0}.nav-button{justify-content:center;padding:9px 5px;gap:5px}.nav-button span{font-size:10px}.nav-button b{display:none}.filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px;padding-top:13px}.section-heading{grid-column:1/-1}.filters .primary-button,.filters .hint{grid-column:1/-1}.main{padding:12px}.capture-toolbar{align-items:flex-start}.toolbar-actions{flex-wrap:wrap;justify-content:flex-end}.outline-button{padding:8px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.details-grid{grid-template-columns:1fr}.summary-detail{grid-column:auto}.detail-panel{min-height:220px}.table-tools input{width:110px}footer{grid-template-columns:1fr;justify-items:start;gap:8px}.footer-made,.footer-description{justify-self:start;text-align:left}}@media(max-width:480px){.topbar{height:65px}.brand{font-size:18px;gap:5px}.brand-mark{font-size:24px}.product strong{font-size:13px}.product{margin-left:auto}.product small{display:none}.capture-toolbar{flex-direction:column}.toolbar-actions{width:100%;justify-content:flex-start}.stats-grid{gap:7px}.stat-card{padding:9px 7px;gap:7px}.stat-icon{width:30px;height:30px;flex-basis:30px;font-size:18px}.stat-card strong{font-size:17px}.meter{left:45px}.panel-heading{align-items:flex-start;flex-direction:column}.table-tools{width:100%;justify-content:space-between}.table-tools input{width:58%}.filters{grid-template-columns:1fr}.section-heading,.filters .primary-button,.filters .hint{grid-column:auto}.nav-button{font-size:11px}.nav-button span{max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* Advanced display and filter styles */
.filters code{font-family:var(--mono);color:#bceee2;background:#002d25;border:1px solid #075448;border-radius:3px;padding:1px 3px}.filter-help{margin:-3px 0 8px}.protocol-pill{color:var(--protocol-color,var(--green));font-weight:750}

/* Conversation packet view */conversation-detail-heading{align-items:flex-start}.conversation-detail-heading>div:first-child{min-width:0}.conversation-detail-heading small{overflow-wrap:anywhere;line-height:1.6}.conversation-actions{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}.conversation-actions .outline-button{font-size:10px;padding:7px 9px}.conversation-filter-note{padding:0 13px;margin:10px 0}.conversation-packets{max-height:560px}.alt-table-wrap tr[data-conversation-index]{cursor:pointer}.alt-table-wrap tr[data-conversation-index]:focus{outline:1px solid var(--green);outline-offset:-2px;background:#004638}@media(max-width:850px){.conversation-detail-heading{flex-direction:column}.conversation-actions{justify-content:flex-start}}

/* v1.3.1: navegación de regreso desde el detalle de un paquete */
.packet-detail-heading{align-items:center;gap:12px}.packet-detail-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.packet-detail-actions .outline-button{font-size:10px;padding:7px 9px}@media(max-width:650px){.packet-detail-heading{align-items:flex-start;flex-direction:column}.packet-detail-actions{justify-content:flex-start}}

/* v1.3.2: color de protocolo aplicado a toda la fila, no solo al texto de la celda. */
.brand-logo{display:block;width:44px;height:44px;object-fit:contain;flex:0 0 auto}.footer-logo{display:block;width:24px;height:24px;object-fit:contain;flex:0 0 auto}tbody tr.packet-row{background:color-mix(in srgb,var(--protocol-color,var(--green)) 16%,#001b18);box-shadow:inset 3px 0 var(--protocol-color,var(--green))}tbody tr.packet-row:nth-child(even){background:color-mix(in srgb,var(--protocol-color,var(--green)) 20%,#001b18)}tbody tr.packet-row:hover{background:color-mix(in srgb,var(--protocol-color,var(--green)) 32%,#004638)}tbody tr.packet-row.selected{background:color-mix(in srgb,var(--protocol-color,var(--green)) 38%,#005341)}.protocol-pill{background:color-mix(in srgb,var(--protocol-color,var(--green)) 13%,transparent)}@media(max-width:850px){.brand-logo{width:34px;height:34px}.brand{gap:7px}}

/* v1.3.4: asignación explícita del color por paquete a cada celda; evita que estilos de tabla oculten el color del protocolo. */
tbody tr.packet-row > td { background-color: color-mix(in srgb, var(--protocol-color, var(--green)) 18%, #001b18); }
tbody tr.packet-row:nth-child(even) > td { background-color: color-mix(in srgb, var(--protocol-color, var(--green)) 22%, #001b18); }
tbody tr.packet-row:hover > td { background-color: color-mix(in srgb, var(--protocol-color, var(--green)) 34%, #004638) !important; }
tbody tr.packet-row.selected > td { background-color: color-mix(in srgb, var(--protocol-color, var(--green)) 40%, #005341) !important; }

/* Language selector replaces the former header privacy badge. */
.language-control{margin-left:auto;display:flex;align-items:center}
.language-control select{appearance:auto;background:#00231e;color:var(--green);border:1px solid var(--line2);border-radius:6px;padding:9px 30px 9px 12px;min-width:112px;cursor:pointer;outline-offset:3px}
.language-control select:focus{outline:1px solid var(--green)}
.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}
@media(max-width:850px){.language-control select{padding:7px 8px;min-width:94px;font-size:11px}}
@media(max-width:480px){.topbar{gap:8px;padding:0 10px}.product{margin-left:0}.language-control{margin-left:auto}}

/* v1.4 dashboard: compact local analysis overview, no external charting libraries. */
.dashboard-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:4px 2px 14px}.dashboard-heading h2{margin:0;color:var(--green);font-size:18px}.dashboard-heading p{margin:6px 0 0;font-size:11px}.local-chip{border:1px solid var(--line2);border-radius:999px;padding:5px 10px;color:var(--green);font-size:10px;white-space:nowrap}.dashboard-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.dash-stat{display:flex;align-items:flex-start;gap:11px;min-width:0;border:1px solid var(--line);border-radius:7px;background:linear-gradient(140deg,#00241e,#001a17);padding:13px}.dash-stat-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:7px;background:#004235;color:var(--green);font-size:20px}.dash-stat>div{display:flex;flex-direction:column;gap:5px;min-width:0}.dash-stat small{color:var(--muted);font-size:9px;letter-spacing:.35px;text-transform:uppercase}.dash-stat strong{font-size:19px;line-height:1.15;overflow-wrap:anywhere}.dash-stat span:last-child{color:var(--dim);font-size:10px;line-height:1.4}.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.dashboard-card{min-width:0;border:1px solid var(--line);border-radius:7px;background:var(--panel);overflow:hidden}.dash-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 14px;border-bottom:1px solid var(--line)}.dash-card-heading h3{margin:0;color:var(--green);font-size:12px}.dash-card-heading small{color:var(--muted);font-size:10px;text-align:right}.time-chart{height:164px;display:flex;align-items:stretch;gap:4px;padding:14px 14px 0;background:linear-gradient(to bottom,transparent 32%,rgba(10,107,87,.18) 33%,transparent 34%,transparent 65%,rgba(10,107,87,.18) 66%,transparent 67%)}.time-bar{position:relative;display:flex;flex:1;min-width:0;align-items:flex-end;justify-content:center;height:100%;background:rgba(10,107,87,.08);border-bottom:1px solid var(--line2)}.time-bar i{display:block;width:76%;min-height:3px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#13dfa0,#078f6d)}.time-bar small{position:absolute;bottom:-17px;color:var(--dim);font-size:8px}.chart-axis{display:flex;justify-content:space-between;gap:8px;margin:21px 14px 0;color:var(--muted);font-size:9px}.chart-legend{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;color:var(--muted);font-size:10px}.chart-legend span:first-child{display:flex;align-items:center;gap:6px}.chart-legend i{width:9px;height:9px;border-radius:2px;background:var(--green)}.protocol-bar-row{display:grid;grid-template-columns:minmax(54px,100px) minmax(40px,1fr) 45px;align-items:center;gap:9px;margin:11px 14px;font-size:10px}.protocol-bar-row>span:first-child{overflow:hidden;text-overflow:ellipsis}.protocol-bar-row .bar-track{height:7px}.dash-table-wrap{overflow:auto;max-height:280px}.dash-table-wrap table{font-size:10px}.dash-table-wrap td{max-width:230px}.dash-table-wrap tbody tr:hover{background:#00352b}.dash-link{border:0;padding:0;background:none;color:#78d9c0;text-decoration:underline;text-underline-offset:2px;text-align:left;font-family:var(--mono);font-size:10px}.dash-link:hover{color:var(--green)}.dashboard-footnote{padding:12px 2px;color:var(--dim);font-size:10px;line-height:1.5}@media(max-width:1150px){.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.dashboard-grid{grid-template-columns:1fr}.dashboard-heading{flex-direction:column}.dash-stat{padding:10px}.dash-stat strong{font-size:17px}}@media(max-width:420px){.dashboard-stats{grid-template-columns:1fr 1fr;gap:7px}.dash-stat{gap:7px}.dash-stat-icon{width:28px;height:28px;flex-basis:28px;font-size:16px}.dash-stat strong{font-size:15px}.dash-stat small{font-size:8px}.dash-card-heading{flex-direction:column;gap:5px}.dash-card-heading small{text-align:left}}