/* Panel de Aibe · estilos propios, sin dependencias externas */
:root {
  --fondo: #f6f7f9; --superficie: #ffffff; --borde: #e3e6eb; --texto: #1d2330; --suave: #5d6677;
  --acento: #0f6e6a; --acento-claro: #e3f2f1; --peligro: #b42318; --peligro-claro: #fdecea;
  --aviso: #9a6700; --aviso-claro: #fff6dd; --ok: #18794e; --ok-claro: #e6f6ee; --radio: 8px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: var(--fondo); }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.45rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
p { margin: .25rem 0 .75rem; }
.suave { color: var(--suave); }
.peque { font-size: .85rem; }

/* estructura */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.lateral { background: #14212b; color: #d6dde4; padding: 1.1rem .8rem; display: flex; flex-direction: column; gap: .2rem; }
.lateral .marca { color: #fff; font-weight: 700; font-size: 1.05rem; padding: .2rem .6rem 1rem; letter-spacing: .2px; }
.lateral .marca small { display: block; color: #8fa3b3; font-weight: 400; font-size: .8rem; }
.lateral a { color: #cfd8e0; padding: .45rem .6rem; border-radius: 6px; display: block; }
.lateral a:hover { background: #1f3140; text-decoration: none; color: #fff; }
.lateral a.activo { background: var(--acento); color: #fff; }
.lateral .seccion { color: #7f93a3; font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; margin: .9rem .6rem .2rem; }
.lateral .pie { margin-top: auto; padding: .6rem; font-size: .82rem; color: #8fa3b3; }
.lateral .pie button { margin-top: .4rem; width: 100%; }
.contenido { padding: 1.6rem 2rem 3rem; max-width: 1180px; width: 100%; }
.cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }

/* bloques */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem 1.2rem; box-shadow: var(--sombra); margin-bottom: 1rem; }
.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 1rem; }
.cifra { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .9rem 1rem; }
.cifra b { display: block; font-size: 1.6rem; line-height: 1.2; }
.cifra span { color: var(--suave); font-size: .85rem; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } .lateral { flex-direction: row; flex-wrap: wrap; } .dos { grid-template-columns: 1fr; } }

/* tablas */
table { width: 100%; border-collapse: collapse; background: var(--superficie); }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; color: var(--suave); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
.tabla { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); margin-bottom: 1rem; }
.vacio { padding: 1.4rem; text-align: center; color: var(--suave); }

/* etiquetas de estado */
.etq { display: inline-block; padding: .08rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #eef0f3; color: #3b4454; white-space: nowrap; }
.etq.activo, .etq.ok, .etq.enviado, .etq.respondida, .etq.respondido, .etq.atendida, .etq.activa { background: var(--ok-claro); color: var(--ok); }
.etq.simulacion, .etq.simulado, .etq.pendiente, .etq.abierta, .etq.sin_probar { background: var(--aviso-claro); color: var(--aviso); }
.etq.pausado, .etq.error, .etq.bloqueado, .etq.derivada, .etq.derivado, .etq.baja { background: var(--peligro-claro); color: var(--peligro); }

/* formularios */
form.formulario { display: grid; gap: .85rem; max-width: 720px; }
label { display: grid; gap: .25rem; font-weight: 600; font-size: .9rem; }
label .ayuda { font-weight: 400; color: var(--suave); font-size: .82rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=file], select, textarea {
  font: inherit; padding: .5rem .6rem; border: 1px solid #cfd5dd; border-radius: 6px; background: #fff; width: 100%; }
textarea { min-height: 110px; resize: vertical; }
textarea.codigo { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; min-height: 420px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento-claro); border-color: var(--acento); }
.fila { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.fila > * { flex: 1 1 160px; }
.casillas { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-weight: 400; }
.casillas label { display: flex; gap: .35rem; align-items: center; font-weight: 400; }
button, .boton { font: inherit; font-weight: 600; border: 1px solid var(--acento); background: var(--acento); color: #fff; padding: .45rem .9rem; border-radius: 6px; cursor: pointer; display: inline-block; }
button:hover, .boton:hover { filter: brightness(1.08); text-decoration: none; }
button.secundario, .boton.secundario { background: #fff; color: var(--acento); }
button.peligro { background: var(--peligro); border-color: var(--peligro); }
button.mini { padding: .2rem .55rem; font-size: .82rem; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
form.enlinea { display: inline; }

/* avisos */
.aviso { padding: .7rem .9rem; border-radius: 6px; margin-bottom: 1rem; border: 1px solid; }
.aviso.ok { background: var(--ok-claro); border-color: #b7e4cc; color: #0f5132; }
.aviso.error { background: var(--peligro-claro); border-color: #f4c7c3; color: #7a1c13; }
.aviso.info { background: var(--aviso-claro); border-color: #f3dc9f; color: #6b4a00; }

/* conversación */
.hilo { display: grid; gap: .8rem; }
.msg { border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; padding: .8rem 1rem; }
.msg.saliente { border-left: 4px solid var(--acento); background: #fbfefe; }
.msg.entrante { border-left: 4px solid #8796a8; }
.msg.interno { border-left: 4px solid var(--aviso); background: #fffdf6; }
.msg header { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; font-size: .85rem; color: var(--suave); margin-bottom: .4rem; }
.msg pre { white-space: pre-wrap; font: inherit; margin: 0; }
.msg .decision { margin-top: .6rem; font-size: .85rem; background: #f3f5f8; border-radius: 6px; padding: .45rem .6rem; }
details summary { cursor: pointer; color: var(--suave); font-size: .85rem; }

/* login */
.centrado { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.caja { width: 100%; max-width: 380px; }
.caja .marca { font-weight: 700; font-size: 1.3rem; margin-bottom: 1rem; text-align: center; }
.qr svg { width: 200px; height: 200px; }
code { background: #eef1f4; padding: .1rem .35rem; border-radius: 4px; font-size: .85rem; word-break: break-all; }