/* ============================================================
   CuentasFT — app.css  (estilos globales de aplicación)
   ============================================================ */

/* ------------------------------------------------------------
   TECLADO NUMÉRICO POS
   ------------------------------------------------------------ */

/* Contenedor principal */
.kp-wrap {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  user-select:    none;
  -webkit-user-select: none;
}

/* Pantalla del monto */
.kp-display {
  background:    var(--bg2);
  border:        2px solid var(--border);
  border-radius: 12px;
  padding:       16px 20px;
  display:       flex;
  align-items:   baseline;
  justify-content: flex-end;
  gap:           4px;
  min-height:    72px;
  transition:    border-color .15s ease;
}
.kp-display--active {
  border-color: var(--red);
  background:   rgba(229,62,62,.05);
}

.kp-prefix {
  font-size:   1.5rem;
  font-weight: 700;
  color:       var(--text2);
  line-height: 1;
}
.kp-value {
  font-size:      2.4rem;
  font-weight:    800;
  color:          var(--text1);
  letter-spacing: -.5px;
  line-height:    1;
  font-variant-numeric: tabular-nums;
}
.kp-display--active .kp-prefix,
.kp-display--active .kp-value { color: var(--red); }

/* Cursor parpadeante */
.kp-cursor {
  width:      2px;
  height:     2.2rem;
  background: var(--red);
  border-radius: 2px;
  animation:  kp-blink .9s step-end infinite;
}
@keyframes kp-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}
.kp-display--active .kp-cursor { display: none; }

/* Montos rápidos */
.kp-quick {
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
}
.kp-quick-btn {
  flex:          1;
  min-width:     52px;
  min-height:    40px;
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: 8px;
  color:         var(--text1);
  font-size:     .85rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    background .1s, transform .08s, border-color .1s;
  white-space:   nowrap;
}
.kp-quick-btn:active {
  background: var(--bg3);
  transform:  scale(.95);
}
.kp-quick-total {
  background:  rgba(22,163,74,.12);
  border-color: var(--green);
  color:        var(--green);
  flex:         0 0 100%;
}
.kp-quick-total:active { background: rgba(22,163,74,.2); }

/* Grid de teclas */
.kp-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   8px;
}
.kp-key {
  min-height:    72px;
  border:        1px solid var(--border);
  border-radius: 12px;
  font-size:     1.6rem;
  font-weight:   700;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background .1s, transform .08s, box-shadow .1s;
  box-shadow:    0 2px 4px rgba(0,0,0,.25);
  -webkit-tap-highlight-color: transparent;
}

/* Teclas numéricas */
.kp-num {
  background: var(--bg2);
  color:      var(--text1);
  border-color: var(--border);
}
.kp-num:active {
  background:  var(--bg3);
  transform:   scale(.92);
  box-shadow:  0 1px 2px rgba(0,0,0,.2);
}

/* Tecla C (clear) */
.kp-clear {
  background: var(--bg3);
  color:      var(--amber);
  border-color: rgba(217,119,6,.4);
  font-size:  1.1rem;
}
.kp-clear:active {
  background: rgba(217,119,6,.15);
  transform:  scale(.92);
}

/* Tecla ⌫ (backspace) */
.kp-back {
  background: var(--bg3);
  color:      var(--red);
  border-color: rgba(229,62,62,.3);
}
.kp-back:active {
  background: rgba(229,62,62,.15);
  transform:  scale(.92);
}

