:root {
  --bg-a: #3e4637;
  --bg-b: #222820;
  --panel: #4c5844;
  --panel-dark: #31382d;
  --ink: #d8ded3;
  --muted: #aeb8a5;
  --accent: #c4b550;
  --accent-2: #a7b56d;
  --danger: #e27b64;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 14px;
  background:
    radial-gradient(circle at top left, rgba(196, 181, 80, 0.14), transparent 28%),
    radial-gradient(circle at bottom right, rgba(118, 159, 92, 0.10), transparent 34%),
    linear-gradient(180deg, var(--bg-a), var(--bg-b));
  background-attachment: fixed;
  color: var(--ink);
}

body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.025),
    rgba(255,255,255,0.025) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: screen;
  opacity: .28;
}

main,
.window-row,
.window-column,
.top-nav,
.spec-panel {
  max-width: 1280px;
}

main,
.top-nav,
.spec-panel {
  margin-left: auto;
  margin-right: auto;
}

.top-nav {
  margin-bottom: 20px;
}

nav > li > a,
code,
.stat-box strong,
.mono-small,
.record-name,
.pill,
.table-wrap strong {
  color: var(--accent);
}

h1 {
  font-size: clamp(22px, 3vw, 34px);
  margin-bottom: 8px;
}

h2 {
  color: #f2f5ee;
}

p,
label,
td,
th,
button,
input,
select,
textarea {
  font-size: 13px;
}

.lead {
  max-width: 920px;
  line-height: 1.55;
}

.hero {
  max-width: 1280px;
}


.app-shell {
  max-width: 1280px !important;
}

.intro-block {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(137, 146, 129, .35);
}

.eyebrow {
  margin-bottom: 10px;
  color: #f2f5ee;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  font-weight: bold;
}

.intro-block .lead {
  margin-bottom: 14px;
}

.window,
.box {
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

.window:not(.headless)::before,
.titlebar,
legend {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  color: white;
  font-weight: bold;
}

.stats-row {
  gap: 12px;
  margin-top: 18px;
}

.stat-box {
  flex: 1;
  min-height: 78px;
  margin-bottom: 0;
}

.stat-box.wide {
  flex: 1.8;
}

.stat-label {
  display: block;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  font-size: 11px;
}

.stat-box strong {
  display: block;
  font-size: 26px;
  line-height: 1.1;
}

.stat-box.wide strong {
  font-size: 20px;
}

.app-layout {
  gap: 20px;
  align-items: flex-start;
}

.editor-panel {
  width: 440px;
  max-width: 440px;
  flex: 0 0 440px;
}

.list-panel {
  max-width: none !important;
  flex: 1;
  min-width: 0;
}

.panel-toolbar,
.button-row,
.backup-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-toolbar {
  justify-content: space-between;
  margin-bottom: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid #899281;
  background: #31382d;
  box-shadow: inset 1px 1px #1f241d;
  font-weight: bold;
}

fieldset {
  margin: 0 0 14px;
  padding: 12px;
}

label {
  display: block;
  color: var(--muted);
  line-height: 1.4;
}

input,
select,
textarea {
  width: 100%;
  margin-top: 5px;
}

textarea {
  resize: vertical;
  min-height: 86px;
}

.grid {
  display: grid;
  gap: 10px;
}

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

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

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

.sticky-actions {
  position: sticky;
  bottom: 10px;
  background: rgba(76, 88, 68, 0.92);
  padding: 10px;
  border: 1px solid #292d23;
  box-shadow: 0 -8px 20px rgba(0,0,0,.16);
  flex-wrap: wrap;
}

.sticky-actions button,
.list-actions button,
.backup-actions button,
.file-button {
  flex: 1;
  min-width: 130px;
}

.list-actions .file-button {
  margin: 0;
}

.list-actions input[type="file"] {
  display: none;
}

button.danger,
.row-delete {
  color: #ffe1db;
}

.tools-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 190px;
  gap: 12px;
  margin-bottom: 12px;
}

