/* Piezas reutilizables en toda la app: formularios, botones, pestañas,
   tarjetas, avisos flotantes, calendario, estados de carga y vacío. */

/* -------------------- CARDS -------------------- */
.card{
  background:linear-gradient(180deg,var(--panel) 0%,rgba(14,27,43,0.6) 100%);
  border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:var(--space-5);margin-bottom:var(--space-5);
  box-shadow:var(--shadow-lg);
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
.card:hover{border-color:var(--border-hover);}

/* -------------------- FORMS -------------------- */
label.field-label{
  display:block;font-size:11px;color:var(--muted);letter-spacing:0.5px;
  margin:var(--space-4) 0 var(--space-2);text-transform:uppercase;font-weight:600;
}
.input-row{
  display:flex;align-items:center;gap:8px;
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:12px 16px;
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
.input-row:focus-within{
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-glow),0 0 20px rgba(240,198,116,0.05);
}
.input-row input{
  background:transparent;border:none;outline:none;color:var(--text);
  font-size:16px;font-family:inherit;width:100%;
  font-variant-numeric:tabular-nums;font-family:var(--font-mono);
}
.input-row .prefix{color:var(--gold);font-size:14px;font-weight:600;}
.input-row input::placeholder{color:var(--muted);opacity:0.5;}

/* -------------------- BUTTONS -------------------- */
.btn-main{
  width:100%;margin-top:var(--space-5);padding:14px;border:none;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--gold),var(--gold-dim));
  color:#101a2a;font-weight:700;font-size:14px;letter-spacing:0.5px;
  cursor:pointer;font-family:inherit;
  box-shadow:0 8px 24px -8px rgba(240,198,116,0.45);
  transition:filter var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
  position:relative;overflow:hidden;
}
.btn-main::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);
  transition:left 0.5s;
}
.btn-main:hover{filter:brightness(1.15);transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(240,198,116,0.55);}
.btn-main:hover::before{left:100%;}
.btn-main:active{transform:translateY(0);}

.btn-secondary{
  width:100%;margin-top:var(--space-3);padding:12px;
  border-radius:var(--radius-lg);background:transparent;
  border:1px solid var(--border);color:var(--text-secondary);
  cursor:pointer;font-family:inherit;font-size:13px;
  transition:var(--transition-fast);
}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold);background:rgba(240,198,116,0.05);}
.btn-main:disabled,.btn-secondary:disabled{opacity:0.6;cursor:not-allowed;filter:none;transform:none;}
.btn-spinner{
  display:inline-block;width:13px;height:13px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;opacity:0.85;
  animation:spin 0.7s linear infinite;vertical-align:-2px;margin-right:7px;
}
@keyframes spin{to{transform:rotate(360deg);}}

.btn-small{
  padding:8px 16px;border-radius:var(--radius-md);
  border:1px solid var(--border);background:var(--panel-2);
  color:var(--text-secondary);font-size:12px;cursor:pointer;font-family:inherit;
  transition:var(--transition-fast);font-weight:500;
}
.btn-small:hover{border-color:var(--gold);color:var(--gold);background:rgba(240,198,116,0.08);transform:translateY(-1px);}
.btn-small.danger{border-color:rgba(246,70,93,0.3);color:var(--red);}
.btn-small.danger:hover{background:var(--red-dim);border-color:var(--red);}

/* -------------------- TOGGLES -------------------- */
.toggle-row{display:flex;gap:10px;flex-wrap:wrap;}
.toggle-opt{
  flex:1;min-width:100px;text-align:center;padding:14px 8px;
  border-radius:var(--radius-md);border:1px solid var(--border);
  background:var(--panel-2);cursor:pointer;transition:var(--transition-fast);
}
.toggle-opt:hover{border-color:var(--border-hover);background:var(--panel-3);}
.toggle-opt.selected{
  border-color:var(--gold);background:rgba(240,198,116,0.08);
  box-shadow:var(--shadow-gold);
}
.toggle-opt .name{font-size:12px;font-weight:700;}
.toggle-opt .pct{font-size:11px;color:var(--green);margin-top:3px;font-weight:600;}

/* -------------------- COUNTERS -------------------- */
.counter-row{
  display:flex;align-items:center;gap:var(--space-3);
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:8px 12px;width:fit-content;
}
.counter-btn{
  width:36px;height:36px;border-radius:var(--radius-md);
  border:1px solid var(--border);background:var(--panel);
  color:var(--gold);font-size:18px;cursor:pointer;transition:var(--transition-fast);
  display:flex;align-items:center;justify-content:center;
}
.counter-btn:hover{border-color:var(--gold);background:rgba(240,198,116,0.1);}
.counter-val{min-width:40px;text-align:center;font-size:18px;font-weight:700;font-family:var(--font-mono);}

