:root {
  --berenjena: #493047;
  --durazno: #E7B79B;
  --porcelana: #F6F1EA;
  --grafito: #292629;
  --borde: #E2D9CF;
  --blanco: #FFFFFF;
  --ok: #2F7D4F;
  --alerta: #B3541E;
  --texto-suave: #6B6269;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--grafito); background: var(--porcelana); font-size: 15px; line-height: 1.45; }
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; color: var(--berenjena); margin: 0 0 12px; }
h1 { font-size: 26px; } h2 { font-size: 20px; } h3 { font-size: 16px; }
button, input, select, textarea { font: inherit; }
a { color: var(--berenjena); }

/* Botones */
.btn { background: var(--berenjena); color: var(--porcelana); border: 0; border-radius: 8px; padding: 10px 16px; cursor: pointer; font-weight: 600; }
.btn:hover { background: #5b3b59; }
.btn:focus-visible, .btn-chico:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--durazno); outline-offset: 1px; }
.btn-claro { background: var(--blanco); color: var(--berenjena); border: 1px solid var(--borde); }
.btn-claro:hover { background: var(--porcelana); }
.btn-chico { background: var(--blanco); color: var(--berenjena); border: 1px solid var(--borde); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 13px; }
.btn-peligro { color: var(--alerta); border-color: var(--alerta); }
.btn-icono { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--berenjena); }

