/* Lo común a las pantallas de la app. Las piezas salen del kit: ../../kit/ui/kit/kairos-ui.css */
html, body { height: 100%; }
body { overflow: hidden; }
.pantalla { display: grid; grid-template-columns: minmax(0, 1fr) var(--ancho-panel, 400px); grid-template-rows: 64px minmax(0, 1fr); height: 100dvh; }
.pantalla > * { min-height: 0; min-width: 0; }

/* top nav: única navegación de escritorio, también en compu */
.riel { display: none; }
.barra-web { display: flex; grid-column: 1 / -1; align-items: center; gap: 28px; padding: 0 24px; border-bottom: 1px solid var(--linea); }
.barra-web img { width: 30px; height: 30px; border-radius: 7px; }
.barra-web nav { display: flex; gap: 4px; }
.barra-web nav a { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--texto-2); text-decoration: none; padding: 7px 12px; border-radius: 8px; }
.barra-web nav a.activo { background: var(--suave); color: var(--texto); }
.barra-web .yo { margin-left: auto; }
/* el icono de la pestaña solo se ve en la pestaña activa */
.ico-tab { width: 15px; height: 15px; flex: none; }

/* botón flotante de Kairos: siempre abajo a la izquierda, abre el chat encima de cualquier pantalla */
.boton-chat-k { position: fixed; left: 20px; bottom: 20px; width: 52px; height: 52px; border-radius: 50%; border: none; padding: 0; cursor: pointer; z-index: 70; background-image: url(../../kit/fotos/foto-cabeza-horizontal.jpg); background-repeat: no-repeat; background-size: 240% auto; background-position: 66% 60%; filter: brightness(1.9) contrast(1.35) saturate(.85); box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .15s cubic-bezier(.16,1,.3,1); }
.boton-chat-k:hover { transform: scale(1.06); }
.boton-chat-k.abierto { outline: 2px solid var(--texto); outline-offset: 3px; }
.cel .boton-chat-k { bottom: 96px; left: 18px; width: 46px; height: 46px; }

/* el chat sale del botón hacia arriba; la app queda detrás, oscurecida */
.velo-chat { position: fixed; inset: 0; background: rgba(10,8,6,.55); z-index: 65; opacity: 0; pointer-events: none; transition: opacity .18s; }
.velo-chat.abierto { opacity: 1; pointer-events: auto; }
.panel-chat-flot { position: fixed; left: 20px; top: 80px; bottom: 88px; width: 520px; max-width: calc(100vw - 40px); background: var(--fondo); border-radius: 16px; border: 1px solid var(--linea); box-shadow: 0 24px 70px rgba(0,0,0,.4); z-index: 66; display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(12px); transform-origin: bottom left; pointer-events: none; transition: opacity .18s, transform .18s cubic-bezier(.16,1,.3,1); }
.panel-chat-flot.abierto { opacity: 1; transform: translateY(0); pointer-events: auto; }
.claro .panel-chat-flot { background: var(--fondo); }
.panel-chat-flot .chat { border-right: none; height: 100%; min-height: 0; }
.panel-chat-flot .chat > header { padding: 12px 12px 12px 22px; justify-content: space-between; }
.panel-chat-flot .chat > header .t-chico { margin-left: 0; }
.panel-chat-flot .chat .mensajes { padding: 20px 22px; gap: 18px; }
.panel-chat-flot .chat .escribir { padding: 10px 16px 16px; }
.ico-solo { padding: 7px; }
.ico-solo svg { width: 16px; height: 16px; }
.panel-chat-flot .tira { display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px 12px; border-bottom: 1px solid var(--linea); scrollbar-width: none; flex: none; }
.panel-chat-flot .tira .t-item { flex: 0 0 200px; padding: 10px 12px; gap: 7px; }
.panel-chat-flot .tira .t-item b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel .panel-chat-flot { left: 10px; right: 10px; top: 12px; bottom: 152px; width: auto; max-width: none; }
.cel .panel-chat-flot .chat .mensajes { padding: 16px; }
.cel .panel-chat-flot .msg .burbuja { font-size: 14.5px; }
.web .pantalla { grid-template-columns: minmax(0, 1fr) var(--ancho-panel, 380px); grid-template-rows: 60px minmax(0, 1fr); }
.web .pantalla.sin-panel { grid-template-columns: minmax(0, 1fr); }

/* chat */
.chat { display: flex; flex-direction: column; border-right: 1px solid var(--linea); }
.chat > header { display: flex; align-items: center; gap: 12px; padding: 20px 40px; border-bottom: 1px solid var(--linea); flex: none; }
.chat > header .ico-chat { width: 30px; height: 30px; border-radius: 7px; }
.chat > header .t-chico { margin-left: auto; }
.chat .mensajes { flex: 1; min-height: 0; overflow: auto; padding: 28px 40px; display: flex; flex-direction: column; gap: 22px; }
.chat .mensajes > * { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
.chat .msg.yo { max-width: 600px; margin-right: max(0px, calc((100% - 760px) / 2)); }
.chat .escribir { flex: none; padding: 12px 40px 26px; }
.chat .escribir > div { max-width: 760px; margin: 0 auto; }
.dia-sep { text-align: center; font-size: 12px; color: var(--texto-3); }

/* panel de tareas: se ve, no se le escribe */
.panel { display: flex; flex-direction: column; background: var(--panel); }
.panel > header { padding: 20px 22px 14px; flex: none; display: grid; gap: 14px; }
.panel > header .fila-p { display: flex; justify-content: space-between; align-items: center; }
.panel > header h2 { font-size: 16px; font-weight: 600; }
.panel .lista { flex: 1; min-height: 0; overflow: auto; padding: 4px 14px 20px; display: grid; gap: 8px; align-content: start; }
.panel .grupo-t { font-size: 12px; font-weight: 600; color: var(--texto-3); padding: 14px 8px 4px; display: flex; justify-content: space-between; }
.t-item { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px; padding: 13px 14px; display: grid; gap: 9px; cursor: pointer; }
.claro .t-item { background: #fff; }
.t-item .arriba-t { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.t-item b { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.t-item .pct { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.t-item .barra { height: 4px; }
.t-item .abajo-t { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--texto-2); }
.t-item .abajo-t span:last-child { color: var(--texto-3); white-space: nowrap; }
.t-item.senal { border-color: var(--senal); }
.t-item.senal .estado-t { color: var(--senal); font-weight: 600; }
.t-item.hecha b { color: var(--texto-2); }
.t-item.abierta { outline: 2px solid var(--texto); outline-offset: -1px; }

/* celular */
.tel .pantalla { display: flex; flex-direction: column; }