/*!
 * AGLO Negocios — capa de adaptación de la interfaz existente (28-sep-2026).
 * Las pantallas que ya funcionan (portal.js, commercial.js, clientes.js) generan
 * su marcado con clases propias. Esta capa les da el aspecto del sistema visual
 * sin reescribir la lógica que mueve citas, dinero o inventario. Todo va dentro
 * de .ag-legacy para no afectar las pantallas nuevas.
 * Cuando un módulo se reescriba con componentes .ag-*, quitar su parte de aquí.
 */

/* Controles de formulario con la apariencia de Bootstrap */
.ag-legacy input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=hidden]),
.ag-legacy select, .ag-legacy textarea {
  display: block; width: 100%; min-height: 42px; padding: .5rem .75rem; font: inherit; font-size: .9375rem; color: var(--ag-ink);
  background-color: var(--ag-surface); border: 1px solid var(--ag-line-strong); border-radius: var(--ag-r-sm);
  transition: border-color .15s, box-shadow .15s;
}
.ag-legacy select { appearance: none; padding-right: 2.25rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23334155' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; }
.ag-legacy textarea { min-height: 96px; resize: vertical; }
.ag-legacy input:focus, .ag-legacy select:focus, .ag-legacy textarea:focus { outline: 0; border-color: var(--ag-primary); box-shadow: 0 0 0 .2rem rgba(var(--ag-primary-rgb), .18); }
.ag-legacy input[type=color] { width: 64px; height: 42px; padding: 3px; border: 1px solid var(--ag-line-strong); border-radius: var(--ag-r-sm); background: var(--ag-surface); }
.ag-legacy input[type=file] { display: block; width: 100%; font-size: .875rem; padding: .45rem; border: 1px dashed var(--ag-line-strong); border-radius: var(--ag-r-sm); background: var(--ag-surface-2); }
@media (pointer: coarse) { .ag-legacy input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=hidden]), .ag-legacy select { min-height: var(--ag-touch); font-size: 1rem; } }
.ag-legacy label { display: flex; flex-direction: column; gap: .35rem; font-size: .875rem; font-weight: 600; color: var(--ag-ink-2); }
.ag-legacy label:has(> input[type=checkbox]) { flex-direction: row; align-items: center; gap: .5rem; font-weight: 550; }
.ag-legacy label input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--ag-primary); }

/* Botones: un <button> sin clase es la acción principal; .secondary la secundaria */
/* :where() deja esta regla base con especificidad baja para que .secondary y las reglas por componente ganen. */
.ag-legacy :where(button:not(.btn):not(.ag-nav-item):not(.calendar-event):not(.chip):not(.icon)),
.ag-legacy a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 40px; padding: .5rem .9rem;
  font: inherit; font-size: .9063rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  color: var(--ag-on-primary); background: var(--ag-primary); border: 1px solid var(--ag-primary); border-radius: var(--ag-r-sm);
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.ag-legacy :where(button:not(.btn):not(.ag-nav-item):not(.calendar-event):not(.chip):not(.icon)):hover, .ag-legacy a.button:hover { background: var(--ag-primary-hover); border-color: var(--ag-primary-hover); color: var(--ag-on-primary); }
.ag-legacy button.secondary:not(.btn), .ag-legacy a.button.secondary {
  color: var(--ag-ink); background: var(--ag-surface); border-color: var(--ag-line-strong); box-shadow: var(--ag-shadow-sm);
}
.ag-legacy button.secondary:not(.btn):hover, .ag-legacy a.button.secondary:hover { background: var(--ag-surface-2); border-color: var(--ag-line-strong); color: var(--ag-ink); }
.ag-legacy button:disabled { opacity: .6; cursor: not-allowed; }
.ag-legacy button.icon { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 0; border-radius: var(--ag-r-sm); background: transparent; color: var(--ag-ink-2); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.ag-legacy button.icon:hover { background: var(--ag-surface-2); }
@media (pointer: coarse) { .ag-legacy :where(button:not(.btn):not(.ag-nav-item):not(.calendar-event):not(.chip)), .ag-legacy a.button { min-height: var(--ag-touch); } }

/* Encabezados y textos */
.ag-legacy .eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ag-primary-text); margin: 0 0 .3rem; }
.ag-legacy .heading, .ag-legacy .section-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; }
.ag-legacy .heading h2, .ag-legacy .section-head h2 { margin: 0; }
.ag-legacy .heading p, .ag-legacy .section-head p { margin: .3rem 0 0; color: var(--ag-muted); max-width: 72ch; }
.ag-legacy h3 { font-size: 1rem; margin: 1.25rem 0 .6rem; }
.ag-legacy small { display: block; color: var(--ag-muted); font-size: .8125rem; margin-top: .15rem; }
.ag-legacy strong small { font-weight: 500; }