.list-actions {
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.table-wrap {
  overflow: auto;
  max-height: 680px;
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 9px 8px;
  vertical-align: top;
  border-bottom: 1px solid rgba(137, 146, 129, .35);
}

th {
  color: #f2f5ee;
  text-align: left;
  background: rgba(49, 56, 45, .72);
  position: sticky;
  top: 0;
  z-index: 1;
}

tr:hover td {
  background: rgba(196, 181, 80, .06);
}

.select-cell {
  width: 34px;
}

.record-name {
  display: block;
  font-weight: bold;
  margin-bottom: 4px;
}

.record-alias,
.muted-line,
.record-updated {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.record-updated {
  margin-top: 6px;
}

.actions-cell {
  min-width: 210px;
}

.row-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.row-actions button {
  width: 100%;
  min-height: 28px;
  padding: 4px 6px;
}

.empty-state {
  padding: 26px 12px;
  text-align: center;
  color: var(--accent);
  font-weight: bold;
}

.backup-panel {
  max-width: none;
  margin-bottom: 0;
}

.backup-box p {
  margin: 8px 10px 14px;
}

.file-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 31px;
  padding: 6px 10px;
  border-top: solid 1px #899281;
  border-left: solid 1px #899281;
  border-right: solid 1px #292d23;
  border-bottom: solid 1px #292d23;
  background-color: #4c5844;
  color: #d8ded3;
  cursor: pointer;
  text-align: center;
}

.file-button:active {
  border-top: solid 1px #292d23;
  border-left: solid 1px #292d23;
  border-right: solid 1px #899281;
  border-bottom: solid 1px #899281;
  background-color: #3a4434;
}

#importJsonInput {
  display: none;
}

.warnings {
  color: #ffe1db;
  border-left: 3px solid var(--danger);
}

.warnings ul {
  margin: 6px 10px 6px 26px;
  padding: 0;
}

.hidden {
  display: none !important;
}

.mono-small {
  font-family: Consolas, Monaco, monospace;
  line-height: 1.6;
  margin: 8px 10px;
}

.flash {
  animation: flashStatus .7s ease;
}

@keyframes flashStatus {
  0% { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}

@media (max-width: 1080px) {
  .app-layout {
    flex-direction: column;
  }

  .editor-panel,
  .list-panel,
  .window.half,
  .window-row .window {
    width: 100%;
    max-width: 100% !important;
    flex: 1 1 auto;
  }
}

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

  .top-nav,
  nav ul.dropdown {
    font-size: 12px;
  }

  .stats-row,
  .button-row,
  .backup-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .tools-grid,
  .grid.two,
  .grid.three {
    grid-template-columns: 1fr;
  }

  .span-2,
  .span-3 {
    grid-column: auto;
  }

  .table-wrap {
    max-height: none;
    overflow: visible;
  }

  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
  }

  thead {
    display: none;
  }

  tr {
    margin-bottom: 12px;
    padding: 8px;
    border: 1px solid #292d23;
    background: rgba(49, 56, 45, .32);
  }

  td {
    border-bottom: none;
    padding: 6px 4px;
  }

  td::before {
    content: attr(data-label);
    display: block;
    color: var(--accent);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    margin-bottom: 3px;
  }

  .select-cell::before {
    content: "Marcar";
  }

  .actions-cell {
    min-width: 0;
  }
}

/* Ajustes V2 solicitados: sin controles falsos, ficha bajo demanda y modales propios */
.window:not(.headless)::before,
.titlebar {
  background-image: none !important;
  background-position: initial !important;
  padding-right: 0 !important;
}

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

.primary-actions {
  justify-content: flex-start;
  margin-bottom: 12px;
}

.primary-button {
  min-width: 210px;
  font-weight: bold;
}

.app-layout {
  display: block;
}

.list-panel {
  width: 100% !important;
}

.app-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 14px;
  background: rgba(16, 19, 15, .72);
  overflow: auto;
  backdrop-filter: blur(2px);
}

.dialog-modal {
  z-index: 1200;
  align-items: center;
}

body.modal-open {
  overflow: hidden;
}

.modal-window.editor-panel {
  width: min(1060px, calc(100vw - 28px));
  max-width: 1060px !important;
  flex: none;
  margin: 0 auto 28px;
}

.app-dialog-window {
  width: min(560px, calc(100vw - 28px));
  max-width: 560px !important;
  margin: 0 auto;
}

.app-dialog-window h2 {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.dialog-body {
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 16px;
}

.dialog-body p {
  margin: 0 0 10px;
}

.dialog-body ul {
  margin: 8px 0 0 22px;
  padding: 0;
}

.dialog-copy-box {
  width: 100%;
  min-height: 110px;
  margin-top: 10px;
  font-family: Consolas, Monaco, monospace;
  text-transform: none !important;
}

.dialog-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.dialog-actions button {
  min-width: 130px;
}

.toolbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

#contactForm input:not([type="hidden"]),
#contactForm textarea,
#contactForm select {
  text-transform: uppercase;
}

#searchInput {
  text-transform: uppercase;
}

.record-name,
.record-alias,
.muted-line,
.record-updated,
.main-cell,
.doc-cell,
.address-cell,
.contact-cell {
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .app-modal {
    padding: 8px;
  }

  .modal-window.editor-panel,
  .app-dialog-window {
    width: 100%;
    max-width: 100% !important;
  }

  .panel-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar-actions {
    justify-content: stretch;
  }

  .toolbar-actions button,
  .primary-button {
    width: 100%;
  }
}

/* Ajustes V4: la tabla principal aprovecha todo el ancho disponible */
.list-panel,
.list-panel > .table-wrap {
  width: 100% !important;
  max-width: none !important;
}

.table-wrap {
  display: block;
}

#contactsTable {
  width: 100%;
  min-width: 980px;
  table-layout: fixed;
}

#contactsTable th:nth-child(1),
#contactsTable .select-cell {
  width: 38px;
}

#contactsTable th:nth-child(2),
#contactsTable .main-cell {
  width: 23%;
}

#contactsTable th:nth-child(3),
#contactsTable .doc-cell {
  width: 13%;
}

#contactsTable th:nth-child(4),
#contactsTable .address-cell {
  width: 30%;
}

#contactsTable th:nth-child(5),
#contactsTable .contact-cell {
  width: 18%;
}

#contactsTable th:nth-child(6),
#contactsTable .actions-cell {
  width: 220px;
}

.main-cell,
.doc-cell,
.address-cell,
.contact-cell {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  #contactsTable {
    min-width: 0;
    table-layout: auto;
  }
}


/* Ajustes V5: se elimina la ventana inferior de backup; JSON queda integrado en acciones */
.backup-panel,
.backup-box {
  display: none !important;
}


/* Ajustes V7: se elimina el menú superior porque no aportaba acciones reales */
.top-nav,
nav.top-nav {
  display: none !important;
}

body {
  margin-top: 8px;
}

/* Ajuste V9: una sola cabecera técnica, sin doble título */
.intro-block h1 {
  margin-top: 2px;
}

.eyebrow {
  display: none;
}


.export-strip {
  width: 100%;
  max-width: none !important;
  margin-bottom: 12px;
  padding: 10px;
}

.export-format {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.export-format select {
  width: 100%;
  max-width: none;
  margin-top: 0;
}

.export-strip .list-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 0;
}

.export-strip .list-actions button,
.export-strip .list-actions .file-button {
  width: 100%;
  min-width: 0;
}

.intro-block h1 {
  margin-top: 0;
}

/* Ajuste V11 responsive exportador */

@media (max-width: 760px) {
  .export-format {
    grid-template-columns: 1fr;
  }

  .export-strip .list-actions {
    grid-template-columns: 1fr;
  }
}