/* -------------------- SECTIONS -------------------- */
.section-divider{
  display:flex;align-items:center;gap:var(--space-3);
  margin:var(--space-5) 0 var(--space-4);
  color:var(--gold);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;
}
.section-divider::before,.section-divider::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--border),transparent);
}
.section-divider::after{background:linear-gradient(90deg,transparent,var(--border));}

/* -------------------- TABS -------------------- */
.tabs{
  display:flex;background:var(--panel-2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:3px;margin-bottom:var(--space-4);
}
.tab{
  flex:1;text-align:center;padding:10px 8px;font-size:12px;
  border-radius:var(--radius-sm);cursor:pointer;color:var(--muted);
  transition:var(--transition-fast);font-weight:500;
}
.tab:hover{color:var(--text-secondary);}
.tab.active{
  background:var(--panel);color:var(--gold);
  border:1px solid var(--gold);box-shadow:var(--shadow-gold);
  font-weight:600;
}

/* -------------------- EXPANDABLES -------------------- */
.expand{
  border:1px solid var(--border);border-radius:var(--radius-md);
  margin-bottom:var(--space-3);overflow:hidden;
  background:var(--panel-2);box-shadow:var(--shadow-sm);
  transition:border-color var(--transition-fast);
}
.expand:hover{border-color:var(--border-hover);}
.expand-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-3) var(--space-4);cursor:pointer;
  font-size:11px;color:var(--muted);text-transform:uppercase;
  letter-spacing:0.5px;font-weight:600;
  border-bottom:1px solid transparent;transition:var(--transition-fast);
}
.expand-head:hover{color:var(--text-secondary);}
.expand-body{padding:4px var(--space-4) var(--space-3);font-size:12px;color:var(--text-secondary);display:none;}
.expand-body.open{display:block;border-top:1px solid var(--border);animation:fadeIn 0.3s ease;}
.expand-body .line{
  display:flex;justify-content:space-between;gap:var(--space-3);
  color:var(--text);padding:10px 0;border-top:1px solid var(--border);
}
.expand-body .line:first-child{border-top:none;}
.expand-body .line span:last-child{
  text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-weight:500;
}

/* -------------------- DIVIDERS & ROWS -------------------- */
.divider-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-3) 0;border-top:1px solid var(--border);margin-top:6px;
}
.divider-row .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;}
.divider-row .r{font-size:14px;font-weight:600;}

