/* Estilo alineado con la plataforma (ver `src/index.css`) */
:root{
  --accent: var(--_10a37f-background, #10A37F);
  --danger: #ef4444;
  --ok: #10b981;
}
*{box-sizing:border-box}
html,body{height:100%}
/* Scrollbars minimalistas */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.22) transparent;
}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.26)}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--white-color, #fff);
  color: var(--_232222-color, #232222);
}
a{color:inherit}
header{
  padding:14px 16px;
  border-bottom:1px solid var(--gray-100, #ededed);
  background: var(--white-color, #fff);
  position:sticky;top:0;backdrop-filter: blur(10px);
}
.embedded header{display:none !important}
.embedded body{background: var(--white-color, #fff)}
.embedded .wrap{padding-top:18px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:.04em}
.pill{
  font-size:12px;color:var(--muted);
  border:1px solid var(--gray-100, #ededed);border-radius:999px;
  padding:6px 10px;
  background: var(--f5-background, #f5f5f5);
}
.wrap{max-width:980px;margin:0 auto;padding:18px 16px 80px}
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.card{
  grid-column: span 12;
  border:1px solid var(--gray-100, #ededed);
  background: var(--white-color, #fff);
  border-radius:16px;
  padding:14px;
}
.card h2{margin:0 0 10px;font-size:16px}
.muted{color: var(--_67-color, #676767)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:12px;
  border:1px solid var(--gray-100, #ededed);
  background: var(--f5-background, #f5f5f5);
  text-decoration:none;font-weight:700;
}
.btn.primary{background: var(--accent); border-color: transparent; color:white}
.btn.danger{background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.25)}
.btn:disabled{opacity:.55;cursor:not-allowed}
input,textarea,select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--gray-100, #ededed);
  background: var(--white-color, #fff);
  color: inherit;
  outline:none;
}
label{display:block;font-size:12px;color: var(--_67-color, #676767);margin:10px 0 6px}
.two{display:grid;grid-template-columns: 1fr 1fr;gap:12px}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.status{
  margin-top:10px;
  font-size:12px;
  color: var(--_67-color, #676767);
  border:1px dashed var(--gray-100, #ededed);
  border-radius:12px;
  padding:10px 12px;
  background: var(--f5-background, #f5f5f5);
}
.ok{color: var(--ok)}
.bad{color: var(--danger)}
.iframeBox{
  width:100%;
  height: calc(100vh - 120px);
  border:1px solid var(--gray-100, #ededed);
  border-radius: 14px;
  overflow:hidden;
  background: var(--f5-background, #f5f5f5);
}
.iframeBox iframe{width:100%;height:100%;border:0;background:white}
.split{
  display:grid;
  grid-template-rows: 1fr auto;
  gap:10px;
}
.mini{
  height: 240px;
}
code{
  color: var(--_264f88-color, #264f88);
  background: var(--e0f2fe-background, #e0f2fe);
  border:1px solid var(--gray-100, #ededed);
  padding:2px 6px;border-radius:8px;
}

/* Inputs con icono en cuadrado corporativo */
.field{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--gray-100, #ededed);
  border-radius:12px;
  padding:8px 10px;
  background: var(--white-color, #fff);
}
.fieldTextArea{
  align-items: stretch;
}
.fieldTextArea .fieldIcon{
  margin-top: 2px;
}
.fieldTextArea textarea{
  border:0 !important;
  outline:none;
  padding:8px 0 !important;
  background: transparent !important;
  resize: vertical;
  font: inherit;
}
.fieldIcon{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:10px;
  background: color-mix(in srgb, var(--accent) 16%, #fff 84%);
  border:1px solid color-mix(in srgb, var(--accent) 22%, var(--gray-100, #ededed) 78%);
  color: var(--accent);
  flex: 0 0 auto;
}
.fieldInput{
  border:0 !important;
  outline:none;
  padding:8px 0 !important;
  background: transparent !important;
}

/* Header logo (iconUrl) con fallback λ rainbow */
.headerLogo{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--gray-100, #ededed);
  background: var(--white-color, #fff);
  overflow: hidden;
  position: relative;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}
.headerLogo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.lambdaRainbow{
  width: 100%;
  height: 100%;
  position: relative;
}
.lambdaRainbow::before{
  content:"";
  position:absolute;
  inset:-50%;
  background: conic-gradient(from 180deg, #ff0080, #ff8c00, #f9f871, #00f5d4, #00bbf9, #9b5de5, #ff0080);
  animation: spin 2.4s linear infinite;
  filter: blur(2px) saturate(1.2);
}
.lambdaRainbow::after{
  content:"";
  position:absolute;
  inset: 2px;
  border-radius: 8px;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.95), rgba(245,245,245,.9));
}
.lambdaRainbow > span{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight: 900;
  font-size: 14px;
  color: var(--_232222-color, #232222);
  z-index: 1;
}
@keyframes spin{to{transform: rotate(360deg)}}

/* Switch moderno */
.switchRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--gray-100, #ededed);
  background: var(--f5-background, #f5f5f5);
  border-radius: 16px;
  padding: 12px;
}
.switchText{display:flex;flex-direction:column;gap:2px}
.switchTitle{font-weight: 900}
.switchDesc{font-size:12px;color: var(--_67-color, #676767)}
.switch{
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--gray-100, #ededed);
  background: var(--white-color, #fff);
  cursor: pointer;
  flex: 0 0 auto;
}
.switchKnob{
  position:absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--gray-100, #ededed);
  transition: transform .16s ease, background .16s ease;
}
.switch.on{
  background: color-mix(in srgb, var(--accent) 18%, #fff 82%);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--gray-100, #ededed) 78%);
}
.switch.on .switchKnob{
  transform: translateX(18px);
  background: var(--accent);
}

/* Wrapper (secciones colapsables) */
.wrapSection{
  border:1px solid var(--gray-100, #ededed);
  border-radius: 18px;
  overflow:hidden;
  background: var(--white-color, #fff);
}
.wrapHeader{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 12px;
  background: color-mix(in srgb, var(--white-color, #fff) 84%, var(--f5-background, #f5f5f5) 16%);
  border-bottom:1px solid var(--gray-100, #ededed);
  cursor:pointer;
  user-select:none;
}
.wrapHeadIcon{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid var(--gray-100, #ededed);
  background: var(--white-color, #fff);
  display:grid;
  place-items:center;
  font-weight: 900;
  color: var(--accent);
  flex: 0 0 auto;
}
.wrapHeadText{min-width:0}
.wrapHeadTitle{font-weight: 900; font-size: 14px; line-height: 1.2}
.wrapHeadDesc{font-size: 12px; color: var(--_67-color, #676767); line-height: 1.25; margin-top: 2px}
.wrapHeadRight{margin-left:auto; display:flex; align-items:center; gap:10px}
.chev{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--gray-100, #ededed);
  background: var(--white-color, #fff);
  display:grid;
  place-items:center;
  font-weight: 900;
  color: var(--_67-color, #676767);
  transform: rotate(0deg);
  transition: transform .16s ease;
}
.wrapSection[data-open="false"] .wrapBody{display:none}
.wrapSection[data-open="false"] .chev{transform: rotate(-90deg)}
.wrapBody{padding: 14px}

/* Chat-like composer */
.composer{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}
.sendBtn{
  width: 52px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--gray-100,#ededed) 65%);
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 28%, #fff 72%), var(--accent));
  color: white;
  font-weight: 900;
  cursor:pointer;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 30%, transparent 70%);
}
.seg{
  display:flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--gray-100,#ededed);
  background: var(--f5-background,#f5f5f5);
  border-radius: 14px;
  padding: 4px;
}
.seg button{
  border:0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 900;
  cursor:pointer;
  color: var(--_67-color,#676767);
}
.seg button.active{
  background: var(--white-color,#fff);
  border:1px solid var(--gray-100,#ededed);
  color: var(--_232222-color,#232222);
}

/* Wrapper (secciones colapsables) */
.wrapSection{
  border:1px solid var(--gray-100, #ededed);
  border-radius: 18px;
  overflow:hidden;
  background: var(--white-color, #fff);
}
.wrapHeader{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 12px;
  background: color-mix(in srgb, var(--white-color, #fff) 84%, var(--f5-background, #f5f5f5) 16%);
  border-bottom:1px solid var(--gray-100, #ededed);
  cursor:pointer;
  user-select:none;
}
.wrapHeader:hover{filter: brightness(0.99)}
.wrapHeadIcon{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid var(--gray-100, #ededed);
  background: var(--white-color, #fff);
  display:grid;
  place-items:center;
  font-weight: 900;
  color: var(--accent);
  flex: 0 0 auto;
}
.wrapHeadText{min-width:0}
.wrapHeadTitle{font-weight: 900; font-size: 14px; line-height: 1.2}
.wrapHeadDesc{font-size: 12px; color: var(--_67-color, #676767); line-height: 1.25; margin-top: 2px}
.wrapHeadRight{margin-left:auto; display:flex; align-items:center; gap:10px}
.chev{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--gray-100, #ededed);
  background: var(--white-color, #fff);
  display:grid;
  place-items:center;
  font-weight: 900;
  color: var(--_67-color, #676767);
  transform: rotate(0deg);
  transition: transform .16s ease;
}
.wrapSection[data-open="false"] .wrapBody{display:none}
.wrapSection[data-open="false"] .chev{transform: rotate(-90deg)}
.wrapBody{padding: 14px}

/* Chat-like composer */
.composer{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}
.sendBtn{
  width: 52px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--gray-100,#ededed) 65%);
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 28%, #fff 72%), var(--accent));
  color: white;
  font-weight: 900;
  cursor:pointer;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 30%, transparent 70%);
  transition: transform .12s ease, filter .12s ease;
}
.sendBtn:hover{filter: brightness(1.02)}
.sendBtn:active{transform: translateY(1px)}
.seg{
  display:flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--gray-100,#ededed);
  background: var(--f5-background,#f5f5f5);
  border-radius: 14px;
  padding: 4px;
}
.seg button{
  border:0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 900;
  cursor:pointer;
  color: var(--_67-color,#676767);
}
.seg button.active{
  background: var(--white-color,#fff);
  border:1px solid var(--gray-100,#ededed);
  color: var(--_232222-color,#232222);
}