/* ================================================================
   components.css — Componentes reutilizables de UI
   Cada bloque corresponde a un componente de /components/
   ================================================================ */

/* ----------------------------------------------------------------
   BOTONES
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--font-ui);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-accent-lt);
}
.btn:active { transform: scale(0.98); }

.btn-primary  { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.btn-primary:hover { background: var(--brand-primary-dk); border-color: var(--brand-primary-dk); }

.btn-secondary { background: var(--bg-surface); color: var(--text-secondary); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); }

.btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.btn-danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: #fca5a5; }
.btn-danger:hover { background: #fee2e2; }

.btn-sm { padding: 4px 11px; font-size: 12.5px; }
.btn-lg { padding: 10px 22px; font-size: 15px; }

.btn-icon {
  width: 32px; height: 32px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  font-size: 15px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-icon.sm { width: 26px; height: 26px; font-size: 13px; }

/* ----------------------------------------------------------------
   FORMULARIOS
   ---------------------------------------------------------------- */
.form-grid   { display: grid; gap: 14px; }
.form-col-2  { grid-template-columns: 1fr 1fr; }
.form-col-3  { grid-template-columns: 1fr 1fr 1fr; }
.form-full   { grid-column: 1 / -1; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  display: block;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=date],
input[type=search],
select,
textarea {
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 7px 11px;
  outline: none;
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  line-height: 1.4;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--brand-accent-lt);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input[readonly] { background: var(--bg-app); color: var(--text-muted); cursor: default; }
textarea { resize: vertical; min-height: 72px; }
select { cursor: pointer; }

.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.form-error { font-size: 12px; color: var(--color-danger); margin-top: 2px; }

.input-with-icon { position: relative; }
.input-with-icon input { padding-left: 34px; }
.input-with-icon .input-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}

/* ----------------------------------------------------------------
   COMPONENTE: AUTOCOMPLETE
   Clase: .ac-wrapper, usada por components/Autocomplete.js
   ---------------------------------------------------------------- */
.ac-wrapper { position: relative; }
.ac-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: var(--z-dropdown);
  max-height: 220px;
  overflow-y: auto;
  display: none;
  animation: slideUp var(--transition-fast) both;
}
.ac-dropdown.open { display: block; }
.ac-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  cursor: pointer;
  transition: background var(--transition-fast);
  color: var(--text-primary);
}
.ac-option:hover, .ac-option.focused { background: var(--bg-hover); }
.ac-option-label { flex: 1; }
.ac-option-sub { font-size: 12px; color: var(--text-muted); }
.ac-option-badge {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-app);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.ac-empty {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.ac-loading {
  padding: 14px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.ac-loading::after {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--brand-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}
mark.ac-highlight {
  background: var(--brand-accent-lt);
  color: var(--brand-primary);
  border-radius: 2px;
  padding: 0 1px;
  font-style: normal;
}

/* ----------------------------------------------------------------
   COMPONENTE: DATE PICKER
   Clase: .dp-wrapper, usado por components/DatePicker.js
   ---------------------------------------------------------------- */
.dp-wrapper { position: relative; }
.dp-input-row {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.dp-input-row:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--brand-accent-lt);
}
.dp-input-row input {
  border: none;
  box-shadow: none;
  border-radius: 0;
  flex: 1;
}
.dp-input-row input:focus { box-shadow: none; }
.dp-btn {
  padding: 0 10px;
  height: 36px;
  border-left: 1px solid var(--border);
  background: var(--bg-app);
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.dp-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.dp-calendar {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  width: 280px;
  overflow: hidden;
  display: none;
  animation: slideUp var(--transition-fast) both;
}
.dp-calendar.open { display: block; }
.dp-cal-header {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-app);
  gap: 8px;
}
.dp-cal-title { flex: 1; text-align: center; font-size: 13.5px; font-weight: 600; }
.dp-cal-nav {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  transition: background var(--transition-fast);
}
.dp-cal-nav:hover { background: var(--border); }
.dp-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 8px 8px 4px;
}
.dp-cal-wd {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 0;
}
.dp-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 8px 10px;
  gap: 2px;
}
.dp-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  color: var(--text-primary);
}
.dp-day:hover { background: var(--bg-hover); }
.dp-day.today { font-weight: 600; color: var(--brand-accent); }
.dp-day.selected { background: var(--brand-primary); color: #fff; }
.dp-day.selected:hover { background: var(--brand-primary-dk); }
.dp-day.other-month { color: var(--text-muted); opacity: 0.5; }
.dp-day.disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* ----------------------------------------------------------------
   COMPONENTE: MODAL
   Clase: .modal-*, usado por components/Modal.js
   ---------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn var(--transition-fast) both;
}
.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  animation: slideUp var(--transition-base) both;
}
.modal-sm  { width: 400px; }
.modal-md  { width: 560px; }
.modal-lg  { width: 720px; }
.modal-xl  { width: 900px; }
.modal, .modal-sm, .modal-md, .modal-lg, .modal-xl { max-width: 95vw; }

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.modal-icon { font-size: 20px; }
.modal-title { font-size: 16px; font-weight: 600; flex: 1; color: var(--text-primary); }

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.modal-footer-left { margin-right: auto; }

/* ----------------------------------------------------------------
   COMPONENTE: TOAST / NOTIFICACIONES
   Clase: .toast-*, usado por components/Toast.js
   ---------------------------------------------------------------- */
#toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: 13.5px;
  min-width: 260px;
  max-width: 380px;
  pointer-events: all;
  animation: slideInR var(--transition-base) both;
  border: 1px solid rgba(0,0,0,0.06);
}
.toast-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.toast-body { flex: 1; }
.toast-title { font-weight: 600; margin-bottom: 2px; }
.toast-message { font-size: 13px; opacity: 0.85; line-height: 1.4; }
.toast-close {
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0.5;
  font-size: 14px;
  padding: 2px;
  line-height: 1;
}
.toast-close:hover { opacity: 1; }

.toast-default { background: var(--text-primary); color: #fff; }
.toast-success  { background: #166534; color: #fff; }
.toast-warning  { background: #92400e; color: #fff; }
.toast-error    { background: #991b1b; color: #fff; }
.toast-info     { background: var(--brand-primary); color: #fff; }
.toast-exit     { animation: slideInR 0.25s ease reverse both; }

/* ----------------------------------------------------------------
   COMPONENTE: HELP POPUP
   Clase: .help-*, usado por components/HelpPopup.js
   ---------------------------------------------------------------- */
.help-popup-wrap {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(2px);
  z-index: var(--z-tooltip);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn var(--transition-fast) both;
}
.help-popup {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 480px;
  width: 90vw;
  overflow: hidden;
  animation: slideUp var(--transition-base) both;
}
.help-popup-header {
  background: var(--brand-primary-lt);
  border-bottom: 1px solid var(--border);
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.help-popup-title { font-size: 15px; font-weight: 600; color: var(--brand-primary); flex: 1; }
.help-popup-body {
  padding: 18px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.help-popup-body p { margin-bottom: 9px; }
.help-popup-body p:last-child { margin-bottom: 0; }
.help-popup-body strong { color: var(--text-primary); font-weight: 600; }
.help-popup-body ul { padding-left: 18px; margin-bottom: 9px; }
.help-popup-body li { margin-bottom: 4px; }

/* ----------------------------------------------------------------
   COMPONENTE: DROPDOWN
   Clase: .dropdown-*, usado por components/Dropdown.js
   ---------------------------------------------------------------- */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  /* Cerrado por defecto. Sin esto el menú nace visible: al crearlo, el JS solo
     le asigna `display` al abrir o cerrar, así que hasta el primer clic no
     tiene estilo inline y quedaba desplegado desde que cargaba la app. */
  display: none;
  position: absolute;
  right: 0; top: calc(100% + 6px);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 190px;
  z-index: var(--z-dropdown);
  overflow: hidden;
  animation: slideUp var(--transition-fast) both;
}
.dropdown-menu.align-left { right: auto; left: 0; }
.dropdown-group-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 9px 14px 4px;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;
}
.dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.dropdown-item.active { color: var(--brand-primary); font-weight: 500; }
.dropdown-item.danger { color: var(--color-danger); }
.dropdown-item.danger:hover { background: var(--color-danger-bg); }
.dropdown-item .item-icon { font-size: 15px; width: 18px; text-align: center; }
.dropdown-item .item-badge {
  margin-left: auto;
  font-size: 11px;
  background: var(--brand-accent-lt);
  color: var(--brand-accent);
  border-radius: var(--radius-full);
  padding: 1px 8px;
}
.dropdown-divider { border-top: 1px solid var(--border); margin: 4px 0; }

/* ----------------------------------------------------------------
   COMPONENTE: BADGE / CHIPS
   ---------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.badge-lab    { background: var(--status-lab-bg);    color: var(--status-lab);    }
.badge-lab.badge-dot::before    { background: var(--status-lab); }
.badge-proof  { background: var(--status-proof-bg);  color: var(--status-proof);  }
.badge-proof.badge-dot::before  { background: var(--status-proof); }
.badge-done   { background: var(--status-done-bg);   color: var(--status-done);   }
.badge-done.badge-dot::before   { background: var(--status-done); }
.badge-paused { background: var(--status-paused-bg); color: var(--status-paused); }
.badge-paused.badge-dot::before { background: var(--status-paused); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info);    }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger);  }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--bg-surface);
  transition: all var(--transition-fast);
  user-select: none;
}
.chip:hover:not(.chip-active) { border-color: var(--brand-accent); color: var(--brand-accent); }
.chip-active { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }

/* ----------------------------------------------------------------
   COMPONENTE: TABLA
   ---------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
table { width: 100%; border-collapse: collapse; }
thead tr { background: #f7f9fc; }
th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--text-secondary); }
td {
  padding: 11px 14px;
  font-size: 13.5px;
  border-bottom: 1px solid #f0f2f7;
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--transition-fast); }
tbody tr:hover { background: var(--bg-hover); }
tbody tr.clickable { cursor: pointer; }

/* Paginación */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}
.pagination-controls { display: flex; gap: 4px; }
.page-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 13px;
  cursor: pointer;
  color: var(--text-secondary);
  background: var(--bg-surface);
  transition: all var(--transition-fast);
}
.page-btn:hover { background: var(--bg-hover); }
.page-btn.active { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.page-btn:disabled { opacity: 0.4; cursor: default; }

/* ----------------------------------------------------------------
   COMPONENTE: STAT CARD
   ---------------------------------------------------------------- */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-fast);
}
.stat-card:hover { box-shadow: var(--shadow-sm); }
.stat-label { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-bottom: 6px; }
.stat-value { font-size: 26px; font-weight: 600; color: var(--text-primary); line-height: 1; }
.stat-sub   { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.stat-trend {
  font-size: 12px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.trend-up   { color: var(--color-success); }
.trend-down { color: var(--color-danger); }

/* ----------------------------------------------------------------
   COMPONENTE: CARD GENÉRICA
   ---------------------------------------------------------------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-title { font-size: 14.5px; font-weight: 600; flex: 1; }
.card-body  { padding: 18px; }
.card-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* ----------------------------------------------------------------
   COMPONENTE: EMPTY STATE
   ---------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  gap: 12px;
  text-align: center;
}
.empty-icon  { font-size: 44px; opacity: 0.35; }
.empty-title { font-size: 16px; font-weight: 600; color: var(--text-secondary); }
.empty-sub   { font-size: 13.5px; color: var(--text-muted); max-width: 280px; line-height: 1.55; }

/* ----------------------------------------------------------------
   COMPONENTE: SECTION HEADER
   ---------------------------------------------------------------- */
.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.section-title    { font-size: 22px; font-weight: 600; letter-spacing: -0.3px; }
.section-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.section-actions  { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ----------------------------------------------------------------
   COMPONENTE: TOOLBAR / FILTROS
   ---------------------------------------------------------------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.toolbar-search {
  position: relative;
  max-width: 280px;
  flex: 1;
}
.toolbar-search input { padding-left: 34px; }
.toolbar-search::before {
  content: '🔍';
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  pointer-events: none;
}
.toolbar-right { margin-left: auto; display: flex; gap: 8px; }

/* ----------------------------------------------------------------
   COMPONENTE: INFO BTN (botón ?)
   ---------------------------------------------------------------- */
.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  font-family: var(--font-ui);
}
.info-btn:hover { background: var(--brand-accent); color: #fff; }
.info-btn-lg { width: 26px; height: 26px; font-size: 13px; }

/* ----------------------------------------------------------------
   RESPONSIVE — ajustes de componentes en mobile
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Stat cards: 2 cols */
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .stat-value { font-size: 22px; }
  .stat-card  { padding: 13px 14px; }

  /* Tabla: fuente más pequeña y padding reducido */
  th { font-size: 10.5px; padding: 8px 10px; }
  td { font-size: 12.5px; padding: 9px 10px; }

  /* Ocultar columnas menos importantes en mobile */
  .hide-mobile-col { display: none; }

  /* Botones más grandes para touch */
  .btn     { padding: 9px 16px; }
  .btn-sm  { padding: 6px 12px; font-size: 12.5px; }
  .btn-icon { width: 36px; height: 36px; font-size: 16px; }

  /* Chips más compactos */
  .chip { padding: 5px 12px; }

  /* Cards */
  .card-header { padding: 12px 14px; }
  .card-body   { padding: 14px; }

  /* Stat cards: fila de acciones debajo de cada card */
  .stat-sub { font-size: 11px; }

  /* Tabla en contenedores: scroll lateral */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* account-split: 1 columna */
  .account-split {
    grid-template-columns: 1fr !important;
  }

  /* contacts-grid: 1 columna */
  .contacts-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .otp-digit { width: 42px; height: 48px; font-size: 20px; }
}

/* ================================================================
   GRILLA DE STOCK (módulo stock)
   Tabla densa: 30 filas × 12 colores. La prioridad es ver el tablero
   entero de un vistazo, así que va compacta y con cabeceras fijas.
   ================================================================ */

.stk-tabla {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.stk-tabla th,
.stk-tabla td {
  border: 1px solid var(--border);
  padding: 5px 4px;
  text-align: center;
  white-space: nowrap;
}

/* Cabecera de columnas (colores): queda fija al hacer scroll vertical */
.stk-tabla thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-nav, #1a4d8f);
  color: #fff;
  font-weight: 600;
}

/* Cabeceras de fila (forma y arcada): fijas al scrollear en horizontal */
.stk-forma,
.stk-arcada {
  position: sticky;
  z-index: 1;
  background: var(--bg-app);
  font-weight: 600;
  color: var(--text-secondary);
}
.stk-forma  { left: 0;    min-width: 42px; }
.stk-arcada { left: 42px; min-width: 42px; font-size: 11.5px; }

.stk-celda {
  cursor: pointer;
  min-width: 52px;
  transition: background var(--transition-fast);
}
.stk-celda:hover {
  background: var(--brand-primary-lt);
  outline: 2px solid var(--brand-accent);
  outline-offset: -2px;
}

/* Sin stock ni objetivo: tableta que el lab no usa */
.stk-vacia { background: repeating-linear-gradient(
                45deg, transparent, transparent 4px,
                rgba(0,0,0,.025) 4px, rgba(0,0,0,.025) 8px); }

/* En cero pero se necesita */
.stk-agotado {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-weight: 700;
}

/* Hay menos de lo buscado */
.stk-falta {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-weight: 600;
}

/* Filas alternadas por forma, para seguir la horizontal sin perderse */
.stk-tabla tbody tr:nth-child(4n + 1) .stk-celda,
.stk-tabla tbody tr:nth-child(4n + 2) .stk-celda {
  background-color: rgba(46, 125, 209, .04);
}
.stk-tabla tbody tr:nth-child(4n + 1) .stk-vacia,
.stk-tabla tbody tr:nth-child(4n + 2) .stk-vacia {
  background-color: rgba(46, 125, 209, .04);
}
.stk-tabla tbody tr .stk-agotado { background-color: var(--color-danger-bg); }
.stk-tabla tbody tr .stk-falta   { background-color: var(--color-warning-bg); }

@media (max-width: 768px) {
  .stk-tabla { font-size: 11.5px; }
  .stk-tabla th, .stk-tabla td { padding: 4px 2px; }
  .stk-celda { min-width: 40px; }
}

/* ================================================================
   ARCADA DENTAL (components/ArcadaDental.js)
   El SVG se genera por geometría; acá solo va la piel.
   ================================================================ */

.arcada { display: flex; flex-direction: column; gap: 10px; }

/* Selector de qué se está marcando */
.arcada-tipos { display: flex; gap: 6px; flex-wrap: wrap; }

.arcada-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--bg-surface);
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.arcada-chip:hover { border-color: var(--c); }
.arcada-chip.activo {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, transparent);
  color: var(--text-primary);
  font-weight: 600;
}
.arcada-chip b {
  font-size: 11px; font-weight: 700;
  background: var(--c); color: #fff;
  border-radius: 999px; padding: 0 6px; min-width: 18px; text-align: center;
}
.arcada-punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c); flex-shrink: 0;
}

