@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

:root {
  --background: hsl(224, 71.4%, 4.1%);
  --foreground: hsl(210, 20%, 98%);
  --card: hsl(222.2, 84%, 4.9%);
  --card-foreground: hsl(210, 20%, 98%);
  --border: hsl(217.2, 32.6%, 17.5%);
  --primary: hsl(210, 20%, 98%);
  --primary-foreground: hsl(222.2, 47.4%, 11.2%);
  --muted: hsl(217.2, 32.6%, 17.5%);
  --muted-foreground: hsl(215, 20.2%, 65.1%);

  --c-text-primary: var(--foreground);
  --c-text-secondary: var(--muted-foreground);
  --c-action-primary: var(--muted);
  --c-action-primary-accent: var(--muted);
  --c-action-secondary: var(--muted);
  --c-action-tertiary: var(--primary);
  --c-bg-primary: var(--card);
  --c-bg-secondary: var(--muted);
  --c-bg-search: var(--muted);
  --c-body-bg: var(--background);
  --border-color: var(--border);

  --sidebar-width: 250px;
  --text-base: 0.875rem;
  --text-body: 0.7rem;
  --text-kpi-size: 1.35rem;
  --btn-bg: var(--muted);
  --btn-border-hover: color-mix(in srgb, var(--foreground) 32%, transparent);
  --btn-font-size: 0.7rem;
  --btn-font-weight: 400;
  --btn-letter-spacing: 0.02em;
  --btn-padding: 8px 13px;
  --btn-radius: 5px;
  --btn-gap: 0.4rem;
  --btn-icon-size: 32px;
  --btn-icon-plus-size: 36px;
  --btn-icon-radius: 7px;
  --fecha-lapida-scale: 1;
}

html.sidebar-collapsed {
  --sidebar-width: 60px;
}

[data-theme="dark"] {}

*, *::before, *::after { box-sizing: border-box; }

/* ── Tipografía global ── */
body {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: var(--text-body);
  font-weight: normal !important;
  line-height: 1.5;
  min-height: 100vh;
  background-color: var(--background);
  color: var(--foreground);
  padding: 2rem;
  margin: 0;
  transition: background 0.3s, color 0.3s;
}

p, li {
  font-size: inherit;
  font-weight: normal !important;
  line-height: inherit;
}

input, select, textarea, label, button,
table, thead, tbody, tr, th, td {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-weight: normal !important;
  line-height: 1.5;
}

input, select, textarea, label, th {
  font-size: var(--text-base);
}

td {
  font-size: var(--text-base);
}

b, strong, th, td, label, button, h1, h2, h3, h4, h5, h6 {
  font-weight: normal !important;
}

h1, h2, h3, h4, h5, h6,
.content-header-title,
.dash-title {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-weight: normal !important;
  font-size: var(--text-base);
}

.header-logo {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-weight: normal !important;
}

.text-kpi,
.kpi-val,
.stat-value,
.total-box {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-kpi-size) !important;
  line-height: 1.3 !important;
}

.font-mono,
.num,
.monto,
.text-mono,
.sem-mono,
.num-valor,
.col-monto {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  overflow: hidden;
}

input, select, textarea { color: inherit; outline: 0; }
button { outline: 0; }

/* ── Layout ── */
.earmark-app {
  box-shadow: 0 0 2px 0 rgba(0,0,0, .1), 0 15px 30px rgba(0,0,0, .1);
  padding: 3rem;
  border-radius: 15px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--card);
  min-height: calc(100vh - 4rem);
}

.header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1.5rem;
}

.header-logo {
  font-size: 1.8rem;
  margin: 0;
  cursor: pointer;
}

