/* Pantallas 1 y 3 a 10. Encima de kairos-ui.css y pantallas.css */

/* área principal en lugar del chat */
.vista { display: flex; flex-direction: column; border-right: 1px solid var(--linea); min-width: 0; }
.vista-cab { display: flex; align-items: center; gap: 16px; padding: 20px 40px; border-bottom: 1px solid var(--linea); flex: none; }
.vista-cab h1 { font-size: 18px; font-weight: 600; }
.vista-cab .t-chico { margin-left: 2px; }
.vista-cab .derecha { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.vista-cuerpo { flex: 1; min-height: 0; overflow: auto; padding: 28px 40px 40px; }
.vista-cuerpo.angosto > * { max-width: 820px; margin-left: auto; margin-right: auto; }
.sin-panel { grid-template-columns: minmax(0, 1fr); }
.sin-panel .vista { border-right: 0; }
.bloque { display: grid; gap: 12px; margin-bottom: 30px; }
.bloque > h3 { font-size: 13.5px; font-weight: 600; color: var(--texto-2); }

/* panel derecho genérico (además del de tareas) */
.panel .cuerpo-p { flex: 1; min-height: 0; overflow: auto; padding: 4px 22px 22px; display: grid; gap: 16px; align-content: start; }
.panel .pie-p { flex: none; padding: 14px 18px 22px; border-top: 1px solid var(--linea); }
.ficha-p { display: grid; gap: 4px; }
.ficha-p dl { display: grid; grid-template-columns: 110px 1fr; gap: 9px 12px; font-size: 13px; margin-top: 10px; }
.ficha-p dt { color: var(--texto-3); }

/* entrar */
.entrar { display: grid; grid-template-columns: 1.1fr 1fr; height: 100dvh; }
.entrar .foto { position: relative; overflow: hidden; background: #030200; }
.entrar .foto img:not(.logo) { width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) saturate(.92); }
.entrar .foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,2,0,.15), rgba(3,2,0,.35) 55%, rgba(3,2,0,.78)); }
.entrar .foto .logo { position: absolute; left: 48px; bottom: 44px; width: 260px; height: auto; z-index: 1; }
.entrar .lado { display: grid; place-items: center; padding: 40px; }
.entrar form { width: min(380px, 100%); display: grid; gap: 16px; }
.entrar h1 { font-size: 26px; font-weight: 600; margin-bottom: 6px; }
.entrar .o { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--texto-3); }
.entrar .o::before, .entrar .o::after { content: ""; flex: 1; height: 1px; background: var(--linea-2); }
.entrar .btn { justify-content: center; }
.entrar .pie-e { font-size: 12px; color: var(--texto-3); text-align: center; }
.web .entrar { grid-template-columns: 1fr 1fr; }

/* tarea abierta */
.avance-t { display: grid; gap: 10px; padding: 18px 20px; border: 1px solid var(--linea); border-radius: var(--r-l); background: var(--tarjeta); }
.avance-t .fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.avance-t .t-1 { font-variant-numeric: tabular-nums; }
.pedido { font-size: 13px; color: var(--texto-2); padding: 12px 16px; border-left: 2px solid var(--linea-2); }
.pedido b { color: var(--texto); font-weight: 500; }

