:root {
  /* Colores corporativos sacados del logotipo */
  --verde-marca: #009a0f;
  --verde-oscuro: #006600;
  --marron: #a7683c;
  --fondo: #64c27b;
  --superficie: #ffffff;
  --tarjeta: #d0fdd7;
  --campo: #ffffff;
  --texto: #1f2a1f;
  --tenue: #5d6b60;
  --borde: #a9dcb3;
  --primario: var(--verde-oscuro);
  --titulo: #009a0f; /* el verde de «Jardín» en el logotipo */
  --primario-txt: #ffffff;
  --acento: var(--marron);
  --peligro: #b3261e;
  --ok-fondo: #d6f0da;
  --error-fondo: #fbe5e3;
  --resalte: #b8f2c3;
  --radio: 8px;
  --lateral: 220px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121813;
    --superficie: #1a221b;
    --tarjeta: #241f1a;
    --campo: #121813;
    --texto: #e7e8e2;
    --tenue: #9bab9e;
    --borde: #2c3a2e;
    --primario: #3fc45a;
    --primario-txt: #0b150c;
    --acento: #d29a6c;
    --titulo: #3fc45a;
    --peligro: #ef7b72;
    --ok-fondo: #1f3a28;
    --error-fondo: #45201d;
    --resalte: #232c24;
  }
}

* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--texto); }
a { color: var(--primario); }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }

/* Estructura */
.topbar { position: fixed; inset: 0 0 auto 0; height: 52px; border-top: 3px solid var(--verde-marca); display: flex; align-items: center; gap: 1rem; padding: 0 1rem; background: var(--superficie); border-bottom: 1px solid var(--borde); z-index: 10; }
.marca { display: flex; align-items: center; }
.marca img { height: 36px; width: auto; display: block; }
@media (prefers-color-scheme: dark) { .marca img, .login img { background: #ffffff; border-radius: 6px; padding: 2px 6px; } }
.usuario { margin-left: auto; display: flex; gap: .75rem; align-items: center; color: var(--tenue); }
.usuario form { margin: 0; }
.hamburguesa { display: none; font-size: 1.4rem; cursor: pointer; }
.lateral { position: fixed; top: 52px; bottom: 0; left: 0; width: var(--lateral); overflow-y: auto; padding: .5rem 0 1rem; display: flex; flex-direction: column; background: var(--superficie); border-right: 1px solid var(--borde); }
.icono { width: 1.15em; height: 1.15em; flex: none; }
.lateral .seccion { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; font-size: .95rem; text-decoration: none; text-transform: uppercase; letter-spacing: .04em; color: var(--acento); font-weight: 700; cursor: pointer; list-style: none; user-select: none; }
.lateral .seccion::-webkit-details-marker { display: none; }
.lateral summary.seccion::after { content: "›"; margin-left: auto; font-size: 1.2rem; line-height: 1; transition: transform .15s; }
.lateral details[open] > .seccion::after { transform: rotate(90deg); }
.lateral .seccion:hover { background: var(--resalte); }
.lateral .grupo .item { padding-left: 2.6rem; }
.lateral a.seccion.activa { background: var(--resalte); box-shadow: inset 3px 0 0 var(--primario); }
.lateral .item { display: block; padding: .35rem 1rem; color: var(--texto); text-decoration: none; border-left: 3px solid transparent; }
.lateral a.item:hover { background: var(--resalte); }
.lateral .item.activo { border-left-color: var(--primario); background: var(--resalte); font-weight: 600; }
.pronto { color: var(--tenue); opacity: .6; cursor: default; }
.contenido { margin: 52px 0 0 var(--lateral); padding: 1.5rem; max-width: 1400px; }
.solo { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }

@media (max-width: 800px) {
  .hamburguesa { display: block; }
  .lateral { transform: translateX(-100%); transition: transform .2s; z-index: 9; }
  #menu-toggle:checked ~ .lateral { transform: none; box-shadow: 0 0 30px rgba(0,0,0,.25); }
  .contenido { margin-left: 0; padding: 1rem; }
}

/* Componentes */
.tarjeta h2 { color: var(--primario); }
/* Inicio: títulos en mayúsculas con icono y el logotipo grande difuminado detrás */
.inicio { position: relative; isolation: isolate; min-height: calc(100vh - 52px - 3rem); }
.inicio::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/logo.png") center 40% / min(560px, 80%) no-repeat; opacity: .14; filter: blur(2px); pointer-events: none; }
.inicio .tarjeta { background: color-mix(in srgb, var(--superficie) 72%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.inicio h2 { display: flex; align-items: center; gap: .55rem; text-transform: uppercase; letter-spacing: .04em; }
.inicio h2 .icono { width: 1.4em; height: 1.4em; color: var(--acento); }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; margin-bottom: 1rem; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.lista-enlaces { list-style: none; padding: 0; margin: 0; }
.lista-enlaces li { padding: .2rem 0; }
.cabecera { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cabecera h1 { margin: 0; }

.boton, button { display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .9rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); font: inherit; text-decoration: none; cursor: pointer; }
.boton:hover { border-color: var(--primario); }
.boton.primario { background: var(--primario); border-color: var(--primario); color: var(--primario-txt); font-weight: 600; }
.boton.peligro { color: var(--peligro); border-color: var(--peligro); }
button.enlace { border: 0; padding: 0; background: none; color: var(--primario); }

input, select, textarea { width: 100%; padding: .45rem .6rem; border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo); color: var(--texto); font: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario); outline-offset: -1px; }
input[type=checkbox] { width: auto; }
textarea { min-height: 6rem; }

.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem 1.25rem; }
.campo { display: flex; flex-direction: column; gap: .25rem; }
.campo label { font-size: .85rem; color: var(--tenue); }
.campo.ancho { grid-column: 1 / -1; }
.campo.check { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: .5rem; padding-top: 1.4rem; }
.campo.multiple div { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .3rem; }
.campo.multiple label { color: var(--texto); font-size: .95rem; }
.campo small { color: var(--tenue); }
.error, .campo small.error { color: var(--peligro); }
.con-error input, .con-error select { border-color: var(--peligro); }

.buscador { display: flex; gap: .5rem; margin-bottom: 1rem; max-width: 600px; }
.tabla-scroll { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.tarjeta .tabla-scroll { border: 0; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); }
.tabla tbody tr:hover { background: var(--resalte); cursor: pointer; }
.tabla.editable tbody tr:hover { background: none; cursor: default; }
.tabla.editable td { padding: .3rem; }
.tabla td a { font-weight: 600; text-decoration: none; }
.vacio, .tenue { color: var(--tenue); }
.paginacion { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 1rem 0; color: var(--tenue); }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

.aviso { padding: .65rem 1rem; border-radius: var(--radio); margin-bottom: 1rem; background: var(--ok-fondo); }
.aviso.error { background: var(--error-fondo); }

.login { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: .9rem; }
.login label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--tenue); }
.login img { width: 180px; height: auto; margin: 0 auto .5rem; display: block; }