/* El diagrama */
.arcada-svg {
  width: 100%; max-width: 460px; height: auto;
  align-self: center;
  touch-action: manipulation;   /* sin delay de doble tap en mobile */
}
.arcada-svg .diente,
.arcada-svg .conector { cursor: pointer; }
.arcada-svg .diente rect,
.arcada-svg .conector circle { transition: fill var(--transition-fast); }
.arcada-svg .diente:hover rect,
.arcada-svg .conector:hover circle { fill: var(--brand-primary-lt); }
/* Cuando se marcan conectores, las piezas no son el objetivo */
.arcada-svg .diente.inactivo { cursor: default; opacity: 0.55; }
.arcada-svg .diente.inactivo:hover rect { fill: var(--bg-surface); }

.arcada-ayuda {
  font-size: 11.5px; color: var(--text-muted); text-align: center;
}

/* Zonas, cuando el elemento no se marca sobre una pieza */
.arcada-zonas {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  max-width: 420px; align-self: center; width: 100%;
}
.arcada-zona {
  padding: 16px 10px;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-surface); cursor: pointer;
  font-size: 13px; color: var(--text-secondary);
  transition: all var(--transition-fast);
}
.arcada-zona:hover { border-color: var(--c); }
.arcada-zona.on {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--text-primary); font-weight: 600;
}

