/* ===== ModelIA.cl · sistema de diseño compartido =====
   Identidad: Deep Navy #0f172a · Electric Blue #0284c7 · Cyan IA #38bdf8 · Clean Light #f8fafc
   Incluye: barra superior unificada, componentes (chip, botón, tarjeta, hero), tema de fondo
   seleccionable, adaptación móvil y la guía IAna. */
:root{
  --m-navy:#0f172a; --m-blue:#0284c7; --m-blue-d:#0369a1; --m-cyan:#38bdf8; --m-light:#f8fafc;
  --m-ink:#0f172a; --m-muted:#475569; --m-line:#dbe6f1; --m-soft:#e0f2fe;
  --m-font:"Inter","Noto Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --m-radius:12px; --m-nav-h:56px;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--m-font);-webkit-tap-highlight-color:transparent}
:where(p,h1,h2,h3,h4,h5,h6,li,label,button,input,textarea,select,td,th,.stMarkdown){font-family:var(--m-font)}
img,video{max-width:100%;height:auto}
pre,code{overflow-wrap:anywhere}
a{text-underline-offset:.15em}
:focus-visible{outline:3px solid var(--m-cyan);outline-offset:2px;border-radius:6px}

/* ---- botones y campos con la misma forma en todas las apps ---- */
button,[role="button"],input[type="submit"],input[type="button"],select{border-radius:var(--m-radius)}
.stButton>button,[data-testid^="stBaseButton"]{border-radius:var(--m-radius)!important;font-weight:600}
button[kind="primary"],[data-testid="stBaseButton-primary"]{background:var(--m-blue)!important;border-color:var(--m-blue)!important;color:#fff!important}
button[kind="primary"]:hover,[data-testid="stBaseButton-primary"]:hover{background:var(--m-blue-d)!important;border-color:var(--m-blue-d)!important}

/* ===== barra superior unificada ===== */
html.m-ns{padding-top:var(--m-nav-h)}
html.m-st .stApp{top:var(--m-nav-h)!important;bottom:0!important;height:auto!important}
[data-m-top]{top:var(--m-nav-h)!important}
.m-nav{position:fixed;top:0;left:0;right:0;height:var(--m-nav-h);z-index:2147482900;display:flex;align-items:center;gap:14px;
  padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));
  background:rgba(248,250,252,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  color:var(--m-navy);font-family:var(--m-font);font-size:15px;line-height:1.2;
  border-bottom:3px solid transparent;border-image:linear-gradient(90deg,#0f172a,#0284c7 55%,#38bdf8) 1;box-shadow:0 2px 10px rgba(15,23,42,.08)}
.m-nav *{box-sizing:border-box}
.m-logo{all:unset;cursor:pointer;font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--m-navy);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.m-logo b{color:var(--m-blue);font-weight:800}
.m-logo:focus-visible{outline:3px solid var(--m-cyan);outline-offset:3px;border-radius:6px}
.m-logo i{width:9px;height:9px;border-radius:50%;background:var(--m-cyan);box-shadow:0 0 0 3px rgba(56,189,248,.28);display:inline-block}
.m-cur{font-size:13px;font-weight:700;color:var(--m-blue-d);background:#e0f2fe;border-radius:999px;padding:5px 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.m-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.m-links a,.m-links button{all:unset;cursor:pointer;padding:9px 12px;border-radius:10px;font-weight:600;color:var(--m-navy);font-size:15px;display:inline-flex;align-items:center;gap:6px;min-height:40px;box-sizing:border-box}
.m-links a:hover,.m-links button:hover{background:#e0f2fe;color:var(--m-blue-d)}
.m-links a:focus-visible,.m-links button:focus-visible,.m-cta:focus-visible,.m-burger:focus-visible{outline:3px solid var(--m-cyan);outline-offset:2px}
.m-cta{all:unset;cursor:pointer;box-sizing:border-box;padding:9px 16px;border-radius:10px;background:var(--m-blue);color:#fff;font-weight:700;font-size:14px;min-height:40px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.m-cta:hover{background:var(--m-blue-d)}
.m-burger{all:unset;cursor:pointer;box-sizing:border-box;display:none;width:44px;height:44px;border-radius:10px;align-items:center;justify-content:center;margin-left:auto;font-size:22px;color:var(--m-navy)}
.m-burger:hover{background:#e0f2fe}
.m-menu{position:fixed;top:var(--m-nav-h);right:12px;width:min(560px,calc(100vw - 24px));max-height:calc(100vh - var(--m-nav-h) - 16px);overflow:auto;
  background:#fff;color:var(--m-navy);border:1px solid var(--m-line);border-radius:16px;padding:12px;box-shadow:0 18px 44px rgba(15,23,42,.22);z-index:2147482950;animation:m-pop .18s ease-out}
.m-menu[hidden]{display:none}
.m-menu h3{all:unset;display:block;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--m-muted);margin:4px 8px 8px}
.m-menu .m-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.m-menu a{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;font-size:14px;font-weight:600;color:var(--m-navy);min-height:44px}
.m-menu a:hover{background:#e0f2fe}
.m-menu a[aria-current="page"]{background:#e0f2fe;color:var(--m-blue-d)}
.m-menu a:focus-visible{outline:3px solid var(--m-cyan);outline-offset:-2px}
.m-menu a span.e{width:30px;height:30px;border-radius:9px;background:#f1f7fd;display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex:none}
@media (max-width:860px){
  .m-links,.m-cta{display:none}
  .m-burger{display:inline-flex;margin-left:0}
  .m-gear{margin-left:auto}
  .m-menu{left:12px;right:12px;width:auto}
  .m-menu .m-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){ .m-menu .m-grid{grid-template-columns:1fr} .m-logo{font-size:18px} }

/* ===== ajustes y cuenta (tuerca) ===== */
.m-gear{all:unset;cursor:pointer;box-sizing:border-box;width:44px;height:44px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:21px;color:var(--m-navy);flex:none}
.m-gear:hover,.m-gear[aria-expanded="true"]{background:#e0f2fe}
.m-gear:focus-visible{outline:3px solid var(--m-cyan);outline-offset:2px}
.m-set{position:fixed;top:var(--m-nav-h);right:12px;width:min(330px,calc(100vw - 24px));max-height:calc(100vh - var(--m-nav-h) - 16px);overflow:auto;background:#fff;color:var(--m-navy);
  border:1px solid var(--m-line);border-radius:16px;padding:8px;box-shadow:0 18px 44px rgba(15,23,42,.22);z-index:2147482950;animation:m-pop .18s ease-out;font-family:var(--m-font)}
.m-set[hidden]{display:none}
.m-set *{box-sizing:border-box}
.m-set .who{display:flex;gap:12px;align-items:center;padding:10px;border-bottom:1px solid var(--m-line);margin-bottom:6px}
.m-set .who .av{width:42px;height:42px;border-radius:50%;background:var(--m-blue);color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;flex:none}
.m-set .who b{display:block;font-size:14px;word-break:break-all;line-height:1.25}
.m-set .who span{font-size:12px;color:var(--m-muted);font-weight:600}
.m-set a,.m-set button.it{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;font-size:14px;font-weight:600;color:var(--m-navy);min-height:44px;width:100%;font-family:var(--m-font)}
.m-set a:hover,.m-set button.it:hover{background:#e0f2fe}
.m-set a:focus-visible,.m-set button.it:focus-visible{outline:3px solid var(--m-cyan);outline-offset:-2px}
.m-set a span,.m-set button.it span{width:30px;height:30px;border-radius:9px;background:#f1f7fd;display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.m-set hr{border:0;border-top:1px solid var(--m-line);margin:6px 4px}
.m-set a.danger{color:#b91c1c}
.m-set a.danger:hover{background:#fee2e2}
html.modelia-dark .m-gear{color:#f8fafc}
html.modelia-dark .m-gear:hover,html.modelia-dark .m-gear[aria-expanded="true"]{background:rgba(56,189,248,.16)}

/* ===== componentes reutilizables (portal y futuras páginas) ===== */
.m-chip{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--m-blue-d);background:#e0f2fe;border-radius:6px;padding:5px 10px}
.m-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:10px;background:var(--m-blue);color:#fff!important;font-weight:700;text-decoration:none!important;min-height:44px}
.m-btn:hover{background:var(--m-blue-d)}

/* ---- adaptación móvil ---- */
@media (max-width:700px){
  table{display:block;max-width:100%;overflow-x:auto}
  .block-container,[data-testid="stMainBlockContainer"]{padding:1rem .8rem 5.5rem!important;max-width:100%!important}
  [data-testid="stHorizontalBlock"]{flex-wrap:wrap!important;gap:.6rem!important}
  [data-testid="stHorizontalBlock"]>[data-testid="stColumn"],[data-testid="stHorizontalBlock"]>[data-testid="column"]{min-width:min(100%,260px)!important;flex:1 1 260px!important}
  h1{font-size:1.7rem!important;line-height:1.2!important} h2{font-size:1.4rem!important}
  input,select,textarea{max-width:100%}
  label.field,.field{min-width:0}
  .field input,.field select,.field textarea{min-width:0;width:100%}
}
@media (pointer:coarse){
  button,[role="button"],input[type="submit"],input[type="button"],select,summary{min-height:44px}
  input[type="text"],input[type="password"],input[type="number"],input[type="email"],textarea{font-size:16px!important}
}

/* ---- tema de fondo elegido por la persona ---- */
html.modelia-themed,html.modelia-themed body,
html.modelia-themed .stApp,html.modelia-themed [data-testid="stAppViewContainer"],
html.modelia-themed [data-testid="stMain"],html.modelia-themed [data-testid="stHeader"],
html.modelia-themed [data-testid="stBottom"],html.modelia-themed [data-testid="stBottomBlockContainer"],
html.modelia-themed section.main,html.modelia-themed [data-m-bg]{background:var(--m-bg)!important}
html.modelia-themed body{color:var(--m-fg)}
html.modelia-themed [data-testid="stSidebar"],html.modelia-themed [data-testid="stSidebar"]>div{background:var(--m-card)!important}
html.modelia-dark .stApp :is(h1,h2,h3,h4,h5,h6,p,li,label,span,small,summary,caption,.stMarkdown):not([data-testid="stAlert"] *):not(button *):not([data-baseweb] *):not([data-testid="stExpander"] details *):not(code *){color:var(--m-fg)!important}
html.modelia-dark [data-testid="stHeader"] *{color:var(--m-fg)!important}
html.modelia-dark .m-nav{background:rgba(15,23,42,.94);color:#f8fafc}
html.modelia-dark .m-logo,html.modelia-dark .m-links a,html.modelia-dark .m-links button,html.modelia-dark .m-burger{color:#f8fafc}
html.modelia-dark .m-logo b{color:var(--m-cyan)}
html.modelia-dark .m-links a:hover,html.modelia-dark .m-links button:hover,html.modelia-dark .m-burger:hover{background:rgba(56,189,248,.16);color:#fff}
html.modelia-dark .m-cur{background:rgba(56,189,248,.18);color:#bae6fd}
[data-m-ink="dark"]{color:#0f172a!important}
[data-m-ink="light"]{color:#f8fafc!important}

/* ===== Modi: guía + selector de color ===== */
.m-root{position:fixed;left:12px;bottom:12px;z-index:2147483000;font-family:var(--m-font);line-height:1.3;
  padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left)}
.m-root *{box-sizing:border-box}
.m-fab{all:unset;display:block;cursor:grab;width:68px;height:76px;position:relative;touch-action:none;user-select:none;-webkit-user-select:none;
  filter:drop-shadow(0 8px 12px rgba(15,23,42,.28));-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.m-root.m-drag .m-fab{cursor:grabbing}
.m-root.m-drag .m-modi{animation:none}
.m-fab:focus-visible{outline:3px solid var(--m-cyan);outline-offset:3px;border-radius:50%}
.m-fab svg{width:100%;height:100%;overflow:visible;display:block}
.m-fab:hover svg,.m-fab[aria-expanded="true"] svg{transform:scale(1.07);transition:transform .2s}
.m-modi{animation:m-float 4s ease-in-out infinite}
.m-ant{transform-box:fill-box;transform-origin:50% 100%;animation:m-ant 2.2s ease-in-out infinite}
.m-ball{animation:m-glow 1.8s ease-in-out infinite}
.m-arm{transform-box:fill-box;transform-origin:0% 100%;animation:m-wave 2.6s ease-in-out infinite}
.m-shadow{transform-box:fill-box;transform-origin:center;animation:m-shadow 4s ease-in-out infinite}
.m-eye{transform-box:fill-box;transform-origin:center;animation:m-blink 5s infinite}
.m-ear{animation:m-glow 1.8s ease-in-out infinite}
.m-halo{transform-box:fill-box;transform-origin:center;animation:m-breathe 4s ease-in-out infinite}
.m-spark{animation:m-glow 2.6s ease-in-out infinite}
.m-happy .m-modi{animation:m-hop .6s ease-in-out 2}
@keyframes m-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes m-ant{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes m-wave{0%,55%,100%{transform:rotate(0)}65%{transform:rotate(-28deg)}75%{transform:rotate(8deg)}85%{transform:rotate(-24deg)}}
@keyframes m-shadow{0%,100%{transform:scaleX(1);opacity:.18}50%{transform:scaleX(.8);opacity:.1}}
@keyframes m-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes m-glow{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes m-breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.75}}
@keyframes m-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}70%{transform:translateY(-4px)}}
@keyframes m-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

.m-bubble{position:absolute;left:66px;bottom:58px;width:max-content;max-width:min(240px,68vw);padding:10px 13px;border-radius:14px 14px 14px 4px;
  background:#fff;color:#0f172a;font-size:14px;font-weight:600;border:1px solid var(--m-line);box-shadow:0 8px 22px rgba(15,23,42,.2);
  animation:m-pop .25s ease-out;pointer-events:none}
.m-bubble b{color:var(--m-blue)}
.m-bubble[hidden]{display:none}

.m-panel{position:absolute;left:0;bottom:92px;width:min(310px,calc(100vw - 24px));padding:16px;border-radius:18px;
  background:#fff;color:#0f172a;border:1px solid var(--m-line);box-shadow:0 16px 44px rgba(15,23,42,.3);animation:m-pop .2s ease-out;font-size:14px}
.m-panel[hidden]{display:none}
.m-root.m-top .m-panel{bottom:auto;top:88px}
.m-root.m-right .m-panel{left:auto;right:0}
.m-root.m-top .m-bubble{bottom:auto;top:18px;border-radius:4px 14px 14px 14px}
.m-root.m-right .m-bubble{left:auto;right:62px;border-radius:14px 14px 4px 14px}
.m-root.m-top.m-right .m-bubble{border-radius:14px 4px 14px 14px}
.m-root.m-moved{padding:0}
.m-panel h2{all:unset;display:block;font-size:16px;font-weight:800;color:var(--m-navy);margin:0 0 2px}
.m-panel p{all:unset;display:block;font-size:13px;color:var(--m-muted);margin:0 0 12px}
.m-sw{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}
.m-sw button{all:unset;box-sizing:border-box;cursor:pointer;height:42px;border-radius:10px;border:2px solid rgba(15,23,42,.14);position:relative;touch-action:manipulation}
.m-sw button[aria-pressed="true"]{border-color:var(--m-navy);box-shadow:0 0 0 3px var(--m-cyan)}
.m-sw button[data-c=""]{background:conic-gradient(#fff 0 25%,#e2e8f0 0 50%,#fff 0 75%,#e2e8f0 0);background-size:14px 14px}
.m-sw button:focus-visible{outline:3px solid var(--m-cyan);outline-offset:2px}
.m-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.m-row label{all:unset;font-size:13px;font-weight:700;color:var(--m-navy);flex:1}
.m-row input[type=color]{width:56px;height:38px;border:2px solid rgba(15,23,42,.14);border-radius:10px;padding:2px;background:#fff;cursor:pointer}
.m-links2{display:flex;gap:8px;flex-wrap:wrap}
.m-links2 a{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 12px;border-radius:10px;font-size:13px;font-weight:700;background:#e0f2fe;color:var(--m-blue-d);min-height:40px;display:inline-flex;align-items:center}
.m-links2 a:hover{background:#bae6fd}
.m-links2 a:focus-visible{outline:3px solid var(--m-cyan);outline-offset:2px}

/* ---- chat con el agente (administradores) ---- */
.m-chat{position:absolute;left:0;bottom:92px;width:min(420px,calc(100vw - 24px));height:min(540px,calc(100vh - 150px));display:flex;flex-direction:column;background:#fff;color:#0f172a;
  border:1px solid var(--m-line);border-radius:18px;box-shadow:0 18px 50px rgba(15,23,42,.32);overflow:hidden;animation:m-pop .2s ease-out;font-size:14px}
.m-chat[hidden]{display:none}
.m-root.m-top .m-chat{bottom:auto;top:88px}
.m-root.m-right .m-chat{left:auto;right:0}
.m-chat *{box-sizing:border-box}
.mc-h{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:linear-gradient(90deg,#0f172a,#0284c7);color:#fff;flex:none}
.mc-h b{display:block;font-size:15px}.mc-h span{font-size:12px;opacity:.88}
.mc-x{all:unset;cursor:pointer;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:16px}
.mc-x:hover{background:rgba(255,255,255,.18)}.mc-x:focus-visible{outline:3px solid var(--m-cyan)}
.mc-m{flex:1;min-height:0;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px;background:#f8fafc}
.mc-b1{max-width:90%;padding:9px 12px;border-radius:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.mc-yo{align-self:flex-end;background:#0284c7;color:#fff;border-bottom-right-radius:4px}
.mc-bot{align-self:flex-start;background:#fff;border:1px solid #dbe6f1;border-bottom-left-radius:4px}
.mc-err{align-self:stretch;max-width:100%;background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.mc-typing{display:flex;gap:5px;padding:12px 14px}
.mc-typing i{width:8px;height:8px;border-radius:50%;background:#94a3b8;animation:mc-dot 1.2s infinite}
.mc-typing i:nth-child(2){animation-delay:.2s}.mc-typing i:nth-child(3){animation-delay:.4s}
@keyframes mc-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.mc-p{align-self:stretch;background:#fff;border:2px solid #38bdf8;border-radius:14px;padding:10px;font-size:13px}
.mc-pt{font-weight:800;color:#0369a1;margin-bottom:4px}
.mc-pf{display:block;font:12px/1.3 ui-monospace,Consolas,monospace;background:#f1f5f9;border-radius:6px;padding:4px 7px;margin-bottom:6px;word-break:break-all}
.mc-p pre{margin:4px 0;padding:6px 8px;border-radius:8px;white-space:pre-wrap;word-break:break-word;font:12px/1.4 ui-monospace,Consolas,monospace;max-height:150px;overflow:auto}
.mc-del{background:#fee2e2;color:#7f1d1d}.mc-add{background:#dcfce7;color:#14532d}
.mc-r{display:flex;align-items:center;gap:6px;margin:8px 0 2px;font-weight:600}.mc-r input{width:18px;height:18px;accent-color:#0284c7}
.mc-bt{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mc-bt button{all:unset;cursor:pointer;padding:9px 12px;border-radius:10px;font-weight:800;font-size:13px;min-height:40px;display:inline-flex;align-items:center}
.mc-ok{background:#16a34a;color:#fff}.mc-no{background:#e2e8f0;color:#334155}.mc-un{background:#fef3c7;color:#92400e}
.mc-bt button:disabled{opacity:.55;cursor:default}.mc-bt button:focus-visible{outline:3px solid var(--m-cyan);outline-offset:2px}
.mc-st{margin-top:8px;font-weight:600;font-size:12.5px;color:#475569}.mc-st:empty{display:none}
.mc-good{color:#15803d}.mc-bad{color:#b91c1c}
.mc-f{display:flex;gap:8px;padding:10px;border-top:1px solid #dbe6f1;background:#fff;flex:none}
.mc-f textarea{flex:1;resize:none;border:2px solid #cbd5e1;border-radius:10px;padding:8px 10px;font:inherit;font-size:16px;color:#0f172a;background:#fff;min-width:0}
.mc-f textarea:focus{outline:3px solid var(--m-cyan);border-color:var(--m-blue)}
.mc-s{all:unset;cursor:pointer;padding:0 16px;border-radius:10px;background:var(--m-blue);color:#fff;font-weight:800;display:flex;align-items:center;min-height:44px}
.mc-s:disabled{opacity:.6}.mc-s:focus-visible{outline:3px solid var(--m-cyan);outline-offset:2px}
.m-links2 a.m-agentbtn{background:#0f172a;color:#fff}.m-links2 a.m-agentbtn:hover{background:#1e293b}

/* Modi grande en el portal: <div data-modi></div> */
[data-modi]{display:inline-block;width:100%;height:100%}
[data-modi] svg{width:100%;height:100%;overflow:visible}

@media (prefers-reduced-motion:reduce){
  .m-modi,.m-ant,.m-ball,.m-arm,.m-shadow,.m-eye,.m-happy .m-modi{animation:none!important}
  .m-bubble,.m-panel,.m-menu,.m-set,.m-chat{animation:none}
}
@media print{.m-root,.m-nav{display:none!important} html.m-ns{padding-top:0}}