[hidden] { display: none !important; }
:root{--verde:#1b5e3b;--verde2:#2e7d4f;--verde-claro:#e3f3e8;--rojo:#b3261e;--rojo-claro:#fbe4e2;--amar:#b7791f;--amar-claro:#fdf3d8;--azul-claro:#e6f0fb;
--gris:#5f6b66;--borde:#d9dfdc;--fondo:#f4f6f5;--carta:#fff;--texto:#16201b;--burbuja-yo:#d9f2e1;--burbuja-ella:#fff}
body.oscuro{--fondo:#121715;--carta:#1c2320;--texto:#e7eeea;--borde:#33403a;--gris:#a3b1aa;--burbuja-yo:#24493a;--burbuja-ella:#1f2724;--verde-claro:#1f3a2c;
--rojo-claro:#4a2422;--amar-claro:#463a1d;--azul-claro:#1d2d3d}
body.grande{font-size:19px}
*{box-sizing:border-box}
body{font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;margin:0;color:var(--texto);background:var(--fondo)}
button{font:inherit;padding:.45rem .9rem;border:1px solid var(--borde);border-radius:.6rem;background:var(--carta);color:var(--texto);cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
button.primario{background:var(--verde);border-color:var(--verde);color:#fff;font-weight:600}
button.peligro{background:var(--rojo);border-color:var(--rojo);color:#fff;font-weight:700}
button.chico{padding:.2rem .6rem;font-size:.9em}
button.link{border:none;background:none;color:var(--verde2);text-decoration:underline;padding:.1rem .2rem}
input[type=password],input[type=text],input[type=search],textarea,select{font:inherit;padding:.5rem .6rem;border:1px solid var(--borde);border-radius:.6rem;background:var(--carta);color:var(--texto);width:100%}
header#top{display:flex;gap:.6rem;align-items:center;padding:.5rem 1rem;background:var(--carta);border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:20}
.logo{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--verde);color:#fff;font-weight:700}
header h1{font-size:1.15rem;margin:0}
.espacio{flex:1}
.letrero{border-radius:2rem;padding:.25rem .8rem;font-size:.9rem;background:var(--verde-claro);border-color:transparent}
.letrero.rojo{background:var(--rojo);color:#fff}.letrero.amarillo{background:var(--amar-claro)}
.emergencia{background:var(--rojo);border-color:var(--rojo);color:#fff;font-weight:700}
.banda-kill{background:var(--rojo);color:#fff;text-align:center;padding:.5rem;font-weight:700}
.login{max-width:26rem;margin:3rem auto;padding:1.5rem;background:var(--carta);border-radius:1rem;border:1px solid var(--borde);display:grid;gap:.6rem}
label.inline{display:inline-flex;gap:.4rem;align-items:center}
.app{display:grid;grid-template-columns:15rem 1fr;min-height:calc(100vh - 3.2rem)}
.menu{display:flex;flex-direction:column;gap:.2rem;padding:.8rem;background:var(--carta);border-right:1px solid var(--borde)}
.menu button{text-align:left;border:none;display:flex;gap:.6rem;align-items:center;border-radius:.6rem}
.menu button.on{background:var(--verde-claro);font-weight:600}
.menu .solo-cel{display:none}
.count{background:#e8710a;color:#fff;border-radius:1rem;padding:0 .45rem;font-size:.75rem;margin-left:auto}
.count:empty{display:none}
main{padding:1rem 1.2rem 5rem;max-width:72rem;width:100%}
h2{font-size:1.25rem;margin:.2rem 0 .8rem}h3{font-size:1.05rem;margin:.6rem 0 .4rem}
.barra-chat,.fila{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:.6rem}
.barra-chat select{width:auto;flex:1;min-width:10rem}
.conversa{list-style:none;padding:.6rem;margin:0;min-height:40vh;max-height:62vh;overflow:auto;display:flex;flex-direction:column;gap:.6rem}
.burbuja{max-width:min(46rem,92%);padding:.6rem .85rem;border-radius:1rem;background:var(--burbuja-ella);border:1px solid var(--borde);white-space:pre-wrap;word-break:break-word}
.burbuja.yo{align-self:flex-end;background:var(--burbuja-yo);border-color:transparent;border-bottom-right-radius:.3rem}
.burbuja.ella{align-self:flex-start;border-bottom-left-radius:.3rem}
.burbuja.sistema{align-self:center;background:var(--azul-claro);font-size:.9rem}
.burbuja .hora{display:block;font-size:.72rem;color:var(--gris);margin-top:.2rem}
.burbuja .nota{color:var(--amar);font-size:.9rem}
.detalles{white-space:pre-wrap;font-size:.78rem;color:var(--gris);background:var(--fondo);border-radius:.5rem;padding:.4rem .6rem;margin-top:.3rem;font-family:ui-monospace,monospace}
.sugerencias{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0}
.sugerencias button{border-radius:2rem;font-size:.9rem;background:var(--verde-claro);border-color:transparent}
.caja-escribir{display:flex;gap:.5rem;align-items:flex-end}
.caja-escribir textarea{flex:1;resize:vertical}
.tarjeta{border:1px solid var(--borde);background:var(--carta);border-radius:.9rem;padding:.75rem .9rem;margin:.5rem 0;white-space:normal}
.tarjeta h4{margin:0 0 .3rem;font-size:1rem}
.tarjeta ol,.tarjeta ul{margin:.3rem 0 .4rem 1.2rem;padding:0}
.tarjeta .fila{margin:.4rem 0 0}
.pill{display:inline-block;border-radius:2rem;padding:.05rem .55rem;font-size:.8rem;background:var(--fondo);border:1px solid var(--borde)}
.pill.verde{background:var(--verde-claro);border-color:transparent}.pill.rojo{background:var(--rojo-claro);border-color:transparent}
.pill.amarillo{background:var(--amar-claro);border-color:transparent}
.cajita{border:2px solid var(--verde2);border-radius:.9rem;padding:.8rem;background:var(--verde-claro);margin:.5rem 0;display:grid;gap:.45rem}
.cajita .tit{font-weight:600}
.cajita .nota-seg{font-size:.85rem;color:var(--gris)}
.barra{height:.55rem;background:var(--fondo);border-radius:1rem;overflow:hidden;border:1px solid var(--borde)}
.barra>span{display:block;height:100%;background:var(--verde2)}
.barra.amarillo>span{background:var(--amar)}.barra.rojo>span{background:var(--rojo)}
.msg{min-height:1.2em;color:var(--gris);margin:.3rem 0}.msg.err{color:var(--rojo)}.msg.ok{color:var(--verde2)}
.hint{color:var(--gris);font-size:.9rem}
.aviso{border-radius:.7rem;padding:.6rem .8rem;margin:.5rem 0}
.aviso.azul{background:var(--azul-claro)}.aviso.naranja{background:var(--amar-claro)}.aviso.rojo{background:var(--rojo-claro)}
.grid-num{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.6rem;margin:.6rem 0}
.num{background:var(--carta);border:1px solid var(--borde);border-radius:.9rem;padding:.7rem}
.num b{display:block;font-size:1.4rem}
.cartas{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.6rem}
.grupo{margin:1rem 0}
.grupo-cab{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
table{border-collapse:collapse;width:100%;background:var(--carta)}td,th{border-bottom:1px solid var(--borde);padding:.45rem .5rem;text-align:left;font-size:.92rem}
.arbol td:first-child{white-space:nowrap}
.dos{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1rem}
.lado{background:var(--carta);border:1px solid var(--borde);border-radius:.9rem;padding:.8rem}
.tarea-item{cursor:pointer}.tarea-item.on{outline:2px solid var(--verde2)}
.historia{list-style:none;padding:0;margin:.3rem 0}.historia li{padding:.2rem 0}
.parar{font-size:1.6rem;padding:1.2rem 2.4rem;border-radius:1.2rem;background:var(--rojo);color:#fff;border:none;font-weight:800;width:100%;max-width:26rem}
.selector{display:flex;gap:.3rem;margin-bottom:.6rem}.selector button.on{background:var(--verde);color:#fff;border-color:var(--verde)}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .menu{position:fixed;bottom:0;left:0;right:0;flex-direction:row;justify-content:space-around;padding:.3rem calc(.3rem + env(safe-area-inset-right)) calc(.3rem + env(safe-area-inset-bottom)) .3rem;border-right:none;border-top:1px solid var(--borde);z-index:30}
  .menu button{flex-direction:column;gap:.1rem;font-size:.72rem;padding:.3rem .2rem;flex:1;align-items:center;text-align:center;position:relative}
  .menu .ico{font-size:1.25rem}
  .menu .solo-pc{display:none}.menu .solo-cel{display:flex}
  .menu .count{position:absolute;top:0;right:18%}
  main{padding:.7rem .7rem 6rem}
  .dos{grid-template-columns:1fr}
  .conversa{max-height:none;min-height:50vh}
  header h1{display:none}
  .caja-escribir{position:sticky;bottom:4.2rem;background:var(--fondo);padding:.3rem 0}
  button{min-height:2.6rem}
  .selector{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}.selector button{white-space:nowrap;flex:0 0 auto}
}