/* Tarjetas y rejillas */
.ag-legacy .grid { display: grid; gap: .875rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin-bottom: 1rem; }
.ag-legacy .card { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-r); box-shadow: var(--ag-shadow-sm); padding: 1rem 1.1rem; gap: .35rem; min-width: 0; }
.ag-legacy .card h3 { margin: .15rem 0 .2rem; font-size: 1rem; }
.ag-legacy .card p { margin: 0 0 .25rem; font-size: .875rem; color: var(--ag-ink-2); overflow-wrap: anywhere; }
.ag-legacy .card .actions { margin-top: .5rem; }
.ag-legacy .metric { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--ag-ink); }
.ag-legacy .card:has(> .metric) p { color: var(--ag-muted); font-weight: 600; font-size: .8125rem; }
.ag-legacy .photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ag-r-sm); background: var(--ag-surface-2); margin-bottom: .45rem; }
.ag-legacy .actions, .ag-legacy .row-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.ag-legacy .tag { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; width: fit-content; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--ag-neutral-line); background: var(--ag-neutral-bg); color: var(--ag-neutral); font-size: .75rem; font-weight: 650; }
.ag-legacy .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ag-neutral-dot); }
.ag-legacy .tag.low { border-color: var(--ag-warning-line); background: var(--ag-warning-bg); color: var(--ag-warning); margin-top: .35rem; }
.ag-legacy .tag.low::before { background: var(--ag-warning-dot); }

/* Avisos */
.ag-legacy .notice, .ag-legacy .callout, .ag-legacy .scope, .ag-legacy .privacy-notice {
  display: block; padding: .875rem 1rem; margin: 0 0 .875rem; border-radius: var(--ag-r); border: 1px solid var(--ag-info-line); background: var(--ag-info-bg); color: #1e3a8a; font-size: .875rem;
}
.ag-legacy .notice h3 { margin-top: 0; color: var(--ag-ink); }
.ag-legacy .notice p { margin: .2rem 0; }
.ag-legacy .notice .actions, .ag-legacy .notice button { margin-top: .45rem; }
.ag-legacy .scope { border-color: var(--ag-line); background: var(--ag-surface); color: var(--ag-ink-2); margin-top: 1.25rem; }
.ag-legacy .empty { padding: 2rem 1rem; text-align: center; color: var(--ag-muted); background: var(--ag-surface); border: 1px dashed var(--ag-line-strong); border-radius: var(--ag-r); }
.ag-legacy #membership-notice { border-color: var(--ag-primary-border); background: var(--ag-primary-subtle); color: var(--ag-primary-active); }

/* Tablas (tarjetas etiquetadas en móvil vía data-label) */
.ag-legacy .table-wrap { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-r); box-shadow: var(--ag-shadow-sm); overflow-x: auto; margin-bottom: 1rem; }
.ag-legacy .table-wrap table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.ag-legacy .table-wrap th { background: var(--ag-surface-2); color: var(--ag-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--ag-line); white-space: nowrap; }
.ag-legacy .table-wrap td { padding: .75rem .9rem; border-bottom: 1px solid var(--ag-line); vertical-align: top; font-variant-numeric: tabular-nums; }
.ag-legacy .table-wrap tbody tr:last-child td { border-bottom: 0; }
.ag-legacy .table-wrap td > button, .ag-legacy .table-wrap td .actions button { margin: 0 .3rem .3rem 0; }
@media (max-width: 767.98px) {
  .ag-legacy .table-wrap { overflow: visible; }
  .ag-legacy .table-wrap thead { display: none; }
  .ag-legacy .table-wrap table, .ag-legacy .table-wrap tbody, .ag-legacy .table-wrap tr, .ag-legacy .table-wrap td { display: block; width: 100%; }
  .ag-legacy .table-wrap tr { padding: .85rem 1rem; border-bottom: 1px solid var(--ag-line); }
  .ag-legacy .table-wrap tr:last-child { border-bottom: 0; }
  .ag-legacy .table-wrap td { padding: .3rem 0; border: 0; }
  .ag-legacy .table-wrap td[data-label]::before { content: attr(data-label); display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ag-muted); margin-bottom: .1rem; }
  .ag-legacy .table-wrap td[data-label=""]::before { display: none; }
}