/* Resumen de lo marcado */
.arcada-resumen {
  border-top: 1px solid var(--border);
  padding-top: 9px;
  display: flex; flex-direction: column; gap: 5px;
}
.arcada-vacio { font-size: 12px; color: var(--text-muted); }
.arcada-linea {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
}
.arcada-lista {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arcada-cant {
  font-weight: 700; font-size: 12px;
  min-width: 22px; text-align: right;
}

@media (max-width: 480px) {
  .arcada-zonas { grid-template-columns: 1fr; }
  .arcada-chip { font-size: 12px; padding: 5px 9px; }
}

/* Caja plegable que envuelve el diagrama dentro de cada ítem */
.arcada-caja {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-app);
}
.arcada-caja > summary {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12.5px;
  list-style: none;
  user-select: none;
}
.arcada-caja > summary::-webkit-details-marker { display: none; }
.arcada-caja > summary::after {
  content: '▾'; float: right; color: var(--text-muted); font-size: 11px;
}
.arcada-caja[open] > summary::after { content: '▴'; }
.arcada-caja[open] > summary { border-bottom: 1px solid var(--border); }
.arcada-host { padding: 12px; }

/* Filas de modificador dentro de un ítem */
.mod-fila {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
}
.mod-leyenda { font-size: 11px; color: var(--text-muted); }
.mod-cant {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  min-width: 26px; text-align: right;
}
/* Los que resuelve el diagrama: se muestran, no se editan acá */
.mod-en-arcada { opacity: 0.7; }
.mod-en-arcada .mod-leyenda { font-style: italic; }

/* Switch para los modificadores que sólo se aplican o no */
.switch {
  width: 40px; height: 22px; padding: 0;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-app);
  cursor: pointer; flex-shrink: 0;
  position: relative;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.switch .switch-bolita {
  position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--text-muted);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.switch.on { background: var(--brand-accent); border-color: var(--brand-accent); }
.switch.on .switch-bolita { transform: translateX(18px); background: #fff; }
.switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-accent-lt); }

/* ------------------------------------------------------------------
   Editor de protocolos
   ------------------------------------------------------------------ */
.proto-tabs {
  display: flex;
  gap: 2px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}
