/* ==========================================================================
   IE Pagos — estilos corporativos
   Paleta: Amarillo #FFD100 · Negro #111111 · Gris #3A3A3A · Claro #F4F4F4
   ========================================================================== */

:root {
  --ie-yellow: #FFD100;
  --ie-yellow-dark: #E6BC00;
  --ie-black: #111111;
  --ie-gray: #3A3A3A;
  --ie-light: #F4F4F4;
  --ie-border: #E4E4E4;
}

* { -webkit-tap-highlight-color: transparent; }

body { overscroll-behavior-y: none; }

/* ------------------------------------------------------------ Scrollbar -- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CFCFCF; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #ABABAB; background-clip: content-box; }

/* ------------------------------------------------------------- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem 1rem; border-radius: .6rem; font-weight: 600; font-size: .875rem;
  transition: all .15s ease; cursor: pointer; border: 1px solid transparent;
  white-space: nowrap; user-select: none;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--ie-yellow); color: var(--ie-black); }
.btn-primary:hover:not(:disabled) { background: var(--ie-yellow-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,209,0,.35); }
.btn-dark { background: var(--ie-black); color: #fff; }
.btn-dark:hover:not(:disabled) { background: #2a2a2a; transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--ie-gray); border-color: var(--ie-border); }
.btn-ghost:hover:not(:disabled) { background: var(--ie-light); border-color: #d0d0d0; }
.btn-danger { background: #DC2626; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #B91C1C; }
.btn-success { background: #16A34A; color: #fff; }
.btn-success:hover:not(:disabled) { background: #15803D; }
.btn-sm { padding: .35rem .7rem; font-size: .78rem; border-radius: .5rem; }
.btn-lg { padding: .75rem 1.5rem; font-size: .95rem; }

/* -------------------------------------------------------------- Inputs --- */
.field { display: flex; flex-direction: column; gap: .3rem; }
.label { font-size: .75rem; font-weight: 600; color: var(--ie-gray); text-transform: uppercase; letter-spacing: .03em; }
.input, .select, .textarea {
  width: 100%; padding: .55rem .75rem; border: 1px solid var(--ie-border);
  border-radius: .55rem; font-size: .875rem; background: #fff; color: var(--ie-black);
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--ie-yellow); box-shadow: 0 0 0 3px rgba(255,209,0,.2);
}
.input.error, .select.error { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.input::placeholder { color: #9CA3AF; }
.textarea { resize: vertical; min-height: 78px; }
.field-error { font-size: .72rem; color: #DC2626; font-weight: 500; }

/* -------------------------------------------------------------- Tarjeta -- */
.card { background: #fff; border-radius: .9rem; border: 1px solid var(--ie-border); }
.card-hover { transition: box-shadow .18s, transform .18s; }
.card-hover:hover { box-shadow: 0 8px 24px rgba(17,17,17,.08); transform: translateY(-2px); }

/* --------------------------------------------------------------- Badges -- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem;
  border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap;
}
.badge-available   { background: #E0F2FE; color: #075985; }
.badge-reserved    { background: #FEF3C7; color: #92400E; }
.badge-confirmed   { background: #DCFCE7; color: #166534; }
.badge-rejected    { background: #FEE2E2; color: #991B1B; }
.badge-void        { background: #E5E7EB; color: #4B5563; }
.badge-pending     { background: #FEF9C3; color: #854D0E; }
.badge-review      { background: #EDE9FE; color: #5B21B6; }
.badge-duplicate   { background: #FFE4E6; color: #9F1239; }
.badge-loaded      { background: #F1F5F9; color: #334155; }
.badge-ie          { background: var(--ie-yellow); color: var(--ie-black); }

/* --------------------------------------------------------------- Tablas -- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
table.data thead th {
  position: sticky; top: 0; z-index: 10; background: var(--ie-light);
  padding: .65rem .75rem; text-align: left; font-weight: 700; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ie-gray);
  border-bottom: 2px solid var(--ie-border); white-space: nowrap;
}
table.data thead th.sortable { cursor: pointer; user-select: none; }
table.data thead th.sortable:hover { color: var(--ie-black); background: #ECECEC; }
table.data tbody td { padding: .6rem .75rem; border-bottom: 1px solid #F0F0F0; vertical-align: middle; }
table.data tbody tr { transition: background .1s; }
table.data tbody tr:hover { background: #FFFBEB; }
table.data tbody tr.clickable { cursor: pointer; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ------------------------------------------------------- Skeleton loader - */
.skeleton {
  background: linear-gradient(90deg, #EFEFEF 25%, #F8F8F8 37%, #EFEFEF 63%);
  background-size: 400% 100%; animation: skeleton 1.3s ease infinite; border-radius: .4rem;
}
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* -------------------------------------------------------------- Sidebar -- */
.nav-item {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem;
  border-radius: .55rem; font-size: .875rem; font-weight: 500; color: #C9C9C9;
  transition: all .14s; cursor: pointer; border-left: 3px solid transparent;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: rgba(255,209,0,.14); color: var(--ie-yellow); border-left-color: var(--ie-yellow); font-weight: 600; }
.nav-item i { width: 18px; text-align: center; font-size: .95rem; }

/* --------------------------------------------------------------- Modales - */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(17,17,17,.55); backdrop-filter: blur(3px);
  z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1rem;
  animation: fadeIn .15s ease;
}
.modal-panel {
  background: #fff; border-radius: 1rem; width: 100%; max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column; animation: slideUp .2s cubic-bezier(.2,.8,.3,1);
  box-shadow: 0 24px 64px rgba(0,0,0,.25);
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: none } }

/* --------------------------------------------------------------- Toasts -- */
.toast {
  display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; border-radius: .7rem;
  background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.16); border-left: 4px solid var(--ie-gray);
  animation: toastIn .22s cubic-bezier(.2,.8,.3,1); font-size: .85rem;
}
.toast.success { border-left-color: #16A34A; }
.toast.error   { border-left-color: #DC2626; }
.toast.warning { border-left-color: #F59E0B; }
.toast.info    { border-left-color: #0284C7; }
.toast.leaving { animation: toastOut .18s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(28px) } to { opacity: 1; transform: none } }
@keyframes toastOut { to { opacity: 0; transform: translateX(28px) } }

/* --------------------------------------------------------- Drag and drop - */
.dropzone {
  border: 2px dashed #D4D4D4; border-radius: .9rem; padding: 2rem 1rem; text-align: center;
  transition: all .18s; cursor: pointer; background: #FAFAFA;
}
.dropzone:hover { border-color: var(--ie-yellow); background: #FFFDF2; }
.dropzone.dragging { border-color: var(--ie-yellow); background: #FFF9DB; transform: scale(1.01); }

/* --------------------------------------------------------------- Score --- */
.score-bar { height: 7px; border-radius: 999px; background: #EDEDED; overflow: hidden; }
.score-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.score-high { background: linear-gradient(90deg, #16A34A, #22C55E); }
.score-mid  { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.score-low  { background: linear-gradient(90deg, #DC2626, #EF4444); }

/* ------------------------------------------------------------ Confianza -- */
.conf-pill { font-size: .66rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; }
.conf-high { background: #DCFCE7; color: #166534; }
.conf-mid  { background: #FEF3C7; color: #92400E; }
.conf-low  { background: #FEE2E2; color: #991B1B; }

/* ---------------------------------------------------------------- Utils -- */
.fade-in { animation: fadeIn .2s ease; }
.truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tabular { font-variant-numeric: tabular-nums; }

/* Barra de navegación inferior para móvil */
.mobile-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--ie-black); display: flex; justify-content: space-around;
  padding: .4rem .3rem calc(.4rem + env(safe-area-inset-bottom));
  border-top: 2px solid var(--ie-yellow);
}
.mobile-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .35rem .6rem; border-radius: .5rem; color: #9A9A9A; font-size: .62rem; font-weight: 600;
}
.mobile-nav-item.active { color: var(--ie-yellow); }
.mobile-nav-item i { font-size: 1.05rem; }

@media print {
  .no-print { display: none !important; }
}