:root {
  /* Paleta exacta del sistema Diela Workspace (sistema_diela): naranja como
     acento primario, blanco, y la escala de grises de ese login. */
  --naranja: #f07818;
  --texto: #111111;
  --gris-medio: #6b7280;
  --gris-claro: #9ca3af;
  --borde: #e2e4e9;
  --fondo-input: #f4f5f7;
  --gris-fondo: #f7f8fa;
  --rojo: #dc2626;
  --verde: #16a34a;
}
body { background: var(--gris-fondo); font-size: 0.92rem; color: var(--texto); }

.navbar-diela { background: #ffffff; border-bottom: 1.5px solid var(--borde); padding-top: 1rem; padding-bottom: 1rem; }
.navbar-diela .navbar-brand { display: flex; align-items: center; gap: .6rem; margin-right: 1.75rem; }
.navbar-diela .navbar-brand img { height: 78px; width: auto; }
.navbar-diela .navbar-brand-texto {
  font-family: "Poppins", "Century Gothic", "Segoe UI", -apple-system, Arial, sans-serif;
  font-size: 1.2rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #16213e; line-height: 1;
}
.navbar-diela .navbar-brand-texto strong { font-weight: 700; }
.navbar-diela .nav-link { color: var(--gris-medio); font-weight: 600; }
.navbar-diela .nav-link.active, .navbar-diela .nav-link:hover { color: var(--naranja); }
.navbar-diela .navbar-toggler { border-color: var(--borde); }

/* ===== Botones "liquid glass": vidrio esmerilado con brillo interior ===== */
.btn {
  border-radius: 12px; font-weight: 700; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.btn:active { transform: translateY(0) scale(.98); }

.btn-primary {
  background: linear-gradient(155deg, #ff9d47 0%, var(--naranja) 55%, #d9670f 100%);
  border: 1px solid rgba(255,255,255,.35); color: #fff;
  letter-spacing: .04em; text-transform: uppercase; font-size: 0.78rem;
  box-shadow: 0 6px 16px rgba(240,120,24,.32), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 2px rgba(140,60,0,.25);
}
.btn-primary:hover {
  background: linear-gradient(155deg, #ffab5e 0%, #f07818 55%, #c85e0d 100%);
  box-shadow: 0 8px 22px rgba(240,120,24,.4), inset 0 1px 0 rgba(255,255,255,.5);
  transform: translateY(-1px);
}

.btn-outline-secondary {
  color: #3f4650; background: linear-gradient(155deg, rgba(255,255,255,.9) 0%, rgba(226,229,235,.55) 100%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 3px 10px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 1px rgba(15,23,42,.04);
}
.btn-outline-secondary:hover {
  color: #16213e; background: linear-gradient(155deg, rgba(255,255,255,.97) 0%, rgba(214,218,226,.65) 100%);
  border-color: rgba(255,255,255,.85); box-shadow: 0 6px 16px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.9);
  transform: translateY(-1px);
}

.btn-outline-danger, .btn-outline-success, .btn-outline-warning, .btn-outline-primary {
  background: linear-gradient(155deg, rgba(255,255,255,.9) 0%, rgba(226,229,235,.5) 100%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 3px 10px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.8);
}
.btn-outline-danger:hover, .btn-outline-success:hover, .btn-outline-warning:hover, .btn-outline-primary:hover {
  box-shadow: 0 6px 16px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.9);
  transform: translateY(-1px);
}
.btn-outline-danger, .btn-outline-danger:hover, .btn-outline-danger:active, .btn-outline-danger:focus { color: var(--rojo) !important; }
.btn-outline-danger:hover { background: linear-gradient(155deg, #fff 0%, #fde3e3 100%); }
.btn-outline-success, .btn-outline-success:hover, .btn-outline-success:active, .btn-outline-success:focus { color: var(--verde) !important; }
.btn-outline-success:hover { background: linear-gradient(155deg, #fff 0%, #d9f5e3 100%); }
.btn-outline-warning, .btn-outline-warning:hover, .btn-outline-warning:active, .btn-outline-warning:focus { color: #a15c00 !important; }
.btn-outline-warning:hover { background: linear-gradient(155deg, #fff 0%, #ffe9cf 100%); }
.btn-outline-primary, .btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus { color: var(--naranja) !important; }
.btn-outline-primary:hover { background: linear-gradient(155deg, #fff 0%, #ffe4cc 100%); }

.card { border: 1.5px solid var(--borde); border-radius: 16px; }
.kpi-valor { font-size: 1.7rem; font-weight: 900; color: var(--naranja); }
.kpi-etiqueta { font-size: .8rem; color: var(--gris-medio); }
table.table { font-size: .87rem; }
.table thead th { color: var(--gris-medio); font-size: .68rem; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1.5px solid var(--borde); }

a { color: var(--naranja); }

.badge.bg-success { background-color: rgba(34,197,94,0.12) !important; color: var(--verde) !important; }
.badge.bg-danger { background-color: rgba(239,68,68,0.1) !important; color: var(--rojo) !important; }
.badge.bg-warning { background-color: rgba(240,120,24,0.12) !important; color: var(--naranja) !important; }
.badge.bg-secondary { background-color: var(--fondo-input) !important; color: var(--gris-medio) !important; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #fff; }
.login-card {
  max-width: 400px; width: 100%;
  border: 1.5px solid var(--borde) !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.08);
  padding: 48px 40px;
}
.login-card .logo-diela { width: 80px; height: auto; margin-bottom: 16px; }
.login-card h1 {
  color: var(--texto); font-size: 1rem; font-weight: 900; letter-spacing: 4px;
  text-transform: uppercase; text-align: center; margin: 0;
}
.login-card .subtitulo-diela {
  color: var(--gris-claro); font-size: .65rem; letter-spacing: 3px; text-transform: uppercase;
  margin-top: 6px; font-weight: 600; text-align: center;
}
.login-card .divisor { width: 40px; height: 1px; background: var(--borde); margin: 20px auto 0; }
.login-card label {
  display: block; color: var(--gris-medio); font-size: .65rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px;
}
.login-card .campo-wrap {
  background: var(--fondo-input); border: 1.5px solid var(--borde); border-radius: 12px; overflow: hidden;
}
.login-card .campo-wrap input {
  width: 100%; padding: 13px 16px; background: transparent; border: none !important;
  color: var(--texto); font-size: .92rem; outline: none;
}
.login-card .campo-wrap:focus-within { border-color: var(--naranja); }
.login-card .btn-primary { width: 100%; padding: 14px 24px; margin-top: 8px; }
.login-card .error-diela {
  background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.2); border-left: 3px solid #ef4444;
  color: #dc2626; padding: 10px 14px; border-radius: 10px; font-size: .82rem; margin-bottom: 20px;
}
.login-card .link-muted {
  display: block; width: 100%; margin-top: 20px; background: none; border: none;
  color: var(--gris-claro); font-size: .75rem; text-align: center; text-decoration: underline;
}
.login-card .copyright {
  color: #d1d5db; font-size: .68rem; text-align: center; margin-top: 28px; letter-spacing: .5px;
}

input[type=password], input[type=text], input[type=email], input[type=number], input[type=date], select, textarea {
  border: 1px solid #ced4da; border-radius: .375rem; padding: .375rem .75rem; width: 100%;
}

/* ===== Formularios tipo Dynamics: encabezado + panel de codigo + secciones ===== */
.form-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.form-cabecera h1 { font-size: 1.4rem; font-weight: 800; margin: 0; }
.form-cabecera .subtitulo { color: var(--gris-medio); font-size: .85rem; margin-top: 2px; }

.panel-codigo {
  display: flex; align-items: center; gap: .9rem; background: #fff;
  border: 1.5px solid var(--borde); border-radius: 12px; padding: .7rem 1rem;
}
.panel-codigo .etiqueta { font-size: .68rem; color: var(--gris-medio); text-transform: uppercase; letter-spacing: .05em; }
.panel-codigo .codigo { font-size: 1rem; font-weight: 800; }
.panel-codigo img { height: 90px; }

.dynamics-form { background: #fff; border: 1.5px solid var(--borde); border-radius: 16px; overflow: hidden; min-width: 900px; }
.dynamics-secciones { display: grid; grid-template-columns: repeat(3, 1fr); }
.dynamics-seccion { padding: 1.3rem; border-right: 1px solid var(--borde); }
.dynamics-seccion:last-child { border-right: none; }
.dynamics-seccion h2 {
  font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gris-medio); margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--borde);
}
.dynamics-seccion .campo { margin-bottom: .9rem; }
.dynamics-seccion .campo label { font-size: .8rem; font-weight: 600; color: #374151; margin-bottom: .25rem; display: block; }

.dropzone-imagen {
  border: 2px dashed var(--borde); border-radius: 12px; padding: 1.5rem 1rem; text-align: center;
  color: var(--gris-medio); font-size: .82rem; cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone-imagen:hover, .dropzone-imagen.arrastrando { border-color: var(--naranja); background: #fff7f0; }
.dropzone-imagen svg { width: 28px; height: 28px; margin-bottom: .4rem; color: var(--gris-claro); }
.dropzone-imagen .nombre-archivo { font-weight: 700; color: var(--texto); margin-top: .4rem; word-break: break-all; }

.form-pie {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem;
  padding: 1rem 1.3rem; border-top: 1px solid var(--borde); background: #fafbfc;
}
.form-pie .nota { font-size: .78rem; color: var(--gris-medio); }

.badge-numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: #374151; color: #fff;
  font-size: .8rem; font-weight: 700; margin-right: .5rem;
}
.panel-codigo .etiqueta { white-space: nowrap; }

/* ===== Ubicaciones: estructura visual (arbol + grid de estante + panel) ===== */
.estructura-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.2rem; align-items: start; min-width: 1100px; position: relative; }

.panel-arbol, .panel-grid { background: #fff; border: 1.5px solid var(--borde); border-radius: 16px; padding: 1.1rem; }
.arbol-contenedor { font-size: .85rem; }

.arbol-fila {
  display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-radius: 8px;
  cursor: pointer; color: var(--texto); text-decoration: none; flex: 1; min-width: 0;
  transition: background-color .15s ease, transform .1s ease, color .15s ease;
}
.arbol-fila:hover { background: var(--fondo-input); transform: translateX(2px); }
.arbol-icono { width: 16px; height: 16px; flex-shrink: 0; }
.arbol-chevron { transition: transform .2s ease; transform: rotate(90deg); }
.arbol-carpeta.colapsado > .arbol-fila-wrap .arbol-chevron { transform: rotate(0deg); }
.arbol-carpeta.colapsado > .arbol-hijos { display: none; }
.arbol-hijos { margin-left: 1.1rem; border-left: 1px dashed var(--borde); padding-left: .4rem; }
.arbol-fila-wrap { display: flex; align-items: center; gap: .2rem; }
.arbol-fila-wrap .arbol-borrar-form { opacity: 0; transition: opacity .15s ease; }
.arbol-fila-wrap:hover .arbol-borrar-form { opacity: 1; }
.arbol-borrar {
  background: none; border: none; color: var(--gris-claro); font-size: 1rem; line-height: 1;
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  transition: background-color .15s ease, color .15s ease;
}
.arbol-borrar:hover { background: rgba(220,38,38,.12); color: var(--rojo); }
.arbol-estante { font-weight: 600; }
.arbol-estante.activo { background: rgba(240,120,24,0.12); color: var(--naranja); }
.arbol-icono-tipo { color: var(--gris-medio); }

/* --- Migaja de pan / breadcrumb --- */
.migaja-pan { font-size: .78rem; color: var(--gris-medio); }
.migaja-pan .migaja-sep { margin: 0 .4rem; color: var(--gris-claro); }

/* --- Tabs de vista (Vista del estante / Lista de ubicaciones) --- */
.nav-tabs-vista { display: flex; gap: 1.4rem; list-style: none; padding: 0; margin: 0; border-bottom: 1.5px solid var(--borde); }
.tab-vista {
  background: none; border: none; padding: .55rem .1rem; font-size: .85rem; font-weight: 600;
  color: var(--gris-medio); border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
  cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.tab-vista:hover { color: var(--texto); }
.tab-vista.activa { color: var(--naranja); border-color: var(--naranja); }

/* --- Marco de estante tipo rack industrial (azul + naranja, como los racks reales de la bodega) --- */
.estante-marco { position: relative; padding: 0 30px 14px; }
.fila-cabecera { display: flex; gap: 8px; margin-bottom: 6px; }
.fila-cabecera .etiqueta-nivel { width: 90px; flex-shrink: 0; }
.cabecera-seccion {
  flex: 1; min-width: 90px; text-align: center; font-size: .72rem; font-weight: 700;
  color: var(--gris-medio); background: var(--fondo-input); border-radius: 8px; padding: .35rem 0;
  text-transform: uppercase; letter-spacing: .03em;
}
.estante-visual {
  display: flex; flex-direction: column; margin-bottom: .8rem;
  position: relative; padding: 4px 18px 0;
  background: #fbfbfc;
  border-radius: 4px;
}
/* Postes verticales azules: gruesos, con brillo cilindrico y ranuras */
.estante-visual::before, .estante-visual::after {
  content: ''; position: absolute; top: -6px; bottom: 0; width: 18px;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.3) 0 3px, transparent 3px 24px),
    linear-gradient(90deg, #0f3d75 0%, #2f7bd1 30%, #4c96e8 50%, #2f7bd1 70%, #0f3d75 100%);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  z-index: 1;
}
.estante-visual::before { left: -4px; }
.estante-visual::after { right: -4px; }
.fila-nivel {
  display: flex; align-items: stretch; gap: 4px; position: relative;
  padding: 8px 0 4px;
}
.etiqueta-nivel { width: 90px; flex-shrink: 0; font-size: .75rem; color: var(--gris-medio); display: flex; flex-direction: column; justify-content: center; }

/* Viga/repisa naranja debajo de cada nivel, como un rack de pallets real */
.repisa-tablero {
  height: 14px; margin: 0 -18px; position: relative; z-index: 2;
  background: linear-gradient(180deg, #ff7a44 0%, #ef5a26 45%, #c94216 100%);
  border-top: 1px solid rgba(255,255,255,.55);
  border-bottom: 2px solid #8a2c0d;
  box-shadow: 0 3px 6px rgba(0,0,0,.25);
}
.repisa-tablero::before, .repisa-tablero::after {
  content: ''; position: absolute; top: -3px; width: 16px; height: 20px;
  background: linear-gradient(180deg, #16233a, #0a1526);
  border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.repisa-tablero::before { left: 2px; }
.repisa-tablero::after { right: 2px; }

.celda-ubicacion {
  flex: 1; min-width: 90px; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: .6rem .3rem; border-radius: 8px; border: 1.5px solid transparent; text-decoration: none; color: var(--texto);
  transition: transform .18s cubic-bezier(.2,.8,.3,1.2), box-shadow .18s ease, border-color .15s ease, background-color .15s ease;
  position: relative; font-weight: 700;
}
/* Division vertical tipo poste entre cada seccion del estante */
.celda-ubicacion:not(:last-child)::after {
  content: ''; position: absolute; top: -8px; bottom: -4px; right: -3px; width: 7px; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.28) 0 2px, transparent 2px 16px),
    linear-gradient(90deg, #0f3d75, #2f7bd1 45%, #0f3d75);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.celda-ubicacion:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 22px rgba(0,0,0,0.14); border-color: rgba(240,120,24,.5); background: rgba(240,120,24,.05); z-index: 3; }
.celda-libre { background: #fff; color: var(--gris-claro); }
.celda-ocupada { background: #fff3e8; color: var(--naranja); }
.celda-bloqueada { background: #fdeceb; color: var(--rojo); }
.celda-seleccionada { outline: 2.5px solid #111; outline-offset: 1px; border-radius: 8px; }

/* --- Caja 3D en cada seccion del estante --- */
.icono-caja-real { transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease; }
.celda-libre .icono-caja-real { opacity: .3; filter: grayscale(.5); }
.celda-ocupada .icono-caja-real { opacity: 1; }
.celda-bloqueada .icono-caja-real { opacity: .35; filter: grayscale(.6); }
.celda-ubicacion:hover .icono-caja-real { transform: translateY(-4px) rotate(-2deg) scale(1.06); }

/* --- Buscador de ubicacion (abre el minigrid) --- */
.buscador-ubicacion { display: flex; gap: .5rem; max-width: 640px; }
.buscador-ubicacion input { flex: 1; cursor: pointer; background: #fff; }
.buscador-ubicacion input:hover { border-color: var(--naranja); }

/* --- Resultado de busqueda: la caja se pinta cafe y "saluda" --- */
.caja-encontrada { z-index: 4; }
.caja-encontrada .icono-caja-real { opacity: 1 !important; filter: none !important; }
.caja-encontrada .icono-caja-real .cara-top { fill: #8a5a2b !important; }
.caja-encontrada .icono-caja-real .cara-izq { fill: #6e4520 !important; }
.caja-encontrada .icono-caja-real .cara-der { fill: #5a3718 !important; }
.caja-encontrada .icono-caja-real { animation: caja-saluda 1s ease-in-out 2; }
.caja-encontrada { outline: 2.5px solid var(--naranja); outline-offset: 1px; border-radius: 8px; background: #fff7f0 !important; }
@keyframes caja-saluda {
  0%, 100% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(-10px) rotate(-8deg); }
  40% { transform: translateY(0) rotate(6deg); }
  60% { transform: translateY(-6px) rotate(-4deg); }
  80% { transform: translateY(0) rotate(2deg); }
}
.overlay-bloqueo {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: 2.6px solid var(--rojo); pointer-events: none;
}
.overlay-bloqueo::after {
  content: ''; position: absolute; top: 50%; left: -2px; right: -2px; height: 2.6px;
  background: var(--rojo); transform: rotate(45deg);
}

/* Panel deslizante "Agregar estante" */
.panel-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.25); z-index: 1040;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.panel-overlay.visible { opacity: 1; pointer-events: auto; }

.panel-agregar {
  position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw;
  background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,0.15); padding: 1.3rem;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); z-index: 1050;
  overflow-y: auto;
}
.panel-agregar.abierto { transform: translateX(0); }
.panel-agregar.panel-chico { width: 340px; }
.panel-agregar .titulo-subseccion {
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gris-medio); margin: 1rem 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--borde);
}
.resumen-total { background: var(--fondo-input); border-radius: 10px; padding: .7rem .9rem; }
.btn-paso { font-weight: 700; }

/* --- Minigrid: buscador inteligente de productos --- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.4); z-index: 1060;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.modal-overlay.visible { opacity: 1; pointer-events: auto; }
.modal-buscar {
  position: fixed; top: 8vh; left: 50%; width: 560px; max-width: 92vw; max-height: 80vh;
  background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  padding: 1.3rem; z-index: 1070; display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transform: translate(-50%, -10px) scale(.97);
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
.modal-buscar.abierto { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.resultados-buscar { overflow-y: auto; flex: 1; }
.fila-resultado {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  padding: .7rem .6rem; border-radius: 10px; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.fila-resultado:hover { background: var(--fondo-input); transform: translateX(3px); }
.fila-resultado.sin-ubicacion { opacity: .65; cursor: default; }
.fila-resultado.sin-ubicacion:hover { background: none; transform: none; }
.fr-nombre { font-weight: 700; }
.fr-meta { font-size: .75rem; color: var(--gris-medio); }
.badge-ubicacion {
  background: rgba(240,120,24,.12); color: var(--naranja); font-weight: 700;
  border-radius: 8px; padding: .25rem .6rem; font-size: .75rem; white-space: nowrap;
}

/* --- Mini estante interactivo (elegir destino al mover un producto) --- */
.modal-mini-estante { width: 640px; max-height: 82vh; overflow-y: auto; }
.mini-estante-grid .estante-marco { padding: 0 22px 10px; }
.mini-estante-grid .etiqueta-nivel { width: 64px; font-size: .68rem; }
.mini-estante-grid .celda-ubicacion { min-width: 64px; min-height: 40px; padding: .4rem .2rem; }
.mini-estante-grid .celda-ubicacion[disabled] { transform: none !important; }
.mini-estante-grid .celda-ubicacion:not([disabled]):hover { transform: translateY(-3px) scale(1.05); }

/* ===== Avisos nativos de la app: toasts + modal de confirmacion ===== */
.toast-contenedor {
  position: fixed; top: 18%; left: 50%; transform: translateX(-50%); z-index: 1200;
  display: flex; flex-direction: column; gap: .8rem; align-items: center;
  width: 100%; max-width: 420px; pointer-events: none;
}
.toast-aviso {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem;
  background: #fff; border-radius: 20px; padding: 1.6rem 2rem;
  box-shadow: 0 20px 55px rgba(0,0,0,.22); border-top: 5px solid var(--gris-claro);
  opacity: 0; transform: scale(.85);
  transition: opacity .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events: auto; position: relative; min-width: 300px;
}
.toast-aviso.mostrar { opacity: 1; transform: scale(1); }
.toast-aviso.saliendo { opacity: 0; transform: scale(.9); }
.toast-aviso .toast-icono {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.toast-aviso .toast-icono svg { width: 30px; height: 30px; }
.toast-aviso .toast-texto { font-size: 1.05rem; font-weight: 700; color: var(--texto); }
.toast-aviso .toast-cerrar {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; color: var(--gris-claro); font-size: 1.3rem;
  line-height: 1; cursor: pointer;
}
.toast-success { border-top-color: var(--verde); }
.toast-success .toast-icono { background: rgba(22,163,74,.12); color: var(--verde); animation: toast-check-pop .45s cubic-bezier(.34,1.56,.64,1) .12s both; }
.toast-error { border-top-color: var(--rojo); }
.toast-error .toast-icono { background: rgba(220,38,38,.12); color: var(--rojo); }
.toast-warning { border-top-color: var(--naranja); }
.toast-warning .toast-icono { background: rgba(240,120,24,.12); color: var(--naranja); }
.toast-info { border-top-color: #6b7280; }
.toast-info .toast-icono { background: rgba(107,114,128,.12); color: var(--gris-medio); }
@keyframes toast-check-pop {
  0% { transform: scale(.3) rotate(-15deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.modal-confirmar {
  position: fixed; top: 50%; left: 50%; width: 380px; max-width: 90vw;
  background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  padding: 1.6rem; z-index: 1170; text-align: center;
  opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.94);
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
.modal-confirmar.abierto { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal-confirmar-icono {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto .9rem;
  background: rgba(240,120,24,.12); color: var(--naranja);
  display: flex; align-items: center; justify-content: center;
}
.modal-confirmar-icono svg { width: 26px; height: 26px; }
.modal-confirmar-texto { font-size: .95rem; color: var(--texto); margin-bottom: 1.3rem; font-weight: 600; }
.modal-confirmar-botones { display: flex; gap: .6rem; justify-content: center; }
.modal-confirmar-botones .btn { flex: 1; }

/* ===== Edicion inline (doble clic) de nombres ===== */
.nombre-editable {
  cursor: text; border-radius: 5px; padding: 1px 4px; margin: -1px -4px;
  transition: background-color .15s ease, box-shadow .2s ease;
}
.nombre-editable:hover { background: rgba(240,120,24,.08); box-shadow: inset 0 0 0 1px rgba(240,120,24,.25); }
.nombre-editable.guardando { opacity: .5; }
.nombre-editable.guardado { animation: nombre-guardado-flash .9s ease; }
@keyframes nombre-guardado-flash {
  0% { background: rgba(22,163,74,.25); }
  100% { background: transparent; }
}
.nombre-editable-input {
  font: inherit; font-weight: inherit; color: inherit; background: #fff;
  border: 1.5px solid var(--naranja); border-radius: 5px; padding: 0 4px;
  outline: none; box-shadow: 0 0 0 3px rgba(240,120,24,.15);
  width: auto; min-width: 80px; max-width: 100%;
}

/* ===== Franja de estadisticas del producto (reemplaza los stat-cards genericos) ===== */
.franja-stats {
  display: flex; background: #fff; border: 1.5px solid var(--borde); border-radius: 16px;
  overflow: hidden;
}
.stat-item {
  flex: 1; display: flex; align-items: center; gap: .8rem;
  padding: 1.1rem 1.3rem; border-right: 1px solid var(--borde);
}
.stat-item:last-child { border-right: none; }
.stat-icono {
  width: 22px; height: 22px; flex-shrink: 0; color: var(--gris-claro);
}
.stat-valor { font-size: 1.35rem; font-weight: 800; color: var(--texto); line-height: 1.1; }
.stat-unidad { font-size: .75rem; font-weight: 600; color: var(--gris-medio); }
.stat-etiqueta {
  font-size: .68rem; font-weight: 700; color: var(--gris-medio);
  text-transform: uppercase; letter-spacing: .06em; margin-top: 2px;
}
.stat-item.stat-alerta .stat-icono { color: var(--naranja); }
.stat-item.stat-alerta .stat-valor { color: var(--naranja); }
.stat-item.stat-critico { background: rgba(220,38,38,.04); }
.stat-item.stat-critico .stat-icono { color: var(--rojo); }
.stat-item.stat-critico .stat-valor { color: var(--rojo); }