.header-content {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.main {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  column-gap: 2rem;
  transition: grid-template-columns 0.25s ease;
}

.content { flex: 1; min-width: 0; }
h2, h3 { margin-top: 0; }

/* ── Sidebar colapsable ── */
.nav {
  min-width: 0;
  transition: width 0.25s ease;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar-toggle {
  margin-bottom: 0.5rem;
}

.nav.collapsed .tab-btn-title,
.nav.collapsed .sidebar-toggle .tab-btn-title {
  display: none !important;
}

.nav.collapsed .tab-btn,
.nav.collapsed .sidebar-toggle {
  justify-content: center;
  padding: 0.75rem;
  gap: 0;
}

.nav.collapsed .tabs[style] {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0.5rem !important;
}

.tabs {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab { display: flex; margin-bottom: 0.5rem; }

.tab-btn {
  text-decoration: none;
  border: none;
  background-color: transparent;
  padding: .75rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  font-size: var(--text-base);
  transition: 0.2s;
  color: var(--c-text-secondary);
  text-transform: none;
}

.tab-btn .material-symbols-outlined,
.tab-btn i, .tab-btn svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: 0.2s;
}

.tab-btn--active,
.tab-btn:hover {
  color: var(--foreground);
  background-color: var(--c-action-primary-accent);
  cursor: pointer;
}

.tab-btn--active .material-symbols-outlined,
.tab-btn:hover .material-symbols-outlined,
.tab-btn--active i,
.tab-btn:hover i,
.tab-btn--active svg,
.tab-btn:hover svg {
  color: var(--foreground);
}

/* ── Tablas ── */
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }

th {
  color: var(--c-text-secondary);
  border-bottom: 2px solid var(--border-color);
  padding: 1rem 0;
  text-align: left;
  text-transform: uppercase;
  font-size: var(--text-base);
}

td {
  border-bottom: 1px solid var(--border-color);
  padding: 1.25rem 0;
}

/* ── Inputs ── */
input, select, textarea {
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
  width: 100%;
  box-sizing: border-box;
  color: var(--foreground);
}

input::placeholder, textarea::placeholder { color: var(--muted-foreground); }

input:focus, select:focus, textarea:focus {
  border: 1px solid var(--border);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--foreground) 20%, transparent);
}

/* ── Botones homogéneos (mayúsculas, 0.875rem, sin bold) ── */
:is(
  button,
  input[type="submit"],
  input[type="button"],
  .btn,
  .btn-primary,
  .btn-danger,
  .btn-warning,
  .btn-add,
  .btn-save,
  .btn-save-copy,
  .btn-precios-acc,
  .btn-catalogo,
  .btn-imprimir,
  .btn-primary-std,
  .btn-agregar-catalogo,
  .btn-file-preview,
  .btn-file-del,
  .btn-del,
  .btn-dark,
  .btn-print,
  .btn-pp-calc,
  .btn-pp-add-presu,
  .btn-pp-enviar-presu,
  .btn-catalogo-acc,
  .btn-sq,
  .btn-cobro,
  .btn-contab,
  .btn-nuevo-mov,
  .btn-proveedor-cargar,
  .btn-rowact,
  .btn-ver-factura,
  .btn-add-email,
  .btn-add-cat-row,
  .btn-precios-acc
):not(.tab-btn):not(.tab-trigger):not(.close-btn):not(.btn-cerrar-modal):not(.header-avatar):not(.sidebar-toggle):not(.btn-block):not(.link-btn):not(.btn-icon):not(.btn-sq):not(.btn-del):not(.btn-pp-trash):not(.btn-boveda-discrete):not(.calc-key--num):not(.calc-key--op):not(.calc-key--clear):not(.calc-key--back):not(.calc-key--eq) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  font-family: "Roboto Mono", ui-monospace, monospace !important;
  font-size: var(--btn-font-size) !important;
  font-weight: var(--btn-font-weight) !important;
  line-height: 1.4;
  text-transform: uppercase !important;
  letter-spacing: var(--btn-letter-spacing);
  background: var(--btn-bg) !important;
  color: var(--foreground) !important;
  border: 1px solid transparent !important;
  border-radius: var(--btn-radius);
  padding: var(--btn-padding);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  width: auto;
  max-width: 100%;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}

