/* La paleta y las cuatro reglas de abajo vienen de un sistema de diseno ajeno, y los valores se copiaron tal cual en vez de aproximarlos a ojo. Esa parte no es pereza: "parecido" acaba siendo una tercera paleta que no es ni la de la referencia ni la de la casa, y nadie sabe cual de las tres manda. Estos colores no llevan la marca de nadie, asi que la plantilla los deja puestos y funcionando. Cambiarlos por los de tu casa es un trabajo de un rato en este bloque de tokens, y las cuatro reglas de abajo siguen valiendo con cualquier paleta, porque no hablan de colores concretos sino de como se usan. Las cuatro reglas que mas cambian este fichero: 1. La jerarquia se hace con PESO Y COLOR, no con tamano. Casi todo el texto va a 14px; los metadatos, a 12. Lo que distingue un titulo de su subtitulo es foreground contra foregroundMuted, no dos tamanos distintos. 2. El acento aparece COMO MUCHO una vez por pantalla, y la mayoria tienen cero. Dicho como lo dice la referencia: "the chat composer is the input itself". Por eso aqui no hay boton de enviar relleno de color: el sitio donde escribes es el propio protagonista. 3. La barra lateral va sobre una superficie ELEVADA (surface2 en claro, surfaceSidebar en oscuro), y el area principal sobre la de fondo. Al reves de lo que suele hacerse. 4. El rojo es un color, no un clic: aparece cuando ya hay intencion, no antes. */ /* La tipografia de la pantalla de entrar, servida desde este mismo servidor. Inter Tight, el subconjunto "latin", que cubre el espanol entero: acentos, la ene y la dieresis. Se sirve desde aqui en vez de enlazar la hoja de un proveedor de fuentes porque un a un tercero en la cabecera bloquea el primer pintado de TODA la pagina, y esta letra solo se usa en la puerta: con la red lenta, el chat se queda en blanco esperando a un dominio que no necesita para nada de lo que hay dentro. Es una fuente VARIABLE, asi que el mismo fichero sirve para 400, 500 y 600. Por eso aqui hay un solo woff2 y un rango de peso, y no tres copias identicas. [SUPUESTO] Inter Tight se distribuye bajo la SIL Open Font License, que permite servirla asi. Quien monte este brain lo comprueba antes de publicar la pagina fuera de su red: el fichero viaja con la plantilla por comodidad, no como licencia concedida. Si no te convence, borra chatbot/fuentes/, quita este @font-face y deja la pila de sistema de mas abajo, que ya esta puesta detras. Y si sustituyes esta por la letra de tu casa: una tipografia que no pinta ni una letra son kilobytes que alguien arrastra por costumbre durante anos. La fuente que deje de usarse se borra en el mismo commit que la deja de usar. */ @font-face{ font-family:'Inter Tight';font-style:normal;font-weight:400 600;font-display:swap; src:url(/fuentes/inter-tight.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* El tema se resuelve en JavaScript y se escribe en data-tema del , siempre con un valor concreto: "claro" u "oscuro". La preferencia ("sistema") se guarda aparte. Se hace asi para no duplicar la paleta oscura en dos reglas, una para [data-tema="oscuro"] y otra dentro de @media. Dos copias de una paleta acaban separandose, y entonces el modo oscuro del sistema y el del boton dejan de ser el mismo modo oscuro. */ :root{ --surface0:#ffffff; /* fondo de la aplicacion */ --surface1:#fafafa; /* hover discreto */ --surface2:#f4f4f5; /* elevado: entradas, insignias, barra lateral */ --surface3:#e4e4e7; /* elevacion maxima */ --sidebar:#f4f4f5; --sidebar-hover:#fafafa; --sidebar-sel:#e4e4e7; --fg:#1a1a1e; --fg-muted:#71717a; --fg-extra:#a1a1aa; --borde:#e4e4e7; --borde-acento:#ececf1; --acento:#20744A; --acento-vivo:#239956; --destructivo:#b04138; } html[data-tema="oscuro"]{ --surface0:#181B1A; --surface1:#1E2120; --surface2:#272A29; --surface3:#434645; --sidebar:#141716; --sidebar-hover:#1E2120; --sidebar-sel:#272A29; --fg:#fafafa; --fg-muted:#A1A5A4; --fg-extra:#717574; --borde:#252B2A; --borde-acento:#2F3534; --acento:#20744A; --acento-vivo:#7ccba0; --destructivo:#c64f43; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0;display:flex;background:var(--surface0);color:var(--fg); font:14px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; } button{font:inherit;cursor:pointer} /* ---------- barra lateral: superficie elevada, no el area principal ---------- */ aside{ width:264px;flex:0 0 264px;background:var(--sidebar); border-right:1px solid var(--borde);display:flex;flex-direction:column; } /* Logo y nombre en la misma linea, alineados por la BASE del texto y no por el centro de la caja: asi la palabra se apoya donde se apoya el logotipo. */ .marca{padding:18px 16px 14px;display:flex;align-items:baseline;gap:9px} .marca img{height:17px;width:auto;display:block;position:relative;top:2px} .marca h1{margin:0;font-size:15px;font-weight:500;letter-spacing:-.01em} /* Un logo por tema. El de tinta sobre la barra clara, el claro sobre la oscura. Los selectores llevan .marca delante por ESPECIFICIDAD: `.marca img` pesa mas que `.logo-oscuro` a secas, asi que su display:block ganaba y en modo claro se pintaban LOS DOS logos, uno invisible pero ocupando, que empujaba la palabra "Brain" a la derecha. En oscuro no se veia porque html[data-tema] pesa mas. */ .marca .logo-oscuro{display:none} html[data-tema="oscuro"] .marca .logo-claro{display:none} html[data-tema="oscuro"] .marca .logo-oscuro{display:block} .nuevo{ margin:0 12px 14px;padding:8px 12px;text-align:left;border:1px solid var(--borde); border-radius:8px;background:transparent;color:var(--fg); } .nuevo:hover{background:var(--sidebar-hover);border-color:var(--borde-acento)} /* La etiqueta que NOMBRA un grupo va en medium. Lo que vive dentro, en normal. */ .grupo{ padding:0 16px 6px;font-size:12px;font-weight:500;color:var(--fg-muted); } .hist{flex:1;overflow-y:auto;padding:0 8px} .hist .vacio{padding:4px 8px;font-size:12px;color:var(--fg-extra);line-height:1.5} .pie{border-top:1px solid var(--borde);padding:12px 16px;font-size:12px} .pie b{display:block;font-weight:500;color:var(--fg)} .pie span{color:var(--fg-muted)} /* Botones con borde, no texto suelto: son las dos acciones de la cuenta y hasta ahora se leian como pie de pagina. Pegados a la izquierda, bajo el nombre. */ .pie-acciones{display:flex;gap:6px;margin-top:10px} /* ---------- conversacion ---------- */ main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--surface0)} #hilo{flex:1;overflow-y:auto;padding:32px 0} .fila{max-width:720px;margin:0 auto 26px;padding:0 32px} .quien{font-size:12px;font-weight:500;color:var(--fg-muted);margin-bottom:6px} .texto{white-space:pre-wrap;word-wrap:break-word} .yo .texto{color:var(--fg-muted)} .pensando{color:var(--fg-extra)} .fuentes{margin-top:14px;font-size:12px} .fuentes .t{color:var(--fg-extra);margin-bottom:6px} .fuentes .f{color:var(--fg-muted);padding:2px 0} .fuentes code{ font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--fg-muted); } /* ---------- saludo: centrado y sin sugerencias, como pidio ---------- */ .saludo{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; pointer-events:none;padding-bottom:120px; } .saludo h2{ margin:0;font-size:20px;font-weight:300;letter-spacing:-.01em;color:var(--fg); } /* El nombre pesa mas que el resto de la frase, que es lo que hace que se lea como un saludo a alguien y no como un titulo. */ .saludo h2 b{font-weight:600} /* ---------- escribir: sin boton de acento, el sitio de escribir es el protagonista ---------- */ .abajo{padding:0 32px 22px} .caja{ max-width:720px;margin:0 auto;display:flex;gap:8px;align-items:flex-end; background:var(--surface2);border:1px solid var(--borde);border-radius:12px;padding:8px 8px 8px 14px; } .caja:focus-within{border-color:var(--borde-acento)} textarea{ flex:1;resize:none;min-height:26px;max-height:200px;padding:5px 0;border:0; background:transparent;color:var(--fg);font:inherit; } textarea:focus{outline:none} textarea::placeholder{color:var(--fg-extra)} .enviar{ border:0;border-radius:8px;background:transparent;color:var(--fg-muted); padding:6px 10px;font-size:12px; } .enviar:hover:not(:disabled){background:var(--surface3);color:var(--fg)} .enviar:disabled{color:var(--fg-extra);cursor:default} .nota{max-width:720px;margin:10px auto 0;font-size:12px;color:var(--fg-extra);text-align:center} /* ---------- entrar: la puerta lleva los colores de la casa ---------- */ /* Aqui NO mandan los tokens del tema, y es deliberado: la puerta es el sitio donde una casa se pone su membrete. Los valores de aqui abajo son de EJEMPLO, y son lo primero que cambia quien monte este brain. Van todos juntos y con nombre en las dos primeras lineas de la regla, para que cambiar el membrete sea editar dos lineas y no ir buscando hexadecimales sueltos por el fichero. Son grises a proposito, y no un color bonito: una plantilla que llega con la paleta de otra casa se queda con ella, porque una pantalla que ya se ve terminada nadie la toca. Un gris se ve provisional, y lo provisional se cambia. Al cambiarlos, el par tinta/acento tiene que seguir leyendose: el acento es fondo de boton con la tinta encima, y en el hover al reves, asi que los dos colores se leen uno sobre otro en los dos sentidos. Y no tiene variante oscura: la portada es la misma para todo el mundo, como un membrete, que no cambia de color segun quien lo lea. El tema empieza a mandar cuando ya has entrado. Ojo si se toca el fondo: es tinta SIEMPRE, y la tarjeta que va encima es blanca SIEMPRE. Por eso el logotipo de dentro de la tarjeta es el de tinta sobre blanco (logo-dark.svg) y el claro (logo.svg) solo valdria si la tarjeta desapareciera. Cambiar --tinta por un color claro sin cambiar tambien el logotipo deja un logotipo blanco sobre blanco, que no da error: simplemente no se ve nada, y quien lo mire pensara que la imagen no ha cargado. */ #entrar{ --tinta:#1B1B1F; --acento-puerta:#8A8F98; --papel:#FAFAFA; --linea-fuerte:#D9D9DE; --suave:#5A5A60; --err:#d7263d; position:fixed;inset:0;background:var(--tinta);display:flex; align-items:center;justify-content:center;z-index:10; font-family:'Inter Tight',ui-sans-serif,system-ui,-apple-system,sans-serif; } /* La separacion de lo que hay dentro va con gap y no con margenes sueltos: con gap, quitar o poner una pieza no descuadra el resto, y aqui las piezas van y vienen a menudo (el formulario de contrasena aparece o no segun lo que tenga montado el servidor, y el aviso de error solo cuando hay error). Y la tarjeta es PEQUENA, 300px, aunque la forma venga de las tarjetas de entrar de relleno generoso que se estilan a 380. El motivo es el contenido: 380 los pide una tarjeta con dos campos, un boton y un selector; aqui, cuando hay Google configurado, hay un logotipo, una linea y un boton redondo. Con aquellas medidas lo que sale no es una tarjeta, es una losa con tres cosas arriba. */ .tarjeta{ width:min(300px,90vw);padding:26px 24px;border-radius:14px; background:#fff;color:var(--tinta); display:flex;flex-direction:column;gap:20px; } /* El logo, centrado y solo. Sin etiqueta al lado y sin texto debajo: en esta pantalla no hay nada que elegir ni nada que leer, hay un boton. */ .marca-entrar{display:flex;justify-content:center;margin:0} .marca-entrar img{height:20px;width:auto;display:block} #entradaSub{margin:0;font-size:12px;line-height:1.5;color:var(--suave);text-align:center} #entradaSub:empty{display:none} /* El boton es un circulo, asi que centrarlo es cosa nuestra. */ #conGoogle{display:flex;justify-content:center} /* NUESTRO `*{box-sizing:border-box}` de arriba entra tambien en el boton de Google, y ahi rompe: su CSS esta escrito para content-box, que es el valor por defecto. En el boton de solo icono pone `width:18px; padding:10px` en la caja de la G, y con border-box eso son 18 - 20 = **cero**: el icono desaparece y queda un circulo vacio. Se veia solo en modo icono. Con texto, esa misma caja no lleva relleno, asi que 18px son 18px con las dos reglas y no pasaba nada. Se le devuelve su suposicion en su propio subarbol, y no se toca el reset. */ #botonGoogle *{box-sizing:content-box} /* 40px es lo mayor que ofrece GSI para el icono, asi que crecer es cosa del navegador. Es un SVG: escalarlo no lo emborrona, y el area de pulsado crece con el porque se escala el widget entero, no solo lo que se ve. */ #botonGoogle{transform:scale(1.3);transform-origin:center} .campo{display:flex;flex-direction:column;gap:5px} .campo-t{font-size:12.5px;font-weight:500;color:var(--suave)} .tarjeta input{ width:100%;padding:9px 12px;border:1px solid var(--linea-fuerte);border-radius:10px; background:#fff;color:var(--tinta);font:inherit; } .tarjeta input:focus-visible{outline:2px solid var(--tinta);outline-offset:1px} /* Boton de pildora y en el color de acento. Al pasar por encima se invierte: tinta de fondo y acento de letra. */ .tarjeta form{display:flex;flex-direction:column;gap:14px} .tarjeta form button{ width:100%;padding:7px 16px;border:1px solid var(--acento-puerta); border-radius:50px;background:var(--acento-puerta);color:var(--tinta); font-size:13px;font-weight:500; } .tarjeta form button:hover{background:var(--tinta);border-color:var(--tinta);color:var(--acento-puerta)} /* Con gap de por medio, un error vacio dejaria su hueco igual: por eso se esconde del todo cuando no dice nada. */ #fallo{color:var(--err);font-size:13px;line-height:1.4} /* Lo que no ha fallado no se pinta de rojo. */ #fallo.aviso{color:var(--suave)} #fallo:empty{display:none} @media (max-width:360px){ .tarjeta{padding:22px 20px} } .oculto{display:none!important} /* ---------- carpetas, filas y menus ---------- */ main{position:relative} .acciones{display:flex;gap:6px;margin:0 12px 14px} .acciones .nuevo{flex:1;margin:0} .icono{ padding:8px 10px;border:1px solid var(--borde);border-radius:8px; background:transparent;color:var(--fg-muted);font-size:12px; } .icono:hover{border-color:var(--borde-acento);color:var(--fg)} .carpeta,.chat{display:flex;align-items:center;border-radius:7px} .carpeta:hover,.chat:hover{background:var(--sidebar-hover)} .chat.sel{background:var(--sidebar-sel)} .carpeta-t,.chat-t{ flex:1;min-width:0;text-align:left;padding:7px 8px;border:0;background:transparent; color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .carpeta-t{font-weight:500;color:var(--fg)} .chat:hover .chat-t,.chat.sel .chat-t{color:var(--fg)} .dentro{margin-left:10px;border-left:1px solid var(--borde-acento);padding-left:4px} .dentro .vacio{padding:5px 8px;font-size:12px;color:var(--fg-extra)} /* El menu solo aparece al pasar por encima: en reposo la lista es una lista. */ .mas{ opacity:0;border:0;background:transparent;color:var(--fg-muted); padding:4px 8px;border-radius:6px;letter-spacing:.05em; } .carpeta:hover .mas,.chat:hover .mas,.chat.sel .mas{opacity:1} .mas:hover{background:var(--surface3);color:var(--fg)} .menu{ position:fixed;z-index:50;min-width:186px;padding:5px; background:var(--surface2);border:1px solid var(--borde);border-radius:9px; box-shadow:0 8px 26px rgba(0,0,0,.16); } .menu button{ display:block;width:100%;text-align:left;padding:7px 10px;border:0;border-radius:6px; background:transparent;color:var(--fg);font-size:13px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .menu button:hover{background:var(--surface3)} /* El rojo aparece cuando ya hay intencion, no antes: por eso vive en el menu. */ .menu button.peligro{color:var(--destructivo)} /* ---------- pensando: la animacion de Claude Code ---------- */ .pensando{ display:inline-flex;align-items:baseline;gap:8px;color:var(--fg-muted); } .glifo{ display:inline-block;width:1em;color:var(--acento-vivo); animation:latir 1.1s ease-in-out infinite; } @keyframes latir{ 0%,100%{opacity:.35;transform:scale(.9)} 50%{opacity:1;transform:scale(1.08)} } .reloj{font-size:12px;color:var(--fg-extra);font-variant-numeric:tabular-nums} /* Respeta a quien pide que no se mueva nada. */ @media (prefers-reduced-motion: reduce){ .glifo{animation:none;opacity:1} } /* ---------- tema: un solo icono, abajo a la derecha ---------- */ /* Flota sobre el area de conversacion, arriba a la derecha, lejos del sitio donde se escribe: se toca una vez cada muchos dias. Y arriba y no abajo porque abajo compartia esquina con la caja de escribir, que es lo que se usa siempre. */ .esquina{ position:fixed;right:20px;top:18px;z-index:20; display:flex;align-items:center;gap:8px; } .tema{ width:34px;height:34px;display:flex;align-items:center;justify-content:center; border:1px solid var(--borde);border-radius:50%; background:var(--surface0);color:var(--fg-muted); } .tema:hover{color:var(--fg);border-color:var(--borde-acento);background:var(--surface2)} /* Se ensena a donde vas, no donde estas: con tema claro, la luna. */ .icono-sol{display:none} html[data-tema="oscuro"] .icono-luna{display:none} html[data-tema="oscuro"] .icono-sol{display:block} /* ---------- panel de accesos ---------- */ /* Una capa sobre el chat y no una pantalla aparte: repartir cerebros es algo que se hace de paso, mirando una peticion que acaba de llegar, no una seccion donde uno se instala. */ .capa{ position:fixed;inset:0;z-index:60;display:flex;align-items:center; justify-content:center;padding:24px;background:rgba(0,0,0,.45); } .panel{ width:min(720px,100%);max-height:88vh;overflow-y:auto; background:var(--surface0);border:1px solid var(--borde);border-radius:12px; padding:20px 22px; } .panel-cab{display:flex;align-items:center;justify-content:space-between;gap:12px} .panel-cab h2{margin:0;font-size:14px;font-weight:500} .panel-nota{margin:6px 0 18px;font-size:12px;color:var(--fg-muted);line-height:1.5} .acc{border:1px solid var(--borde);border-radius:10px;padding:14px;margin-bottom:10px} /* Lo que espera respuesta se ve sin buscarlo. */ .acc.pide{border-color:var(--acento-vivo)} .acc-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .acc-quien{display:flex;flex-direction:column;min-width:0} .acc-quien b{font-weight:500} .acc-quien span{font-size:12px;color:var(--fg-muted);white-space:pre-wrap} .acc-cab select{ font:inherit;font-size:12px;padding:5px 8px;border-radius:7px; border:1px solid var(--borde);background:var(--surface2);color:var(--fg); } .acc-cerebros{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 10px} .acc-cerebros label,.acc-pie label{ display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-muted); } .acc-cerebros input,.acc-pie input{accent-color:var(--acento);margin:0} .acc-pie{display:flex;align-items:center;gap:6px;flex-wrap:wrap} /* La casilla de "puede repartir accesos" a la izquierda y los botones a la derecha: el primer boton empuja al resto. */ .acc-pie .icono:first-of-type{margin-left:auto} /* Aprobar es LA accion de una fila pendiente, asi que es la unica con color en toda esta pantalla. */ .icono.aprobar{border-color:var(--acento);color:var(--acento-vivo)} .icono.aprobar:hover{background:var(--acento);border-color:var(--acento);color:#fff} .icono.peligro{color:var(--destructivo)} .icono.peligro:hover{border-color:var(--destructivo);color:var(--destructivo)} .icono:disabled,.acc input:disabled{opacity:.45;cursor:default} .acc-aviso{font-size:12px;color:var(--fg-extra)} /* ---------- idioma ---------- */ /* Se ensenan las dos y se marca la activa, al reves que el tema. El tema tiene estado obvio nada mas mirar la pantalla; el idioma no: un "EN" solo no dice si es donde estas o donde irias. */ .idiomas{ display:flex;gap:2px;padding:3px;height:34px;align-items:center; border:1px solid var(--borde);border-radius:17px;background:var(--surface0); } .idiomas button{ border:0;border-radius:14px;background:transparent;color:var(--fg-extra); padding:4px 9px;font-size:11px;font-weight:600;letter-spacing:.06em; } .idiomas button:hover{color:var(--fg)} .idiomas button[aria-pressed="true"]{background:var(--surface2);color:var(--fg)} /* ---------- dialogo ---------- */ /* El de la casa, en lugar de prompt() y confirm(). Mismo peso de letra, mismo radio y mismos colores que el resto: los del navegador traen la tipografia del sistema y el nombre del dominio delante, y en medio de una pantalla que cuida hasta el peso de las letras se ven como lo que son, una ventana ajena. */ .dialogo{ width:min(420px,100%);background:var(--surface0);color:var(--fg); border:1px solid var(--borde);border-radius:14px;padding:22px 22px 18px; box-shadow:0 18px 50px rgba(0,0,0,.28); } .dialogo h3{margin:0;font-size:15px;font-weight:500;letter-spacing:-.01em} .dialogo p{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--fg-muted)} .dialogo input{ width:100%;margin-top:14px;padding:9px 12px;font:inherit; border:1px solid var(--borde);border-radius:9px; background:var(--surface2);color:var(--fg); } .dialogo input:focus{outline:none;border-color:var(--fg-extra)} .dlg-pie{display:flex;justify-content:flex-end;gap:8px;margin-top:18px} /* La accion principal es la unica solida de la pantalla: en un dialogo hay una sola cosa que hacer, y conviene que se vea cual. */ .dlg-si{ border:1px solid var(--fg);border-radius:8px;padding:7px 14px; background:var(--fg);color:var(--surface0);font-size:13px;font-weight:500; } .dlg-si:hover{opacity:.85} .dlg-si.peligro{background:var(--destructivo);border-color:var(--destructivo);color:#fff} /* El campo de renombrar ocupa exactamente el sitio del titulo que sustituye: si cambia de alto o de sangrado, la lista da un salto al empezar a editar. */ .chat-t.editando,.carpeta-t.editando{ font:inherit;border:1px solid var(--borde-acento);border-radius:6px; background:var(--surface0);color:var(--fg);padding:6px 7px; } .chat-t.editando:focus,.carpeta-t.editando:focus{outline:none;border-color:var(--fg-extra)} /* ---------- arrastrar una conversacion a un proyecto ---------- */ .chat{cursor:grab} .chat.arrastrando{opacity:.4} /* Mientras se arrastra, las zonas donde se puede soltar se insinuan; sin esto hay que adivinar si un proyecto acepta o no. */ body.arrastrando-chat .carpeta,body.arrastrando-chat .grupo{ outline:1px dashed var(--borde-acento);outline-offset:-1px;border-radius:7px; } .carpeta.soltar,.dentro.soltar,.grupo.soltar{ background:var(--sidebar-sel);outline:1px solid var(--acento-vivo); outline-offset:-1px;border-radius:7px; } .grupo{padding-top:4px;padding-bottom:8px} /* El motor, dentro del panel de accesos. Va separado por una linea y no por una tarjeta aparte: es una decision de la casa, como el reparto de cerebros, y sacarla a otra pantalla la escondia. */ .motor{ border-bottom:1px solid var(--borde); padding-bottom:16px;margin-bottom:18px; } .motor h3{margin:0 0 10px;font-size:13px;font-weight:500} .motor-fila{ display:flex;align-items:center;flex-wrap:wrap; gap:10px;margin:8px 0;font-size:12px;color:var(--fg-muted); } .motor-fila label{display:flex;align-items:center;gap:6px;cursor:pointer} .motor-fila input[type=text],.motor-fila select{min-width:190px} .motor-fila input[type=number]{width:90px} #motorAviso{font-size:12px;color:var(--fg-muted)} /* El aviso de que ha contestado el respaldo. Discreto pero presente: no es un error, es una degradacion, y una degradacion muda es la que no se arregla. */ .de-respaldo{ margin-top:8px;font-size:11px;color:var(--fg-muted); border-left:2px solid var(--borde);padding-left:8px; } /* La investigacion en marcha. Se ve como lo que es, una promesa con reloj: el aviso se lee entero y la fase va debajo, mas apagada, porque cambia sola y no hay que leerla cada vez. */ .investigando{ border-left:2px solid var(--acento,var(--borde));padding-left:10px; color:var(--fg);line-height:1.5; } .investigando-fase{ margin-top:6px;padding-left:10px;font-size:11px;color:var(--fg-muted); font-variant-numeric:tabular-nums; } /* El cuestionario de ingesta. Separado de la respuesta por una linea entera, porque es otra pregunta: la respuesta es para quien pregunto, esto es mantenimiento del brain y se decide con otra cabeza. */ .ingesta{ margin-top:16px;padding-top:12px;border-top:1px solid var(--borde); font-size:12px; } .ingesta.hecha{color:var(--fg-muted)} .ingesta-titulo{color:var(--fg);margin-bottom:8px} .ingesta-fila{ display:flex;gap:8px;align-items:flex-start; padding:4px 0;cursor:pointer;line-height:1.45; } .ingesta-fila input{margin-top:3px;flex:none} .ingesta-fila em{color:var(--fg-muted);font-style:normal} /* Corregir el texto antes de proponerlo. El boton es discreto y la caja nace plegada: la lista se lee de un vistazo, y doce cajas abiertas a la vez la convierten en un formulario. */ .ingesta-corregir{ background:none;border:none;padding:0 0 0 22px;margin:0 0 4px; font:inherit;font-size:11px;color:var(--fg-muted);cursor:pointer; text-decoration:underline;text-underline-offset:2px; } .ingesta-corregir:hover{color:var(--fg)} .ingesta-caja,.ingesta-destino{ display:block;width:calc(100% - 22px);margin:0 0 6px 22px; background:var(--fondo);color:var(--fg); border:1px solid var(--borde);border-radius:6px;padding:6px 8px; font:inherit;font-size:12px;line-height:1.45;resize:vertical; } .ingesta-caja:focus,.ingesta-destino:focus{outline:none;border-color:var(--fg-muted)} .ingesta-pie{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap} .ingesta-btn{ background:none;border:1px solid var(--borde);border-radius:6px; padding:5px 10px;font:inherit;font-size:12px;color:var(--fg);cursor:pointer; } .ingesta-btn:hover:not(:disabled){border-color:var(--fg-muted)} .ingesta-btn:disabled{opacity:.5;cursor:default} .ingesta-nota{color:var(--fg-muted)} /* Las pestanas del panel de admin. Sin caja ni sombra: una linea abajo basta para decir cual esta abierta, y el panel ya tiene bastante marco. */ .pestanas{display:flex;gap:4px;margin:10px 0 16px;border-bottom:1px solid var(--borde)} .pestana{ background:none;border:none;border-bottom:2px solid transparent; padding:8px 12px;margin-bottom:-1px;cursor:pointer; font:inherit;font-size:13px;color:var(--fg-muted); } .pestana:hover{color:var(--fg)} .pestana.activa{color:var(--fg);border-bottom-color:var(--fg)} /* El registro. Una fila por turno, legible de un vistazo y sin tabla: la tabla obliga a columnas fijas y aqui la pregunta es lo unico que importa de ancho. */ .turno{ padding:8px 0;border-bottom:1px solid var(--borde); display:flex;gap:10px;align-items:baseline;font-size:12px; } .turno .cuando{color:var(--fg-muted);white-space:nowrap;font-variant-numeric:tabular-nums} .turno .consulta{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .turno .marca{ color:var(--fg-muted);white-space:nowrap;font-size:11px; border:1px solid var(--borde);border-radius:10px;padding:1px 7px; } .turno .marca.subio{border-color:var(--fg-muted);color:var(--fg)} .turno .marca.fallo{border-color:var(--destructivo);color:var(--destructivo)} .hilo-fila{ display:flex;gap:10px;align-items:baseline;padding:6px 0;font-size:12px; border-bottom:1px solid var(--borde); } .hilo-fila .titulo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hilo-fila button{font-size:11px} /* El hilo abierto. Se marca con un borde a la izquierda para que se vea que es material de otra persona y no una conversacion propia. */ #regHilo{margin-top:14px;border-left:2px solid var(--destructivo);padding-left:12px} #regHilo .aviso{font-size:11px;color:var(--destructivo);margin-bottom:8px} #regHilo .msg{margin:8px 0;font-size:12px} #regHilo .msg .quien{color:var(--fg-muted);font-size:11px} /* El secreto de un token recien creado. Se ensena una sola vez, asi que se pinta con el mismo borde de aviso que el hilo ajeno: hay que mirarlo. */ #apiSecreto{margin:10px 0;border-left:2px solid var(--destructivo);padding-left:12px} #apiSecreto .aviso{font-size:11px;color:var(--destructivo);margin:0 0 6px} #apiSecreto code{font-size:12px;word-break:break-all;user-select:all} #apiCerebros label{font-size:11px} /* Cada token es un bloque, no una fila: lleva sus propias casillas de cerebro y su boton de guardar, porque el alcance se cambia en caliente. */ .token{border-bottom:1px solid var(--borde);padding:6px 0 10px} .token .hilo-fila{border-bottom:none;padding-bottom:2px} .token .motor-fila{margin:2px 0 0} /* Las cifras del gasto. La de tarifa oficial va grande porque es la que se mira; las otras dos la acompanan. */ .gasto-cifras{display:flex;gap:24px;flex-wrap:wrap;margin:10px 0 14px} .gasto-cifras .cifra .valor{font-size:18px;font-variant-numeric:tabular-nums} .gasto-cifras .cifra.grande .valor{font-size:26px} .gasto-cifras .cifra.bueno .valor{color:var(--acento)} .gasto-cifras .cifra .etiqueta{font-size:11px;color:var(--fg-muted);margin-top:2px} #gastoDetalle .panel-nota{margin:12px 0 4px}