body {
  background:
    radial-gradient(circle at top, rgba(196,181,80,0.08), transparent 26%),
    linear-gradient(180deg, rgba(62,70,55,1) 0%, rgba(55,63,48,1) 100%);
  background-attachment: fixed;
  margin: 14px;
}

main,
.window-column,
.window-row,
nav,
.footer-window {
  max-width: 1180px;
}

nav {
  margin: 0 auto 20px;
}

nav > li > a,
code,
.stat-box .big,
.month-total,
.money,
.good,
.slot-highlight {
  color: #c4b550;
}

.app-hero p,
.section-head p,
.footer-window p {
  max-width: 760px;
}

.hero-row,
.section-head,
.month-card-head,
.month-card-foot,
.table-actions,
.form-row,
.modal-actions,
.year-controls,
.category-row-actions {
  display: flex;
}

.hero-row {
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.year-box {
  min-width: 230px;
  margin-bottom: 0;
}

.year-box label,
.field label,
.inline-label,
.add-category label {
  display: block;
  margin: 0 0 6px;
  color: #d8ded3;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.year-controls {
  gap: 8px;
  align-items: center;
}

.year-controls button {
  min-width: 36px;
  text-align: center;
}

.year-controls select {
  width: 100%;
  min-height: 25px;
}

.action-row,
.compact-grid {
  gap: 10px;
  flex-wrap: wrap;
}

.action-row button {
  min-width: 160px;
  height: 32px;
}

.primary-action {
  font-weight: bold;
  color: #f2f5ee;
}

.stat-box {
  min-height: 88px;
  flex: 1 1 190px;
}

.stat-box .label {
  color: #c8d1c1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.stat-box .big {
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 1px;
  word-break: break-word;
}

.stat-box .big.small {
  font-size: 20px;
}

.months-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.month-card {
  min-height: 135px;
  cursor: pointer;
  margin-bottom: 0;
}

.month-card:hover {
  background-color: #52604b;
}

.month-card.current {
  outline: 1px dashed #c4b550;
  outline-offset: -4px;
}

.month-card-head,
.month-card-foot {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.month-name {
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  color: #f2f5ee;
}

.month-count {
  color: #d8ded3;
  font-size: 12px;
}

.month-total {
  font-size: 28px;
  font-weight: bold;
  margin: 18px 0 12px;
}

.month-card-foot {
  color: #c8d1c1;
  font-size: 12px;
}

.lower-panels {
  gap: 20px;
}

.two-col .window {
  margin-bottom: 20px;
}

.clean-list {
  margin: 8px 18px 10px 28px;
  padding: 0;
}

.clean-list li {
  margin: 8px 0;
}

.mini-terminal p,
.list-box p,
.modal-body p {
  margin: 8px 10px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 24, 17, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.hidden {
  display: none !important;
}

.modal-window {
  width: min(1040px, 96vw);
  max-width: 1040px;
  max-height: 92vh;
  overflow: auto;
  margin: 0;
}

.modal-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-indent: 24px;
  box-sizing: border-box;
}

.window-button {
  min-width: 25px;
  width: 25px;
  height: 20px;
  padding: 0;
  text-align: center;
  text-indent: 0;
  margin-left: auto;
}

.modal-body {
  padding-bottom: 2px;
}

.modal-actions {
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 14px 0 0;
}

.modal-actions button {
  min-width: 120px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 12px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 29px;
  padding: 4px 6px;
}

.field textarea {
  min-height: 68px;
  resize: vertical;
}

.field.full {
  grid-column: 1 / -1;
}

.form-row {
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.form-error {
  color: #f2d06b;
  min-height: 20px;
  margin: 0 0 10px;
}

.table-wrap {
  overflow: auto;
  max-height: 58vh;
  border-top: solid 1px #292d23;
  border-bottom: solid 1px #899281;
  border-left: solid 1px #292d23;
  border-right: solid 1px #899281;
  background: #3e4637;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 840px;
}

th,
td {
  padding: 7px 8px;
  border-bottom: 1px solid #292d23;
  text-align: left;
  vertical-align: middle;
}

th {
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  background: #4c5844;
  position: sticky;
  top: 0;
  z-index: 1;
}

td input[type="number"] {
  width: 92px;
}

.table-actions {
  gap: 6px;
  flex-wrap: wrap;
}

.table-actions button {
  min-width: 62px;
  height: 24px;
}

.muted,
.badge {
  color: #c8d1c1;
  font-size: 12px;
}

.badge {
  display: inline-block;
  border-top: solid 1px #899281;
  border-bottom: solid 1px #292d23;
  border-left: solid 1px #899281;
  border-right: solid 1px #292d23;
  background: #4c5844;
  padding: 2px 6px;
  margin: 2px 2px 2px 0;
}

.danger {
  color: #e7b0a6;
}

.good {
  font-weight: bold;
}

.category-list {
  display: grid;
  gap: 8px;
}

.category-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(150px, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  margin: 0;
}

.category-row input,
.category-row select {
  width: 100%;
  box-sizing: border-box;
}

.category-row-actions {
  gap: 6px;
}

.add-category {
  margin-top: 12px;
}

.empty-state {
  padding: 20px 12px;
  color: #c8d1c1;
}

.footer-window {
  margin: 0 auto 20px;
}

@media (max-width: 980px) {
  .months-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-row,
  .window-row,
  .two-col,
  .lower-panels {
    flex-direction: column;
  }

  .year-box,
  .window.half,
  .window-row .window {
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 680px) {
  body {
    margin: 8px;
  }

  nav li {
    display: block;
  }

  nav li ul.dropdown {
    position: static;
    border-top: solid 1px #292d23;
  }

  .months-grid {
    grid-template-columns: 1fr;
  }

  .month-card {
    min-height: 112px;
  }

  .month-total {
    font-size: 26px;
    margin: 10px 0;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .modal-backdrop {
    padding: 8px;
    align-items: stretch;
  }

  .modal-window {
    width: 100%;
    max-height: calc(100vh - 16px);
  }

  .category-row {
    grid-template-columns: 1fr;
  }

  .action-row button,
  .modal-actions button {
    width: 100%;
  }
}

/* Ajustes para eliminar iconografía decorativa que no funciona */
.window:not(.headless)::before,
.titlebar {
  background-image: none !important;
  text-indent: 0 !important;
  padding: 0 8px !important;
}

.window:not(.no-resize)::after {
  display: none !important;
}

.range-box {
  min-width: 290px;
}

.range-label {
  flex: 1 1 auto;
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 8px;
  border-top: solid 1px #292d23;
  border-bottom: solid 1px #899281;
  border-left: solid 1px #292d23;
  border-right: solid 1px #899281;
  background: #3e4637;
  color: #f2f5ee;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
}

.month-name {
  font-size: 16px;
}

.window-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-window {
  padding-top: 10px;
}

/* v4: móvil tipo app: datos fijos arriba y acción principal fija abajo */
@media (max-width: 680px) {
  :root {
    --mobile-top-strip: 68px;
    --mobile-bottom-action: 72px;
  }

  body {
    margin: 0;
    padding: calc(var(--mobile-top-strip) + env(safe-area-inset-top)) 8px calc(var(--mobile-bottom-action) + env(safe-area-inset-bottom));
  }

  nav,
  main,
  .window-row,
  .footer-window {
    max-width: none;
    width: 100%;
  }

  nav {
    margin: 0 0 8px;
  }

  .app-hero {
    padding: 8px;
    margin-bottom: 8px;
  }

  .app-hero h1,
  .app-hero p {
    display: none;
  }

  .hero-row {
    display: block;
  }

  .range-box {
    min-width: 0;
    width: 100%;
    margin: 0 0 8px;
    padding: 6px;
  }

  .year-controls {
    gap: 5px;
  }

  .range-label {
    min-height: 28px;
    font-size: 10px;
    line-height: 1.2;
    padding: 0 4px;
  }

  .action-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .action-row button {
    width: 100%;
    min-width: 0;
    height: 30px;
    font-size: 11px;
    padding-left: 4px;
    padding-right: 4px;
  }

  #addExpenseBtn {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 900;
    width: auto !important;
    min-width: 0;
    height: 50px;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 0 0 1px #899281, 0 4px 0 #292d23;
  }

  #statusStrip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    max-width: none;
    width: auto;
    margin: 0;
    padding: calc(4px + env(safe-area-inset-top)) 4px 4px;
    background: #2f392c;
    border-bottom: solid 1px #899281;
    box-shadow: 0 2px 0 #292d23;
  }

  #statusStrip .stat-box {
    min-height: 0;
    margin: 0;
    padding: 6px 4px;
    flex: none;
    overflow: hidden;
  }

  #statusStrip .label {
    margin: 0 0 4px;
    font-size: 8px;
    line-height: 1.05;
    letter-spacing: .5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #statusStrip .big,
  #statusStrip .big.small {
    font-size: 14px;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .section-head {
    display: block;
  }

  .section-head h2 {
    margin-bottom: 4px;
  }

  .section-head p {
    margin-top: 0;
  }

  .month-card {
    min-height: 0;
    padding: 10px;
  }

  .month-total {
    font-size: 24px;
    margin: 8px 0;
  }

  .month-name {
    font-size: 14px;
  }

  .month-count,
  .month-card-foot {
    font-size: 11px;
  }

  .modal-backdrop {
    z-index: 1000;
  }
}

/* v5: tarjetas con estado, búsqueda, simulación y móvil más tipo app */
.month-status {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #c8d1c1;
  font-size: 12px;
  margin: 0 0 8px;
}

.month-card.all-paid {
  background-color: #3e4a39;
}

.month-card.has-adjustments {
  border-bottom-color: #c4b550;
}

.month-card.negative-adjustments {
  border-left-color: #ad5f4f;
}

.month-card.has-charges .month-name::after {
  content: ' [CARGO]';
  color: #c4b550;
  font-size: 10px;
}

.month-adjustment {
  margin-top: 8px;
  font-size: 11px;
  color: #c4b550;
}

.mobile-month-list {
  display: none;
}

.mobile-entry-card {
  margin-bottom: 10px;
}

.entry-card-head,
.entry-card-money {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.entry-card-head label,
.entry-card-money label {
  white-space: nowrap;
}

.entry-card-money input {
  width: 110px;
}

.month-modal-summary p {
  margin: 6px 10px;
}

.month-quick-actions {
  justify-content: flex-start;
}

.preview-box:empty {
  display: none;
}

.preview-box {
  margin-top: 10px;
}

.table-wrap.compact table {
  margin-bottom: 0;
}

.quick-search {
  width: 100%;
  min-height: 34px;
  font-size: 16px;
}

.search-card h2 {
  margin-top: 0;
}

.category-row {
  display: grid;
  grid-template-columns: 74px minmax(150px, 1fr) minmax(160px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.category-row input[data-category-code] {
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
}

.badge {
  word-break: break-word;
}

#yearTotalLabel {
  white-space: nowrap;
}

@media (max-width: 680px) {
  :root {
    --mobile-top-strip: 62px;
    --mobile-bottom-action: 74px;
  }

  .action-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #statusStrip .label {
    font-size: 7.5px;
  }

  #statusStrip .big,
  #statusStrip .big.small {
    font-size: 13px;
  }

  .months-grid {
    gap: 8px;
  }

  .month-card {
    min-height: 118px;
  }

  .month-status,
  .month-card-foot,
  .month-adjustment {
    font-size: 10px;
  }

  .desktop-month-table {
    display: none;
  }

  .mobile-month-list {
    display: block;
  }

  .mobile-entry-card {
    padding: 8px;
  }

  .entry-card-head,
  .entry-card-money {
    display: block;
  }

  .entry-card-money label {
    display: block;
    margin-top: 6px;
  }

  .entry-card-money input {
    width: 100%;
  }

  .month-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .category-row {
    grid-template-columns: 58px 1fr;
  }

  .category-row select,
  .category-row-actions {
    grid-column: 1 / -1;
  }

  .category-row-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .search-card .modal-actions {
    justify-content: stretch;
  }
}


/* v6: navegación móvil limpia */
.mobile-tools-btn {
  display: none;
}

.mobile-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mobile-menu-grid button {
  min-height: 42px;
}

@media (max-width: 680px) {
  nav {
    display: none !important;
  }

  .mobile-tools-btn {
    display: block;
    position: fixed;
    right: 10px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    z-index: 920;
    min-width: 78px;
    height: 36px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: bold;
    color: #f2f5ee;
    box-shadow: 0 0 0 1px #899281, 0 3px 0 #292d23;
  }

  .action-row {
    display: block !important;
    margin: 0;
  }

  .action-row button:not(#addExpenseBtn) {
    display: none !important;
  }

  #addExpenseBtn {
    left: 10px;
    right: 100px;
  }

  .app-hero {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 8px;
  }

  .app-hero::before {
    display: none !important;
  }

  .range-box {
    margin-bottom: 8px;
  }

  .mobile-menu-grid {
    grid-template-columns: 1fr;
  }
}

/* v7: barra inferior móvil alineada: acción principal + menú en la misma línea */
@media (max-width: 680px) {
  :root {
    --mobile-bottom-action: 86px;
  }

  body::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(72px + env(safe-area-inset-bottom));
    z-index: 880;
    pointer-events: none;
    background: #2f392c;
    border-top: solid 1px #899281;
    box-shadow: 0 -2px 0 #292d23;
  }

  #addExpenseBtn,
  .mobile-tools-btn {
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    height: 52px !important;
    z-index: 920;
    margin: 0 !important;
    box-sizing: border-box;
  }

  #addExpenseBtn {
    left: 10px !important;
    right: 96px !important;
    width: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    padding-left: 14px;
    font-size: 16px;
  }

  .mobile-tools-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    right: 10px !important;
    left: auto !important;
    width: 78px !important;
    min-width: 78px !important;
    padding: 0 !important;
    font-size: 12px;
  }
}