/* Formularios */
label { display: block; font-weight: 600; margin: 12px 0 4px; }
input[type=text], input[type=password], input[type=number], input[type=search], .filtros input[type=date], select, textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--blanco); color: var(--grafito);
}
textarea { min-height: 90px; resize: vertical; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ayuda { color: var(--texto-suave); font-size: 13px; margin: 4px 0 0; }
.error { color: var(--alerta); font-weight: 600; min-height: 1.4em; }

/* Inicio de sesión */
.login { max-width: 380px; margin: 8vh auto; padding: 28px; background: var(--blanco); border: 1px solid var(--borde); border-radius: 14px; }
.login img { display: block; width: 190px; margin: 0 auto 18px; }
.login h1 { text-align: center; }
.login .btn { width: 100%; margin-top: 16px; }

/* Estructura */
.app { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.lateral { background: var(--berenjena); color: var(--porcelana); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; }
.lateral img { width: 150px; margin: 0 6px 20px; }
.lateral a { color: var(--porcelana); text-decoration: none; padding: 10px 12px; border-radius: 8px; }
.lateral a:hover { background: rgba(255, 255, 255, .1); }
.lateral a.activa { background: var(--durazno); color: var(--berenjena); font-weight: 700; }
.lateral .pie { margin-top: auto; font-size: 13px; opacity: .9; padding: 0 6px; }
.lateral .pie button { margin-top: 8px; }
.contenido { padding: 24px; max-width: 1100px; width: 100%; }
.cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

/* Tablas y tarjetas */
.tabla-caja, .tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px; padding: 14px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
td.num { text-align: right; white-space: nowrap; }
tr.clic { cursor: pointer; }
tr.clic:hover { background: var(--porcelana); }
.miniatura { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--porcelana); display: block; }
.vacio { color: var(--texto-suave); text-align: center; padding: 24px 8px; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.filtros > * { flex: 1 1 160px; }
.insignia { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--porcelana); color: var(--berenjena); border: 1px solid var(--borde); }
.insignia.publicado { background: #E3F1E8; color: var(--ok); border-color: #BFDDC9; }
.insignia.gancho { background: var(--durazno); border-color: var(--durazno); }
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.resumen .tarjeta strong { display: block; font-size: 28px; font-family: Georgia, serif; color: var(--berenjena); }

/* Ventanas y avisos */
.modal-fondo { position: fixed; inset: 0; background: rgba(41, 38, 41, .55); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 12px; overflow-y: auto; z-index: 10; }
.modal { background: var(--blanco); border-radius: 14px; width: 100%; max-width: 640px; padding: 20px; }
.modal-cab { display: flex; justify-content: space-between; align-items: center; }
.acciones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.aviso { position: fixed; right: 16px; bottom: 16px; padding: 12px 18px; border-radius: 10px; color: var(--blanco); background: var(--ok); z-index: 20; max-width: 90vw; }
.aviso-error { background: var(--alerta); }

/* Fotos */
.fotos-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 8px 0; }
.foto { margin: 0; border: 1px solid var(--borde); border-radius: 10px; padding: 6px; text-align: center; background: var(--porcelana); }
.foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.foto figcaption { font-size: 12px; font-weight: 700; color: var(--berenjena); min-height: 1.4em; }
.foto .btn-chico { width: 100%; margin-top: 4px; }
.zona-peligro { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--borde); }
.ortografia { background: #FFF6EE; border: 1px solid var(--durazno); border-radius: 10px; padding: 12px; margin-top: 12px; }
.ortografia h3 { margin-bottom: 6px; }
.orto-fila { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.orto-fila:last-of-type { border-bottom: 0; }
.orto-fila .palabra { font-weight: 700; margin-right: 4px; }
.desglose { background: var(--porcelana); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-top: 6px; }

.modal.ancho { max-width: 960px; }
.insignia.alerta { background: #FBE9DD; color: var(--alerta); border-color: #EBC3A7; }
.insignia.suave { background: var(--porcelana); color: var(--texto-suave); }
.total-fila { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.total-fila.fuerte { font-weight: 700; border-top: 1px solid var(--borde); margin-top: 4px; }
.fila-compra { display: grid; grid-template-columns: 2fr 90px 120px 40px; gap: 8px; align-items: end; margin-bottom: 8px; }
.fila-gasto { display: grid; grid-template-columns: 1.2fr 1.6fr 110px 1fr 40px; gap: 8px; align-items: end; margin-bottom: 4px; }
.fila-gasto-extra { margin-bottom: 10px; }
td .insignia { margin-left: 8px; }
.filtros + .tarjeta { margin-bottom: 14px; }
.resumen-compra { background: var(--porcelana); border-radius: 10px; padding: 12px; margin-top: 12px; }
.resumen-compra table { font-size: 13px; }
.bloque { margin-top: 18px; }
.chico-etiqueta { font-size: 12px; font-weight: 600; margin: 0 0 2px; color: var(--texto-suave); }
.app > * { min-width: 0; }

@media (max-width: 800px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .lateral { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px; }
  .lateral img { width: 110px; margin: 0 8px 0 0; }
  .lateral .pie { margin: 0 0 0 auto; display: flex; gap: 8px; align-items: center; }
  .lateral .pie button { margin: 0; }
  .contenido { padding: 14px; }
  .fila { grid-template-columns: 1fr; }
  .fila-compra, .fila-gasto { grid-template-columns: 1fr; }
}

/* Lector de comprobantes */
input.dudoso, select.dudoso { border-color: #C9A227; background: #FFF6D6; }
.dudoso-texto { color: #7A5B00; font-size: 12px; font-weight: 600; margin: 2px 0 0; }
.lector-revision:empty { display: none; }
.lector-revision { background: var(--porcelana); border: 1px solid #E6D9A8; border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.lector-avisos h3 { margin: 0 0 4px; font-size: 14px; }
.lector-avisos ul { margin: 0 0 8px; padding-left: 20px; }
.lector-aviso { margin: 6px 0; }
.lector-desc { grid-column: 1 / -1; margin: 0; }

/* Comprobantes adjuntos */
.archivos { list-style: none; margin: 8px 0; padding: 0; }
.archivo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.archivo-nombre { flex: 1 1 200px; font-weight: 600; word-break: break-all; }
.archivo-fila a.btn-chico { text-decoration: none; display: inline-block; }

/* Alertas */
.lateral a { position: relative; }
.contador { display: inline-block; min-width: 20px; margin-left: 8px; padding: 1px 6px; border-radius: 10px; background: #C0392B; color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.contador.oculto { display: none; }
.barra-alertas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.alertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.alerta-item { border: 1px solid var(--borde); border-left: 5px solid var(--texto-suave); border-radius: 8px; padding: 10px 12px; }
.alerta-item.tipo-agotado { border-left-color: #C0392B; }
.alerta-item.tipo-stock-bajo { border-left-color: #D68910; }
.alerta-item.tipo-pago { border-left-color: var(--berenjena); }
.alerta-item.nueva { background: #FBF5EE; }
.alerta-item.resuelta { opacity: .6; }
.alerta-cab { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.alerta-cab .etiqueta-tipo { font-weight: 700; }
.alerta-cab .estado { color: var(--texto-suave); }
.alerta-cab .fecha { margin-left: auto; color: var(--texto-suave); }
.alerta-msg { margin: 6px 0; }
.alerta-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.alerta-acc a.btn-chico { text-decoration: none; display: inline-block; }

.pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--borde); }
.pestana { background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 14px; font: inherit; font-weight: 600; color: var(--texto-suave); cursor: pointer; }
.pestana.activa { color: var(--berenjena); border-bottom-color: var(--berenjena); }
.tabla-caja.bloque { margin-bottom: 14px; }
.tabla-caja.bloque h2 { margin: 0 0 8px; font-size: 16px; }
tr.vencida td { background: #FBE9DD; }
tfoot.reportes th { text-align: left; border-top: 2px solid var(--borde); }
tfoot.reportes th.num { text-align: right; white-space: nowrap; }
.filtros label { flex: 0 0 auto; align-self: center; font-weight: 600; }
.filtros input[type="date"] { flex: 0 1 170px; }

/* Lector con IA */
.lector-ia { color: var(--berenjena); font-weight: 600; }
.ia-tarjeta { margin-top: 14px; }
.ia-tarjeta h3 { margin-bottom: 6px; }
.ia-tarjeta p { margin: 6px 0; }

/* Tienda → Portada (editor) */
.contenido:has(.te-pantalla) { max-width: 1600px; }
.te-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.te-formulario, .te-lateral { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.te-lateral { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.te-seccion h2 { margin-bottom: 4px; }
.te-seccion h3 { margin-top: 16px; }
.te-etiqueta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.te-etiqueta label { margin-bottom: 4px; }
.te-contador { font-size: 12px; color: var(--texto-suave); white-space: nowrap; }
.te-contador.excedido { color: var(--alerta); font-weight: 700; }
.te-casilla { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.te-casilla input { margin: 0; }
.te-acciones .acciones { justify-content: flex-start; margin-top: 0; }
.te-indicador { font-weight: 600; color: var(--berenjena); }
.te-motivo:empty, .te-indicador:empty { display: none; }
.te-problemas-caja { background: #FBE9DD; border: 1px solid #EBC3A7; border-radius: 10px; padding: 10px 12px; margin-top: 10px; color: var(--alerta); }
.te-problemas-caja ul { margin: 6px 0 0; padding-left: 20px; }
.te-mini { display: block; max-width: 220px; width: 100%; border-radius: 8px; border: 1px solid var(--borde); object-fit: cover; }
.te-mini-escena { aspect-ratio: 4 / 5; max-width: 160px; }
.te-mini-intro { aspect-ratio: 3 / 4; max-width: 160px; }
.te-comparacion { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.te-comparacion figure { margin: 0; }
.te-comparacion figcaption { font-size: 12px; color: var(--texto-suave); margin-top: 4px; }
.te-comp-img { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--borde); background: var(--porcelana); }
.te-comp-img img { display: block; width: 100%; height: auto; }
.te-recorte { position: absolute; outline: 2px solid var(--durazno); box-shadow: 0 0 0 9999px rgba(41, 38, 41, .55); pointer-events: none; }
.te-mensajes { margin: 8px 0 0; padding-left: 20px; color: #7A5B00; }
.te-ok { color: var(--ok); font-weight: 600; margin: 8px 0 0; }
.te-rev-seccion { margin: 10px 0 0; font-size: 13px; }
.te-rev-seccion:empty { display: none; }
.te-revision { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.te-rev { border: 1px solid var(--borde); border-left: 5px solid var(--ok); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.te-rev-aviso.te-rev { border-left-color: #D68910; }
.te-rev-error.te-rev { border-left-color: var(--alerta); }
.te-rev .insignia { margin-right: 6px; }
.insignia.te-ins-ok { background: #E3F1E8; color: var(--ok); border-color: #BFDDC9; }
.insignia.te-ins-aviso { background: #FFF6D6; color: #7A5B00; border-color: #E6D9A8; }
.insignia.te-ins-error { background: #FBE9DD; color: var(--alerta); border-color: #EBC3A7; }
.te-historial { list-style: none; margin: 0; padding: 0; }
.te-historial li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.te-historial li:last-child { border-bottom: 0; }

/* Foto de portada con puntos y zonas guía */
.te-guias { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.te-foto { position: relative; margin-top: 10px; border-radius: 8px; overflow: hidden; cursor: crosshair; user-select: none; background: var(--porcelana); }
.te-foto-img { display: block; width: 100%; height: auto; pointer-events: none; }
.te-sin-foto { border: 1px dashed var(--borde); border-radius: 8px; padding: 24px; text-align: center; }
.te-guia { position: absolute; pointer-events: none; }
.te-guia span { position: absolute; left: 6px; top: 6px; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, .85); color: var(--grafito); }
.te-guia-texto { background: rgba(73, 48, 71, .22); border-right: 2px dashed var(--berenjena); }
.te-guia-celular { border: 2px dashed var(--durazno); box-shadow: inset 0 0 0 1px rgba(41, 38, 41, .4); }
.te-guia-celular span { left: auto; right: 6px; top: auto; bottom: 6px; }
.te-punto { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid var(--blanco); background: var(--berenjena); color: var(--porcelana); font-weight: 700; font-size: 13px; cursor: grab; touch-action: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); padding: 0; }
.te-punto:active { cursor: grabbing; }
.te-punto:focus-visible { outline: 3px solid var(--durazno); outline-offset: 2px; }
.te-punto.sin-producto { background: var(--alerta); }
.te-punto-fila { display: grid; grid-template-columns: 70px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.te-punto-fila label { margin: 0; }
.te-punto-nota { grid-column: 1 / -1; }

/* Vista previa */
.te-vp-cab { margin-bottom: 4px; }
.te-vp-cab h2 { margin: 0; }
.te-modos { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.vp-caja { position: relative; overflow: hidden; border: 1px solid var(--borde); border-radius: 8px; background: var(--porcelana); margin-top: 8px; }
.vp-marco { display: block; border: 0; transform-origin: 0 0; background: var(--blanco); }
.vp-caja.celular .vp-marco { margin: 0 auto; }

@media (max-width: 1100px) {
  .te-columnas { grid-template-columns: minmax(0, 1fr); }
  .te-lateral { position: static; max-height: none; overflow: visible; }
}
.pestanas a.pestana { text-decoration: none; }
.te-formulario { max-width: 760px; }

/* Tienda → Pedidos */
.pd-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.pd-acciones { justify-content: flex-start; margin-top: 12px; }
.pd-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.pd-columnas h3, .pd-columnas + .bloque h3 { margin-top: 0; }
.pd-aviso { background: #FBE9DD; color: var(--alerta); border: 1px solid #EBC3A7; border-radius: 10px; padding: 10px 14px; font-weight: 600; }
.pd-aviso[hidden] { display: none; }
.pd-capturas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.pd-captura { margin: 0; max-width: 260px; }
.pd-captura img { display: block; max-width: 100%; max-height: 360px; border: 1px solid var(--borde); border-radius: 8px; background: var(--porcelana); }
.pd-historial { list-style: none; margin: 0; padding: 0; }
.pd-historial li { padding: 6px 0; border-bottom: 1px solid var(--borde); }
.pd-historial li:last-child { border-bottom: 0; }
.pd-vence { display: block; margin-top: 2px; }
.pd-buscar { display: flex; gap: 6px; flex: 2 1 260px; }
.pd-buscar input { flex: 1; }
.pd-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin-top: 12px; }
@media (max-width: 720px) {
  .pd-columnas { grid-template-columns: minmax(0, 1fr); }
}

/* Tienda → Páginas legales y Reclamos (etapa 3B) */
.lg-contenido { min-height: 420px; font-family: ui-monospace, Consolas, monospace; font-size: 14px; line-height: 1.5; }
.rc-plazo { max-width: 520px; }
.rc-plazo-fila { display: flex; gap: 8px; align-items: center; }
.rc-plazo-fila input { max-width: 110px; }