.totales { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: flex-end; }
.totales div { display: flex; flex-direction: column; align-items: flex-end; }
.totales span { font-size: .8rem; color: var(--tenue); text-transform: uppercase; }
.totales strong { font-size: 1.2rem; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.negativo { color: var(--peligro); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip { padding: .3rem .8rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); color: var(--texto); text-decoration: none; font-size: .9rem; }
.chip.activo { background: var(--primario); border-color: var(--primario); color: var(--primario-txt); }
.busqueda-global { flex: 1; max-width: 460px; margin: 0 0 0 1rem; }
.busqueda-global input { padding: .4rem .8rem; border-radius: 999px; }
@media (max-width: 800px) { .busqueda-global { margin: 0; } .usuario { display: none; } }
.resultados { list-style: none; margin: 0; padding: 0; }
.resultados li { padding: .35rem 0; border-bottom: 1px solid var(--borde); }
.resultados li:last-child { border-bottom: 0; }
.campos .chips { grid-column: 1 / -1; margin-bottom: 0; }
.copiable { display: flex; gap: .75rem; align-items: flex-start; justify-content: space-between; }
.copiable > :first-child { flex: 1; margin: 0; }
.copiable code { display: block; white-space: pre-wrap; background: var(--fondo); padding: .6rem .8rem; border-radius: 6px; font-size: .9rem; }
.prompt { padding: .75rem 0; border-top: 1px solid var(--borde); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 1px solid var(--borde); }
.galeria .original img { opacity: .7; }
details.tarjeta summary { cursor: pointer; }
.logo-mixury { height: 28px; width: auto; display: block; }
.pie-menu { margin-top: auto; padding: 1.5rem 1.25rem .5rem; text-align: center; }
.pie-menu img { width: 100%; max-width: 160px; height: auto; }
@media (prefers-color-scheme: dark) { .logo-mixury, .pie-menu img { background: #ffffff; border-radius: 6px; padding: 3px 6px; } }
@media print {
  .topbar, .lateral, .no-imprimir, .acciones, .chips, .paginacion { display: none !important; }
  .contenido { margin: 0; padding: 0; max-width: none; }
  body { background: #fff; }
  .tarjeta, .tabla-scroll { border: 0; box-shadow: none; }
  .tabla th, .tabla td { padding: .25rem .4rem; font-size: 9pt; }
}

/* Títulos en mayúsculas y en el verde del logotipo */
h1, h2, h3, .tarjeta h2 { color: var(--titulo); text-transform: uppercase; letter-spacing: .03em; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.15rem; }
.miniatura { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--borde); display: block; }
.sin-foto { display: block; width: 48px; height: 48px; border-radius: 6px; background: var(--resalte); }
.tabla td:has(.miniatura), .tabla td:has(.sin-foto) { padding-top: .25rem; padding-bottom: .25rem; width: 56px; }

/* Recuadros en marrón muy clarito; los campos en blanco para que se lean bien */
.tarjeta, .tabla-scroll { background: var(--tarjeta); }
.tarjeta .tabla-scroll { background: transparent; }
input, select, textarea { background: var(--campo); }
.inicio .tarjeta { background: color-mix(in srgb, var(--tarjeta) 78%, transparent); }

/* Ficha de producto: foto a un lado, descripción al otro */
.ficha-producto { display: grid; grid-template-columns: 1fr minmax(120px, 170px); gap: 1.5rem; align-items: start; }
.foto-producto { display: flex; flex-direction: column; gap: .75rem; }
.foto-producto img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); }
.sin-foto-grande { aspect-ratio: 1; display: grid; place-items: center; border: 2px dashed var(--borde); border-radius: var(--radio); color: var(--tenue); }
textarea.descripcion-corta { min-height: 4.5rem; }
.check-linea { display: flex; gap: .4rem; align-items: center; font-size: .9rem; }
@media (max-width: 800px) { .ficha-producto { grid-template-columns: 1fr; } }

/* Sobre el fondo verde: títulos de página en blanco y textos sueltos legibles */
.contenido > h1, .cabecera h1, .inicio > h1 { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 60, 20, .35); }
.contenido > p.tenue, .contenido > .tenue { color: #0f3d1c; }
.subir-foto { justify-content: center; cursor: pointer; }

/* Ficha de producto: Referencia | Nombre, debajo Categoría | EAN13 */
.campos.dos-columnas { grid-template-columns: 1fr 1fr; align-content: start; }
@media (max-width: 600px) { .campos.dos-columnas { grid-template-columns: 1fr; } }

/* Observaciones a la izquierda y miniatura del albarán / factura a la derecha */
.con-miniatura { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.con-miniatura textarea { min-height: 8rem; }
.miniatura-doc { position: relative; justify-self: end; width: 240px; aspect-ratio: 210 / 297; overflow: hidden;
  border: 1px solid var(--borde); border-radius: 6px; background: #fff; box-shadow: 0 2px 8px rgba(0, 60, 20, .15); }
.miniatura-doc iframe { position: absolute; top: 0; left: 0; width: 794px; height: 1123px; border: 0;
  transform: scale(calc(240 / 794)); transform-origin: 0 0; pointer-events: none; }
.miniatura-doc:hover { outline: 3px solid var(--primario); }
@media (max-width: 700px) { .con-miniatura { grid-template-columns: 1fr; } .miniatura-doc { justify-self: center; } }

/* Envíos: estados y avisos */
.estado { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap;
  background: #e3e8e4; color: #334; }
.estado-ent { background: #c8f2d0; color: #0b5d1e; }
.estado-rep, .estado-tra, .estado-rec { background: #d5e9ff; color: #0b3d7a; }
.estado-inc, .estado-ata, .estado-err { background: #ffe0b3; color: #7a3e00; }
.estado-dev { background: #ffd2cf; color: #8a1c14; }
.estado-cre { background: #fff3b0; color: #6b5300; }
.lista-avisos { list-style: none; margin: 0; padding: 0; }
.lista-avisos li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--borde); }
.lista-avisos li:first-child { border-top: 0; }
.lista-avisos .texto { flex: 1; min-width: 200px; }
.lista-avisos li.importante .texto { font-weight: 600; }
.avisos-envios { border-left: 5px solid #ff9800; }
.campana { position: relative; display: inline-flex; color: var(--peligro); }
.campana .icono { width: 1.5em; height: 1.5em; }
.campana span { position: absolute; top: -6px; right: -9px; background: var(--peligro); color: #fff; border-radius: 999px;
  font-size: .7rem; font-weight: 700; padding: 0 .35rem; line-height: 1.3; }
.respuesta-gls { max-height: 300px; overflow: auto; background: var(--campo); padding: .6rem; font-size: .8rem; white-space: pre-wrap; }
.peticion { white-space: pre-wrap; background: var(--campo); padding: .8rem; border-radius: 6px; max-height: 320px; overflow: auto; font-size: .85rem; margin: 0; }

/* Buscador con los totales al lado */
.barra-busqueda { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.barra-busqueda .buscador { margin: 0; flex: 1 1 320px; }
.totales-linea { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: .4rem 1rem; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); }
.totales-linea div { display: flex; flex-direction: column; align-items: flex-end; }
.totales-linea span { font-size: .75rem; color: var(--tenue); text-transform: uppercase; }
.totales-linea strong { font-size: 1.15rem; }
.filtro-fechas { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; color: #fff; font-weight: 600; }
.filtro-fechas input { width: auto; }
.casilla-pagada { width: 1.3rem; height: 1.3rem; cursor: pointer; accent-color: var(--primario); }