/* Asistente de Sistemas SERVIKAR — hoja de estilo única. */

:root{
  --papel:#f6f4f0;
  --tarjeta:#ffffff;
  --tinta:#1c1a17;
  --tinta-suave:#6b655c;
  --linea:#e2ddd4;
  --acento:#0f6e5c;
  --acento-claro:#e6f2ef;
  --urgente:#b3261e;
  --alta:#c2620d;
  --media:#8a7a1f;
  --baja:#6b655c;
  --hecho:#3f7d43;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:1.55rem}
h2{font-size:1.2rem;margin-top:1.6em}
a{color:var(--acento)}

/* ---------- Barra superior ---------- */
.barra{
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  background:var(--tinta);color:#f6f4f0;
  padding:.7rem 1.4rem;
}
.barra .marca{font-family:Georgia,serif;font-size:1.1rem;color:#fff;text-decoration:none;font-weight:600}
.barra nav{display:flex;gap:.3rem;flex-wrap:wrap;margin-left:auto}
.barra nav a{
  color:#d8d3ca;text-decoration:none;padding:.35rem .7rem;border-radius:6px;font-size:.9rem;
}
.barra nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.barra nav a.actual{background:var(--acento);color:#fff}
.barra .salir{color:#9c968c;text-decoration:none;font-size:.85rem}
.barra .salir:hover{color:#fff}
.barra .quien{font-size:.85rem;color:#d8d3ca;display:flex;align-items:center;gap:.4rem}
.barra .quien a{color:#d8d3ca;text-decoration:none}
.barra .quien a:hover{color:#fff;text-decoration:underline}
.chapa{background:var(--acento);color:#fff;font-size:.68rem;padding:.1rem .4rem;border-radius:4px;
  text-transform:uppercase;letter-spacing:.03em}
.tabla .chapa{background:var(--acento-claro);color:var(--acento)}

main{max-width:1080px;margin:0 auto;padding:1.6rem 1.2rem 3rem}
.pie{text-align:center;color:var(--tinta-suave);font-size:.8rem;padding:1.5rem;border-top:1px solid var(--linea)}

/* ---------- Contenedores ---------- */
.tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:10px;padding:1.3rem;margin-bottom:1.2rem}
.tarjeta.ancha{max-width:720px;width:100%}
.centrado{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem}

/* ---------- Caja de captura ---------- */
.captura textarea{
  width:100%;min-height:110px;padding:.9rem 1rem;
  border:2px solid var(--linea);border-radius:8px;
  font:inherit;resize:vertical;background:#fffdfa;
}
.captura textarea:focus{outline:none;border-color:var(--acento)}
.captura .pie-captura{display:flex;align-items:center;gap:1rem;margin-top:.7rem;flex-wrap:wrap}
.ejemplos{color:var(--tinta-suave);font-size:.85rem;margin:.5rem 0 0}
.ejemplos b{color:var(--tinta);font-weight:600}

/* Dictado */
#btnMic.grabando{background:var(--urgente);color:#fff;border-color:var(--urgente)}
#btnMic.grabando::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#fff;margin-right:.4rem;vertical-align:middle;animation:latido 1s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.25}}
#estadoMic.bueno{color:var(--hecho)}
#estadoMic.malo{color:var(--urgente)}

/* ---------- Botones y formularios ---------- */
.boton{
  display:inline-block;background:var(--acento);color:#fff;border:0;
  padding:.6rem 1.2rem;border-radius:7px;font:inherit;font-weight:600;
  cursor:pointer;text-decoration:none;
}
.boton:hover{background:#0c5a4b}
.boton.tenue{background:#fff;color:var(--tinta);border:1px solid var(--linea);font-weight:400}
.boton.tenue:hover{background:#f0ede8}
.boton.peligro{background:var(--urgente)}
.boton:disabled{opacity:.5;cursor:progress}
input[type=text],input[type=password],input[type=date],input[type=datetime-local],input[type=search],select,textarea{
  font:inherit;padding:.5rem .65rem;border:1px solid var(--linea);border-radius:6px;background:#fff;max-width:100%;
}
input:focus,select:focus{outline:none;border-color:var(--acento)}
label{display:block;font-size:.85rem;color:var(--tinta-suave);margin:.8rem 0 .25rem}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1rem}

/* ---------- Listas de elementos ---------- */
.elemento{
  background:var(--tarjeta);border:1px solid var(--linea);border-left:4px solid var(--media);
  border-radius:8px;padding:.85rem 1rem;margin-bottom:.6rem;
}
.elemento.p-urgente{border-left-color:var(--urgente)}
.elemento.p-alta{border-left-color:var(--alta)}
.elemento.p-baja{border-left-color:var(--baja)}
.elemento.cerrado{opacity:.55}
.elemento.cerrado .titulo{text-decoration:line-through}
.elemento .titulo{font-weight:600;font-size:1.02rem}
.elemento .detalle{color:var(--tinta-suave);font-size:.9rem;margin-top:.2rem}
.elemento .meta{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.55rem;font-size:.8rem}
.elemento form{display:inline}

.etiqueta{background:var(--acento-claro);color:var(--acento);padding:.12rem .5rem;border-radius:20px;font-size:.75rem}
.pastilla{padding:.12rem .5rem;border-radius:20px;font-size:.75rem;background:#efece7;color:var(--tinta-suave)}
.pastilla.urgente{background:#fbe9e7;color:var(--urgente)}
.pastilla.alta{background:#fdf0e3;color:var(--alta)}
.pastilla.vencido{background:#fbe9e7;color:var(--urgente);font-weight:600}
.pastilla.hoy{background:#fdf0e3;color:var(--alta);font-weight:600}

/* ---------- Resumen del panel ---------- */
.resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem;margin-bottom:1.3rem}
.resumen .dato{background:var(--tarjeta);border:1px solid var(--linea);border-radius:9px;padding:.9rem 1rem}
.resumen .dato .n{font-family:Georgia,serif;font-size:1.9rem;line-height:1;display:block}
.resumen .dato .q{color:var(--tinta-suave);font-size:.8rem;margin-top:.3rem;display:block}
.resumen .dato.alarma .n{color:var(--urgente)}

/* ---------- Tablas ---------- */
.envoltura-tabla{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:.92rem}
.tabla th,.tabla td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-suave)}
.tabla .ok{color:var(--hecho)}
.tabla .pend{color:var(--tinta-suave)}

/* ---------- Avisos ---------- */
.aviso{padding:.8rem 1rem;border-radius:8px;margin:.9rem 0;font-size:.92rem;border:1px solid}
.aviso.exito{background:#eaf5ea;border-color:#c3e0c4;color:#2c5e30}
.aviso.error{background:#fbe9e7;border-color:#f0c4bf;color:#8c1d16}
.aviso.alerta{background:#fdf6e3;border-color:#ecdca8;color:#77621b}
.aviso.info{background:var(--acento-claro);border-color:#bcdcd4;color:#0c5a4b}
.aviso ul{margin:.4rem 0 0;padding-left:1.2rem}
.nota{color:var(--tinta-suave);font-size:.85rem}
.lista-pasos{list-style:none;padding:0;font-size:.9rem}
.lista-pasos li{padding:.2rem 0;color:var(--hecho)}
code{background:#efece7;padding:.1rem .35rem;border-radius:4px;font-size:.88em}
.vacio{text-align:center;color:var(--tinta-suave);padding:2.5rem 1rem}

/* ---------- Bóveda ---------- */
.secreto{font-family:ui-monospace,Consolas,monospace;background:#efece7;padding:.35rem .6rem;border-radius:5px;user-select:all}
.filtros{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}

/* ---------- Burbuja flotante ---------- */
#burbuja{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:60;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:var(--acento);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(28,26,23,.28);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#burbuja:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 7px 20px rgba(28,26,23,.34)}
#burbuja:active{transform:scale(.96)}
#burbuja.abierta{background:var(--tinta)}
#burbuja:focus-visible{outline:3px solid var(--acento-claro);outline-offset:3px}

#burbujaPanel{
  position:fixed;right:1.4rem;bottom:5.4rem;z-index:60;
  width:min(380px,calc(100vw - 2.8rem));
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;
  padding:1rem;box-shadow:0 10px 34px rgba(28,26,23,.20);
}
/* Conversación dentro de la burbuja */
.chat-cabeza{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px solid var(--linea);
}
.chat-cabeza strong{font-family:Georgia,serif;font-size:1rem}
.enlace-tenue{
  background:none;border:0;color:var(--tinta-suave);font:inherit;font-size:.78rem;
  cursor:pointer;text-decoration:underline;padding:0;
}
.enlace-tenue:hover{color:var(--acento)}

.chat-hilo{
  max-height:min(46vh,340px);overflow-y:auto;display:flex;flex-direction:column;gap:.4rem;
  padding-right:.2rem;
}
.chat-msg{
  max-width:88%;padding:.45rem .7rem;border-radius:12px;font-size:.9rem;line-height:1.45;
  white-space:pre-wrap;word-break:break-word;
}
.chat-msg.mio{align-self:flex-end;background:var(--acento);color:#fff;border-bottom-right-radius:4px}
.chat-msg.suyo{align-self:flex-start;background:#efece7;color:var(--tinta);border-bottom-left-radius:4px}
.chat-msg.error{background:#fbe9e7;color:var(--urgente)}
.chat-msg.pensando{opacity:.6;letter-spacing:.15em;animation:latido 1.1s ease-in-out infinite}
.chat-accion{
  align-self:flex-start;font-size:.78rem;color:var(--hecho);
  background:#eaf5ea;border-radius:8px;padding:.25rem .55rem;
}

.chat-pie{display:flex;gap:.35rem;align-items:flex-end;margin-top:.6rem}
.chat-pie textarea{
  flex:1;min-height:38px;max-height:110px;padding:.5rem .65rem;resize:none;overflow-y:auto;
  border:2px solid var(--linea);border-radius:9px;font:inherit;background:#fffdfa;line-height:1.4;
}
.chat-pie textarea:focus{outline:none;border-color:var(--acento)}
.chat-pie .boton{padding:.5rem .75rem;line-height:1}
#burbujaEstado:not(:empty){display:block;margin-top:.45rem;font-size:.8rem}

@media (max-width:640px){
  #burbuja{right:1rem;bottom:1rem;width:52px;height:52px}
  #burbujaPanel{right:1rem;left:1rem;bottom:4.8rem;width:auto}
}

@media (max-width:640px){
  .barra{gap:.6rem}
  .barra nav{margin-left:0;width:100%}
  main{padding:1rem .8rem 2.5rem}
}