/**02**/
/* --- Contenedor principal --- */
.principal {
  flex:1;
  display:grid;
  grid-template-columns:1fr; /* por defecto ocupa todo */
  transition:grid-template-columns 0.5s ease;
  overflow: hidden;
  height:100%;
}
.principal:has(.open) {
  grid-template-columns:1fr 1fr; /* 👈 se divide en dos si hay .open */
}
/* 
.principal.clicked {
  transition: background-color 1s ease;
  background-color: rgba(var(--content-back), 0.95);
}
*/
/* --- Primer bloque (izquierda) --- */
#izquierdo {
  display:flex;
  align-items:stretch;
  overflow: hidden;
  height:100vh;
}
.contenido{
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
/* --- Superior dentro de bloque1 --- * /
.vendido {background-color: rgba(var(--vendido-back), 1)!important;}*/

/*.contenido.clicked .ventanaMovil{max-height: 90vh;}*/

/* --- Superior dentro de bloque1 --- */
.superior {
  flex:1;
  min-height: 0;
  padding:10px;
  width: 100%;
  overflow-x: auto;     /* 👈 scroll horizontal independiente */
  overflow-y: auto;     /* 👈 scroll vertical independiente */
  /*max-height: 90vh;*/
}
/* --- Segundo bloque (derecha) --- */
#derecho {
    display:grid;
    align-items:stretch;
    overflow-y:auto;
    overflow-x: hidden;
    height:100%;
}
#derecho .contenido{
  display: none !important;
}
#derecho .contenido.open{
  display: flex!important;
}
p.tituloTabla {
    display: flex;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width:900px) {
  .principal {
  flex:1;
  display:grid;
  grid-template-columns:1fr; /* por defecto ocupa todo */
  transition:grid-template-rows 0.5s ease;
  overflow: hidden;
  }
  .principal:has(.open) #izquierdo{display:none;}
  /*.ventanaMovil:hover {max-height: 75vh;}*/
  #derecho{
    max-height: 8em;
    height:fit-content;
  }
  #derecho{max-height: 90vh;}
  .contenido{max-height: 90vh;}
}


/**Colores** /
#derecho .ventanaMovil,
#derecho .sticky-col,
#derecho .sticky-table th
{
  background-color: rgba(200, 80, 80, 0.9);
  border: 1px solid rgba(200, 80, 80, 0.5);
}
#derecho .vendido{
  background-color: rgba(200,200, 80, 0.9);
}
#derecho .superior tr:nth-child(even) {
    background-color: rgba(255, 200, 200, .2);
}

#derecho > div:nth-child(2) .ventanaMovil,
#derecho > div:nth-child(2) .sticky-col,
#derecho > div:nth-child(2) .sticky-table th{
  background-color: rgba(80, 200, 80, 0.9);
  border: 1px solid rgba(80, 200, 80, 0.5);
}
#derecho > div:nth-child(2) .vendido{
  background-color: rgba(200, 80, 200, 0.9);
}
#derecho > div:nth-child(2) .superior tr:nth-child(even) {
    background-color: rgba(200, 255, 200, .2);
}
#derecho > div:nth-child(3) .ventanaMovil,
#derecho > div:nth-child(3) .sticky-col,
#derecho > div:nth-child(3) .sticky-table th{
  background-color: rgba(80, 80, 200, 0.9);
  border: 1px solid rgba(80, 80, 200, 0.5);
}
#derecho > div:nth-child(3) .vendido{
  background-color: rgba(80, 200, 200, 0.9);
}
#derecho > div:nth-child(3) .superior tr:nth-child(even) {
    background-color: rgba(200, 200, 255, .2);
}
*/