:is(
  button,
  input[type="submit"],
  input[type="button"],
  .btn,
  .btn-primary,
  .btn-danger,
  .btn-warning,
  .btn-add,
  .btn-save,
  .btn-save-copy,
  .btn-precios-acc,
  .btn-catalogo,
  .btn-imprimir,
  .btn-primary-std,
  .btn-agregar-catalogo,
  .btn-file-preview,
  .btn-file-del,
  .btn-del,
  .btn-dark,
  .btn-print,
  .btn-pp-calc,
  .btn-pp-add-presu,
  .btn-pp-enviar-presu,
  .btn-catalogo-acc,
  .btn-sq,
  .btn-cobro,
  .btn-contab,
  .btn-nuevo-mov,
  .btn-proveedor-cargar,
  .btn-rowact,
  .btn-ver-factura,
  .btn-add-email,
  .btn-add-cat-row
):not(.tab-btn):not(.tab-trigger):not(.close-btn):not(.btn-cerrar-modal):not(.header-avatar):not(.sidebar-toggle):not(.link-btn):not(.btn-icon):not(.btn-sq):not(.btn-del):not(.btn-pp-trash):not(.btn-boveda-discrete):not(.calc-key--num):not(.calc-key--op):not(.calc-key--clear):not(.calc-key--back):not(.calc-key--eq):hover {
  background: var(--btn-bg) !important;
  border-color: var(--btn-border-hover) !important;
  opacity: 1 !important;
}

.btn-full { width: 100% !important; }
.btn-mt-sm { margin-top: 10px !important; }
.btn-mt-md { margin-top: 20px !important; }

/* Variante secundaria (borde visible) */
.btn-save-copy,
.btn-primary-std.ghost {
  background: transparent !important;
  border-color: var(--border-color) !important;
}

.btn-add {
  border-style: dashed !important;
  border-color: var(--border-color) !important;
  background: transparent !important;
}

.btn-catalogo {
  background: #f1c40f22 !important;
  color: #f1c40f !important;
  border-color: #f1c40f66 !important;
}

.btn-precios-acc.print,
.btn-catalogo-acc.print {
  border-color: #2ecc7188 !important;
  background: #2ecc7122 !important;
  color: #2ecc71 !important;
}

.btn-precios-acc.print:hover,
.btn-catalogo-acc.print:hover {
  border-color: #2ecc71 !important;
}

:is(
  button,
  .btn,
  .btn-primary,
  .btn-save,
  .btn-save-copy,
  .btn-primary-std,
  .btn-add,
  .btn-dark,
  .btn-cobro,
  .btn-contab,
  .btn-nuevo-mov
):not(.tab-btn):not(.close-btn):not(.btn-cerrar-modal):not(.header-avatar):not(.sidebar-toggle):not(.btn-icon):not(.btn-sq):not(.btn-del) :is(.material-symbols-outlined, i, svg) {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
  font-size: 14px !important;
  line-height: 14px !important;
}

/* Controles de impresión / PDF (fondo oscuro sobre hoja blanca) */
#controles-impresion :is(button, .btn-imprimir),
.pdf-doc-page .pdf-toolbar :is(button, .btn-imprimir) {
  font-family: "Roboto Mono", ui-monospace, monospace !important;
  font-size: var(--btn-font-size) !important;
  font-weight: var(--btn-font-weight) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--btn-letter-spacing);
  padding: var(--btn-padding) !important;
  border-radius: var(--btn-radius) !important;
  background: #3a3f47 !important;
  color: #f0f2f5 !important;
  border: 1px solid transparent !important;
}

#controles-impresion :is(button, .btn-imprimir):hover,
.pdf-doc-page .pdf-toolbar :is(button, .btn-imprimir):hover {
  border-color: color-mix(in srgb, #f0f2f5 32%, transparent) !important;
}

/* Teclado numérico (calculadora en caja) */
.calc-pad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.calc-pad button {
  text-transform: none !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  padding: 15px !important;
  border-radius: 8px !important;
  letter-spacing: 0;
  cursor: pointer;
  border: none;
}

.calc-pad .calc-key--num {
  background: var(--c-bg-search) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--c-text-primary) !important;
}

