/* Componentes comunes adaptados del estilo actual de MoMa, con identidad Ayurgen. */
@font-face { font-family: Montserrat; src: url('frontend/fonts/Montserrat-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Montserrat; src: url('frontend/fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight: 600 700; font-display: swap; }
:root { --color-border: #dfe5e0; --color-text: #18271e; --color-muted: #5d6961; }
body { line-height: 1.5; }
#main-nav { background: var(--color-surface); padding: .65rem 1rem; }
.brand-logo { display: block; width: 112px; height: 50px; object-fit: contain; border-radius: 6px; }
#nav-brand { margin-right: 1rem; }
#main-nav a:hover, #main-nav button:hover, #main-nav a.active,
#nav-links a.active { background: var(--color-primary-soft) !important; }
#nav-links .nav-group-active > summary, #nav-links .nav-group > summary:hover { background: var(--color-primary-soft); color:var(--color-primary); }
.section-heading { margin:1.75rem 0 .75rem;padding-bottom:.6rem;border-bottom:1px solid var(--color-border);font-size:1.1rem; }
.modulo-icon.blue, .badge-kg { background: var(--color-primary-soft); color: var(--color-primary); }
.toast-info { background: var(--color-primary-soft); color: #125629; border-color: #c9ddcf; }
main { padding: 1.5rem 1rem 3rem; }
.app-view { --radius: 12px; min-width: 0; }
.section-toolbar { gap: .75rem; margin-bottom: 1.25rem; }
.section-toolbar h2 { font-size: 1.45rem; font-weight: 650; letter-spacing: -.025em; }
.panel, .card, .chart-card { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); padding: 1.15rem; }
.panel h3 { margin-bottom: .85rem; font-size: 1.05rem; }
.cards-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.card .card-value { line-height: 1.25; font-variant-numeric: tabular-nums; }
.card-icon-wrap.blue, .card-icon-wrap.green { color: var(--color-primary); background: var(--color-primary-soft); }
.card-icon-wrap.amber { color: #805013; background: #fce5cd; }
.card-icon-wrap.violet { color: #45614b; background: #eaf0e8; }
.filtros { gap: .75rem; padding: 1rem; border-radius: 12px; background: var(--color-surface); }
input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 44px; font-size: 1rem; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--color-primary); }
input:disabled, select:disabled { background: #f1f4f1; color: #546158; }
button { font-family: inherit; min-height: 40px; justify-content: center; border-radius: 8px; }
button:disabled { opacity: .55; cursor: not-allowed; }
:is(button, a, input, select, textarea):focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.tab-btn { border-radius: 999px; }
.tab-btn.active { color: var(--color-primary-hover); background: var(--color-primary-soft); border-color: #c9ddcf; }
.table-wrap { border: 1px solid var(--color-border); border-radius: 12px; }
table { font-variant-numeric: tabular-nums; }
th { background: #edf5ee; color: #285b3d; text-transform: none; font-size: .8rem; }
td { vertical-align: middle; }
td button { margin: .15rem; }
tbody tr:hover { background: #f5f8f4; }
.empty-state { padding: 2.5rem 1rem; color: var(--color-muted); text-align: center; }
.comp-row:has(.pres-descuento) { grid-template-columns: minmax(0, 2fr) minmax(80px, 1fr) minmax(90px, 1fr) auto !important; align-items: end !important; }
.editor-group-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.75rem;align-items:end;margin:.75rem 0; }
.commercial-line { min-width:0;border:1px solid var(--color-border);border-radius:12px;padding:.75rem;margin:1rem 0; }
.commercial-line legend { padding:0 .4rem;font-weight:600;font-size:.9rem; }
.document-totals { margin:1rem 0 1rem auto;max-width:360px;padding:1rem;border-radius:12px;background:var(--color-primary-soft); }
.document-totals p { display:flex;justify-content:space-between;gap:1rem; }
dialog { max-width: 760px; border: 1px solid var(--color-border); border-radius: 16px; }
.modal-header { gap: 1rem; border-bottom: 1px solid var(--color-border); padding-bottom: .85rem; }
.modal-footer { flex-wrap: wrap; border-top: 1px solid var(--color-border); padding-top: 1rem; }
.login-wrap { background: linear-gradient(145deg, #edf5ee, #fffaf3); }
.login-box { max-width: 420px; padding: 2rem; border-radius: 18px; box-shadow: 0 12px 36px #123f2410; }
.login-brand-logo { display: block; width: 230px; height: auto; margin: 0 auto .5rem; border-radius: 8px; }
.login-caption { text-align: center; font-size: .9rem; color: var(--color-muted); }
#remito-print .remito-logo { width: 150px; height: auto; margin-bottom: .6rem; }
#remito-print .remito-header { border-bottom: 2px solid var(--color-primary); padding-bottom: 1rem; }
#remito-print .remito-items th { background: #edf5ee; color: #125629; }
@media (max-width: 767px) {
  .tabla-responsive, .tabla-responsive > tbody, .tabla-responsive > tbody > tr { display: block; }
  .tabla-responsive > thead { display: none; }
  .tabla-responsive > tbody > tr { padding: .75rem; border-bottom: 1px solid var(--color-border); }
  .tabla-responsive > tbody > tr > td[data-label] { display: block; white-space: normal; overflow-wrap: anywhere; padding: .35rem .25rem; border: 0; }
  .tabla-responsive td[data-label]::before { content: attr(data-label); display: block; color: var(--color-muted); font-size: .75rem; margin-bottom: .15rem; }
  .tabla-responsive td[colspan] { white-space: normal; }
  main { padding: 1rem .75rem 2rem; }
  .section-toolbar h2 { font-size: 1.25rem; flex-basis: 100%; }
  .section-toolbar > button { flex: 1 1 auto; min-height: 44px; }
  #nav-links a, #nav-links button { min-height: 44px; }
  .filtros > :is(input, select) { min-width: 0; flex-basis: 100%; }
  dialog { padding: 1rem; width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  .modal-footer { position: sticky; bottom: -1rem; background: white; padding-bottom: 1rem; z-index: 2; }
  .modal-footer button { flex: 1; min-height: 44px; }
  .comp-row { grid-template-columns: minmax(0, 1fr) 90px auto !important; }
  .comp-row select { min-width: 0; }
  .comp-row:has(.pres-descuento) { grid-template-columns: minmax(0, 1fr) auto !important; }
  .comp-row:has(.pres-descuento) .pres-producto { grid-column: 1 / -1; }
  .login-box { padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media print {
  #remito-print { font-family: Montserrat, Arial, sans-serif; }
  #remito-print th, #remito-print td { white-space: normal; }
  #remito-print tr { break-inside: avoid; }
}