/* Botón confirmar dinámico */
.kp-confirm {
  min-height:  60px;
  font-size:   1rem;
  font-weight: 700;
  border:      none;
  border-radius: 12px;
  width:       100%;
  cursor:      pointer;
  transition:  background .15s, transform .08s, opacity .15s;
  letter-spacing: .01em;
}
.kp-confirm:disabled {
  opacity: .4;
  cursor:  not-allowed;
}
.kp-confirm:not(:disabled):active { transform: scale(.97); }
.kp-confirm-red   { background: var(--red);   color: #fff; }
.kp-confirm-green { background: var(--green);  color: #fff; }

/* Responsive: pantallas muy pequeñas */
@media (max-width: 360px) {
  .kp-key    { min-height: 62px; font-size: 1.4rem; }
  .kp-value  { font-size: 2rem; }
}

/* ------------------------------------------------------------
   BREADCRUMB DE NAVEGACIÓN
   ------------------------------------------------------------ */
.breadcrumb-nav {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   .8rem;
  color:       var(--text3);
  margin-bottom: 1.25rem;
  flex-wrap:   wrap;
}
.breadcrumb-nav a {
  color:           var(--text2);
  text-decoration: none;
  display:         flex;
  align-items:     center;
  gap:             4px;
  transition:      color .12s ease;
}
.breadcrumb-nav a:hover { color: var(--text1); }
.breadcrumb-nav .sep { color: var(--text3); }
.breadcrumb-nav .current {
  color:       var(--text1);
  font-weight: 500;
}

/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */
.page-wrap {
  min-height: calc(100vh - 56px);
}

.page-content {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 1rem 5rem; /* bottom: espacio para safe-area en iOS */
}

/* ------------------------------------------------------------
   SECCIÓN
   ------------------------------------------------------------ */
.section-title {
  font-size:      .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight:    600;
  color:          var(--text3);
  margin-bottom:  .5rem;
}

/* ------------------------------------------------------------
   SALDO PRINCIPAL
   ------------------------------------------------------------ */
.saldo-display {
  font-size:    2.25rem;
  font-weight:  800;
  letter-spacing: -.5px;
  color:        var(--red);
  line-height:  1;
}
.saldo-display.cero { color: var(--green); }

/* ------------------------------------------------------------
   TARJETA CONTEXTO CLIENTE (cabecera en formularios)
   ------------------------------------------------------------ */
.cliente-context {
  background-color: var(--bg2);
  border:           1px solid var(--border);
  border-radius:    10px;
  padding:          .875rem 1rem;
  margin-bottom:    1.5rem;
}
.cliente-context .nombre {
  font-weight: 700;
  color:       var(--text1);
  font-size:   1rem;
}
.cliente-context .saldo-ctx {
  font-size:  .875rem;
  color:      var(--text2);
  margin-top: 2px;
}

/* ------------------------------------------------------------
   LISTA DE MOVIMIENTOS
   ------------------------------------------------------------ */
.mov-list {
  background-color: var(--bg1);
  border:           1px solid var(--border);
  border-radius:    12px;
  overflow:         hidden;
}

.mov-item {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         .75rem 1rem;
  border-bottom:   1px solid var(--border);
  gap:             .75rem;
}
.mov-item:last-child { border-bottom: none; }

.mov-desc {
  font-size:   .875rem;
  color:       var(--text1);
  font-weight: 500;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  max-width:   180px;
}
.mov-meta {
  font-size:  .72rem;
  color:      var(--text2);
  margin-top: 2px;
}
.mov-monto {
  font-weight: 700;
  font-size:   .95rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.mov-monto.debito  { color: var(--red);   }
.mov-monto.credito { color: var(--green); }

/* ------------------------------------------------------------
   BÚSQUEDA (input)
   ------------------------------------------------------------ */
.search-wrap { position: relative; }
.search-wrap > .ti {
  position:       absolute;
  left:           14px;
  top:            50%;
  transform:      translateY(-50%);
  color:          var(--text3);
  font-size:      1.1rem;
  pointer-events: none;
}
.search-wrap .form-control {
  padding-left: 2.5rem;
  font-size:    1rem;
  min-height:   52px;
}

/* ------------------------------------------------------------
   SELECTOR DE MÉTODO DE PAGO
   ------------------------------------------------------------ */
.method-options {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   .5rem;
}
.method-option input { display: none; }
.method-option label {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             4px;
  padding:         .75rem .5rem;
  border:          1px solid var(--border);
  border-radius:   10px;
  cursor:          pointer;
  font-size:       .8rem;
  color:           var(--text2);
  text-align:      center;
  transition:      border-color .15s, color .15s, background .15s;
  user-select:     none;
}
.method-option label i { font-size: 1.3rem; }
.method-option input:checked + label {
  border-color:     var(--green);
  color:            var(--green);
  background-color: rgba(22, 163, 74, .08);
}

/* ------------------------------------------------------------
   EMPTY STATE
   ------------------------------------------------------------ */
.empty-state {
  text-align: center;
  padding:    3rem 1rem;
  color:      var(--text3);
}
.empty-state i {
  font-size:     2.5rem;
  display:       block;
  margin-bottom: .75rem;
}
.empty-state p {
  font-size:   .9rem;
  margin:      0;
}

/* ------------------------------------------------------------
   ACCIONES RÁPIDAS (par de botones en cuenta cliente)
   ------------------------------------------------------------ */
.action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

@media (max-width: 400px) {
  .action-buttons {
    grid-template-columns: 1fr;
  }
}