.calc-pad .calc-key--op {
  background: #3498db !important;
  color: #fff !important;
}

.calc-pad .calc-key--clear {
  background: #e74c3c !important;
  color: #fff !important;
}

.calc-pad .calc-key--back {
  background: #f39c12 !important;
  color: #fff !important;
}

.calc-pad .calc-key--eq {
  background: #2ecc71 !important;
  color: #111 !important;
}

/* Botones solo icono: cuadrado oscuro, esquinas redondeadas */
.btn-icon,
.btn-sq,
.btn-del,
.btn-icon-plus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--btn-icon-size) !important;
  height: var(--btn-icon-size) !important;
  min-width: var(--btn-icon-size) !important;
  min-height: var(--btn-icon-size) !important;
  padding: 0 !important;
  border-radius: var(--btn-icon-radius) !important;
  border: 1px solid var(--border-color) !important;
  background: var(--c-bg-search) !important;
  color: var(--c-text-primary) !important;
  text-transform: none !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: border-color 0.2s ease, filter 0.2s ease;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}

.btn-icon:hover,
.btn-sq:hover,
.btn-del:hover,
.btn-icon-plus:hover {
  border-color: var(--btn-border-hover) !important;
  background: var(--c-bg-search) !important;
  filter: brightness(1.12);
}

