/* Post-generator base helpers (kept minimal) */
* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #dfe6e9; color: #2d3436; min-height:100vh; }
main { display: grid; grid-template-columns: 320px 1fr; gap:20px; padding:20px; align-items:start; }
@media (max-width:1000px){ main{ grid-template-columns:1fr; } }
.card{ background:#fff; border-radius:16px; padding:18px; box-shadow:0 12px 30px rgba(0,0,0,0.08); border:1px solid #eee; }
.app-title{ font-weight:700; color:#6c5ce7; display:flex; gap:8px; align-items:center; }
.section-title{ font-size:1rem; color:#2d3436; font-weight:700; margin-bottom:12px; }
label{ display:block; font-size:0.85rem; color:#636e72; margin-bottom:6px; }
input,select,textarea{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid #ececec; background:#fbfbfc; color:#2d3436; }
input:focus,textarea:focus,select:focus{ outline:none; box-shadow:0 6px 20px rgba(0,0,0,0.05); border-color:#d1caff; }
.btn{ cursor:pointer; border:none; border-radius:10px; padding:8px 12px; font-weight:700; }
.btn-primary{ background:#6c5ce7; color:#fff; }
.btn-primary:hover{ background:#5849c4; }
.btn-outline{ background:transparent; color:#6c5ce7; border:1px solid rgba(108,92,231,0.12); }
.btn-danger{ background:#d63031; color:#fff; }
.fields-container{ margin-top:8px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr 60px; gap:8px; margin-bottom:8px; align-items:center; }
.saved-configs{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.config-chip{ background:#fafafa; border-radius:10px; padding:8px; display:flex; justify-content:space-between; align-items:center; border:1px solid #f1f1f1; }
.tabs-nav{ display:flex; gap:8px; margin-bottom:10px; }
.tab-btn{ background: rgba(0,0,0,0.06); color:#6c5ce7; border:none; padding:6px 10px; border-radius:8px; font-weight:700; }
.tab-btn.active{ background: rgba(255,255,255,0.22); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.response-area{ display:block; }
.response-header{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.status-badge{ padding:6px 12px; border-radius:999px; font-weight:700; }
.status-success{ background: rgba(85,239,196,0.12); color:#00b894; }
.status-error{ background: rgba(255,118,117,0.12); color:#d63031; }
.empty-state{ color:#8a8f94; padding:12px; border-radius:8px; border:1px dashed #eee; text-align:center; }
#html-preview-frame{ width:100%; height:540px; border-radius:10px; border:1px solid #eee; }
pre{ background:#2d3436; color:#fab1a0; padding:18px; border-radius:10px; font-family:'JetBrains Mono', monospace; overflow:auto; white-space:pre-wrap; word-break:break-all; }

/* ===== Receiver-test styles (these should prevail) ===== */
/* Reset trimmed and then receiver's original styles follow */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma, Geneva, Verdana, sans-serif;background:#dfe6e9;color:#2d3436;overflow:hidden;height:100vh}
.layout{display:flex;height:100vh;gap:20px;padding:20px}
.sidebar{width:350px;display:flex;flex-direction:column;gap:20px}
.configs-column{width:350px;display:flex;flex-direction:column;gap:20px}
.main-content{flex:1;display:flex;flex-direction:column;background:white;border-radius:20px;box-shadow:0 15px 35px rgba(0,0,0,0.1);overflow:hidden;min-height:0}
.card{background:white;padding:20px;border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,0.08)}
.header-card{background:linear-gradient(135deg,#6c5ce7 0%,#a29bfe 100%);color:white}
.header-card h1{font-size:1.3rem;margin-bottom:8px}
.header-card small{opacity:.9;display:flex;align-items:center;gap:8px}
.status-badge{background:rgba(255,255,255,.2);backdrop-filter:blur(10px);padding:8px 15px;border-radius:20px;font-size:.7rem;font-weight:bold;margin-top:10px;display:inline-block}
.info-card h4{color:#636e72;text-transform:uppercase;font-size:.7rem;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #f1f2f6}
.info-card p{margin:8px 0;line-height:1.6}
.info-card strong{color:#2d3436;display:inline-block;min-width:70px}
.logo-box{text-align:center;padding:10px}.logo-box img{max-width:100%;max-height:120px;border-radius:10px;border:2px solid #eee}

/* Identification values: make them clearly visible (black) and reduce token size */
.info-card span:not(.module-label){ color: #0b0b0b; }
#latest-token{ font-size: 0.8em; }
#latest-method{ color: #0b0b0b; }
.live-indicator{display:inline-block;width:10px;height:10px;background:#55efc4;border-radius:50%;animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* Responsive: en pantallas pequeñas apilar columnas */
@media (max-width:1000px){
	.layout{flex-direction:column;height:auto}
	.sidebar,.configs-column{width:100%}
	.main-content{min-height:0}
	body{height:auto}
}

/* Estilos para el cargador de JSON en la columna de configuraciones */
.configs-column .json-loader textarea{ width:100%; min-height:160px; padding:10px 12px; border-radius:10px; border:1px solid #ececec; background:#fbfbfc; color:#2d3436; resize:vertical; }
.configs-column .json-loader .btn-load{ border-radius:10px; background:transparent; color:#6c5ce7; border:1px solid rgba(108,92,231,0.12); }
.configs-column .json-loader .btn{ padding:8px 12px; }

/* Permitir scroll interno en la columna para acceder a controles cuando la página no hace scroll global */
.configs-column, .sidebar{ overflow:auto; max-height: calc(100vh - 40px); padding-right:6px }
.json-header{padding:20px 25px;border-bottom:2px solid #f1f2f6;display:flex;justify-content:space-between;align-items:center}
.json-header h2{font-size:1.1rem;color:#2d3436}
.copy-btn{background:#6c5ce7;color:white;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:.85rem;display:flex;align-items:center;gap:6px;transition:all .2s}
.copy-btn:hover{background:#5849c4;transform:translateY(-2px)}
.json-container{flex:1;overflow:auto;padding:0 18px 18px}
.json-container pre{min-height:0}
pre{background:#2d3436;color:#fab1a0;padding:25px;margin:0;font-size:13px;line-height:1.6;/* removed min-height:100% to avoid forcing height */overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.no-data{text-align:center;padding:80px 20px;color:#b2bec3}
.no-data h2{margin-bottom:15px}
.tab-btn{background:rgba(255,255,255,.12);color:#fff;border:none;padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:600;transition:all .12s}
.tab-btn:hover{transform:translateY(-2px)}
.tab-btn.active{background:rgba(255,255,255,.22);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.tab-buttons{padding-left:2px}

tab-buttons layout
.tab-buttons{ display:flex; gap:8px; }
#recibidos-content{ display:none; }
#recibidos-list{display:flex;flex-direction:column;gap:8px;overflow:auto;flex:1 1 auto;padding-right:6px}
.modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);z-index:9999}
.modal-content{background:#fff;color:#222;padding:16px;width:80%;max-width:900px;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:80vh;overflow:auto}
.modal-content pre{background:#f7f7fb;color:#222;padding:12px;border-radius:8px}

/* Ensure tab content separation (receiver style) */
.tab-content{display:none; min-height:0}
.tab-content.active{display:flex; flex-direction:column; min-height:0}

/* Override para permitir que #recibidos-content sea visible cuando tenga la clase active
	(evita que la regla ID anterior #recibidos-content { display:none } lo oculte) */
#recibidos-content.tab-content.active { display: flex; flex-direction: column; }

/* Small helpers for post-generator within receiver visual language */
.config-column{display:flex;flex-direction:column;gap:1.5rem}
.fields-container{margin-top:1rem}
.field-row{display:grid;grid-template-columns:1fr 1fr 50px;gap:1rem;margin-bottom:1rem}
.config-chip{background:#ffffff;border:2px solid #f1f2f6;border-radius:12px;padding:.8rem;display:flex;justify-content:space-between;align-items:center}

/* Utility classes to replace inline styles */
.form-grid-vertical{ display: grid; grid-template-columns: 1fr; gap: 1rem; }
.method-group{ max-width: 160px; }
.actions-row{ display:flex; justify-content:flex-end; gap:1rem; margin-top:1.5rem; }
.save-controls .config-name-input{ flex:1; min-width:200px; }
.response-controls{ display:flex; align-items:center; gap:0.5rem; }
.btn-copy{ padding:2px 8px; font-size:0.75rem; border-radius:6px; }
.tabs-wrap{ flex-wrap:wrap; }
.response-pre{ font-size:11px; padding:10px; }
.subsection-title{ font-size:1rem; margin-top:1.25rem; }
.chip-delete{ padding:2px 8px; border-radius:6px; font-size:0.75rem; border:none; cursor:pointer; }
.module-label{ color:#6c5ce7; font-weight:700; }
.header-card-inner{ display:flex; flex-direction:column; gap:8px; }
.header-card-row{ display:flex; gap:10px; align-items:center; justify-content:space-between; }
.btn-toggle-listen{ padding:6px 10px; border-radius:8px; border:none; background:#ff7675; color:#fff; cursor:pointer; font-size:0.85rem; }
#recibidos-content{ padding:20px; overflow:auto; }
#recibidos-list .btn{ padding:6px 10px; border-radius:6px; border:none; background:#6c5ce7; color:#fff; cursor:pointer; }

/* Utilities */
.hidden{ display:none !important; }
.muted-note{ color:#636e72; font-size:0.9rem; margin-top:10px; }
.controls-row{ display:flex; gap:8px; align-items:center; }
.log-item{ padding:10px; border-radius:8px; background:#fafafa; border:1px solid #eee; display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.log-title{ font-weight:700; color:#2d3436; }
.log-meta{ font-size:0.85rem; color:#636e72; }
.btn-small{ padding:6px 10px; border-radius:6px; border:none; cursor:pointer; }
.btn-refresh{ background:#0984e3; color:#fff; }
.btn-clear{ background:#d63031; color:#fff; }
.status-latest{ display:inline-block; margin-top:5px; }
.modal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.mb-0{ margin-bottom:0 !important; }
.m-0{ margin:0 !important; }
.controls-space-between{ justify-content:space-between; }

/* End shared-style.css */

/* Compatibility aliases: alternate class names some pages may use */
.app-layout{ display:flex; height:100vh; gap:20px; padding:20px }
.app-sidebar{ width:350px; display:flex; flex-direction:column; gap:20px }
.app-main{ flex:1; display:flex; flex-direction:column; background:white; border-radius:20px; box-shadow:0 15px 35px rgba(0,0,0,0.1); overflow:hidden }

/* Toggle classes for listen button and live indicator */
.btn-toggle-listen.listening{ background:#ff7675; color:#fff }
.btn-toggle-listen.paused{ background:#55efc4; color:#2d3436 }
.live-indicator.listening{ background:#55efc4 }
.live-indicator.paused{ background:#ff7675 }