/* =============================================================================
   TREBEDE · FACELIFT FASE 8b   ·   trebede-facelift-8b.css
   -----------------------------------------------------------------------------
   Capa de estilo para las 3 piezas JS de la Fase 8b:
     1) Datepicker  (Air Datepicker) → re-tematizado a la marca con sus variables --adp-*
     2) Firma       (signature_pad)  → marco del lienzo + barra de acciones
     3) Drag&drop   del calendario   → fantasma arrastrado + resalte de la zona destino

   Cargar DESPUÉS de trebede-facelift.css y de la CSS propia de Air Datepicker.
   Todo deriva de --brand → re-tematiza solo (marca blanca incluida).
   ============================================================================= */

/* ════════════════════════  1 · DATEPICKER (Air Datepicker)  ════════════════════════ */
/* Air Datepicker v3 expone variables --adp-*; las apuntamos a los tokens de marca. */
.air-datepicker{
  --adp-font-family:            var(--font-sans, system-ui, sans-serif);
  --adp-font-size:              14px;
  --adp-width:                  264px;
  --adp-color:                  var(--fg-2, #585858);
  --adp-color-secondary:        var(--fg-4, #8a97a1);
  --adp-accent-color:           var(--brand, #008fcb);
  --adp-background-color:        #fff;
  --adp-background-color-hover:  var(--gray-100, #f1f3f5);
  --adp-background-color-active: var(--gray-150, #eff3f6);
  --adp-border-color:           var(--gray-200, #e5e7eb);
  --adp-border-color-inner:     var(--gray-150, #eff3f6);
  --adp-border-radius:          var(--radius-md, 7px);
  --adp-day-name-color:         var(--fg-3, #697885);
  --adp-day-cell-width:         1fr;
  --adp-day-cell-height:        34px;
  --adp-cell-border-radius:     var(--radius-sm, 4px);
  --adp-cell-background-color-selected:        var(--brand, #008fcb);
  --adp-cell-background-color-selected-hover:  var(--brand-strong, #0080b6);
  --adp-cell-background-color-in-range:        color-mix(in srgb, var(--brand) 12%, #fff);
  --adp-cell-background-color-in-range-hover:  color-mix(in srgb, var(--brand) 20%, #fff);
  --adp-color-current-date:     var(--brand-strong, #0080b6);
  --adp-nav-color-secondary:    var(--fg-4, #8a97a1);
  --adp-btn-color:              var(--brand, #008fcb);
  --adp-btn-color-hover:        var(--brand-strong, #0080b6);
  --adp-btn-background-color-hover: var(--gray-100, #f1f3f5);
  --adp-pointer-size:           8px;
  box-shadow: var(--shadow-pop, 0 6px 20px rgba(16,51,73,.16));
  border:1px solid var(--gray-200, #e5e7eb);
}
/* hoy: solo el número en color de marca; seleccionado: pastilla sólida (ya por var) */
.air-datepicker-cell.-current-{ font-weight:700; }
.air-datepicker-cell.-selected-{ font-weight:600; }
/* flechas de navegación dibujadas por CSS (prevHtml/nextHtml del adaptador) */
.adp-nav-prev, .adp-nav-next{
  display:inline-block; width:9px; height:9px;
  border:2px solid currentColor; border-width:2px 2px 0 0;
}
.adp-nav-prev{ transform:rotate(-135deg); }
.adp-nav-next{ transform:rotate(45deg); }

/* el input al que se enganchó el datepicker (foco de marca, hereda de facelift) */
input.tb-datepicker{ background-image:none; }

/* ════════════════════════  2 · FIRMA (signature_pad)  ════════════════════════ */
/* El backend ya fija .kbw-signature{width:600px;height:300px}. Aquí: marco moderno. */
.kbw-signature{
  position:relative;
  max-width:100%;
  background:#fff;
  border:1px solid var(--gray-300, #d4d9dd);
  border-radius:var(--radius-md, 7px);
  box-shadow: inset 0 0 0 9999px transparent;
  overflow:hidden;
  touch-action:none;
}
.kbw-signature::before{           /* línea-guía discreta de firma */
  content:"";
  position:absolute; left:18px; right:18px; bottom:46px;
  border-top:1px dashed var(--gray-300, #d4d9dd);
  pointer-events:none;
}
.kbw-signature::after{
  content:"✕";
  position:absolute; left:20px; bottom:24px;
  color:var(--fg-4, #8a97a1); font-size:15px;
  pointer-events:none;
}
.kbw-signature canvas{ display:block; width:100% !important; height:100%; cursor:crosshair; }

/* barra de acciones opcional bajo la firma (la pone el demo / el helper) */
.tb-firma-acciones{
  display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;
}
.tb-firma-acciones .boton-firma{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--radius-sm, 4px);
  font:600 13px/1 var(--font-sans, system-ui, sans-serif);
  background:var(--action, #677886); color:#fff;
  border:1px solid var(--action, #677886); cursor:pointer;
}
.tb-firma-acciones .boton-firma:hover{ background:var(--action-strong, #56656f); border-color:var(--action-strong,#56656f); }
.tb-firma-acciones .boton-firma.-borrar{ background:#fff; color:var(--fg-3,#697885); border-color:var(--gray-300,#d4d9dd); }
.tb-firma-acciones .boton-firma.-borrar:hover{ background:var(--gray-100,#f1f3f5); }

/* ════════════════════════  3 · DRAG & DROP del calendario  ════════════════════════ */
/* La visita arrastrable invita a moverse */
.arrastrable.tb-draggable{ cursor:grab; }
.arrastrable.tb-draggable:active{ cursor:grabbing; }

/* El original queda atenuado mientras se arrastra el clon */
.arrastrable.tb-dragging{ opacity:.35; }

/* Clon flotante que sigue al puntero */
.tb-drag-ghost{
  position:fixed !important;
  z-index:9999;
  margin:0 !important;
  pointer-events:none;
  opacity:.96;
  transform:rotate(-1.5deg) scale(1.02);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(16,51,73,.12));
  border-radius:var(--radius-sm, 4px);
}

/* Zona destino resaltada bajo el puntero */
.tb-droppable.tb-drop-hover{
  outline:2px dashed var(--brand, #008fcb);
  outline-offset:-3px;
  background:color-mix(in srgb, var(--brand) 9%, #fff) !important;
}

/* En táctil, da pista de que se mantiene pulsado para arrastrar */
@media (pointer:coarse){
  .arrastrable.tb-draggable{ -webkit-user-select:none; user-select:none; }
}