/* -------------------- SHARE BUTTONS -------------------- */
.share-row{display:flex;gap:8px;margin-top:var(--space-4);}
.share-btn{
  flex:1;padding:12px;border-radius:var(--radius-md);border:none;
  color:white;font-size:12px;cursor:pointer;font-family:inherit;font-weight:600;
  transition:transform var(--transition-fast),box-shadow var(--transition-fast);
  position:relative;overflow:hidden;
}
.share-btn:hover{transform:translateY(-2px);}
.share-btn:active{transform:translateY(0);}
.wa{background:#25d366;box-shadow:0 4px 16px -4px rgba(37,211,102,0.4);}
.tg{background:#0088cc;box-shadow:0 4px 16px -4px rgba(0,136,204,0.4);}
.cp{background:var(--panel-2);color:var(--text);border:1px solid var(--border);}
.cp:hover{border-color:var(--gold);color:var(--gold);}
.share-btn.copiado{background:var(--green)!important;color:#062018!important;border-color:var(--green)!important;font-weight:700;transform:scale(1.02);}

/* -------------------- SUBCARDS -------------------- */
.subcard{
  background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-5);box-shadow:var(--shadow-sm);
  transition:border-color var(--transition-fast);
}
.subcard:hover{border-color:var(--border-hover);}
.subcard-head{margin-bottom:var(--space-4);display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.subcard-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text);}
.subcard-sub{font-size:12px;color:var(--muted);margin-top:3px;}
.subcard .input-row input{font-size:18px;font-weight:600;}
.subcard .input-row{padding:14px 16px;}

/* -------------------- CALENDAR -------------------- */
.mini-calendar-wrap{position:relative;}
.mini-calendar-trigger{
  width:100%;cursor:pointer;text-align:left;font-family:inherit;
  color:var(--text);font-size:15px;transition:var(--transition-fast);
}
.mini-calendar-icon-btn{
  background:var(--panel-2);border:1px solid var(--border);color:var(--muted);
  border-radius:var(--radius-sm);height:36px;padding:0 16px;font-size:12px;font-weight:600;
  cursor:pointer;box-shadow:var(--shadow-sm);transition:var(--transition-fast);
}
.mini-calendar-icon-btn:hover{border-color:var(--gold);color:var(--gold);}
.mini-calendar-panel{
  position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:290px;max-width:90vw;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-4);box-shadow:var(--shadow-xl);animation:fadeIn 0.2s ease;
}
.mini-calendar-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
  font-size:13px;font-weight:700;text-transform:capitalize;color:var(--text);
}
.mini-calendar-header button{
  background:var(--panel-2);border:1px solid var(--border);color:var(--muted);
  border-radius:var(--radius-sm);width:28px;height:28px;cursor:pointer;font-size:14px;
  transition:var(--transition-fast);display:flex;align-items:center;justify-content:center;
}
.mini-calendar-header button:hover{border-color:var(--gold);color:var(--gold);}
.mini-calendar-mes-label{cursor:pointer;padding:3px 10px;border-radius:var(--radius-sm);transition:var(--transition-fast);}
.mini-calendar-mes-label:hover{background:var(--panel-2);color:var(--gold);}
.mini-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.mini-calendar-grid-years{grid-template-columns:repeat(3,1fr);gap:8px;}
.mini-calendar-year{
  padding:14px 4px;text-align:center;border-radius:var(--radius-sm);font-size:13px;
  cursor:pointer;color:var(--text);font-family:var(--font-mono);transition:var(--transition-fast);
  font-weight:500;
}
.mini-calendar-year:hover{background:var(--panel-2);}
.mini-calendar-year.selected{background:var(--gold);color:#101a2a;font-weight:700;box-shadow:0 4px 12px rgba(240,198,116,0.3);}
.mini-calendar-dow{font-size:9px;color:var(--muted);text-align:center;padding-bottom:4px;text-transform:uppercase;font-weight:600;}
.mini-calendar-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);font-size:12px;cursor:pointer;color:var(--text);
  font-family:var(--font-mono);transition:var(--transition-fast);font-weight:500;
}
.mini-calendar-day:hover{background:var(--panel-2);}
.mini-calendar-day.muted{color:var(--muted);opacity:0.3;cursor:default;}
.mini-calendar-day.muted:hover{background:transparent;}
.mini-calendar-day.today{border:1px solid var(--gold);color:var(--gold);}
.mini-calendar-day.selected{background:var(--gold);color:#101a2a;font-weight:700;box-shadow:0 4px 12px rgba(240,198,116,0.3);}
.mini-calendar-day.muted.selected{opacity:1;}

/* -------------------- TOAST SYSTEM -------------------- */
#toastContainer{
  position:fixed;bottom:24px;right:24px;z-index:1000;
  display:flex;flex-direction:column;gap:10px;pointer-events:none;
  max-width:360px;width:calc(100% - 48px);
}
.toast{
  pointer-events:auto;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px 18px;box-shadow:var(--shadow-xl);
  display:flex;align-items:flex-start;gap:12px;
  animation:toastIn 0.35s cubic-bezier(0.16,1,0.3,1);
  position:relative;overflow:hidden;
}
.toast.toast-out{animation:toastOut 0.3s ease forwards;}
.toast::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
}
.toast-success::before{background:var(--green);}
.toast-error::before{background:var(--red);}
.toast-info::before{background:var(--blue);}
.toast-loading::before{background:var(--gold);animation:pulse 1.5s infinite;}
.toast-icon{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}
.toast-success .toast-icon{background:var(--green-dim);color:var(--green);}
.toast-error .toast-icon{background:var(--red-dim);color:var(--red);}
.toast-info .toast-icon{background:rgba(96,165,250,0.12);color:var(--blue);}
.toast-loading .toast-icon{background:rgba(240,198,116,0.12);color:var(--gold);}
.toast-content{flex:1;min-width:0;}
.toast-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;}
.toast-message{font-size:12px;color:var(--text-secondary);line-height:1.4;}
.toast-close{
  background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;
  line-height:1;padding:2px;transition:var(--transition-fast);flex-shrink:0;
}
.toast-close:hover{color:var(--text);}
.toast-progress{
  position:absolute;bottom:0;left:0;height:2px;
  background:rgba(255,255,255,0.1);width:100%;
}
.toast-progress-bar{
  height:100%;background:var(--gold);width:100%;
  animation:progressShrink linear forwards;
}