/* archivos */
.archivos-cuerpo { display: grid; grid-template-columns: 220px minmax(0, 1fr); flex: 1; min-height: 0; }
.carpetas { border-right: 1px solid var(--linea); padding: 22px 14px; display: grid; gap: 2px; align-content: start; overflow: auto; }
.carpetas a { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 8px; font-size: 13.5px; color: var(--texto-2); text-decoration: none; }
.carpetas a span { color: var(--texto-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.carpetas a.activa { background: var(--suave); color: var(--texto); font-weight: 500; }
.carpetas .sin-acceso { color: var(--texto-3); pointer-events: none; }
.carpetas hr { border: 0; border-top: 1px solid var(--linea); margin: 10px 4px; }
.carpetas .nota-c { font-size: 11.5px; color: var(--texto-3); padding: 4px 12px; }
.lista-archivos { overflow: auto; padding: 22px 32px; }

/* herramientas */
.visor.grande { height: 100%; }
.visor.grande .pagina { max-width: 640px; min-height: 820px; margin: 0 auto; }
.herramienta-cuerpo { flex: 1; min-height: 0; overflow: auto; padding: 24px 32px; background: var(--suave); }
.claro .herramienta-cuerpo { background: var(--suave); }
.imagen-visor.grande { height: 100%; min-height: 520px; }
.imagen-visor.grande img { height: 100%; object-fit: contain; background: #030200; }
.comentario-v { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; background: var(--tarjeta); font-size: 13px; }
.comentario-v .de { display: flex; justify-content: space-between; font-size: 12px; color: var(--texto-3); }
.comentario-v .num-c { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--texto); color: var(--fondo); font-size: 11px; font-weight: 600; margin-right: 6px; }
.comentario-v.elegido { border-color: var(--texto-2); }
.comentario-v .respuesta { color: var(--texto-2); border-top: 1px solid var(--linea); padding-top: 8px; margin-top: 6px; }

/* bandera roja a pantalla */
.bandera.grande { max-width: 720px; margin: 0 auto; }
.bandera.grande h4 { font-size: 22px; }
.bandera.grande dl { font-size: 14px; }

/* juntas */
.agenda.grande { --alto: 620px; }
.mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--r-l); overflow: hidden; }
.mes .cab-dia { background: var(--panel); text-align: center; font-size: 11px; color: var(--texto-3); padding: 9px 0; font-weight: 500; }
.mes .celda { background: var(--tarjeta); min-height: 104px; padding: 7px 8px; display: grid; gap: 4px; align-content: start; }
.mes .celda.fuera { background: var(--panel); }
.mes .celda.fuera .fecha { color: var(--texto-3); }
.mes .celda .fecha { font-size: 12px; font-weight: 600; width: 22px; height: 22px; display: grid; place-items: center; }
.mes .celda.hoy .fecha { background: var(--boton-fondo); color: var(--boton-texto); border-radius: 50%; }
.mes .evt { font-size: 10.5px; padding: 3px 7px; border-radius: 6px; background: var(--suave); color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mes .evt.fuerte { background: var(--boton-fondo); color: var(--boton-texto); }
.mes .mas { font-size: 10.5px; color: var(--texto-3); padding: 0 7px; }
.cuentas-mini { display: flex; gap: 8px; }
.prox-junta { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--linea); border-radius: var(--r-l); background: var(--tarjeta); }
.prox-junta .personas { margin-top: 2px; }
.junta-lista { display: grid; gap: 4px; }
.junta-lista a { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--texto); font-size: 13.5px; }
.junta-lista a span { font-size: 12px; color: var(--texto-3); }
.junta-lista a:hover { background: var(--suave); }
.junta-cuerpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; }
.propuesta { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--linea-2); border-radius: var(--r-l); background: var(--tarjeta); }
.propuesta dl { display: grid; grid-template-columns: 90px 1fr; gap: 10px 12px; font-size: 13.5px; }
.propuesta dt { color: var(--texto-3); }
.libres { display: grid; grid-template-columns: 70px repeat(8, 1fr); gap: 4px; font-size: 11.5px; align-items: center; }
.libres span { color: var(--texto-3); text-align: center; }
.libres span:first-child { text-align: left; }
.libres span.elegida { color: var(--texto); font-weight: 700; }
.libres i { height: 18px; border-radius: 5px; background: var(--suave); }
.libres i.ocupado { background: var(--suave-2); }
.libres i.toca { background: var(--tarjeta); outline: 2px solid var(--texto); outline-offset: -2px; }

/* uso */
.uso-usuarios .barra { height: 5px; }

/* conectar */
.conectar { max-width: 620px; margin: 0 auto; display: grid; gap: 28px; }
.conectar h1 { font-size: 24px; font-weight: 600; }
.conectar .grupo-c { display: grid; gap: 10px; }
.conectar .grupo-c > b { font-size: 13.5px; color: var(--texto-2); font-weight: 600; }

/* celular: reutiliza memoria-cel.css (.cel, .cel-cab, .cel-cuerpo, .nav-cel) */
.cel .vista-cab { padding: 6px 18px 12px; border: 0; }
.cel .agenda.grande { --alto: 520px; }
.cel .bandera.grande h4 { font-size: 18px; }
.cel .junta-cuerpo { grid-template-columns: 1fr; }
.cel-entrar { display: flex; flex-direction: column; height: 100dvh; }
.cel-entrar .foto { position: relative; flex: 0 0 44%; overflow: hidden; background: #030200; }
.cel-entrar .foto img:not(.logo) { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: brightness(.45) saturate(.92); }
.cel-entrar .foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,2,0,.1), rgba(3,2,0,.75)); }
.cel-entrar .foto .logo { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 210px; height: auto; z-index: 1; }
.cel-entrar form { flex: 1; display: grid; gap: 14px; align-content: start; padding: 26px 22px; }
.cel-entrar form .btn { justify-content: center; }
.cel-entrar h1 { font-size: 22px; font-weight: 600; }
.cel-entrar .o { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--texto-3); }
.cel-entrar .o::before, .cel-entrar .o::after { content: ""; flex: 1; height: 1px; background: var(--linea-2); }
.cel-fijo { flex: none; padding: 12px 18px 10px; border-top: 1px solid var(--linea); display: grid; gap: 8px; }
.cel-fijo .grupo-btn .btn { flex: 1; justify-content: center; }

.paso.actual > i { box-shadow: 0 0 0 4px var(--suave-2); }
.paso.actual > div { font-weight: 600; }
.paso.actual time { color: var(--texto); }

.panel .visor { overflow: hidden; flex: none; }
.archivo.elegido { outline: 0; background: var(--suave); border-radius: 8px; }

.visor.grande .pagina h4 { font-size: 15px; }
.visor.grande .resalte { font-size: 13px; line-height: 1.5; padding: 8px 10px; }
.comentar .caja-texto textarea { min-height: 48px; line-height: 1.4; }
.comentario-v.elegido { outline: 0; border-color: var(--texto-2); }

.vista .kpi, .cel .kpi { display: grid; gap: 4px; align-content: start; }
.cel .grupo-c { display: grid; gap: 8px; }
.cel .grupo-c > b { font-size: 13.5px; color: var(--texto-2); font-weight: 600; }

[hidden] { display: none !important; }

/* visor de archivos: navegable */
.archivo { cursor: pointer; }
.archivo:hover { background: var(--suave); border-radius: 8px; }
.carpetas a { cursor: pointer; }
.ruta .crumb { font: inherit; font-size: inherit; color: var(--texto-2); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--linea-2); text-underline-offset: 2px; }
.ruta .crumb:hover { color: var(--texto); }