/* Identidad Grupo Terravinci: marrón #786C64, EB Garamond (títulos) + Inter (texto).
   Tokens de /opt/terravinci-design-system/public/tokens.css (data-brand="terravinci"). */
:root {
  --marca: #786C64;
  --marca-oscuro: #5C524A;
  --marca-suave: #F0EBE7;
  --boton: #786C64;
  --boton-hover: #5C524A;
  --dorado: #C9A96E;
  --fondo: #FAF7F5;
  --superficie: #ffffff;
  --texto: #0D0B0A;
  --suave: #6B6259;
  --borde: #E4DDD7;
  --usuario: #F0EBE7;
  --peligro: #C0392B;
  --aviso: #B86C00;
  --sombra: 0 1px 3px rgba(43, 33, 25, .08);
  --titulos: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --cuerpo: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marca: #C9B9AC; --marca-oscuro: #E0D4CA; --boton: #786C64; --boton-hover: #5C524A; --marca-suave: #2A2420; --dorado: #D4B886;
    --fondo: #13110F; --superficie: #1C1916; --texto: #EDE8E3; --suave: #ABA096;
    --borde: #332D28; --usuario: #2A2420; --peligro: #FF8A80; --aviso: #FFCC66;
    --sombra: none;
  }
}
:root[data-theme="dark"] {
  --marca: #C9B9AC; --marca-oscuro: #E0D4CA; --boton: #786C64; --boton-hover: #5C524A; --marca-suave: #2A2420; --dorado: #D4B886;
  --fondo: #13110F; --superficie: #1C1916; --texto: #EDE8E3; --suave: #ABA096;
  --borde: #332D28; --usuario: #2A2420; --peligro: #FF8A80; --aviso: #FFCC66;
  --sombra: none;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.55 var(--cuerpo); background: var(--fondo); color: var(--texto); height: 100vh; height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--titulos); font-weight: 600; letter-spacing: .01em; }

/* Barra superior: clara, con el logo del grupo y una línea dorada */
.barra { display: flex; align-items: center; gap: 14px; padding: 10px 20px; background: var(--superficie); color: var(--texto); border-bottom: 1px solid var(--borde); box-shadow: inset 0 -2px 0 var(--dorado); }
.barra .logo img { display: block; height: 34px; width: auto; }
.titulo-app { font-family: var(--titulos); font-size: 20px; font-weight: 600; color: var(--marca); padding-left: 14px; border-left: 1px solid var(--borde); line-height: 1.2; }
.barra .yo { margin-left: auto; font-size: 13px; color: var(--suave); }
.barra .salir { color: var(--marca); font-size: 13px; font-weight: 500; text-decoration: none; }
.barra .salir:hover { text-decoration: underline; }
.icono { background: none; border: 0; color: var(--marca); font-size: 20px; cursor: pointer; display: none; }

.cuerpo { flex: 1; display: flex; min-height: 0; }
.lateral { width: 260px; border-right: 1px solid var(--borde); background: var(--superficie); padding: 14px; overflow-y: auto; }
.lateral ul { list-style: none; padding: 0; margin: 12px 0 0; }
.lateral li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--suave); }
.lateral li:hover { background: var(--fondo); color: var(--texto); }
.lateral li.activa { background: var(--marca-suave); color: var(--texto); font-weight: 500; box-shadow: inset 3px 0 0 var(--marca); }
#nueva { width: 100%; }

.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mensajes { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.msj { max-width: 900px; padding: 10px 14px; border-radius: 10px; background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra); white-space: pre-wrap; overflow-wrap: anywhere; }
.msj.user { align-self: flex-end; background: var(--usuario); border-color: transparent; box-shadow: none; }
.msj .agente { display: block; font-size: 11px; font-weight: 600; color: var(--marca); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .08em; }
.msj table { border-collapse: collapse; margin: 6px 0; font-size: 13px; display: block; overflow-x: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.msj td, .msj th { border: 1px solid var(--borde); padding: 3px 8px; }
.msj th { background: var(--fondo); font-weight: 600; }
.propuesta { max-width: 900px; border: 1px solid var(--borde); border-left: 4px solid var(--dorado); border-radius: 10px; padding: 12px 14px; background: var(--superficie); box-shadow: var(--sombra); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.propuesta .titulo { flex: 1 1 260px; }
.propuesta .estado { font-size: 12px; color: var(--suave); }
.propuesta.frena { border-left-color: var(--peligro); }

.entrada { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--borde); background: var(--superficie); }
.entrada textarea { flex: 1; font: inherit; padding: 9px 12px; border: 1.5px solid var(--borde); border-radius: 8px; resize: vertical; background: var(--fondo); color: var(--texto); outline: none; }
.entrada textarea:focus { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 15%, transparent); }

.boton { background: var(--boton); color: #fff; border: 1.5px solid var(--boton); border-radius: 8px; padding: 8px 16px; font: inherit; font-weight: 600; letter-spacing: .01em; cursor: pointer; text-decoration: none; display: inline-block; transition: background .15s, border-color .15s; }
.boton:hover { background: var(--boton-hover); border-color: var(--boton-hover); }
.boton:focus-visible, .secundario:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }
.boton:disabled { opacity: .5; cursor: default; }
.boton.peligro { background: #C0392B; border-color: #C0392B; }
.boton.peligro:hover { background: #A93226; border-color: #A93226; }
.secundario { background: none; border: 1.5px solid var(--marca); border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 500; color: var(--marca); cursor: pointer; text-decoration: none; }
.secundario:hover { background: var(--marca-suave); }

.bienvenida { max-width: 700px; color: var(--suave); }
.bienvenida h2 { color: var(--marca); font-size: 28px; margin: 8px 0 4px; }
.bienvenida li { margin: 4px 0; }
.nota { font-size: 13px; border-left: 3px solid var(--dorado); padding-left: 10px; }
.pensando { color: var(--suave); font-style: italic; }
.error { color: var(--peligro); }

dialog { border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--texto); max-width: 480px; width: calc(100% - 32px); }
dialog h3 { color: var(--marca); font-size: 22px; margin-top: 4px; }
dialog::backdrop { background: rgba(20, 15, 12, .45); }
dialog menu { display: flex; gap: 8px; justify-content: flex-end; padding: 0; }

/* Ingreso */
body.ingreso { align-items: center; justify-content: center; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-top: 3px solid var(--dorado); border-radius: 12px; padding: 36px 32px; max-width: 440px; margin: 16px; text-align: center; box-shadow: 0 8px 24px rgba(43, 33, 25, .08); }
.logo-ingreso img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 20px; }
.tarjeta h1 { color: var(--marca); font-size: 28px; margin: 0 0 8px; }
.tarjeta p { color: var(--suave); }
.aviso { color: var(--peligro) !important; }

@media (max-width: 760px) {
  .icono { display: block; }
  .barra { padding: 10px 16px; gap: 10px; }
  .barra .logo img { height: 26px; }
  .titulo-app { font-size: 17px; padding-left: 10px; }
  .barra .yo { display: none; }
  .barra .salir { margin-left: auto; }
  .lateral { position: fixed; top: 52px; bottom: 0; left: 0; z-index: 5; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
  .lateral.abierta { transform: none; }
  .mensajes { padding: 12px 16px; }
  .entrada { padding: 12px 16px; }
}