/* SWITCH CRM · estilos de los agregados de app2.js */

/* ================= TABLERO DEL EQUIPO ================= */

/* Bajada: el renglon que explica de que va cada panel */
.bajada{color:var(--tx3);font-size:.7rem;line-height:1.55;margin:0 0 .9rem}

/* --- Tejas de pendientes: un numero grande que se toca --- */
.tejas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));gap:.55rem}
.teja{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;
  background:var(--b3);border:1px solid var(--bd);border-left:2px solid var(--or);
  padding:.75rem .8rem;cursor:pointer;text-align:left;min-width:0;
  border-radius:var(--r);transition:all .18s var(--ease)}
.teja b{font-family:var(--fd);font-size:1.5rem;line-height:1;color:var(--or)}
.teja span{font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx3);line-height:1.35;overflow-wrap:anywhere}
.teja.grave{border-left-color:var(--alto)}
.teja.grave b{color:var(--alto)}
.teja:hover{border-color:var(--bd2);transform:translateY(-1px)}
.teja.activa{border-color:var(--or);background:rgba(255,106,0,.07)}
.teja.grave.activa{border-color:var(--alto);background:rgba(255,77,77,.07)}
:root[data-tema="claro"] .teja{box-shadow:0 1px 2px rgba(17,20,24,.07),0 6px 18px rgba(17,20,24,.06)}
:root[data-tema="claro"] .teja:hover{box-shadow:0 2px 5px rgba(17,20,24,.10),0 10px 26px rgba(17,20,24,.11)}
:root[data-tema="oscuro"] .teja{box-shadow:0 1px 2px rgba(0,0,0,.3)}

/* --- Tabla de posiciones --- */
.puesto{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.8rem;align-items:center;
  background:var(--b3);border:1px solid var(--bd);padding:.75rem .85rem;margin-bottom:.5rem;border-radius:var(--r)}
.puesto .pos{font-family:var(--fd);font-size:1.1rem;color:var(--tx3);min-width:1.4rem;text-align:center}
/* Las filas sin numero de puesto son de dos columnas: si usan la grilla de
   tres, la primera queda "auto" y el texto largo revienta la pantalla. */
.puesto.dos{grid-template-columns:minmax(0,1fr) auto}
.puesto .quien{min-width:0}
.puesto .quien strong{display:block;font-size:.9rem;overflow-wrap:anywhere}
.puesto .quien small{color:var(--tx3);display:block;margin-top:.3rem;font-size:.62rem;line-height:1.5;overflow-wrap:anywhere}
.barra-pts{height:3px;background:var(--bd);margin:.45rem 0 0;border-radius:99px;overflow:hidden}
.barra-pts i{display:block;height:100%;background:var(--or);border-radius:99px;transition:width .4s var(--ease)}
.puesto .pts{text-align:right;min-width:0}
.puesto .pts b{display:block;font-family:var(--fd);font-size:1.25rem;line-height:1;color:var(--tx2)}
.puesto .pts span{font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.puesto.lider{border-color:rgba(255,106,0,.45);border-left:2px solid var(--or)}
.puesto.lider .pos,.puesto.lider .pts b{color:var(--or)}
:root[data-tema="claro"] .puesto{box-shadow:0 1px 2px rgba(17,20,24,.06)}

/* --- Novedades --- */
.nov{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:start;
  padding:.6rem .2rem;border-bottom:1px solid var(--bd)}
.nov:last-child{border-bottom:0}
.nov[data-novp]{cursor:pointer}
.nov[data-novp]:hover strong{color:var(--or)}
.nov>div{min-width:0;font-size:.78rem;line-height:1.5;overflow-wrap:anywhere}
.nov small{display:block;color:var(--tx3);font-size:.62rem;margin-top:.2rem}
.nov.venta .et{color:var(--ok);border-color:rgba(55,194,106,.45)}
.nov.peritaje .et{color:var(--medio);border-color:rgba(255,176,32,.45)}
.nov.consulta .et{color:var(--or);border-color:rgba(255,106,0,.45)}

@media(max-width:430px){
  .tejas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .teja b{font-size:1.25rem}
  .puesto{grid-template-columns:auto minmax(0,1fr);row-gap:.5rem}
  .puesto.dos{grid-template-columns:minmax(0,1fr)}
  .puesto .pts{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:.4rem}
  .puesto.dos .pts{grid-column:1}
  .puesto .pts b{font-size:1rem}
}

/* ================= LATERAL DE VERDAD LATERAL =================
   Antes .cuerpo centraba todo con max-width, asi que el lateral
   quedaba flotando en el medio y sobraba pantalla a los costados.
   Ahora el lateral va pegado al borde y el contenido usa el resto. */
@media(min-width:901px){
  .cuerpo{max-width:none;margin:0;grid-template-columns:252px minmax(0,1fr)}
  /* El contenido arranca pegado al lateral y usa todo el resto: nada de
     centrarlo, que dejaba una franja muerta entre el menu y los paneles. */
  main{max-width:none;margin:0;padding:1.3rem clamp(1.1rem,2vw,2.2rem) 3rem}
}

/* --- Buscador global --- */
.buscador{position:relative;padding:0 .35rem .8rem;flex:none}
.buscador input{font-size:.78rem;padding:.6rem .75rem;border-radius:var(--rm)}
.buscador input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.5)}
.resultados{position:absolute;left:.35rem;right:.35rem;top:calc(100% - .5rem);z-index:80;
  background:var(--b2);border:1px solid var(--bd2);border-radius:var(--rm);
  max-height:min(60vh,420px);overflow-y:auto;padding:.3rem}
