/* Estilos propios del sistema. Complementa a Bootstrap 5. */

:root {
  --primario: #D94F2B;
  --menu: #1C2434;
  --menu-claro: #2A3447;
  --menu-texto: #9AA7BD;
  --borde: #E5E7EB;
  --gris: #6B7280;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: #F3F4F6;
  color: #1F2937;
  font-size: 14px;
}

/* Estructura general */

.contenedor-app { display: flex; min-height: 100vh; }

.zona-principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-left: 250px;
}

/* Menu lateral */

.menu-lateral {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  background: var(--menu);
  overflow-y: auto;
  z-index: 1030;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--menu-claro);
}

.marca-icono {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--primario);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.marca-texto { display: flex; flex-direction: column; }
.marca-texto strong { color: #fff; font-size: 15px; }
.marca-texto small { color: var(--menu-texto); font-size: 11.5px; }

.menu-navegacion { padding: 10px 0 24px; }

.menu-bloque {
  padding: 14px 18px 6px;
  font-size: 10.5px;
  font-weight: bold;
  text-transform: uppercase;
  color: #5B6880;
}

.menu-lista { list-style: none; margin: 0; padding: 0; }

.menu-enlace {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px;
  color: var(--menu-texto);
  text-decoration: none;
  font-size: 14px;
  border-left: 3px solid transparent;
}

a.menu-enlace:hover { background: var(--menu-claro); color: #fff; }

a.menu-enlace.activo {
  background: var(--menu-claro);
  color: #fff;
  border-left-color: var(--primario);
  font-weight: bold;
}

/* Modulos que todavia no estan hechos */
.menu-enlace.pendiente { opacity: 0.38; cursor: default; }

/* Contador de alertas de stock minimo, a la derecha del enlace */
.menu-contador {
  margin-left: auto;
  background: var(--primario);
  color: #fff;
  font-size: 11.5px;
  font-weight: bold;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  text-align: center;
}

/* Barra superior */

.barra-superior {
  height: 62px;
  background: #fff;
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.boton-menu {
  display: none;
  background: none;
  border: 0;
  font-size: 22px;
  cursor: pointer;
}

.titulo-pantalla { margin: 0; font-size: 18px; font-weight: 600; flex: 1; }

.usuario-sesion { display: flex; align-items: center; gap: 10px; }
.usuario-datos { display: flex; flex-direction: column; text-align: right; }
.usuario-nombre { font-size: 13.5px; font-weight: 600; }
.usuario-rol { font-size: 11.5px; color: var(--gris); }

.usuario-inicial {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primario);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-transform: uppercase;
}

/* Contenido y pie */

.contenido { flex: 1; padding: 22px; }

.pie {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--borde);
  color: var(--gris);
  font-size: 12.5px;
  background: #fff;
}

/* Paneles */

.panel {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.panel-titulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--borde);
  font-size: 15px;
  font-weight: 600;
}

.panel-cuerpo { padding: 20px; }

/* Tarjetas con cifras */

.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.tarjeta {
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--primario);
  border-radius: 10px;
  padding: 16px 18px;
}

.tarjeta-rotulo {
  font-size: 11.5px;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--gris);
}

.tarjeta-cifra { font-size: 26px; font-weight: bold; margin-top: 4px; }
.tarjeta-nota { font-size: 12.5px; color: var(--gris); }

.tarjeta.ok { border-left-color: #15803D; }
.tarjeta.aviso { border-left-color: #B45309; }
.tarjeta.peligro { border-left-color: #B91C1C; }

/* Etiquetas de estado del stock */

.etiqueta {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.etiqueta.normal { background: #DCFCE7; color: #15803D; }
.etiqueta.bajo { background: #FEF3C7; color: #B45309; }
.etiqueta.agotado { background: #FEE2E2; color: #B91C1C; }

/* Columnas de numeros */
.num { text-align: right; }

/* Botones */

.btn-primario {
  background: var(--primario);
  border: 1px solid var(--primario);
  color: #fff;
}

.btn-primario:hover { background: #B03D1E; border-color: #B03D1E; color: #fff; }

/* Pantalla de inicio de sesion */

.pagina-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--menu);
  padding: 20px;
}

.caja-login {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
}

.login-marca { text-align: center; margin-bottom: 24px; }

.login-marca .marca-icono {
  margin: 0 auto 12px;
  width: 52px;
  height: 52px;
  font-size: 26px;
}

/* Logo del negocio en la pantalla de ingreso */
.login-logo { display: block; height: 52px; width: auto; border-radius: 8px; margin: 0 auto 12px; }

.login-marca h1 { font-size: 21px; font-weight: bold; margin: 0; }
.login-marca p { color: var(--gris); font-size: 13px; margin: 4px 0 0; }

/* Pantallas pequenas */

@media (max-width: 900px) {
  .zona-principal { margin-left: 0; }
  .menu-lateral { transform: translateX(-100%); transition: transform 0.2s; }
  .menu-lateral.abierto { transform: translateX(0); }
  .boton-menu { display: block; }
  .contenido { padding: 16px; }
  .usuario-datos { display: none; }
}

/* INTERFAZ COMUN */

/* Tablas: cabecera discreta y filas con aire */
.table { font-size: 13.5px; margin-bottom: 0; }

.table > thead > tr > th {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gris);
  background: #F9FAFB;
  border-bottom: 1px solid var(--borde);
  padding: 10px 12px;
  white-space: nowrap;
}

.table > tbody > tr > td { padding: 10px 12px; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #FAFAFB; }

.sin-corte { white-space: nowrap; }

/* Columnas de texto largo: mas anchas y en letra algo menor, para no alargar la fila */
.texto-largo { min-width: 280px; font-size: 12.5px; color: #4B5563; }
.col-producto { min-width: 170px; }

/* Las cantidades llevan unidad, que no se pasa a mayusculas */
.etiqueta.cantidad { text-transform: none; letter-spacing: 0; font-size: 11.5px; }

/* Columna de acciones: botones en una sola fila, pegada a su contenido */
td.acciones { white-space: nowrap; width: 1%; }

.btn-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 4px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.btn-icono:hover { background: #F3F4F6; color: #111827; }
.btn-icono.aviso { color: #B45309; }
.btn-icono.aviso:hover { background: #FFF7ED; border-color: #FED7AA; }
.btn-icono.bien { color: #15803D; }
.btn-icono.bien:hover { background: #F0FDF4; border-color: #BBF7D0; }
.btn-icono.peligro { color: #B91C1C; }
.btn-icono.peligro:hover { background: #FEF2F2; border-color: #FECACA; }

/* Controles de DataTables: buscador, cantidad, pie y paginacion con los colores del sistema */
.dataTables_wrapper .row:first-child { margin-bottom: 12px; }
.dataTables_wrapper .row:last-child { margin-top: 12px; align-items: center; }
.dataTables_length label, .dataTables_info { font-size: 12.5px; color: var(--gris); }
.dataTables_length select { margin: 0 6px; }

/* En pantallas angostas la tabla se desliza de lado dentro de su panel, sin cortarse */
.dataTables_wrapper .dt-row > div { overflow-x: auto; }

div.dataTables_wrapper div.dataTables_filter input {
  width: 240px;
  margin-left: 0;
  padding-left: 32px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat 10px center;
}

.pagination { --bs-pagination-color: #374151; --bs-pagination-hover-color: var(--primario); --bs-pagination-focus-color: var(--primario); --bs-pagination-active-bg: var(--primario); --bs-pagination-active-border-color: var(--primario); --bs-pagination-font-size: 13px; }
.page-link { padding: 5px 11px; }

/* Formularios */
.form-label { font-size: 12.5px; font-weight: 600; color: #4B5563; margin-bottom: 5px; }
.form-control, .form-select { font-size: 14px; border-color: #D1D5DB; }
.form-control:focus, .form-select:focus { border-color: var(--primario); box-shadow: 0 0 0 3px rgba(217, 79, 43, 0.15); }

/* Fila de filtros encima de una tabla */
.barra-filtros {
  background: #F9FAFB;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

/* Pestanas */
.nav-tabs .nav-link { font-size: 13.5px; font-weight: 600; color: var(--gris); }
.nav-tabs .nav-link:hover { color: #1F2937; }
.nav-tabs .nav-link.active { color: var(--primario); }

/* Ventanas */
.modal-content { border: 0; border-radius: 12px; }
.modal-header { padding: 16px 20px; }
.modal-title { font-size: 16px; font-weight: 600; }
.modal-body { padding: 20px; }
.modal-footer { padding: 12px 20px; background: #F9FAFB; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }

/* Notas informativas al pie de una pantalla */
.alert-secondary {
  font-size: 13px;
  color: #4B5563;
  background: #F9FAFB;
  border: 1px solid var(--borde);
  border-left: 3px solid #9CA3AF;
  border-radius: 6px;
  margin-top: 16px;
}

/* Tabla larga con barra propia y cabecera fija, para no alargar la pagina */
.tabla-desplazable { max-height: 620px; overflow: auto; border: 1px solid var(--borde); border-radius: 8px; }
.tabla-desplazable thead th { position: sticky; top: 0; z-index: 1; }


/* DASHBOARD */

/* Titulo de cada seccion con su nota o su filtro a la derecha */
.seccion-cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}

.titulo-seccion {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.seccion-nota { font-size: 12.5px; color: var(--gris); }

.filtro-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.filtro-periodo label { font-size: 12.5px; color: var(--gris); margin: 0; }
.filtro-periodo .form-control { width: 140px; }

.subtitulo {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
}

.enlace-panel { font-size: 12.5px; font-weight: normal; color: var(--primario); text-decoration: none; }
.enlace-panel:hover { text-decoration: underline; }

/* Tablas pequenas dentro de los paneles */
.tabla-compacta { font-size: 13px; }
.tabla-compacta th { font-size: 11.5px; font-weight: 600; color: var(--gris); text-transform: uppercase; }
.tabla-compacta th, .tabla-compacta td { padding: 7px 12px; vertical-align: middle; }

.codigo { font-family: Consolas, "Courier New", monospace; font-size: 12px; color: var(--gris); }

.nota-tabla { font-size: 12.5px; color: var(--gris); margin: 0 0 4px; }

/* Tarjeta de indicador: todas de la misma altura en su fila */
.indicador {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 14px 16px 12px;
}

.indicador-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.indicador-clave {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #fff;
  background: var(--primario);
  border-radius: 4px;
  padding: 2px 7px;
}

/* La formula en monoespaciada para que se lea como formula */
.indicador-formula {
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  color: var(--gris);
}

.indicador-nombre { font-size: 13px; color: var(--gris); margin: 8px 0 2px; }

.indicador-valor {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.2;
  min-height: 34px;
  margin-bottom: 8px;
}

.indicador-valor .unidad { font-size: 13px; font-weight: normal; color: var(--gris); }

/* Sin denominador se dice, no se inventa un numero */
.sin-datos { font-size: 15px; font-weight: normal; color: var(--gris); }

.indicador-partes { width: 100%; font-size: 12px; margin-bottom: 10px; }
.indicador-partes td { padding: 3px 0; border-top: 1px solid var(--borde); }
.indicador-partes td.num { text-align: right; font-weight: bold; white-space: nowrap; padding-left: 8px; }

.grafico-titulo { font-size: 11.5px; color: var(--gris); margin-bottom: 4px; }

.indicador-n {
  font-size: 11.5px;
  color: var(--gris);
  margin-top: auto;
  padding-top: 8px;
}

/* Medidor: la cifra contra su limite, que es el 100 % */
.medidor {
  height: 6px;
  background: #F1E4E0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}

.medidor-relleno { height: 100%; width: 0; background: var(--primario); }

/* Chart.js necesita una caja con altura fija */
.grafico-caja { position: relative; height: 200px; }
.grafico-medio { height: 190px; }
.grafico-estado { height: 46px; }
.grafico-mini { height: 120px; }

/* Sin datos el grafico se cambia por un aviso, en lugar de dibujar ejes vacios */
.grafico-caja.vacio canvas { display: none; }

.grafico-caja.vacio::after {
  content: "Sin registros en el periodo";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--gris);
  background: #FAFAFA;
  border: 1px dashed var(--borde);
  border-radius: 6px;
}

.grafico-pie { font-size: 12px; color: var(--gris); margin: 12px 0 0; }

/* Los tres estados con su numero y su nombre, para que el color no sea la unica pista */
.estado-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.estado-lista div {
  font-size: 12.5px;
  color: var(--gris);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 8px 10px;
}

.estado-lista strong {
  display: block;
  font-size: 22px;
  color: #1F2937;
  line-height: 1.2;
}

.punto { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.punto.bien { background: #15803D; }
.punto.aviso { background: #eda100; }
.punto.mal { background: #B91C1C; }

.trazabilidad .nav-link { font-size: 13px; font-weight: 600; padding: 6px 16px; color: var(--gris); }
.trazabilidad .nav-link.active { color: var(--primario); }

.fila-total td { background: #F7F7F7; }

/* Este aviso tambien sale en el papel, por eso no es un .alert */
.nota-frontera {
  font-size: 12px;
  color: var(--gris);
  background: #F7F7F7;
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 8px;
}

/* Cabecera que solo aparece en el papel */
.cabecera-impresion { display: none; }


/* Impresion: se esconde todo lo que no es el reporte, y el PDF se guarda desde el dialogo */
@media print {

  .menu-lateral,
  .barra-superior,
  .pie,
  .nav-tabs,
  .no-imprimir,
  .btn,
  .alert { display: none !important; }

  .zona-principal { margin-left: 0 !important; }
  .contenido { padding: 0 !important; }

  body { background: #fff; font-size: 11px; }

  .panel {
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  .panel-cuerpo { padding: 0 !important; }

  /* En papel la tabla larga sale entera, sin barra */
  .tabla-desplazable { max-height: none; overflow: visible; border: 0; }

  .cabecera-impresion {
    display: block;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #000;
  }

  .grafico-caja { break-inside: avoid; page-break-inside: avoid; }

  /* En papel los indicadores van de dos en dos y no se parten */
  .fila-indicadores > div { width: 50%; }

  .indicador {
    border: 1px solid #999 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* En papel salen las cuatro pestanas de la trazabilidad, una debajo de otra */
  .trazabilidad .tab-pane { display: block !important; opacity: 1 !important; margin-bottom: 12px; }

  .indicador-partes td { border: 0 !important; }

  .nota-frontera { border: 1px solid #999 !important; }

  table { width: 100%; border-collapse: collapse; }

  th, td {
    border: 1px solid #999 !important;
    padding: 3px 5px !important;
    font-size: 10.5px;
  }

  thead th { background: #EEE !important; }

  /* La cabecera de la tabla se repite y las filas no se cortan */
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }

  /* Los fondos de color no siempre se imprimen, asi que se deja el borde */
  .etiqueta {
    background: none !important;
    color: #000 !important;
    border: 1px solid #666;
    padding: 0 4px;
  }
}