/* ==========================================================================
   TERRA — asistente. Widget flotante y pantalla completa comparten átomos.
   ========================================================================== */

/* ------------------------------------------------------------- lanzador */
.terra-lanza{
  position:fixed; right:var(--margen); bottom:48px; z-index:95;
  display:flex; align-items:center; gap:12px;
  padding:11px 20px 11px 13px;
  background:var(--caliza); color:var(--grafito);
  transition:transform .55s var(--e-cine), opacity .4s, background .5s var(--e-cine);
}
.terra-lanza:hover{ transform:translateY(-3px); background:#fff; }
.terra-lanza.oculto{ opacity:0; pointer-events:none; transform:translateY(10px); }
.terra-lanza__g{ width:26px; height:26px; color:var(--ocre); flex:none; }
.terra-lanza__g svg{ width:100%; height:100%; }
.terra-lanza__t b{
  display:block; font-family:var(--f-cota); font-size:11px;
  letter-spacing:.24em; font-weight:400;
}
.terra-lanza__t span{
  display:block; font-family:var(--f-cota); font-size:8px;
  letter-spacing:.22em; color:#6b6355;
}

/* ---------------------------------------------------------------- panel */
.terra-panel{
  position:fixed; right:var(--margen); bottom:48px; z-index:96;
  width:min(400px, calc(100vw - var(--margen) * 2));
  height:min(620px, calc(100vh - 118px));
  display:grid; grid-template-rows:auto 1fr auto auto auto;
  background:var(--grafito-2);
  border:1px solid var(--linea);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(233,224,206,.05);
  opacity:0; transform:translateY(16px) scale(.99);
  transition:opacity .5s var(--e-cine), transform .55s var(--e-salida);
}
.terra-panel.abierto{ opacity:1; transform:none; }

/* ⚠ **Esto arregla un fallo que la v7 también tiene.**
   El marcado trae `<section class="terra-panel" hidden>`, y el atributo `hidden`
   vale `display:none`… pero eso lo pone la hoja del navegador, que pierde contra
   cualquier clase. Como `.terra-panel` declara `display:grid`, el panel estaba
   **siempre presente**: invisible por la opacidad, pero ahí, ocupando su
   rectángulo en la esquina inferior derecha y tragándose los clics.

   El síntoma era que pulsar el lanzador de TERRA no hacía nada: el clic no
   llegaba al botón, llegaba a un panel transparente que estaba encima. Se
   encontró preguntándole al navegador qué elemento hay en el punto del botón;
   leyendo el CSS no se ve, porque las dos reglas parecen correctas por separado.

   Y de paso, mientras el panel se está cerrando —medio segundo de transición—
   tampoco debe recibir clics. */
.terra-panel[hidden]{ display:none; }
.terra-panel:not(.abierto){ pointer-events:none; }
.terra-panel::before{
  content:""; position:absolute; top:0; left:14%; right:14%; height:1px;
  background:linear-gradient(90deg, transparent, var(--ocre), transparent);
}

.terra-panel__c{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px 13px; border-bottom:1px solid var(--linea-2);
}
.terra-panel__c b{ font-family:var(--f-cota); font-size:12px; letter-spacing:.24em;
                   font-weight:400; color:var(--caliza); display:block; }
.terra-panel__c span{ font-size:8px; letter-spacing:.2em; color:var(--tinta-3); }
.terra-panel__acc{ display:flex; gap:6px; }
.terra-icono{
  width:28px; height:28px; display:grid; place-items:center;
  border:1px solid var(--linea-2); color:var(--tinta-3);
  transition:color .4s, border-color .4s;
}
.terra-icono svg{ width:14px; height:14px; }
.terra-icono:hover{ color:var(--ocre-hi); border-color:rgba(165,25,28,.42); }

/* ----------------------------------------------------------------- hilo */
.terra-hilo, #hilo{
  min-height:0; overflow-y:auto; padding:18px 18px 6px;
}
.terra-hilo::-webkit-scrollbar, #hilo::-webkit-scrollbar{ width:5px; }
.terra-hilo::-webkit-scrollbar-thumb, #hilo::-webkit-scrollbar-thumb{ background:var(--grafito-humo); }

.tmsj{ display:grid; grid-template-columns:22px 1fr; gap:10px; margin-bottom:18px; }
.tmsj__i{ font-size:8.5px; letter-spacing:.1em; color:var(--tinta-3); padding-top:3px; }
.tmsj--yo .tmsj__i{ color:rgba(165,25,28,.55); }
.tmsj__c{ min-width:0; }
.tmsj__e{ display:block; font-size:8px; letter-spacing:.24em; color:var(--ocre-hi); margin-bottom:6px; }
.tmsj--yo .tmsj__e{ color:var(--tinta-3); }
.tmsj__t{ font-family:var(--f-display); font-size:19px; line-height:1.24;
          color:var(--caliza); margin-bottom:8px; }