:root[data-tema="claro"] .resultados{box-shadow:0 12px 34px rgba(17,20,24,.16)}
:root[data-tema="oscuro"] .resultados{box-shadow:0 12px 34px rgba(0,0,0,.5)}
.resultados .res{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:.5rem .6rem;border-radius:var(--rs);color:var(--tx2);font:inherit;font-size:.74rem;line-height:1.45}
.resultados .res:hover,.resultados .res:focus-visible{background:var(--or-soft);color:var(--or);outline:none}
.resultados .res strong{display:block;color:var(--tx);font-size:.78rem}
.resultados .res:hover strong{color:var(--or)}
.resultados .res small{display:block;color:var(--tx3);font-size:.62rem;margin-top:.12rem}
.resultados .rotulo-res{font-size:.5rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tx3);padding:.55rem .6rem .25rem}
.resultados .nada{padding:.9rem .6rem;color:var(--tx3);font-size:.72rem;text-align:center}

/* --- Rotulo que pliega su grupo --- */
nav.menu .rotulo.plegable{display:flex;align-items:center;justify-content:space-between;gap:.4rem;
  cursor:pointer;user-select:none;border-radius:var(--rs);transition:color .18s var(--ease)}
nav.menu .rotulo.plegable:hover{color:var(--tx2)}
nav.menu .rotulo.plegable i{font-style:normal;width:.6rem;height:.6rem;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s var(--ease)}
nav.menu .rotulo.plegable.cerrado i{transform:rotate(-45deg) translate(-1px,1px)}
.sub.plegado{display:none}

/* --- Cuadritos: cuando el numero es cero, que no griten --- */
.kpi.cero{border-left-color:var(--bd2);opacity:.72}
.kpi.cero b{color:var(--tx3)}
:root[data-tema="claro"] .kpi.cero{box-shadow:none}

/* --- Aviso de datos nuevos --- */
.nuevo-dato{position:fixed;left:50%;bottom:1.1rem;transform:translate(-50%,140%);z-index:90;
  display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem .6rem 1rem;
  background:var(--b2);border:1px solid var(--or);border-radius:999px;
  font-size:.74rem;color:var(--tx);transition:transform .3s var(--ease);max-width:calc(100vw - 2rem)}
.nuevo-dato.visible{transform:translate(-50%,0)}
:root[data-tema="claro"] .nuevo-dato{box-shadow:0 10px 30px rgba(17,20,24,.18)}
:root[data-tema="oscuro"] .nuevo-dato{box-shadow:0 10px 30px rgba(0,0,0,.55)}
.nuevo-dato button{flex:none;min-height:32px;padding:.4rem .9rem;font-size:.58rem}

