/* styles.css - Estilos genéricos */

/* html y body ocupan 100% de la ventana, sin márgenes === */
html, body {
 height: 100%;
 margin: 0;
 padding: 0;
}

body {
 margin: 0;
 font-family: Arial, sans-serif;
 background-color: #d8cbbef8;
 color: #212529;
}

/* Contenedor principal horizontal */
.layout {
 display: flex;
 height: 100vh;
 margin: 0;
 align-items: stretch; /* ocupa todo el alto de la ventana */
}

/* Barra lateral con logo */
.sidebar {
 width: 80px;              /* ancho fijo de la franja */
 height: 100%;           /* ocupa todo el alto de la ventana */
 background-color: #ccb9a6f8;  /* mismo color que tenías */
 border-right: 5px solid #2f5d3a; /* línea vertical verde oscura */
 display: flex;
 align-items: flex-start;
 justify-content: flex-start; /* alinea el logo al inicio horizontalmente */
 flex-shrink: 0;           /* que no se comprima */
 padding-top: 1rem;
 padding-left: 0.5rem;
}

/* Ajuste del logo en la barra lateral */
.app-logo {
 width: 64px;
 height: auto;
}

/* Encabezado general con el logotipo */
.app-header {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;   /* logo+título a la izquierda, resto a la derecha */
  align-items: center;              /* alinea verticalmente todos los hijos */
  padding: 0.5rem 2rem;
  background-color: #ccb9a6f8;   /* fondo oscuro */
  border-bottom: 5px solid #2f5d3a;    /* verde oscuro, contraste sobre fondo claro */
}
.app-header { display: none; }  /* ocultar por defecto */

/* Agrupa logo y título y evita que se envuelvan */
.header-left {
  display: flex;
  flex-wrap: nowrap;      /* evita que el título baje si falta ancho */
  align-items: center;    /* centra verticalmente logo y título */
}

.app-title {
  margin: 0 0 0 0.75rem;   /* margen izquierdo para separarlo del logo */
  font-size: 1.5rem;
  color: #e0e0e0;   /* color claro para contraste */
  white-space: nowrap;    /* evita que el texto se divida en varias líneas */
  flex-shrink: 0;         /* impide que el título se encoja en pantallas estrechas */
}



button {
    cursor: pointer;
}

.footer-version {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 8px;
    font-size: 12px;
    color: #b0b0b0;
}

.pantalla-panel {
  width: 90%;
  max-width: none;              /* máximo ancho para pantallas grandes */
  background-color: #2a2a2a;  /* fondo oscuro */      
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 1.5rem 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
/* Clase extra solo para cambiar el fondo en Picking */
.picking-panel {
  background-color: #ffffff; /* opcional: poner un fondo claro para destacarlo */    
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* opcional: sombra suave */   
}
/* El contenedor que engloba a rutas y picking: */
.main-contenedor {
  flex: 1;
  display: flex;
  flex-direction: column;   
  overflow: visible;        /* scroll de ventana en lugar de interno */ 
  justify-content: flex-start;  /* alinea al inicio verticalmente */ 
  align-items: center; /* centra horizontalmente */; 
  padding: 0; 
}
.pantalla-oculta {
  display: none !important;
}
.pantalla-activa {
  display: block;
}
.column-layout {
  display: flex;
  flex-direction: column;
}
.row-layout {
  display: flex;
  flex-direction: row;
}
* {
  box-sizing: border-box;
}
button, input, .ruta-item, .login-box {
  border-radius: 4px;
}
.btn {
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  text-align: center;
  transition: background 0.2s;
}

.pantalla-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(104, 117, 97, 0.70); /* semitransparente verde musgo oscuro */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100; 
}

.modal-contenedor {
  background-color: #2a2a2a; /* fondo gris oscuro */
  border-radius: 8px;
  padding: 1.5rem;
  width: 90%;
  max-width: 320px;
  box-sizing: border-box;
  text-align: center;
   /* Nuevo borde claro y sombra para resaltar sobre el fondo oscuro */
  border: 1px solid #c0c0c0;
  box-shadow: 0 0 15px rgba(192, 192, 192, 0.5);
}

.modal-contenedor h2 {
  margin-bottom: 1rem;
  color: #e0e0e0; /* texto claro */
  font-size: 1.25rem;
}