/* Cifras resumidas (central) */
.ag-legacy .totals, .ag-legacy .policy-grid { display: grid; gap: .875rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin: .75rem 0 1rem; }
.ag-legacy .totals > *, .ag-legacy .policy-grid > * { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-r); padding: .9rem 1rem; box-shadow: var(--ag-shadow-sm); min-width: 0; }
.ag-legacy .totals strong, .ag-legacy .policy-grid strong, .ag-legacy .money { display: block; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ag-legacy .totals span, .ag-legacy .policy-grid span { display: block; font-size: .8125rem; font-weight: 600; color: var(--ag-muted); }

/* Filtros de la central (<form class="period">) */
.ag-legacy .period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; padding: .875rem 1rem; background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-r); margin: 0 0 1rem; }
.ag-legacy .period > label { flex: 1 1 170px; min-width: 0; }
.ag-legacy .period > button { flex: 0 0 auto; }

/* Formularios de diálogo */
.ag-legacy .fields, .ag-legacy #fields { display: grid; gap: .9rem; }
.ag-legacy #fields > p, .ag-legacy .fields > p { margin: 0; color: var(--ag-ink-2); font-size: .875rem; }
.ag-legacy #form-error, .ag-legacy #error { color: var(--ag-danger); font-weight: 600; font-size: .875rem; margin: .75rem 0 0; }
.ag-legacy #form-error:empty, .ag-legacy #error:empty { display: none; }
.ag-legacy #form-help { color: var(--ag-muted); font-size: .875rem; margin: 0 0 .75rem; }
.ag-legacy #form-help:empty { display: none; }

/* Guía de configuración (panel del negocio) */
.ag-legacy .setup-guide { background: var(--ag-surface); border: 1px solid var(--ag-primary-border); border-radius: var(--ag-r); padding: 1.1rem; margin: 0 0 1rem; box-shadow: var(--ag-shadow-sm); }
.ag-legacy .setup-guide h3 { margin: .1rem 0 .3rem; }
.ag-legacy .setup-guide > p { color: var(--ag-muted); font-size: .875rem; }
.ag-legacy .setup-step { display: grid; grid-template-columns: 30px 1fr auto; gap: .35rem .85rem; align-items: center; padding: .8rem 0; border-top: 1px solid var(--ag-line); }
.ag-legacy .setup-step p { margin: .1rem 0 0; color: var(--ag-muted); font-size: .8438rem; }
.ag-legacy .setup-step > button, .ag-legacy .setup-step > .setup-wait { grid-column: 2 / -1; justify-self: start; }
.ag-legacy .setup-number { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ag-surface-2); font-size: .75rem; font-weight: 700; color: var(--ag-ink-2); }
.ag-legacy .setup-state { font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--ag-warning-bg); color: var(--ag-warning); border: 1px solid var(--ag-warning-line); }
.ag-legacy .setup-state.done { background: var(--ag-success-bg); color: var(--ag-success); border-color: var(--ag-success-line); }
.ag-legacy .setup-wait { font-size: .8125rem; color: var(--ag-muted); }

/* Agenda */
.ag-legacy .calendar-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; padding: .75rem .875rem; margin: 0 0 1rem; background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-r); }
.ag-legacy .calendar-controls > label { flex: 1 1 150px; }
.ag-legacy .calendar-controls > [data-calendar-shift] { width: 42px; padding: 0; }
.ag-legacy .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: .6rem; min-width: 1050px; }
.ag-legacy .calendar-grid.one-day { grid-template-columns: 1fr; min-width: 0; }
.ag-legacy .table-wrap:has(> .calendar-grid) { background: transparent; border: 0; box-shadow: none; overflow-x: auto; }
.ag-legacy .calendar-day { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-r); padding: .7rem; display: flex; flex-direction: column; gap: .45rem; min-height: 140px; }
.ag-legacy .calendar-day h3 { margin: 0 0 .15rem; font-size: .8125rem; color: var(--ag-muted); font-weight: 700; }
.ag-legacy .calendar-day h3::first-letter { text-transform: uppercase; }
.ag-legacy .calendar-event { display: flex; flex-direction: column; gap: .1rem; width: 100%; text-align: left; padding: .5rem .6rem; border: 1px solid var(--ag-primary-border); border-left: 3px solid var(--ag-primary); border-radius: var(--ag-r-sm); background: var(--ag-primary-subtle); color: var(--ag-ink); font: inherit; font-size: .8125rem; cursor: pointer; }
.ag-legacy .calendar-event:hover { border-color: var(--ag-primary); }
.ag-legacy .calendar-event strong { font-size: .8438rem; }
.ag-legacy .calendar-event span { color: var(--ag-ink-2); }
.ag-legacy .calendar-event.muted-event { background: var(--ag-surface-2); border-color: var(--ag-line); border-left-color: var(--ag-line-strong); opacity: .75; }
@media (max-width: 767.98px) {
  .ag-legacy .calendar-grid { grid-template-columns: 1fr; min-width: 0; }
  .ag-legacy .calendar-day { min-height: 0; }
}

