:root {
  --forest: #173A2C;
  --forest2: #1F4D3A;
  --pine: #2F7A57;
  --accent: #5FB98A;
  --stone: #57564F;
  --paper: #F2F3EE;
  --line: #D9D7CC;
  --red: #a35b5b;
  --redbg: #f8d7d5;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Georgia, 'Times New Roman', serif; background: var(--paper); color: #1f2a24; }
.sans { font-family: Calibri, Arial, sans-serif; }
button { cursor: pointer; font-family: Calibri, Arial, sans-serif; }
input, select, textarea { font-family: Calibri, Arial, sans-serif; }

/* ---------- Botones ---------- */
.btn { border: none; border-radius: 6px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; }
.btn-primary { background: var(--pine); color: #fff; }
.btn-ghost { background: var(--paper); color: var(--stone); border: 1px solid var(--line); }
.btn-danger { background: var(--red); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-block { width: 100%; }
.icon-btn { background: transparent; border: none; font-size: 16px; color: var(--stone); }

/* ---------- Auth ---------- */
.auth-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest2) 100%); padding: 20px;
}
.auth-card { background: #fff; border-radius: 14px; padding: 36px 34px; max-width: 380px; width: 100%; }
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-brand { font-weight: bold; font-size: 20px; color: var(--forest); margin-top: 10px; letter-spacing: 0.4px; }
.auth-tag { color: var(--pine); font-style: italic; font-size: 13px; margin-top: 4px; }
.auth-error { background: var(--redbg); color: var(--red); font-family: Calibri, Arial, sans-serif; font-size: 12.5px; padding: 10px 12px; border-radius: 6px; margin-bottom: 14px; }
.auth-msg { background: #d9f2e3; color: var(--pine); font-family: Calibri, Arial, sans-serif; font-size: 12.5px; padding: 10px 12px; border-radius: 6px; margin-bottom: 14px; }
.auth-switch { text-align: center; font-family: Calibri, Arial, sans-serif; font-size: 12.5px; color: var(--stone); margin-top: 14px; }
.auth-switch a { color: var(--pine); font-weight: 700; cursor: pointer; }

.field { margin-bottom: 14px; }
.field label { display: block; color: var(--pine); font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; font-size: 13.5px; outline: none;
}
.field-row { display: flex; margin: 0 -6px; }
.field-row > .field { width: 50%; padding: 0 6px; }

/* ---------- App shell ---------- */
.topbar {
  background: var(--forest); display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; position: sticky; top: 0; z-index: 20;
}
.topbar .brand { display: flex; align-items: center; }
.topbar .brand span { color: #fff; font-weight: bold; font-size: 15px; margin-left: 8px; }
.topbar-right { display: flex; align-items: center; }
.user-label { color: #c9d6cd; font-family: Calibri, Arial, sans-serif; font-size: 12.5px; margin-right: 14px; }

.app-body { display: flex; min-height: calc(100vh - 50px); }
.sidebar { width: 190px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--line); padding: 16px 10px; }
.nav-btn {
  display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--stone);
  font-size: 14px; padding: 10px 12px; border-radius: 6px; margin-bottom: 3px;
}
.nav-btn.active { background: var(--paper); color: var(--forest); font-weight: 700; }
@media (max-width: 720px) {
  .app-body { flex-direction: column; }
  .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--line); padding: 8px; }
  .sidebar nav { display: flex; }
  .nav-btn { margin-bottom: 0; margin-right: 6px; }
}

.content { flex: 1; padding: 26px 32px; min-width: 0; }
@media (max-width: 640px) { .content { padding: 18px; } }
.view-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.view-header h1 { color: var(--forest); font-size: 24px; }
.hint { color: var(--stone); font-family: Calibri, Arial, sans-serif; font-size: 12.5px; margin-bottom: 16px; }
.loading { color: var(--stone); font-family: Calibri, Arial, sans-serif; font-size: 13px; padding: 20px 0; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.filters input { flex: 1; min-width: 200px; border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px; font-size: 13.5px; }
.filters select { border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px; font-size: 13.5px; background: #fff; }

/* ---------- Clientes ---------- */
.client-grid { display: flex; flex-direction: column; gap: 10px; }
.client-card {
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; cursor: pointer; transition: box-shadow 0.15s;
}
.client-card:hover { box-shadow: 0 4px 14px rgba(23,58,44,0.08); }
.client-card .name { color: var(--forest); font-weight: bold; font-size: 15px; }
.client-card .sub { color: var(--stone); font-family: Calibri, Arial, sans-serif; font-size: 12.5px; margin-top: 2px; }
.pill { font-family: Calibri, Arial, sans-serif; font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 20px; white-space: nowrap; }
.empty-state { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 50px; text-align: center; color: var(--stone); font-family: Calibri, Arial, sans-serif; }

/* ---------- Detalle de cliente ---------- */
.detalle-head { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 22px; margin: 16px 0 22px 0; }
.detalle-head h2 { color: var(--forest); font-size: 22px; margin-bottom: 10px; }
.detalle-grid { display: flex; flex-wrap: wrap; gap: 8px 28px; font-family: Calibri, Arial, sans-serif; font-size: 13px; color: var(--stone); }
.detalle-grid b { color: var(--forest); }

.tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tab-btn { background: transparent; border: none; padding: 10px 16px; font-family: Calibri, Arial, sans-serif; font-size: 13.5px; color: var(--stone); border-bottom: 2px solid transparent; }
.tab-btn.active { color: var(--pine); font-weight: 700; border-bottom-color: var(--pine); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.upload-box { border: 2px dashed var(--line); border-radius: 8px; padding: 24px; text-align: center; margin-bottom: 18px; }
.upload-box input[type=file] { display: none; }
.doc-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.doc-card { width: 150px; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.doc-card img { width: 100%; height: 100px; object-fit: cover; display: block; background: var(--paper); }
.doc-card .doc-name { font-family: Calibri, Arial, sans-serif; font-size: 11px; color: var(--stone); padding: 6px 8px; word-break: break-word; }
.doc-card .doc-file-icon { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; background: var(--paper); font-size: 30px; }

.informe-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.informe-card h4 { color: var(--forest); font-size: 14.5px; margin-bottom: 4px; }
.informe-card .meta { color: var(--stone); font-family: Calibri, Arial, sans-serif; font-size: 11.5px; margin-bottom: 8px; }
.informe-card p { font-family: Calibri, Arial, sans-serif; font-size: 12.5px; color: #1f2a24; white-space: pre-wrap; margin-bottom: 10px; }

.sig-pad { border: 1px solid var(--line); border-radius: 6px; touch-action: none; background: #fff; width: 100%; max-width: 360px; }

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(23,58,44,0.5); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 60; }
.modal-overlay.show { display: flex; }
.modal { background: #fff; border-radius: 10px; padding: 24px; max-width: 440px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-wide { max-width: 680px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-head h3 { color: var(--forest); font-size: 17px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* ---------- Print / PDF ---------- */
.print-area { display: none; }
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { display: block; position: absolute; top: 0; left: 0; width: 100%; padding: 30px; }
}