.tmsj__p{ font-size:13.6px; line-height:1.62; color:var(--tinta-2); margin:0 0 8px; }
.tmsj--yo .tmsj__p{
  display:inline-block; color:var(--caliza);
  padding:8px 13px; background:rgba(165,25,28,.11);
  border:1px solid rgba(165,25,28,.22);
}
.tmsj__l{ list-style:none; margin:0 0 9px; padding:0; }
.tmsj__l li{
  position:relative; padding-left:14px; margin-bottom:5px;
  font-size:12.8px; line-height:1.55; color:var(--tinta-2);
}
.tmsj__l li::before{
  content:""; position:absolute; left:0; top:.66em; width:6px; height:1px; background:var(--acero);
}
.tmsj__a{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.taccion{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border:1px solid rgba(165,25,28,.4);
  background:rgba(165,25,28,.08);
  font-family:var(--f-cota); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ocre-hi);
  transition:background .45s var(--e-cine), color .45s, border-color .45s, transform .45s var(--e-cine);
}
.taccion:hover{ background:var(--ocre); color:#F2ECE0; border-color:var(--ocre); transform:translateY(-1px); }
.tmsj__f{ display:block; margin-top:9px; font-size:8px; letter-spacing:.2em; color:var(--tinta-3); }

.tpensando{ display:flex; gap:6px; padding:5px 0; }
.tpensando i{ width:4px; height:4px; background:var(--ocre); animation:tpunto 1.05s ease-in-out infinite; }
.tpensando i:nth-child(2){ animation-delay:.14s; }
.tpensando i:nth-child(3){ animation-delay:.28s; }
@keyframes tpunto{ 0%,100%{ opacity:.24; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }

/* Opciones del guion de calificación */
.topciones{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.topcion{
  padding:9px 14px; border:1px solid var(--linea);
  font-size:12.6px; color:var(--tinta-2); text-align:left;
  transition:color .4s, border-color .4s, background .4s, transform .4s var(--e-cine);
}
.topcion:hover{
  color:var(--grafito); background:var(--caliza); border-color:var(--caliza);
  transform:translateY(-2px);
}

/* --------------------------------------------------------- sugerencias */
.tsug{ padding:10px 18px 12px; border-top:1px solid var(--linea-2);
       display:flex; flex-wrap:wrap; gap:6px; }
.tsug__t{ width:100%; font-size:8px; letter-spacing:.24em; color:var(--tinta-3); margin-bottom:3px; }
.tchip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 13px; border:1px solid var(--linea-2);
  font-size:12.2px; color:var(--tinta-2); text-align:left; line-height:1.3;
  transition:color .45s var(--e-cine), border-color .45s, background .45s, transform .45s var(--e-cine);
}
.tchip__n{ font-size:8px; color:var(--ocre-hi); }
.tchip:hover{ color:var(--caliza); border-color:rgba(165,25,28,.44);
              background:rgba(165,25,28,.07); transform:translateY(-1px); }

/* -------------------------------------------------------------- entrada */
.terra-form, #form-terra{
  display:flex; align-items:center; gap:10px;
  padding:12px 12px 12px 18px; border-top:1px solid var(--linea-2);
}
.terra-form input, #form-terra input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  font-size:14px; color:var(--tinta); padding:8px 0;
}
.terra-form input::placeholder, #form-terra input::placeholder{ color:var(--tinta-3); }
.terra-form button, #form-terra button{
  width:36px; height:36px; flex:none; display:grid; place-items:center;
  background:var(--ocre); color:#F2ECE0;
  transition:background .4s var(--e-cine), transform .4s var(--e-cine);
}
.terra-form button svg, #form-terra button svg{ width:16px; height:16px; }
.terra-form button:hover, #form-terra button:hover{ background:var(--ocre-hi); transform:translateX(2px); }

.terra-aviso{
  padding:0 18px 13px; font-size:7.5px; letter-spacing:.16em; color:var(--tinta-3); margin:0;
}

/* ==========================================================================
   Pantalla completa (terra.html)
   ========================================================================== */