/* v8: escritorio replanteado para usar todo el espacio */
@media (min-width: 681px) {
  body {
    margin: 8px;
  }

  nav {
    display: none !important;
  }

  main,
  .window-row,
  .window-column,
  .footer-window {
    max-width: min(1320px, calc(100vw - 16px));
    width: 100%;
  }

  main {
    margin: 0 auto;
  }

  .window,
  .box {
    max-width: none;
  }

  .control-panel {
    margin-bottom: 8px;
    padding: 12px;
  }

  .control-panel::before {
    margin-bottom: 8px !important;
  }

  .hero-row {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(300px, 360px);
    gap: 14px;
    align-items: center;
  }

  .app-hero h1 {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.1;
  }

  .app-hero p {
    max-width: none;
    margin: 0;
    line-height: 1.25;
  }

  .range-box {
    width: 100%;
    min-width: 0;
    padding: 8px;
  }

  .range-box label {
    margin-bottom: 5px;
  }

  .range-label {
    min-height: 24px;
    font-size: 12px;
    line-height: 1.1;
  }

  .action-row {
    display: grid !important;
    grid-template-columns: 1.35fr repeat(7, 1fr);
    gap: 8px;
    margin-top: 10px;
  }

  .action-row button {
    min-width: 0;
    width: 100%;
    height: 30px;
    padding-left: 8px;
    padding-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #statusStrip {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 auto 8px;
  }

  #statusStrip .stat-box {
    min-height: 58px;
    margin: 0;
    padding: 9px 10px;
  }

  #statusStrip .label {
    margin-bottom: 4px;
    font-size: 10px;
  }

  #statusStrip .big,
  #statusStrip .big.small {
    font-size: 24px;
    line-height: 1.05;
  }

  .months-panel {
    padding: 12px;
  }

  .section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
    margin-bottom: 10px;
  }

  .section-head h2 {
    margin: 0;
    font-size: 17px;
  }

  .section-head p {
    margin: 0;
    max-width: none;
    text-align: right;
  }

  .months-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
  }

  .month-card {
    min-height: 122px;
    padding: 9px;
  }

  .month-card-head,
  .month-status,
  .month-card-foot {
    gap: 6px;
  }

  .month-name {
    font-size: 14px;
    line-height: 1.1;
  }

  .month-count,
  .month-card-foot,
  .month-status,
  .month-adjustment {
    font-size: 10px;
    line-height: 1.15;
  }

  .month-total {
    font-size: 25px;
    margin: 10px 0 8px;
  }

  .dashboard-note {
    display: none;
  }
}