/* ================= DESPLEGABLES CON NUESTRA CARA =================
   El <select> de verdad sigue ahi, invisible: es el que vale.
   Arriba dibujamos uno con la estetica de Switch. */
.sel{position:relative;width:100%;min-width:0}
.sel>select{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;
  border:0;padding:0;margin:0}
.sel-boton{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;
  background-color:var(--b3);border:1px solid var(--bd);border-radius:var(--r);color:var(--tx);
  font:inherit;font-size:.83rem;padding:.6rem .7rem;min-height:40px;cursor:pointer;text-align:left;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
:root[data-tema="claro"] .sel-boton{background-color:#fff}
.sel-boton:hover{border-color:var(--bd2)}
.sel-boton:focus-visible,.sel.abierto .sel-boton{outline:none;border-color:var(--or);
  box-shadow:0 0 0 3px rgba(255,106,0,.14)}
.sel-valor{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sel-boton i{flex:none;width:.5rem;height:.5rem;border-right:1.6px solid var(--or);
  border-bottom:1.6px solid var(--or);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .22s var(--ease)}
.sel.abierto .sel-boton i{transform:rotate(-135deg) translate(-3px,-3px)}

.sel-lista{position:absolute;left:0;right:0;top:calc(100% + .3rem);z-index:85;display:none;
  background:var(--b2);border:1px solid var(--or);border-radius:var(--r);padding:.25rem;
  max-height:min(52vh,300px);overflow-y:auto;
  transform-origin:top center;animation:selAbre .16s var(--ease)}
.sel.abierto .sel-lista{display:block}
.sel.arriba .sel-lista{top:auto;bottom:calc(100% + .3rem);transform-origin:bottom center}
@keyframes selAbre{from{opacity:0;transform:translateY(-4px) scaleY(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.sel-lista{animation:none}.sel-boton i{transition:none}}
:root[data-tema="claro"] .sel-lista{box-shadow:0 12px 34px rgba(17,20,24,.18)}
:root[data-tema="oscuro"] .sel-lista{box-shadow:0 12px 34px rgba(0,0,0,.55)}

.sel-op{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  color:var(--tx2);font:inherit;font-size:.8rem;line-height:1.45;padding:.55rem .65rem;
  border-radius:var(--rs);white-space:normal;overflow-wrap:anywhere;transition:background .14s var(--ease)}
.sel-op:hover,.sel-op:focus-visible{background:var(--or-soft);color:var(--or);outline:none}
.sel-op.elegida{color:var(--or);font-weight:700}
.sel-op.elegida::after{content:"";float:right;width:.42rem;height:.75rem;margin:.1rem .1rem 0 .4rem;
  border-right:1.6px solid var(--or);border-bottom:1.6px solid var(--or);transform:rotate(45deg)}

/* El .sel envuelve al select, asi que tiene que heredar como se acomodaba
   el select: en la barra de filtros iban uno al lado del otro, no apilados. */
.barra .sel{width:auto;min-width:140px;flex:0 1 auto}
.barra .sel-boton{white-space:nowrap}
.campos .sel{width:100%}

/* En las filas el desplegable no tiene que estirarse a lo ancho */
.acc .sel{width:auto;min-width:150px}
.acc .sel-boton{font-size:.72rem;padding:.5rem .6rem;min-height:36px}
@media(max-width:430px){.acc .sel{width:100%;min-width:0}}

/* ================= MODO CLARO QUE SE LEA =================
   El problema no eran las sombras sino el lienzo: el fondo era #f3f4f6 y
   las tarjetas blancas, 3% de diferencia. Con las sombras al 7% encima,
   todo quedaba plano como una hoja en blanco. Lienzo gris de verdad,
   tarjetas blancas y sombra que se note, estilo iPhone. */
:root[data-tema="claro"]{
  --b0:#eceef3;            /* el lienzo, gris claro */
  --b1:#ffffff;            /* barra de arriba y lateral */
  --b2:#ffffff;            /* las tarjetas */
  --b3:#f6f7f9;            /* las filas dentro de una tarjeta */
  --b4:#e9ecf1;
  --bd:rgba(17,20,24,.10); --bd2:rgba(17,20,24,.18);
  --sombra:0 8px 28px rgba(17,20,24,.14);
}
:root[data-tema="claro"] .panel,
:root[data-tema="claro"] .kpi,
:root[data-tema="claro"] .caja,
:root[data-tema="claro"] .teja,
:root[data-tema="claro"] .puesto,
:root[data-tema="claro"] .seg,
:root[data-tema="claro"] .aviso{
  box-shadow:0 1px 1px rgba(17,20,24,.04), 0 2px 6px rgba(17,20,24,.06), 0 10px 28px rgba(17,20,24,.09)}
:root[data-tema="claro"] .fila,
:root[data-tema="claro"] .chip-lista,
:root[data-tema="claro"] .sel-boton{
  box-shadow:0 1px 1px rgba(17,20,24,.04), 0 2px 5px rgba(17,20,24,.055)}
:root[data-tema="claro"] .kpi:hover,
:root[data-tema="claro"] .fila:hover,
:root[data-tema="claro"] .teja:hover,
:root[data-tema="claro"] .chip-lista:hover,
:root[data-tema="claro"] .sel-boton:hover{
  box-shadow:0 2px 4px rgba(17,20,24,.07), 0 8px 22px rgba(17,20,24,.12)}
/* La barra de arriba y el lateral tienen que despegarse del contenido */
:root[data-tema="claro"] header{box-shadow:0 1px 0 rgba(17,20,24,.06), 0 4px 18px rgba(17,20,24,.08)}
:root[data-tema="claro"] .lateral{box-shadow:1px 0 0 rgba(17,20,24,.06), 6px 0 22px rgba(17,20,24,.07)}
:root[data-tema="claro"] .ficha{box-shadow:-14px 0 50px rgba(17,20,24,.22)}
:root[data-tema="claro"] .sel-lista{box-shadow:0 2px 6px rgba(17,20,24,.10), 0 16px 40px rgba(17,20,24,.20)}
:root[data-tema="claro"] .resultados{box-shadow:0 2px 6px rgba(17,20,24,.10), 0 16px 40px rgba(17,20,24,.18)}
:root[data-tema="claro"] .nuevo-dato{box-shadow:0 4px 12px rgba(17,20,24,.12), 0 16px 40px rgba(17,20,24,.20)}
/* Los campos hundidos, para que se distingan de las tarjetas */
:root[data-tema="claro"] input,
:root[data-tema="claro"] textarea{box-shadow:inset 0 1px 2px rgba(17,20,24,.07)}

/* --- Boton de instalar, en el pie del lateral --- */
.pie-lateral{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.btn.instalar{width:100%;justify-content:center;border-color:rgba(255,106,0,.45);color:var(--or)}
.btn.instalar:hover{border-color:var(--or);background:var(--or-soft)}

/* ================= LA CONSULTA COMO FICHA =================
   El mensaje de la landing, partido en campos en vez de un bloque de chat. */
.ficha-consulta{background:var(--b3);border:1px solid var(--bd);border-left:2px solid var(--or);
  border-radius:var(--r);padding:.85rem .9rem;margin-top:.7rem}
.ficha-cab{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  margin-bottom:.7rem}
.ficha-cab span{font-size:.52rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3)}

.ficha-campos{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.1rem}
.ficha-campos dt{font-size:.52rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or);margin-top:.7rem}
.ficha-campos dt:first-child{margin-top:0}
.ficha-campos dd{margin:.25rem 0 0;font-size:.82rem;line-height:1.55;color:var(--tx);
  white-space:pre-line;overflow-wrap:anywhere}
.ficha-campos dd i{color:var(--tx3);font-size:.72rem}

.ficha-crudo{margin-top:.9rem;border-top:1px solid var(--bd);padding-top:.6rem}
.ficha-crudo summary{cursor:pointer;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx3);list-style:none}
.ficha-crudo summary::-webkit-details-marker{display:none}
.ficha-crudo summary:hover{color:var(--or)}
.ficha-crudo pre{margin:.6rem 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;
  font-size:.72rem;line-height:1.55;color:var(--tx3)}

.ficha-edit{display:grid;gap:.75rem}
.ficha-edit input{font-size:.78rem;margin-bottom:.35rem}
.ficha-edit textarea{min-height:58px;font-size:.8rem}