/* -------------------- SKELETONS -------------------- */
.skeleton{
  background:linear-gradient(90deg,var(--panel-2) 25%,var(--panel-3) 50%,var(--panel-2) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;
  border-radius:var(--radius-sm);
}
.skeleton-text{height:14px;margin-bottom:8px;border-radius:4px;}
.skeleton-text.short{width:60%;}
.skeleton-text.long{width:100%;}
.skeleton-circle{width:36px;height:36px;border-radius:50%;}
.skeleton-rect{height:80px;border-radius:var(--radius-md);}
.skeleton-chart{height:200px;border-radius:var(--radius-md);}

/* -------------------- EMPTY STATES -------------------- */
.empty-state{
  text-align:center;padding:var(--space-8) var(--space-4);
  animation:fadeIn 0.5s ease;
}
.empty-state-icon{
  font-size:48px;margin-bottom:var(--space-3);opacity:0.6;
  display:inline-block;animation:float 3s ease-in-out infinite;
}
.empty-state-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px;}
.empty-state-desc{font-size:13px;color:var(--muted);margin-bottom:var(--space-4);max-width:320px;margin-left:auto;margin-right:auto;line-height:1.5;}
.empty-state-cta{
  display:inline-block;padding:10px 20px;border-radius:var(--radius-md);
  background:var(--panel-2);border:1px solid var(--border);color:var(--text);
  font-size:13px;font-weight:600;cursor:pointer;transition:var(--transition-fast);
  text-decoration:none;
}
.empty-state-cta:hover{border-color:var(--gold);color:var(--gold);background:rgba(240,198,116,0.08);}

/* En celular, los objetivos táctiles se quedaban por debajo del mínimo cómodo (44 px):
   el menú superior a 29 px de alto y el botón de refrescar el BCV a 28x28. Se agrandan
   solo en pantallas táctiles, para no engordar la interfaz en escritorio. */
@media (max-width: 640px){
  .topnav-btn{min-height:38px;display:flex;align-items:center;justify-content:center;}
  .bcv-refresh{min-width:38px;min-height:38px;display:inline-flex;align-items:center;justify-content:center;}
}

/* -------------------- FOOTERS -------------------- */
.chip-footer{
  text-align:center;font-size:11px;color:var(--muted);background:var(--panel-2);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;margin-top:var(--space-3);
  font-family:var(--font-mono);
}
.note{font-size:11px;color:var(--muted);text-align:center;margin-top:var(--space-5);opacity:0.8;}
.version-footer{font-size:9px;color:var(--muted);text-align:center;margin-top:8px;letter-spacing:1px;text-transform:uppercase;opacity:0.5;}

/* -------------------- DIÁLOGO DE CONFIRMACIÓN -------------------- */
/* Sustituye al confirm() del navegador (ver js/ui/confirmar.js). Mismo lenguaje que los
   toasts —degradado del panel, borde, sombra xl— porque es lo mismo: la app hablándole
   al usuario. Lo que cambia es que este espera respuesta. */
.confirmar-fondo{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,0.62);backdrop-filter:blur(3px);
  animation:confirmarFondoIn 0.18s ease;
}
.confirmar-fondo.cerrando{animation:confirmarFondoOut 0.16s ease forwards;}
.confirmar-caja{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);
  padding:26px 26px 20px;width:100%;max-width:380px;text-align:center;
  animation:confirmarCajaIn 0.28s cubic-bezier(0.16,1,0.3,1);
}
.confirmar-fondo.cerrando .confirmar-caja{animation:none;}
.confirmar-icono{
  width:42px;height:42px;border-radius:50%;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;
  background:rgba(240,198,116,0.12);color:var(--gold);
}
.confirmar-caja.peligro .confirmar-icono{background:var(--red-dim);color:var(--red);}
.confirmar-titulo{
  margin:0 0 6px;font-size:16px;font-weight:600;color:var(--text);line-height:1.3;
}
.confirmar-mensaje{
  margin:0;font-size:12.5px;color:var(--text-secondary);line-height:1.5;
}
.confirmar-botones{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;
}
.confirmar-botones button{
  padding:10px 12px;border-radius:var(--radius-sm);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:var(--transition-fast);
}
.confirmar-no{
  background:transparent;border:1px solid var(--border);color:var(--text-secondary);
}
.confirmar-no:hover{border-color:var(--border-hover);color:var(--text);}
/* El que confirma va en el color de lo que va a pasar: rojo si borra. Y dice qué hace,
   no "Aceptar" — ese es medio arreglo del diálogo del navegador. */
.confirmar-si{
  background:var(--gold);border:1px solid var(--gold);color:#141418;
}
.confirmar-caja.peligro .confirmar-si{
  background:var(--red);border-color:var(--red);color:#fff;
}
.confirmar-si:hover{filter:brightness(1.08);}
.confirmar-botones button:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
}
@keyframes confirmarFondoIn{from{opacity:0;}to{opacity:1;}}
@keyframes confirmarFondoOut{from{opacity:1;}to{opacity:0;}}
@keyframes confirmarCajaIn{
  from{opacity:0;transform:translateY(10px) scale(0.97);}
  to{opacity:1;transform:none;}
}

/* Una fila que se acaba de mandar a borrar. Desaparece al instante y vuelve sola si la
   base dice que no se pudo — ver eliminarOperacion en js/ui/operaciones-guardar.js. */
.op-borrandose{display:none !important;}