@media (min-width: 681px) and (max-width: 1040px) {
  .action-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .months-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 681px) and (max-width: 820px) {
  .hero-row {
    grid-template-columns: 1fr;
  }

  .months-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* v9: Ayuda navegable */
.docs-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.docs-nav {
  position: sticky;
  top: 0;
  display: grid;
  gap: 6px;
  margin: 0;
}

.docs-nav-btn {
  width: 100%;
  min-height: 30px;
  text-align: left;
  padding-left: 10px;
}

.docs-nav-btn.active {
  color: #f2f5ee;
  outline: 1px dashed #c4b550;
  outline-offset: -4px;
}

.docs-content {
  min-height: 360px;
  margin: 0;
}

.doc-section {
  display: none;
}

.doc-section.active {
  display: block;
}

.doc-section h2 {
  color: #c4b550;
  margin-top: 0;
}

.docs-steps {
  margin-left: 22px;
  padding-left: 8px;
}

.docs-steps li {
  margin: 8px 0;
}

.docs-actions {
  justify-content: space-between;
}

@media (min-width: 681px) {
  .action-row {
    grid-template-columns: 1.35fr repeat(8, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 681px) and (max-width: 1180px) {
  .action-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .docs-layout {
    grid-template-columns: 1fr;
  }

  .docs-nav {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .docs-nav-btn {
    min-height: 34px;
    font-size: 11px;
  }

  .docs-content {
    min-height: 260px;
  }
}

/* v10: categorías con código automático y ayuda móvil más cómoda */
.category-code,
.auto-code-preview {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-top: solid 1px #292d23;
  border-bottom: solid 1px #899281;
  border-left: solid 1px #292d23;
  border-right: solid 1px #899281;
  background: #3e4637;
  color: #f2f5ee;
  font-weight: bold;
  letter-spacing: 1px;
}

.auto-code-preview {
  justify-content: flex-start;
  padding: 4px 8px;
  color: #c4b550;
}

@media (max-width: 680px) {
  .docs-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: stretch;
  }

  .docs-actions button {
    width: 100% !important;
    min-width: 0;
  }

  .docs-actions [data-close-modal] {
    grid-column: 1 / -1;
  }

  .docs-nav {
    max-height: 134px;
    overflow: auto;
  }

  .category-row {
    grid-template-columns: 64px 1fr !important;
  }

  .category-row select,
  .category-row .category-row-actions {
    grid-column: 1 / -1;
  }

  .category-row-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
}


/* v12: botones más legibles en iPad/tablet y móvil */
button,
input[type="button"],
input[type="submit"],
nav > li > a,
.docs-nav-btn,
.mobile-menu-grid button,
.category-row-actions button,
.table-actions button,
.modal-actions button,
.action-row button,
.mobile-tools-btn,
#addExpenseBtn,
.year-controls button {
  font-weight: 800 !important;
  color: #f2f5ee !important;
  text-shadow: 1px 1px 0 #1f261d !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

nav > li > a {
  color: #d7c95c !important;
}

button {
  letter-spacing: .15px;
}

@media (max-width: 900px) {
  button,
  input[type="button"],
  input[type="submit"],
  nav > li > a,
  .docs-nav-btn,
  .mobile-menu-grid button,
  .category-row-actions button,
  .table-actions button,
  .modal-actions button,
  .action-row button,
  .mobile-tools-btn,
  #addExpenseBtn,
  .year-controls button {
    font-weight: 900 !important;
    text-shadow: 1px 1px 0 #11170f, 0 0 1px #11170f !important;
  }

  .action-row button,
  .mobile-menu-grid button,
  .modal-actions button,
  .docs-actions button,
  .docs-nav-btn {
    font-size: 13px !important;
  }

  #addExpenseBtn {
    font-size: 17px !important;
  }

  .mobile-tools-btn {
    font-size: 13px !important;
  }
}


/* v13: evita cierre accidental visualizando el modal cuando se toca fuera */
.modal-backdrop.modal-nudge .modal-window {
  outline: 1px dashed #c4b550;
  outline-offset: -5px;
}

/* v14: más opciones para rango/meses del dashboard */
.year-controls {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) 36px 54px;
  gap: 8px;
}

.year-controls #resetRange {
  min-width: 54px;
  padding-left: 4px;
  padding-right: 4px;
}

.range-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-help p {
  margin: 8px 10px;
}

@media (min-width: 681px) {
  .months-grid[data-view-months="1"] { grid-template-columns: minmax(220px, 360px); }
  .months-grid[data-view-months="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .months-grid[data-view-months="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .months-grid[data-view-months="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .months-grid[data-view-months="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .months-grid[data-view-months="9"],
  .months-grid[data-view-months="12"],
  .months-grid[data-view-months="13"],
  .months-grid[data-view-months="18"],
  .months-grid[data-view-months="24"],
  .months-grid[data-view-months="36"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 681px) and (max-width: 1040px) {
  .months-grid[data-view-months="6"],
  .months-grid[data-view-months="9"],
  .months-grid[data-view-months="12"],
  .months-grid[data-view-months="13"],
  .months-grid[data-view-months="18"],
  .months-grid[data-view-months="24"],
  .months-grid[data-view-months="36"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 681px) and (max-width: 820px) {
  .months-grid[data-view-months="4"],
  .months-grid[data-view-months="6"],
  .months-grid[data-view-months="9"],
  .months-grid[data-view-months="12"],
  .months-grid[data-view-months="13"],
  .months-grid[data-view-months="18"],
  .months-grid[data-view-months="24"],
  .months-grid[data-view-months="36"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .year-controls {
    grid-template-columns: 34px minmax(0, 1fr) 34px 50px;
    gap: 6px;
  }

  .range-label {
    font-size: 10px;
    padding: 0 4px;
  }

  .modal-actions #applyCurrentRange {
    grid-column: 1 / -1;
  }
}

.final-actual-input {
  width: 96px;
  min-width: 82px;
}

/* v19: barra principal limpia y sin botones sueltos */
@media (min-width: 681px) {
  .desktop-toolbar.action-row {
    display: grid !important;
    grid-template-columns: 1.45fr repeat(5, minmax(120px, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch;
  }

  .desktop-toolbar.action-row button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (min-width: 681px) and (max-width: 980px) {
  .desktop-toolbar.action-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.search-help p {
  margin: 7px 10px;
}

.desktop-more-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 680px) {
  .desktop-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* v21: ayuda clara en formularios y resultados de búsqueda legibles */
.field-hint {
  display: block;
  margin-top: 5px;
  color: #c8d1c1;
  font-size: 11px;
  line-height: 1.35;
}

.search-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.search-card-head h2 {
  margin-bottom: 4px;
}

.search-card-amount {
  color: #c4b550;
  font-size: 20px;
  font-weight: 900;
  white-space: nowrap;
}

.search-card h3 {
  margin: 12px 0 8px;
  color: #c4b550;
}

.search-movement-list {
  display: grid;
  gap: 6px;
}

.search-movement {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(210px, 1.1fr);
  gap: 10px;
  align-items: center;
  padding: 7px 9px;
  border-top: solid 1px #899281;
  border-bottom: solid 1px #292d23;
  border-left: solid 1px #899281;
  border-right: solid 1px #292d23;
  background: #3e4637;
}

.search-movement strong,
.search-movement span {
  display: block;
}

.search-movement-money {
  color: #c4b550;
  font-weight: 900;
  white-space: nowrap;
}

.search-movement-detail {
  color: #f2f5ee;
  font-size: 12px;
}

.movement-state {
  display: inline-block !important;
  margin-right: 6px;
  font-weight: 900;
  color: #c4b550;
}

.search-movement.paid .movement-state {
  color: #d8ded3;
}

@media (max-width: 680px) {
  .search-card-head,
  .search-movement {
    display: block;
  }

  .search-card-amount,
  .search-movement-money,
  .search-movement-detail {
    margin-top: 6px;
  }
}

/* v23: claridad conceptual y asistente de tipo de gasto */
.type-guide {
  margin-bottom: 12px;
}

.type-guide p {
  margin: 6px 8px 10px;
}

.type-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.type-guide-grid button {
  min-height: 34px;
  white-space: normal;
  font-weight: 900;
}

.checkbox-line {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.checkbox-line input {
  width: auto;
}

.search-card-amount small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #c8d1c1;
  text-align: right;
  white-space: nowrap;
}

.month-modal-summary p {
  line-height: 1.35;
}

@media (max-width: 680px) {
  .type-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .type-guide-grid button {
    font-size: 12px;
    min-height: 38px;
  }

  .search-card-amount small {
    text-align: left;
  }
}


/* v24: checkbox sin doble tick en iPad/Safari/Chrome.
   El theme usa una imagen propia; anulamos por completo el check nativo. */
input[type="checkbox"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  margin: 0 6px 0 0;
  padding: 0 !important;
  border-top: solid 1px #292d23;
  border-bottom: solid 1px #899281;
  border-left: solid 1px #292d23;
  border-right: solid 1px #899281;
  background-color: #3e4637;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 11px 11px;
  border-radius: 0 !important;
  box-shadow: none !important;
}

input[type="checkbox"]:checked {
  background-image: url("styles/greensteam/checkmark.png") !important;
}

input[type="checkbox"]::before,
input[type="checkbox"]::after {
  content: none !important;
  display: none !important;
}

.checkbox-line input[type="checkbox"] {
  flex: 0 0 15px;
}


.type-guide-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.type-guide-hint {
  margin: 10px 4px 0;
}

@media (max-width: 720px) {
  .type-guide-grid-3 {
    grid-template-columns: 1fr;
  }
}