.proto-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}
.proto-tab b {
  font-family: var(--font-mono);
  font-size: 11.5px;
  opacity: .65;
  margin-left: 4px;
}
.proto-tab:hover  { color: var(--text); }
.proto-tab.activa { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

.pasos-lista { display: flex; flex-direction: column; gap: 4px; }

.paso-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
/* Los hitos se distinguen de un vistazo: son los que mueven el trabajo. */
.paso-fila.hito-envio   { border-left: 3px solid var(--warning, #d98324); }
.paso-fila.hito-entrega { border-left: 3px solid var(--success, #2e9e5b); }

.paso-mover { display: flex; flex-direction: column; gap: 1px; }
.paso-mover .btn-icon.xs {
  width: 18px; height: 15px; padding: 0;
  font-size: 8px; line-height: 1;
}
.paso-mover .btn-icon.xs:disabled { opacity: .25; cursor: default; }

.paso-orden {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  min-width: 20px;
  text-align: right;
}
.paso-nombre { font-size: 13.5px; }
.paso-hito, .paso-genera {
  display: inline-block;
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 8px;
}
.paso-genera { color: var(--primary); }

.paso-dias { display: flex; align-items: center; gap: 3px; }
.paso-dias input {
  width: 52px;
  text-align: center;
  padding: 3px 4px;
  font-size: 12px;
}
.paso-dias span { font-size: 11px; color: var(--text-muted); }

.compat-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
  max-height: 420px;
  overflow: auto;
}
.compat-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.compat-fila:hover  { background: var(--surface-hover, rgba(0,0,0,.03)); }
.compat-fila.puesta { background: color-mix(in srgb, var(--primary) 8%, transparent); }

/* --- Checklist de producción en el alta de trabajo --- */
.pasos-caja {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pasos-caja > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12.5px;
  background: var(--surface-alt, rgba(0,0,0,.02));
  list-style: none;
}
.pasos-caja > summary::-webkit-details-marker { display: none; }
.pasos-caja > summary::before { content: '▸'; color: var(--text-muted); font-size: 10px; }
.pasos-caja[open] > summary::before { content: '▾'; }
.pasos-resumen {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Lo que el checklist va a agregar a la orden: es plata, tiene que saltar. */
.pasos-aviso {
  padding: 7px 12px;
  font-size: 12px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border-bottom: 1px solid var(--border);
}

.pasos-items { display: flex; flex-direction: column; }

.paso-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.paso-check:last-child { border-bottom: none; }
.paso-check:hover     { background: var(--surface-hover, rgba(0,0,0,.02)); }
.paso-check.apagado   { color: var(--text-muted); }
.paso-check .paso-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  min-width: 18px;
  text-align: right;
}
.paso-check .paso-hito,
.paso-check .paso-genera { font-size: 11px; white-space: nowrap; }

/* Chips agrupados por trabajo, cuando la orden tiene más de una construcción. */
.arcada-grupos { display: flex; flex-direction: column; gap: 6px; }
.arcada-grupo  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arcada-grupo-nombre {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  min-width: 90px;
}
.arcada-grupo-tag {
  font-size: 10.5px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
}

/* Una pieza es de un solo trabajo: las que ya tomó otra construcción de la
   orden se muestran bloqueadas, en vez de dejar que el click rebote. */
.arcada-svg .diente.ajena,
.arcada-svg .conector.ajena { cursor: not-allowed; opacity: .55; }
.arcada-svg .diente.ajena rect { stroke-dasharray: 3 2; }
.arcada-zona.ajena { cursor: not-allowed; opacity: .5; }

.arcada-aviso {
  margin-top: 8px;
  padding: 7px 11px;
  font-size: 12px;
  color: var(--color-danger, #b91c1c);
  background: color-mix(in srgb, var(--color-danger, #b91c1c) 8%, transparent);
  border-radius: var(--radius-md);
}

/* --- Editor de fórmula de precio --- */
.cp-lista { display: flex; flex-direction: column; gap: 4px; }
.cp-fila, .cp-alta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.cp-alta { margin-top: 10px; border-style: dashed; }
.cp-coef { width: 84px; text-align: center; padding: 4px 6px; font-size: 12.5px; }
.cp-x    { color: var(--text-muted); font-size: 12px; }
.cp-elemento { flex: 1; min-width: 140px; display: flex; flex-direction: column; }
.cp-nombre-ar { font-size: 12.5px; }
.cp-valor, .cp-parcial {
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}
.cp-valor   { color: var(--text-muted); }
.cp-parcial { font-weight: 600; min-width: 96px; text-align: right; }
.cp-mult    { max-width: 170px; font-size: 12.5px; }
.cp-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.cp-total strong { font-family: var(--font-mono); font-size: 15px; }
.cp-total-nota   { font-size: 11.5px; color: var(--text-muted); }

/* --- Solapa Datos / Modificadores del protocolo --- */
.form-ayuda { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }
.proto-legacy {
  margin-top: 18px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-alt, rgba(0,0,0,.02));
  font-size: 11.5px;
  color: var(--text-muted);
}
.proto-legacy code { font-family: var(--font-mono); display: block; margin: 5px 0; }

.mods-lista { display: flex; flex-direction: column; gap: 4px; }
.mod-def {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.mod-def-tipo { font-size: 11px; color: var(--text-muted); }
.mod-def-cant { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.mod-def-cant input { width: 66px; text-align: center; padding: 3px 5px; }
.mod-def-marcas { font-size: 11.5px; color: var(--text-muted); }

/* --- Listas de catálogo: modificadores y precios --- */
.mo-lista, .ar-lista { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.mo-fila, .ar-fila {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.mo-fila.abierta, .ar-fila.abierta { border-color: var(--primary); }
.mo-cab, .ar-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  cursor: pointer;
}
.mo-cab:hover, .ar-cab:hover { background: var(--surface-hover, rgba(0,0,0,.02)); }
.mo-flecha { color: var(--text-muted); font-size: 10px; width: 10px; }
.mo-nombre, .ar-nombre { font-size: 13.5px; }
.mo-meta { font-size: 11px; color: var(--text-muted); }
.mo-cuerpo, .ar-cuerpo {
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-alt, rgba(0,0,0,.015));
}
.mo-subtitulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.ar-valor {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  min-width: 108px;
  text-align: right;
}
/* Un elemento sin precio vigente no se cobra: no puede pasar desapercibido. */
.ar-fila.sin-precio { border-left: 3px solid var(--warning, #d98324); }
.ar-aviso { font-size: 11px; color: var(--warning, #d98324); }

.ar-hist-cab, .ar-hist-fila {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 5px 8px;
  font-size: 12px;
}
.ar-hist-cab {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.ar-hist { max-height: 300px; overflow: auto; }
.ar-hist-fila { border-bottom: 1px solid var(--border); }
.ar-hist-fila.vigente { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.ar-hist-valor  { font-family: var(--font-mono); font-weight: 600; }
.ar-hist-exacto { font-family: var(--font-mono); color: var(--text-muted); }
.ar-hist-mas    { font-size: 11.5px; color: var(--text-muted); padding: 6px 8px; }

/* --- Lista de aranceles: edición --- */
.al-aviso {
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  color: var(--warning, #92400e);
  background: color-mix(in srgb, var(--warning, #d98324) 12%, transparent);
}
.al-mod {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.al-mod:last-child { border-bottom: none; }
.al-vacio { font-size: 12px; color: var(--text-muted); }

/* En la fórmula de un modificador el término sólo suma o resta: cuántas
   unidades se aplican se decide al cargar el trabajo. */
.cp-signo { width: 84px; font-size: 12.5px; }

/* Encabezado de familia en las listas de catálogo. Agrupa y nada más: no
   cambia ningún cálculo, sólo hace encontrable una lista de 178 filas. */
.cat-familia {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.cat-familia:first-child { margin-top: 4px; }
.cat-familia span {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 400;
  opacity: .7;
}

/* --- Escáner de QR --- */
/* Cuadrado y recortado: la cámara de un teléfono entrega vertical, y sin
   recortar el visor ocupaba media pantalla para mostrar piso y techo. Con
   `cover` sobre una caja 1:1 el recorte cae arriba y abajo, que es justo lo
   que sobra. */
.qr-marco {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.qr-marco video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* La guía la pone el CSS y no la librería: ésta calcula la posición sobre la
   caja del video sin saber del recorte, y quedaba corrida. */
.qr-guia {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 10px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
  pointer-events: none;
}

/* ------------------------------------------------------------------
   Archivos del caso: órdenes, fotos y modelos 3D
   ------------------------------------------------------------------ */
.adj-secciones { display: flex; flex-direction: column; gap: 18px; }

.adj-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adj-titulo { font-size: 13px; font-weight: 600; }
.adj-cuenta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}
.adj-acciones { margin-left: auto; display: flex; gap: 6px; }

/* Que los modelos 3D se borran solos no puede ser letra chica: enterarse el
   día que hacen falta es peor que no haberlos subido. */
.adj-aviso {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: 11.5px;
  color: var(--warning, #92400e);
  background: color-mix(in srgb, var(--warning, #d98324) 12%, transparent);
}
.adj-vacio { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); }

.adj-lista { margin-top: 10px; }
.adj-lista.es-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.adj-lista.es-lista { display: flex; flex-direction: column; gap: 4px; }

.adj-miniatura {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-alt, rgba(0,0,0,.02));
}
.adj-miniatura img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.adj-miniatura figcaption {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  font-size: 10.5px;
  color: var(--text-muted);
}
.adj-miniatura figcaption span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adj-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.adj-icono  { font-size: 16px; }
.adj-nombre { font-size: 13px; text-decoration: none; color: var(--primary); }
.adj-nombre:hover { text-decoration: underline; }
.adj-meta   { font-size: 11px; color: var(--text-muted); }

.adj-fila.vencido, .adj-miniatura.vencido { opacity: .55; }
.adj-fila.vencido .adj-nombre { text-decoration: line-through; }

/* Un archivo que todavía no salió del navegador tiene que distinguirse: si no,
   cerrar el alta sin guardar parece haberlo perdido. */
.adj-pendiente {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--warning, #92400e);
  background: color-mix(in srgb, var(--warning, #d98324) 16%, transparent);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Feriados
   ------------------------------------------------------------------ */
.fe-nota {
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface-alt, rgba(0,0,0,.02));
}
.fe-lista { display: flex; flex-direction: column; gap: 3px; }
.fe-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.fe-dia {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  min-width: 26px;
  text-align: right;
}
.fe-semana {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 74px;
}
.fe-nombre { font-size: 13px; }
/* Un feriado en sábado no cambia ningún plazo: se atenúa para que no parezca
   que falta algo. */
.fe-fila.en-finde { opacity: .6; }
.fe-fila.ya-esta  { opacity: .55; }
.fe-aviso { font-size: 10.5px; color: var(--text-muted); }
.fe-tras {
  font-size: 10.5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Contactos
   ------------------------------------------------------------------ */
.co-lista { display: flex; flex-direction: column; gap: 4px; }
.co-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.co-fila:hover { background: var(--surface-hover, rgba(0,0,0,.02)); }
.co-avatar {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  overflow: hidden;
}
.co-avatar.grande { width: 84px; height: 84px; flex-basis: 84px; font-size: 26px; }
.co-avatar img { width: 100%; height: 100%; object-fit: cover; }
.co-nombre { font-size: 13.5px; font-weight: 500; }
.co-meta   { font-size: 11.5px; color: var(--text-muted); }
.co-chip {
  font-size: 10.5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--text-muted);
}

/* --- Ficha --- */
.co-foto-zona { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.co-foto-btns { display: flex; gap: 6px; flex-wrap: wrap; }

.co-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.co-sub .btn { margin-left: auto; text-transform: none; letter-spacing: 0; }

.co-repes { display: flex; flex-direction: column; gap: 6px; }
.co-repe {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.co-repe input, .co-repe select { font-size: 12.5px; padding: 4px 7px; }
.co-dir { flex-direction: column; align-items: stretch; gap: 6px; }
.co-dir-fila { display: flex; align-items: center; gap: 6px; }
/* Ocho campos en una grilla: la dirección entra de un vistazo y no en una
   columna de ocho renglones. */
.co-dir-grilla { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.co-vacio { font-size: 12px; color: var(--text-muted); padding: 4px 2px; }

.co-portal {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  cursor: pointer;
}
.co-portal input { margin-top: 3px; }

@media (max-width: 640px) {
  .co-dir-grilla { grid-template-columns: repeat(2, 1fr); }
  .co-dir-grilla > input { grid-column: span 2 !important; }
}

/* La cuenta de odontólogo: que se cree sola conviene decirlo, y que no se pueda
   sacar el rol cuando tiene movimiento, más todavía. */
.co-cuenta {
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface-alt, rgba(0,0,0,.02));
}
.co-cuenta.alerta {
  color: var(--warning, #92400e);
  background: color-mix(in srgb, var(--warning, #d98324) 12%, transparent);
}
.co-chip.cuenta {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

/* ----------------------------------------------------------------
   PANEL INFERIOR  (components/PanelInferior.js)
   Acoplado al borde de abajo, todo el ancho. No es un modal: el resto de
   la app sigue usable, así que va por debajo de --z-modal y sin backdrop.
   ---------------------------------------------------------------- */
.panel-inferior {
  --panel-alto: 28vh;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--panel-alto);
  z-index: calc(var(--z-navbar) + 10);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(15, 20, 45, 0.13);
  display: flex;
  flex-direction: column;
  animation: panel-sube 160ms ease-out;
}

@keyframes panel-sube {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Empuja el contenido en vez de taparlo: si no, la última fila de la tabla
   queda siempre debajo del panel y hay que adivinar dónde está. */
body.con-panel-inferior #content {
  padding-bottom: calc(var(--panel-alto, 28vh) + 20px);
}

/* Franja de arrastre sobre el borde de arriba. Alta de 8px y con el cursor
   correcto: un borde de 1px es imposible de agarrar. */
.panel-agarre {
  position: absolute;
  top: -3px; left: 0; right: 0;
  height: 9px;
  cursor: ns-resize;
  z-index: 1;
}
.panel-agarre::after {
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  width: 46px; height: 3px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--border-strong);
  opacity: 0;
  transition: opacity 120ms;
}
.panel-agarre:hover::after { opacity: 1; }

/* Mientras se arrastra: sin selección de texto ni hover raro en la tabla. */
body.panel-arrastrando { user-select: none; cursor: ns-resize; }
body.panel-arrastrando .panel-inferior { animation: none; }

.panel-cabecera {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
}
.panel-icono:empty { display: none; }
.panel-titulo {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panel-acciones {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.panel-cuerpo {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px;
  -webkit-overflow-scrolling: touch;
}

/* La fila de la tabla que está abierta en el panel. */
tr.fila-seleccionada > td { background: var(--bg-selected) !important; }
tr.fila-seleccionada > td:first-child { box-shadow: inset 3px 0 0 var(--brand-accent); }

/* La barra de Guardar/Cancelar del formulario, dentro del panel inferior: el
   panel mide 28vh y el formulario es largo, así que si la barra se va con el
   scroll el botón de guardar queda inalcanzable. */
.panel-cuerpo .form-barra {
  position: sticky;
  top: -12px;
  z-index: 3;
  margin: -12px -14px 0;
  padding: 10px 14px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

/* ----------------------------------------------------------------
   CUENTA Y CAJA
   ---------------------------------------------------------------- */
/* El aviso de cheques por vencer. Va arriba de todo y en todas las solapas:
   es lo único de la pantalla que se pierde solo si nadie mira. */
.cta-aviso {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-warning);
  background: var(--color-warning-bg);
  font-size: 13px;
}
.cta-aviso.grave {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}

.chq-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

/* El plazo en la fila. El color hace el barrido visual: se ve dónde hay que
   actuar hoy sin leer cada renglón. */
.chq-plazo {
  margin-left: 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  white-space: nowrap;
}
tr.chq-urgente .chq-plazo { color: var(--color-warning); font-weight: 600; }
tr.chq-vencido .chq-plazo { color: var(--color-danger); font-weight: 600; }
tr.chq-vencido > td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }
tr.chq-urgente > td:first-child { box-shadow: inset 3px 0 0 var(--color-warning); }

.chq-vencimiento {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.chq-vencimiento:empty { display: none; }

.chq-foto {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.bco-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.bco-fila:last-child { border-bottom: none; }

.table-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
}

/* ----------------------------------------------------------------
   NOTIFICACIONES  (core/notificaciones.js)
   ---------------------------------------------------------------- */
/* El globo cuenta sólo lo nuevo, así que puede quedar vacío: ahí vuelve a ser
   el puntito de siempre en vez de un círculo con nada adentro. */
.nav-notif-dot {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background: var(--color-warning);
}
.nav-notif-dot.vacio {
  min-width: 0;
  width: 0;
  height: 0;
  padding: 0;
  visibility: hidden;
}
.nav-notif-dot.grave { background: var(--color-danger); }

.nt-panel {
  position: fixed;
  z-index: var(--z-dropdown);
  width: min(400px, calc(100vw - 16px));
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(15, 20, 45, 0.18);
  overflow: hidden;
}

.nt-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
  font-size: 13.5px;
}

.nt-cuerpo { overflow-y: auto; }

.nt-fila {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.nt-fila:last-child { border-bottom: none; }
.nt-fila:hover { background: var(--bg-hover); }
.nt-fila.nuevo { background: var(--bg-selected); }
.nt-fila.nt-critica { border-left-color: var(--color-danger); }
.nt-fila.nt-alta    { border-left-color: var(--color-warning); }
.nt-fila.nt-media   { border-left-color: var(--color-info); }

.nt-icono { font-size: 15px; line-height: 1.3; }
.nt-titulo { font-size: 13px; font-weight: 600; }
.nt-sub { font-size: 11.5px; color: var(--text-secondary); }
.nt-meta {
  display: flex;
  gap: 10px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.nt-meta:empty { display: none; }

/* Las acciones aparecen al pasar por encima: con dos botones fijos en cada
   fila, la lista se lee como una botonera y no como una lista de avisos. */
.nt-acciones { display: flex; gap: 2px; opacity: 0; transition: opacity 120ms; }
.nt-fila:hover .nt-acciones { opacity: 1; }

.nt-vacio {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.nt-pie {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ----------------------------------------------------------------
   AGENDA
   ---------------------------------------------------------------- */
.ag-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Los días de la semana que se muestran. Botones y no un select múltiple:
   se tocan de a uno y hay que ver de un golpe cuáles están puestos. */
.ag-semana { display: flex; gap: 2px; }
.ag-dia-chip {
  min-width: 34px;
  padding: 4px 6px;
  font-size: 11.5px;
  font-family: var(--font-ui);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
}
.ag-dia-chip:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.ag-dia-chip:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ag-dia-chip.on {
  background: var(--brand-primary-lt);
  border-color: var(--brand-accent);
  color: var(--brand-primary);
  font-weight: 600;
}

.ag-titulo { font-size: 14px; font-weight: 600; margin: 4px 0; }

.ag-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.ag-dia {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ag-dia.hoy { border-color: var(--brand-accent); box-shadow: 0 0 0 1px var(--brand-accent); }
.ag-dia.vacio { opacity: .62; }

.ag-dia-cab {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-hover);
}
.ag-dia-nombre { font-size: 11.5px; text-transform: uppercase; color: var(--text-muted); }
.ag-dia-num { font-size: 17px; font-weight: 600; }
.ag-dia-mes { font-size: 11.5px; color: var(--text-muted); }
.ag-hoy-chip {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--brand-accent);
  color: #fff;
}

.ag-dia-cuerpo { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.ag-nada { text-align: center; color: var(--text-muted); padding: 10px; font-size: 12px; }

/* El separador de lo que no tiene hora: los trabajos migrados no la tienen y
   ponerlos a las 00:00 sería mentir sobre cuándo hay que hacerlos. */
.ag-separador {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  padding: 6px 4px 2px;
  border-top: 1px dashed var(--border);
  margin-top: 2px;
}

.ag-evento {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  border-left: 3px solid var(--border-strong);
  background: var(--bg-app);
  cursor: pointer;
  font-size: 12.5px;
}
.ag-evento:hover { background: var(--bg-hover); }
.ag-evento.hecho { opacity: .5; text-decoration: line-through; }
/* Tres cosas distintas, porque cambian lo que hay que hacer: un viaje que
   planificar, algo que hay que tener listo, y un trabajo a secas. */
.ag-evento.ag-cadeteria { border-left-color: var(--color-info); }
.ag-evento.ag-retira    { border-left-color: var(--color-warning); }
.ag-evento.ag-trabajo   { border-left-color: var(--brand-accent); }

.ag-evento-titulo { font-weight: 500; line-height: 1.25; }
.ag-evento-sub { font-size: 11px; color: var(--text-secondary); }
.ag-hora {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-right: 2px;
}
.ag-icono { font-size: 12px; line-height: 1.4; }

/* ----------------------------------------------------------------
   CORREO
   ---------------------------------------------------------------- */
.cr-cola { font-size: 12px; display: flex; gap: 10px; }
.cr-ok   { color: var(--color-success); }
.cr-pend { color: var(--color-warning); }
.cr-err  { color: var(--color-danger); }
.cr-sin  { color: var(--text-muted); }

/* Cuántos lo van a recibir. Va antes del botón y no después: a 271 personas no
   se les desmanda un mail. */
.cr-cuenta {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-info-bg);
  border: 1px solid var(--color-info);
  font-size: 12.5px;
}
.cr-cuenta:empty { display: none; }
.cr-cuenta .cr-sin { display: block; margin-top: 2px; font-size: 11.5px; }

.cr-lote {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.cr-lote:last-child { border-bottom: none; }
.cr-lote:hover { background: var(--bg-hover); }
.cr-conteo { display: flex; gap: 8px; font-size: 11.5px; white-space: nowrap; }

.cr-cuerpo {
  margin: 0;
  padding: 12px;
  background: var(--bg-app);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 12.5px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 46vh;
  overflow-y: auto;
}