/* Garrote Agronegocios — v4.1 · Panel: clientes, fichas y servicios · Mi cuenta · Registro */

/* ---------- Indicadores ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .2s, background .2s; }
.kpi:hover { border-color: var(--green-2); }
.kpi[aria-pressed="true"] { border-color: var(--ink); background: var(--paper); }
.kpi b { display: block; font-size: 28px; font-weight: 800; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.kpi--warn b { color: #7c5812; }
.kpi--bad b { color: var(--danger); }
@media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi b { font-size: 24px; } }

/* ---------- Barra de herramientas ---------- */
.tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.tools .search { flex: 1 1 260px; min-width: 0; }
.tools .filters { margin: 0; }
.tools__end { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.search { position: relative; }
.search .input { padding-left: 40px; }
.search::before { content: ""; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2356604B' stroke-width='1.8'%3E%3Ccircle cx='7' cy='7' r='5.2'/%3E%3Cpath d='M11 11l3.6 3.6'/%3E%3C/svg%3E") no-repeat center; pointer-events: none; }
.sec-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; }
.sec-title p { margin: 4px 0 0; color: var(--text-2); font-size: 14.5px; }
.block + .block { margin-top: 44px; }

/* ---------- Tablas ---------- */
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .who b { color: var(--ink); }
.table .who a { color: inherit; text-decoration: none; }
.table .who a:hover b { text-decoration: underline; }
.table tr.is-dim td { opacity: .62; }
.table tr.is-dim td:last-child { opacity: 1; }
.table a.wa { color: var(--green); font-weight: 600; text-decoration: none; white-space: nowrap; }
.table a.wa:hover { text-decoration: underline; }
.counts { display: flex; flex-wrap: wrap; gap: 4px; }
.when { display: block; font-size: 12.5px; color: var(--text-2); }
.when--warn { color: #7c5812; font-weight: 700; }
.when--bad { color: var(--danger); font-weight: 700; }
.pill--warn { background: rgba(169, 120, 31, .14); color: #7c5812; }
.pill--mute { background: var(--paper-2); color: var(--text-2); }
.empty-row td { text-align: center; color: var(--text-2); padding: 32px 16px; }

/* ---------- Ficha del cliente ---------- */
.modal--wide { width: min(1080px, calc(100vw - 24px)); }
.ficha { padding: 0 !important; display: block; }
.ficha__head { position: sticky; top: 0; z-index: 2; background: var(--ink); color: var(--paper); padding: 22px 26px; display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; }
.ficha__head h2 { margin: 0; color: var(--paper); font-size: 24px; font-weight: 800; line-height: 1.2; }
.ficha__head p { margin: 4px 0 0; color: rgba(245, 243, 236, .72); font-size: 14.5px; }
.ficha__head .modal__x { background: rgba(245, 243, 236, .12); color: var(--paper); flex: none; }
.ficha__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ficha__tags .pill { background: rgba(245, 243, 236, .12); color: var(--paper); }
.ficha__tags .pill--ok { background: rgba(157, 181, 123, .22); color: #d6e6c1; }
.ficha__tags .pill--warn { background: rgba(210, 174, 85, .22); color: var(--gold-2); }
.ficha__tags .pill--off { background: rgba(220, 110, 90, .2); color: #f0b3a6; }
.ficha__quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ficha__quick a { color: var(--paper); font-size: 13.5px; font-weight: 700; text-decoration: none; border: 1px solid rgba(245, 243, 236, .3); border-radius: 999px; padding: 6px 12px; }
.ficha__quick a:hover { background: var(--paper); color: var(--ink); }
.ficha__body { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; }
.ficha__col { padding: 24px 26px; min-width: 0; }
.ficha__col + .ficha__col { border-left: 1px solid var(--line); background: #FBFAF6; }
.ficha__sec + .ficha__sec { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.ficha__sec h3 { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin: 0 0 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ficha .form { gap: 14px; }
.ficha .form-row { gap: 14px; }
.ficha .field label { font-size: 13.5px; }
.ficha .alert { margin: 0; }
.ficha__save { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 860px) {
  .ficha__body { grid-template-columns: 1fr; }
  .ficha__col + .ficha__col { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .ficha .form-row, .modal .form-row { grid-template-columns: 1fr; }
  .ficha__head { padding: 18px; }
  .ficha__col { padding: 20px 18px; }
}

/* Servicio dentro de la ficha */
.asig { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); padding: 14px 16px; display: grid; gap: 8px; }
.asig + .asig { margin-top: 10px; }
.asig--baja { background: transparent; border-style: dashed; }
.asig__top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.asig__top b { color: var(--ink); font-size: 16px; }
.asig__meta { font-size: 13.5px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.asig__nota { font-size: 13.5px; background: var(--paper); border-radius: 4px; padding: 8px 10px; }
.asig__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.btn--xs { padding: 6px 12px; font-size: 13px; min-height: 0; }

/* Historial */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-height: 340px; overflow: auto; }
.timeline li { position: relative; padding: 0 0 14px 20px; font-size: 13.5px; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.timeline li::after { content: ""; position: absolute; left: 7px; top: 16px; bottom: 0; width: 1px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline time { display: block; font-size: 12px; color: var(--text-2); }
.timeline b { color: var(--ink); }

/* ---------- Modal de asignación ---------- */
.quick-dates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.quick-dates button { border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer; }
.quick-dates button:hover { border-color: var(--ink); color: var(--ink); }
.baja-box { border: 1px solid rgba(162, 59, 42, .3); background: rgba(162, 59, 42, .05); border-radius: var(--radius); padding: 14px; display: grid; gap: 14px; }
.danger-link { border: 0; background: none; padding: 0; color: var(--danger); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: underline; justify-self: start; }
.modal__foot { flex-wrap: wrap; }
.modal__foot .danger-link { margin-right: auto; align-self: center; }
.modal .muted.small, .small { font-size: 13.5px; }

/* ---------- Mi cuenta / registro ---------- */
.app-col { display: grid; gap: 20px; align-content: start; }
.perfil-gate { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(169, 120, 31, .1); margin-bottom: 20px; }
.perfil-gate .kicker { color: var(--gold); }
.form-group { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin: 8px 0 -4px; padding-top: 12px; border-top: 1px solid var(--line); }
.form-group:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.app-auth .app-card.is-wide { max-width: 560px; }
.svc-card .vence { display: block; font-size: 13px; margin-top: 4px; }
.datos-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; font-size: 14.5px; margin: 0; }
.datos-list dt { color: var(--text-2); }
.datos-list dd { margin: 0; color: var(--ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .app-auth .form-row { grid-template-columns: 1fr; } }
.ficha form, .modal .ficha form { padding: 0; }
#gate-form { max-width: 760px; }

/* ===================== v4.2 · Panel del cliente ===================== */
.cli-tabs { margin-bottom: 22px; }
.cli-home { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 960px) { .cli-home { grid-template-columns: 1fr; } }
.cli-aviso { background: rgba(169, 120, 31, .1); border: 1px solid rgba(169, 120, 31, .35); border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 20px; display: grid; gap: 4px; font-size: 15px; }
.cli-aviso p { margin: 0; }
.cli-aviso a { color: var(--green); font-weight: 700; }
.svc-grid { display: grid; gap: 10px; }
.svc-tile { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.svc-tile + .svc-tile { margin-top: 10px; }
.svc-grid .svc-tile + .svc-tile { margin-top: 0; }
.svc-tile.is-off { background: var(--paper); }
.svc-tile.is-off .svc-ico { background: var(--paper-2); color: var(--text-2); }
.svc-tile__body { min-width: 0; display: grid; gap: 2px; }
.svc-tile__body b { color: var(--ink); font-size: 16.5px; }
.svc-tile__body > span { font-size: 14px; color: var(--text-2); }
.svc-tile__body .vence { font-size: 13px; color: var(--text-2); }
.svc-tile__body .pill { justify-self: start; margin-top: 4px; }
.svc-tile__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.svc-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(63, 122, 34, .1); color: var(--green); }
@media (max-width: 560px) {
  .svc-tile { grid-template-columns: auto 1fr; }
  .svc-tile__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.help-card { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.help-card .h3 { color: var(--paper); }
.help-card .muted { color: rgba(245, 243, 236, .72); margin: 6px 0 16px; }
.help-card .btn--ghost { --fg: var(--paper); --bd: rgba(245, 243, 236, .35); }
.help-card .btn--ghost:hover { --bg: var(--paper); --fg: var(--ink); --bd: var(--paper); }
.help-card .btn:not(.btn--ghost) { --bg: var(--gold-2); --fg: var(--ink); --bd: var(--gold-2); }

/* Archivos */
.file-list { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 4px 18px; }
.file-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.file-row:last-child { border-bottom: 0; }
.file-row__body { min-width: 0; display: grid; gap: 2px; }
.file-row__body b { color: var(--ink); font-size: 15.5px; overflow-wrap: anywhere; }
.file-row__body .sub { font-size: 13px; color: var(--text-2); }
.file-row__desc { font-size: 13.5px; color: var(--text); }
.file-ext { width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--paper-2); color: var(--text-2); }
.file-ext--pdf { background: rgba(162, 59, 42, .1); color: var(--danger); }
.file-ext--xlsx, .file-ext--xls, .file-ext--csv { background: rgba(63, 122, 34, .12); color: var(--green); }
.file-ext--docx, .file-ext--doc { background: rgba(40, 90, 160, .1); color: #285aa0; }
.file-ext--jpg, .file-ext--jpeg, .file-ext--png, .file-ext--webp { background: rgba(169, 120, 31, .14); color: #7c5812; }
#home-archivos .file-row { grid-template-columns: auto 1fr auto; padding: 10px 0; }
#home-archivos .file-ext { width: 40px; height: 40px; font-size: 9.5px; }
#home-archivos .btn { padding: 6px 12px; font-size: 13px; }
@media (max-width: 560px) {
  .file-row { grid-template-columns: auto 1fr; }
  .file-row > .btn { grid-column: 2; justify-self: start; }
}

/* Archivos en la ficha (admin) */
.upload { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 12px; background: var(--white); }
.upload.is-over { border-color: var(--green-2); background: rgba(63, 122, 34, .05); }
.upload__pick { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--text-2); cursor: pointer; }
.upload__pick b { color: var(--ink); }
.upload__fields { display: grid; gap: 10px; }
.upload__fields[hidden] { display: none; }
.ficha .file-row { padding: 10px 0; }
.ficha .file-ext { width: 40px; height: 40px; font-size: 9.5px; }
.ficha .file-row .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
@media (max-width: 560px) {
  .cli-tabs { flex-wrap: wrap; overflow: visible; gap: 0 2px; }
  .cli-tabs .tab { padding: 10px 10px; font-size: 14px; }
}