/* Comprar insumos */
.ag-legacy .supply-layout { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .ag-legacy .supply-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .ag-legacy .basket-panel { position: sticky; top: calc(var(--ag-topbar) + 1rem); } }
.ag-legacy .supply-card small { margin: 0; }
.ag-legacy .supply-card label { margin-top: .35rem; }
.ag-legacy .supply-card > button { margin-top: .5rem; }
.ag-legacy .basket-panel p { display: flex; flex-direction: column; gap: .25rem; border-bottom: 1px solid var(--ag-line); padding-bottom: .55rem; }
.ag-legacy .catalog-search { grid-column: 1 / -1; }
.ag-legacy .purchase-list { display: grid; gap: .75rem; margin-bottom: 1rem; }

/* Vista previa de identidad (variables fijadas por portal.js) */
.ag-legacy .identity-preview { --identity-color: #593f58; --identity-ink: #fff; border: 1px solid var(--ag-line); border-radius: var(--ag-r); overflow: hidden; margin-bottom: 1rem; background: var(--ag-surface); }
.ag-legacy .identity-preview-media { aspect-ratio: 16 / 6; background: var(--identity-color); display: grid; }
.ag-legacy .identity-preview-media img { width: 100%; height: 100%; object-fit: cover; }
.ag-legacy .identity-preview-copy { padding: .9rem 1rem; background: var(--identity-color); color: var(--identity-ink); }
.ag-legacy .identity-preview-brand { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; }
.ag-legacy .identity-preview-brand img, .ag-legacy .identity-preview-brand span { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: rgba(255, 255, 255, .2); font-weight: 700; }
.ag-legacy .identity-preview-copy p { margin: .35rem 0 0; opacity: .9; font-size: .875rem; }

/* Clientes y cartera (clientes.js) */
.ag-legacy .clients-layout { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 992px) { .ag-legacy .clients-layout { grid-template-columns: 340px minmax(0, 1fr); align-items: start; } .ag-legacy .clients-layout > aside { position: sticky; top: calc(var(--ag-topbar) + 1rem); } }
.ag-legacy .clients-layout > aside { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-r); padding: .9rem; display: flex; flex-direction: column; gap: .75rem; }
.ag-legacy .client-row { display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: flex-start !important; gap: .1rem; width: 100%; text-align: left; padding: .7rem .75rem !important; background: var(--ag-surface) !important; color: var(--ag-ink) !important; border: 1px solid var(--ag-line) !important; border-radius: var(--ag-r-sm) !important; margin-bottom: .4rem; box-shadow: none !important; }
.ag-legacy .client-row:hover, .ag-legacy .client-row[aria-current="true"] { border-color: var(--ag-primary) !important; background: var(--ag-primary-subtle) !important; }
.ag-legacy #detail.panel, .ag-legacy .panel { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-r); padding: 1.1rem; box-shadow: var(--ag-shadow-sm); min-width: 0; }
.ag-legacy .client-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.ag-legacy .balance { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Acciones de la ficha: secundarias; la principal de la página es «Añadir cliente». */
.ag-legacy .client-toolbar > button:not(.btn) { background: var(--ag-surface) !important; color: var(--ag-ink) !important; border: 1px solid var(--ag-line-strong) !important; box-shadow: none !important; }
.ag-legacy .client-toolbar > button:not(.btn):hover:not(:disabled) { border-color: var(--ag-primary) !important; color: var(--ag-primary-text) !important; }
.ag-legacy .ledger-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ag-legacy .ledger-row > div:last-child { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-legacy .ledger-row p { margin: .1rem 0; }
.ag-legacy .timeline-entry, .ag-legacy .ledger-row { padding: .7rem 0; border-top: 1px solid var(--ag-line); font-size: .875rem; }
.ag-legacy .private-photos { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.ag-legacy .private-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--ag-r-sm); border: 1px solid var(--ag-line); }

/* Estado operativo */
.ag-legacy .health-card { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-r); padding: 1rem; box-shadow: var(--ag-shadow-sm); }
.ag-legacy .badge { display: inline-flex; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--ag-neutral-bg); color: var(--ag-neutral); border: 1px solid var(--ag-neutral-line); }
.ag-legacy .limits { margin-top: 1.5rem; padding: 1rem 1.1rem; background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-r); font-size: .875rem; color: var(--ag-ink-2); }

/* Diálogos existentes (<dialog id="editor">) */
dialog.ag-dialog.ag-legacy #fields { padding: 0; }
/* Métricas del resumen: dos por fila en teléfono en vez de una tarjeta alta por número. */
.ag-legacy .grid:has(> .card > .metric) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
@media (max-width: 575.98px) { .ag-legacy .grid:has(> .card > .metric) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }