:root {
  --ev-c-white: #ffffff;
  --ev-c-white-soft: #f8f8f8;
  --ev-c-white-mute: #f2f2f2;

  --ev-c-black: #1b1b1f;
  --ev-c-black-soft: #222222;
  --ev-c-black-mute: #282828;

  --ev-c-gray-1: #515c67;
  --ev-c-gray-2: #414853;
  --ev-c-gray-3: #32363f;

  --ev-c-text-1: rgba(255, 255, 245, 0.86);
  --ev-c-text-2: rgba(235, 235, 245, 0.6);
  --ev-c-text-3: rgba(235, 235, 245, 0.38);

  --ev-button-alt-border: transparent;
  --ev-button-alt-text: var(--ev-c-text-1);
  --ev-button-alt-bg: var(--ev-c-gray-3);
  --ev-button-alt-hover-border: transparent;
  --ev-button-alt-hover-text: var(--ev-c-text-1);
  --ev-button-alt-hover-bg: var(--ev-c-gray-2);
}

:root {
  --color-background: var(--ev-c-black);
  --color-background-soft: var(--ev-c-black-soft);
  --color-background-mute: var(--ev-c-black-mute);

  --color-text: var(--ev-c-text-1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

ul {
  list-style: none;
}

body {
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background);
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 🚀 OBLIGAMOS A TODO EL SISTEMA A USAR MONTSERRAT 🚀 */

* {
  font-family: 'Montserrat', sans-serif;
}

html, body, #root {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  /* overflow: hidden; quitamos esto para que no haya problemas de scroll si la pantalla es pequeña */
  background-color: #f4f6f8; 
  font-family: 'Montserrat', sans-serif;
}

/* Dejamos solo la tipografía de código por si algún día muestras errores en pantalla */

code {
  font-weight: 600;
  padding: 3px 5px;
  border-radius: 2px;
  background-color: #e5e7eb;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 85%;
}

/* #root ya no necesita flexbox aquí porque lo manejas directo en tu App.jsx con el Sidebar */

#root {
  display: flex;
  width: 100%;
  height: 100%;
}/* src/renderer/src/styles/login.css */
.login-contenedor {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* El fondo ya lo hereda de main.css, pero puedes asegurarlo si quieres */
}

.login-caja {
  background: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  width: 100%;
  max-width: 350px;
  text-align: center;
}

.login-caja h2 {
  margin-top: 0;
  color: #333;
  margin-bottom: 25px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.login-form input {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

.btn-entrar {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-entrar:hover {
  background-color: #2980b9;
}/* ==========================================
   1. DISEÑO BASE (Tu diseño original)
   ========================================== */
.contenedor-tabla {
  padding: 2rem;
  background-color: #f4f4f4;
  min-height: 100vh;
  color: black;
  box-sizing: border-box; 
}

.tabla-bonita {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  background: rgb(188, 188, 188);
}

.tabla-bonita th {
  background-color: #2c3e50;
  color: white;
  padding: 12px;
  text-align: left;
}

.tabla-bonita td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

/* ==========================================
   2. CABECERA Y BOTÓN DE REFRESCA
   ========================================== */
.cabecera-inventario {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.btn-refrescar {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-refrescar:hover { background-color: #2980b9; }
.btn-refrescar:disabled { background-color: #95a5a6; cursor: not-allowed; }

/* ==========================================
   3. INTERACTIVIDAD DE LA TABLA (Hover)
   ========================================== */
.fila-editable {
  cursor: pointer;
  transition: background-color 0.2s;
}

.fila-editable:hover {
  background-color: #dcdcdc; 
}

/* ==========================================
   4. VENTANA EMERGENTE (MODAL DE EDICIÓN)
   ========================================== */
.modal-fondo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6); 
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; 
}

.modal-contenido {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  width: 700px; 
  max-width: 95%;
  max-height: 85vh; 
  overflow-y: auto; 
  overflow-x: hidden; 
  box-sizing: border-box; 
}

.modal-contenido h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #2c3e50; 
}

.grupo-input {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.grupo-input label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.grupo-input input, 
.grupo-input select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  background-color: white; 
}

.modal-botones {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 25px;
}

.btn-guardar {
  background-color: #2ecc71;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}
.btn-guardar:hover { background-color: #27ae60; }

.btn-cancelar {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}
.btn-cancelar:hover { background-color: #c0392b; }

.btn-agregar {
  background-color: #2ecc71; 
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-agregar:hover {
  background-color: #27ae60;
}

.formulario-contenedor {
  background-color: #ffffff;
  padding: 40px;
  border-radius: 8px; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  width: 100%;
  margin: 0; 
  min-height: calc(100vh - 40px); 
  box-sizing: border-box; 
}

.form-header {
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 30px; 
  border-bottom: 2px solid #f1f5f9; 
  padding-bottom: 15px;
}

.form-titulo {
  margin: 0; 
  color: #1e293b; 
  font-size: 24px;
}

.form-seccion-titulo {
  font-size: 16px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  margin-bottom: 15px;
  margin-top: 10px;
}

.form-grupo {
  margin-bottom: 20px;
  flex: 1;
}

.form-label {
  display: block;
  font-weight: 600;
  color: #475569;
  margin-bottom: 8px;
  font-size: 14px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 15px;
  color: #1e293b;
  background-color: #f8fafc;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
  background-color: #ffffff;
}

.form-input::placeholder {
  color: #94a3b8;
}

.seccion-stock {
  background-color: #f1f5f9;
  padding: 25px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  margin-top: 30px;
  margin-bottom: 30px;
}

.form-hint {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 6px;
}

.btn-accion {
  padding: 14px 28px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-accion:active {
  transform: scale(0.97);
}

.btn-guardar-form { background-color: #10b981; color: white; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2); }
.btn-guardar-form:hover { background-color: #059669; }

.btn-cancelar-form { background-color: #94a3b8; color: white; }
.btn-cancelar-form:hover { background-color: #64748b; }

.btn-eliminar-form { background-color: #ef4444; color: white; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2); }
.btn-eliminar-form:hover { background-color: #dc2626; }

.btn-volver { background-color: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.btn-volver:hover { background-color: #e2e8f0; color: #1e293b; }


/* ==========================================
   5. ESTILOS DE LAYOUT Y FOTOGRAFÍA (Formulario)
   ========================================== */
.layout-formulario {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.columna-imagen { flex: 0 0 300px; }
.input-file-oculto { display: none; }

.caja-imagen {
  width: 100%;
  height: 240px;
  border: 3px dashed #3498db;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f4f6f8;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.caja-imagen.offline {
  cursor: not-allowed;
  border-color: #95a5a6;
}

.imagen-preview {
  width: 100%;
  height: 100%;
  object-fit: contain; 
  background-color: #fff;
}

.icono-placeholder { color: #3498db; margin-bottom: 10px; }
.texto-imagen { color: #2c3e50; font-weight: bold; text-align: center; padding: 0 15px; }

.btn-quitar-foto {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.columna-campos { flex: 1; }
.fila-inputs { display: flex; gap: 20px; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }

.sin-margen-inferior { margin-bottom: 0 !important; }
.sin-margen-superior { margin-top: 0 !important; }

.texto-resaltado { color: #3498db; font-weight: bold; }
.botonera-final { display: flex; gap: 15px; margin-top: 30px; }
.margen-auto-izq { margin-left: auto; }


/* ==========================================
   6. PANTALLA PRINCIPAL (Filtros y Búsqueda)
   ========================================== */
.titulo-inventario {
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.acciones-inventario {
  display: flex;
  align-items: center;
  gap: 15px;
}

.alerta-offline {
  color: #e74c3c;
  font-weight: bold;
}

.barra-filtros {
  margin-bottom: 20px;
  display: flex;
  gap: 15px;
}

.caja-busqueda {
  flex: 2;
  display: flex;
  align-items: center;
  background-color: white;
  border: 2px solid #bdc3c7;
  border-radius: 8px;
  padding: 0 15px;
  transition: border 0.3s;
}

.caja-busqueda:focus-within {
  border-color: #3498db; /* Se pinta de azul al escribir */
}

.input-busqueda-inv {
  width: 100%;
  padding: 12px 10px;
  border: none;
  font-size: 15px;
  outline: none;
  background-color: transparent;
}

.caja-filtro {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: white;
  border: 2px solid #bdc3c7;
  border-radius: 8px;
  padding: 0 15px;
}

.select-filtro {
  width: 100%;
  padding: 12px 10px;
  border: none;
  font-size: 15px;
  outline: none;
  cursor: pointer;
  background-color: transparent;
}

.btn-limpiar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 20px;
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s;
}

.btn-limpiar:hover { background-color: #c0392b; }

.texto-alerta {
  color: red;
  font-weight: bold;
}

.texto-bold {
  font-weight: bold;
}

.texto-gris-secundario {
  color: #7f8c8d;
}

.tabla-vacia {
  text-align: center;
  padding: 30px;
  color: #7f8c8d;
  font-size: 16px;
}

.icono-girando {
  animation: girar 1s linear infinite;
}

@keyframes girar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}/* src/renderer/src/styles/movimientos.css */
.escaner-contenedor {
  padding: 2rem;
  background-color: #f4f4f4;
  min-height: 100vh;
  box-sizing: border-box;
  color: #333;
}

.escaner-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.escaner-caja {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  max-width: 600px;
  margin: 0 auto; /* Centrado en la pantalla */
}

.input-codigo {
  width: 100%;
  padding: 15px;
  font-size: 20px;
  text-align: center;
  border: 2px solid #3498db;
  border-radius: 8px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.input-codigo:focus {
  outline: none;
  box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
}

.info-material {
  background-color: #e8f4fd;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.info-material h3 { margin-top: 0; color: #2c3e50; }
.info-material p { margin: 5px 0; font-size: 16px; }

.acciones-movimiento {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.botones-movimiento {
  display: flex;
  gap: 15px;
}

.btn-entrada {
  flex: 1;
  background-color: #2ecc71;
  color: white;
  border: none;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
}

.btn-salida {
  flex: 1;
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
}

.btn-entrada:hover { background-color: #27ae60; }
.btn-salida:hover { background-color: #c0392b; }/* src/renderer/src/styles/historial.css */

.contenedor-historial {
  padding: 2rem;
  background-color: #f4f4f4; /* Mantiene la consistencia con las otras pantallas */
  min-height: 100vh;
  box-sizing: border-box;
  color: #333;
}

.cabecera-historial {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.titulo-historial {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333;
  margin: 0;
}

/* Botón de actualizar y animación */
.btn-refrescar {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-refrescar:hover { background-color: #2980b9; }
.btn-refrescar:disabled { background-color: #95a5a6; cursor: not-allowed; }

.icono-girando {
  animation: girar 1s linear infinite;
}

@keyframes girar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Mensaje de error no bloqueante */
.mensaje-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #fadbd8;
  color: #c0392b;
  padding: 12px;
  border-radius: 5px;
  margin-bottom: 15px;
  font-weight: bold;
}

/* Reutilizamos el estilo de tu tabla bonita, pero le ponemos fondo blanco */
.tabla-historial {
  background: white;
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.tabla-historial th {
  background-color: #2c3e50;
  color: white;
  padding: 12px;
  text-align: left;
}

.tabla-historial td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

/* Estilos de la tabla cuando no hay datos */
.tabla-vacia {
  text-align: center;
  padding: 30px;
  color: #7f8c8d;
  font-size: 16px;
}

.texto-bold {
  font-weight: bold;
}

/* Pequeñas "etiquetas" de color para identificar rápido el tipo de movimiento */
.badge-tipo {
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  display: inline-block;
  text-align: center;
  min-width: 70px;
}

.badge-entrada {
  background-color: #2ecc71; /* Verde */
}

.badge-salida {
  background-color: #e74c3c; /* Rojo */
}/* src/renderer/src/styles/sidebar.css */

.app-contenedor {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #f4f6f8;
}

.sidebar {
  width: 260px;
  min-width: 260px; /* 🚀 PROHÍBE QUE LA TABLA LO APLASTE */
  flex-shrink: 0;   /* 🚀 PROHÍBE QUE SE ENCOJA */
  background-color: #2c3e50;
  color: white;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  z-index: 100;
}

.sidebar-logo {
  text-align: center;
  padding: 30px 20px;
  border-bottom: 1px solid #34495e;
}

.sidebar-img-logo {
  width: 100%;
  max-width: 120px;
  margin-bottom: 20px;
  object-fit: contain;
}

.sidebar-title {
  font-weight: bold;
  font-size: 16px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sidebar-user-role {
  font-size: 12px;
  color: #bdc3c7;
  margin-top: 8px;
}

.sidebar-menu {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  overflow-y: auto;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 25px;
  color: #ecf0f1;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  border-left: 4px solid transparent;
  transition: all 0.2s ease;
}

.menu-item:hover, .menu-item.active {
  background-color: #3498db;
  color: white;
  border-left-color: white;
}

.sidebar-footer {
  padding: 20px;
  border-top: 1px solid #34495e;
}

.btn-salir-sidebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background-color: transparent;
  color: #e74c3c;
  border: 1px solid #e74c3c;
  border-radius: 6px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-salir-sidebar:hover {
  background-color: #e74c3c;
  color: white;
}

/* 🚀 ESTO CONTROLA EL ESPACIO A LA DERECHA DEL MENÚ */
.contenido-principal {
  flex: 1; 
  width: calc(100vw - 260px); 
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}/* src/renderer/src/styles/checklist.css */

/* ========================================================
   ESTILOS ORIGINALES (CHECKLIST SALIDA)
======================================================== */
.checklist-contenedor {
  padding: 2rem;
  display: flex;
  gap: 20px;
  height: 100%;
}

.panel-izquierdo {
  flex: 1;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.panel-derecho {
  flex: 1.5;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}

.carrito-lista {
  flex: 1;
  overflow-y: auto;
  margin-top: 20px;
}

.item-carrito {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
  background-color: #f9f9f9;
  margin-bottom: 10px;
  border-radius: 5px;
}

.btn-eliminar-item {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.btn-finalizar {
  background-color: #2ecc71;
  color: white;
  border: none;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  margin-top: 20px;
}

/* ========================================================
   NUEVOS ESTILOS (CHECKLIST REGRESO)
======================================================== */
.checklist-contenedor.columna {
  flex-direction: column;
}

.tarjeta-blanca {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.tarjeta-resultados {
  background-color: white;
   color: rgb(0, 0, 0);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  flex: 1;
  overflow-y: auto;
}

.titulo-seccion {
  margin-top: 0;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mensaje-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #fadbd8;
  color: #c0392b;
  padding: 12px;
  border-radius: 5px;
  margin-bottom: 15px;
  font-weight: bold;
}

.formulario-busqueda {
  display: flex;
  gap: 15px;
}

.input-busqueda {
  flex: 1;
  padding: 15px;
  font-size: 18px;
  border: 2px solid #3498db;
  border-radius: 5px;
  color: #333;
  outline: none;
}

.input-busqueda:focus {
  border-color: #2980b9;
}

.btn-buscar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 30px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-buscar:hover:not(:disabled) {
  background-color: #2980b9;
}

.btn-buscar:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.cabecera-resultados {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #eee;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.titulo-folio {
  margin: 0 0 5px 0;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-tecnico {
  margin: 0;
  color: #555;
  font-size: 16px;
}

.acciones-superiores {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.badge-estado {
  color: white;
  padding: 6px 12px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 14px;
}

.estado-cerrado { background-color: #27ae60; }
.estado-abierto { background-color: #f39c12; }

.btn-pdf {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 15px;
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-pdf:hover { background-color: #c0392b; }

.th-flex {
  display: flex;
  align-items: center;
  gap: 5px;
}

.texto-secundario {
  font-size: 12px;
  color: #7f8c8d;
}

.texto-gris {
  font-size: 12px;
  color: #999;
}

.cantidad-llevada {
  color: #2980b9;
  font-weight: bold;
}

.input-devolucion {
  width: 70px;
  padding: 8px;
  text-align: center;
  border: 2px solid #bdc3c7;
  border-radius: 4px;
  font-size: 16px;
  outline: none;
}

.input-devolucion:focus {
  border-color: #3498db;
}

.consumido-real {
  font-weight: bold;
  font-size: 18px;
  color: #e74c3c;
}

.consumido-error {
  font-weight: bold;
  font-size: 18px;
  color: red;
}

.acciones-finales {
  margin-top: 30px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.mensaje-cerrado {
  color: #27ae60;
  font-weight: bold;
  font-size: 16px;
}

.btn-naranja {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  background-color: #f39c12;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-naranja:hover { background-color: #e67e22; }

.btn-gris {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 15px 20px;
  background-color: #95a5a6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-gris:hover { background-color: #7f8c8d; }

.btn-confirmar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  background-color: #2ecc71;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-confirmar:hover:not(:disabled) { background-color: #27ae60; }
.btn-confirmar.exito { background-color: #27ae60; }
.btn-confirmar:disabled { cursor: not-allowed; opacity: 0.8; }/* montserrat-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./montserrat-cyrillic-ext-400-normal-Xqov12YL.woff2) format('woff2'), url(./montserrat-cyrillic-ext-400-normal-DRPPeomZ.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* montserrat-cyrillic-400-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./montserrat-cyrillic-400-normal-BPq32Q8K.woff2) format('woff2'), url(./montserrat-cyrillic-400-normal-jEs4Tk-Z.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* montserrat-vietnamese-400-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./montserrat-vietnamese-400-normal-D4oHqQTd.woff2) format('woff2'), url(./montserrat-vietnamese-400-normal-BeEscFYY.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* montserrat-latin-ext-400-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./montserrat-latin-ext-400-normal-B8bwfy6Y.woff2) format('woff2'), url(./montserrat-latin-ext-400-normal-BffdBkAA.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* montserrat-latin-400-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./montserrat-latin-400-normal-BLhwKU8k.woff2) format('woff2'), url(./montserrat-latin-400-normal-xItZbAXg.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* montserrat-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./montserrat-cyrillic-ext-500-normal-11xBT7e1.woff2) format('woff2'), url(./montserrat-cyrillic-ext-500-normal-DOzfAZ45.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* montserrat-cyrillic-500-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./montserrat-cyrillic-500-normal-T0SG181k.woff2) format('woff2'), url(./montserrat-cyrillic-500-normal-CyGtXmN9.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* montserrat-vietnamese-500-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./montserrat-vietnamese-500-normal-NT-t8RG1.woff2) format('woff2'), url(./montserrat-vietnamese-500-normal-DpeZlV_K.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* montserrat-latin-ext-500-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./montserrat-latin-ext-500-normal-BKtbrd6n.woff2) format('woff2'), url(./montserrat-latin-ext-500-normal-DWPqqZgs.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* montserrat-latin-500-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./montserrat-latin-500-normal-DRFEGfly.woff2) format('woff2'), url(./montserrat-latin-500-normal-Dok2oTci.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* montserrat-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./montserrat-cyrillic-ext-700-normal-MyDreaeu.woff2) format('woff2'), url(./montserrat-cyrillic-ext-700-normal-D-Mk2xRJ.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* montserrat-cyrillic-700-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./montserrat-cyrillic-700-normal-D-Pqjtdp.woff2) format('woff2'), url(./montserrat-cyrillic-700-normal-BvLYcGP1.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* montserrat-vietnamese-700-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./montserrat-vietnamese-700-normal-C0x1De3p.woff2) format('woff2'), url(./montserrat-vietnamese-700-normal-DnwGT2D9.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* montserrat-latin-ext-700-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./montserrat-latin-ext-700-normal-BOP2Nhf0.woff2) format('woff2'), url(./montserrat-latin-ext-700-normal-DdDFr05Z.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* montserrat-latin-700-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./montserrat-latin-700-normal-BdjcYUrC.woff2) format('woff2'), url(./montserrat-latin-700-normal-BWkrl476.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}