body.terra-pantalla{ height:100%; overflow:hidden; }
.tp{
  position:fixed; inset:0;
  display:grid; grid-template-columns:42vw 1fr;
}
.tp__escena{
  position:relative; overflow:hidden;
  background:radial-gradient(circle at 44% 52%, #23201a 0%, #0f0e0c 70%);
}
#escena-terra{ position:absolute; inset:0; width:100%; height:100%; }
.tp__escena::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(15,14,12,0) 60%, rgba(15,14,12,.9) 100%);
}
.tp__marca{
  position:absolute; top:26px; left:30px; z-index:3; line-height:1.2;
}
.tp__marca img{ height:26px; width:auto; margin-bottom:6px; }
.tp__marca span{ font-family:var(--f-cota); font-size:8px; letter-spacing:.28em; color:var(--tinta-3); }
.tp__volver{
  position:absolute; top:28px; right:32px; z-index:3;
  font-family:var(--f-cota); font-size:9px; letter-spacing:.18em; color:var(--tinta-3);
  padding:8px 13px; border:1px solid var(--linea-2); background:rgba(15,14,12,.6);
  transition:color .4s, border-color .4s;
}
.tp__volver:hover{ color:var(--ocre-hi); border-color:rgba(165,25,28,.4); }
.tp__estado{
  position:absolute; left:30px; bottom:26px; z-index:3;
  display:flex; align-items:center; gap:11px;
  font-family:var(--f-cota); font-size:9px; letter-spacing:.2em; color:var(--tinta-2);
}
.tp__pip{ width:6px; height:6px; background:#9ac48b; animation:tlat 2.4s ease-in-out infinite; }
@keyframes tlat{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

.tp__panel{
  position:relative; z-index:5; min-height:0; min-width:0;
  display:grid; grid-template-rows:auto 1fr auto auto auto;
  margin:20px 20px 20px 0;
  border:1px solid var(--linea);
  background:var(--grafito-2);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(233,224,206,.05);
  overflow:hidden;
}
.tp__cab{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:18px 24px 15px; border-bottom:1px solid var(--linea-2);
}
.tp__id b{ font-family:var(--f-cota); font-size:13px; letter-spacing:.26em;
           font-weight:400; color:var(--caliza); }
.tp__id span{ display:block; font-family:var(--f-cota); font-size:8px;
              letter-spacing:.2em; color:var(--tinta-3); margin-top:3px; }
.tp__cab-d{ display:flex; align-items:center; gap:9px; }
.pastilla{
  padding:4px 10px; border:1px solid var(--linea-2);
  font-family:var(--f-cota); font-size:8.5px; letter-spacing:.18em; color:var(--acero-hi);
}
.pastilla--ocre{ color:var(--ocre-hi); border-color:rgba(165,25,28,.34); }

#hilo{ padding:24px 24px 8px; }
.tp .tsug{ padding:12px 24px 14px; }
.tp #form-terra{ padding:14px 14px 14px 24px; }
.tp .terra-aviso{ padding:0 24px 16px; }

/* Panel de conexión */
#cfg{
  position:absolute; inset:auto 0 0 0; z-index:20;
  transform:translateY(102%); transition:transform .5s var(--e-salida);
  border-top:1px solid var(--linea);
  background:rgba(20,19,15,.98); padding:20px 24px 22px;
}
#cfg.abierto{ transform:none; }
#cfg h4{ font-family:var(--f-cota); font-size:11px; letter-spacing:.22em;
         color:var(--caliza); margin-bottom:8px; }
#cfg p{ font-size:12.4px; color:var(--tinta-2); line-height:1.55; max-width:66ch; }
#cfg-form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
           gap:9px; margin-top:12px; }
#cfg input, #cfg select{
  padding:10px 12px; border:1px solid var(--linea-2); background:rgba(233,224,206,.03);
  color:var(--tinta); font-family:var(--f-cota); font-size:11px; outline:none;
}
#cfg input:focus, #cfg select:focus{ border-color:rgba(165,25,28,.5); }
#cfg option{ background:var(--grafito-2); }
.cfg__acc{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; }
#cfg-estado{ font-family:var(--f-cota); font-size:9px; letter-spacing:.16em; color:var(--ocre-hi); }

/* ------------------------------------------------------------------ móvil */
@media (max-width: 1024px){
  .tp{ position:relative; inset:auto; grid-template-columns:1fr; height:auto; min-height:100dvh; }
  body.terra-pantalla{ overflow:auto; }
  .tp__escena{ height:36vh; min-height:240px; }
  .tp__panel{ margin:0; min-height:64vh; }
}
@media (max-width: 620px){
  .terra-panel{
    right:0; left:0; bottom:0; width:100vw;
    height:min(86vh, 100dvh - 40px);
    border-left:0; border-right:0; border-bottom:0;
  }
  .terra-lanza{ right:16px; bottom:42px; padding:10px 14px 10px 11px; }
  .terra-lanza__t span{ display:none; }
  .tp__id span{ display:none; }
}