.btn-del {
  color: #e74c3c !important;
  border-color: color-mix(in srgb, #e74c3c 35%, var(--border-color)) !important;
  background: color-mix(in srgb, #e74c3c 10%, var(--c-bg-search)) !important;
}

.btn-del:hover {
  border-color: color-mix(in srgb, #e74c3c 55%, var(--border-color)) !important;
  filter: brightness(1.15);
}

.btn-icon.ok {
  color: #7cf5a8 !important;
  border-color: #2ecc7188 !important;
  background: #2ecc7122 !important;
}

.btn-icon.danger {
  color: #ff9f9f !important;
  border-color: #e74c3c88 !important;
  background: #e74c3c22 !important;
}

.btn-icon-success {
  background: hsl(142.1 76.2% 36.3%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.btn-icon-success:hover {
  filter: brightness(1.08) !important;
  background: hsl(142.1 76.2% 36.3%) !important;
}

.btn-icon-plus {
  width: var(--btn-icon-plus-size) !important;
  height: var(--btn-icon-plus-size) !important;
  min-width: var(--btn-icon-plus-size) !important;
  min-height: var(--btn-icon-plus-size) !important;
  border-color: hsl(168 42% 38% / 0.45) !important;
  background: hsl(168 28% 16%) !important;
  color: hsl(168 50% 88%) !important;
}

.btn-icon .material-symbols-outlined,
.btn-icon svg,
.btn-icon i,
.btn-sq .material-symbols-outlined,
.btn-sq svg,
.btn-sq i,
.btn-del .material-symbols-outlined,
.btn-icon-plus .material-symbols-outlined {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  line-height: 18px !important;
  stroke: currentColor;
}

/* Botón único alineado a la derecha */
.form-actions-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.modal-content > .form-actions-right:last-child,
.modal-content > .form-actions-right {
  margin-top: 1rem;
}

/* ── Checkboxes tipo switch ── */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 24px;
  min-width: 42px;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}

input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--foreground);
  transition: transform 0.25s ease;
  z-index: 1;
}

input[type="checkbox"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: transparent;
  transition: background 0.25s ease;
}

input[type="checkbox"]:checked {
  background: color-mix(in srgb, var(--foreground) 18%, var(--muted));
  border-color: var(--btn-border-hover);
}

input[type="checkbox"]:checked::before {
  transform: translateX(18px);
}

input[type="checkbox"]:checked::after {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 28%, transparent);
  outline-offset: 2px;
}

input[type="checkbox"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Modales ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  width: min(960px, 95vw);
  max-height: 90vh;
  overflow: auto;
  background: var(--c-bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 22px;
}

.modal-sm { width: min(560px, 95vw); }

button.close-btn,
button.btn-cerrar-modal {
  background: transparent !important;
  border: none !important;
  color: var(--c-text-secondary) !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 4px !important;
  box-shadow: none !important;
  text-transform: none !important;
}

button.close-btn i,
button.btn-cerrar-modal i {
  color: inherit !important;
}

button.header-avatar {
  background: var(--c-bg-search) !important;
  color: var(--c-text-primary) !important;
  border: 1px solid var(--border-color) !important;
  opacity: 1 !important;
  text-transform: none !important;
  width: auto !important;
  padding: 10px !important;
}

button.header-avatar i {
  color: var(--c-text-primary) !important;
}

button.sidebar-toggle {
  text-transform: none !important;
}

/* ── Badges ── */
.badge,
.badge-ok,
.badge.ok,
.badge.pend,
.badge.off,
.badge-venc {
  background: #2f343a !important;
  color: #fff !important;
  border: 1px solid #4b525a !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  padding: 4px 8px !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ot-card {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  background: var(--c-bg-primary);
}

.ot-info h3 { margin: 0 0 10px 0; color: var(--c-text-primary); }

.ot-items {
  font-size: var(--text-base);
  background: var(--c-bg-search);
  padding: 10px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 10px;
}

.link-btn {
  background: transparent !important;
  border: 1px dashed var(--border-color) !important;
  color: var(--c-text-secondary) !important;
  text-transform: none !important;
  width: 100%;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
}

.link-btn:hover {
  color: var(--c-text-primary) !important;
  border-color: var(--muted-foreground) !important;
  background: transparent !important;
}

/* Tablitas de fecha (año / mes / día) */
.fecha-lapida,
.cc-table .fecha-lapida {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: calc(58px * var(--fecha-lapida-scale)) !important;
  max-width: calc(58px * var(--fecha-lapida-scale));
  padding: calc(3px * var(--fecha-lapida-scale)) calc(5px * var(--fecha-lapida-scale)) !important;
  border-radius: calc(6px * var(--fecha-lapida-scale)) !important;
  border: 1px solid var(--border-color);
  background: var(--c-bg-search);
  color: var(--c-text-secondary);
  line-height: 1.05 !important;
  text-align: center;
  font-size: calc(0.68rem * var(--fecha-lapida-scale)) !important;
  font-family: "Roboto Mono", ui-monospace, monospace !important;
  text-transform: uppercase;
  font-weight: normal !important;
  letter-spacing: 0.01em;
}

.cc-table .fecha-lapida {
  min-width: calc(50px * var(--fecha-lapida-scale)) !important;
  max-width: calc(50px * var(--fecha-lapida-scale));
  font-size: calc(0.594rem * var(--fecha-lapida-scale)) !important;
}

.fecha-lapida .f-anio,
.fecha-lapida .f-mes,
.fecha-lapida .f-dia,
.cc-table .fecha-lapida .f-anio,
.cc-table .fecha-lapida .f-mes,
.cc-table .fecha-lapida .f-dia {
  display: block;
  font-size: inherit !important;
  font-weight: normal !important;
  line-height: 1.05 !important;
  font-family: inherit !important;
}

.fecha-lapida .f-anio,
.cc-table .fecha-lapida .f-anio {
  color: var(--c-text-secondary);
  font-size: 0.82em !important;
}

.fecha-lapida .f-mes,
.fecha-lapida .f-dia,
.cc-table .fecha-lapida .f-mes,
.cc-table .fecha-lapida .f-dia {
  color: var(--c-text-primary);
}

.cc-col-fecha {
  width: 13% !important;
  min-width: calc(50px * var(--fecha-lapida-scale));
  text-align: center;
}