/* Estilos de Cruce Complementos Pago CFDI — mismo lenguaje visual que Visor CFDI */

/* ---- Base ---- */
:root { --acento:#14284A; }
body { margin:0; font-family:'IBM Plex Sans',system-ui,sans-serif; background:#ECEEF1; color:#17242C; -webkit-font-smoothing:antialiased; }
a { color:var(--acento); }
a:hover { color:#0E1B33; }
* { box-sizing:border-box; }

.container { max-width:960px; margin:0 auto; padding:0 24px; }

/* ---- Barra superior ---- */
#topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px; background:#FFFFFF; border-bottom:1px solid #E1E6EA; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-logo { width:34px; height:34px; border-radius:8px; display:grid; place-items:center; font:600 13px 'IBM Plex Mono',monospace; color:#fff; background:var(--acento); }
.brand-text { display:flex; flex-direction:column; gap:1px; }
.brand-title-row { display:flex; align-items:center; gap:8px; }
.brand-title { font-size:16px; font-weight:600; }
.badge-version { font:500 11px 'IBM Plex Mono',monospace; padding:2px 7px; border-radius:99px; background:#EDF0F3; color:#5A6B76; }
.brand-sub { font-size:12px; color:#5A6B76; }
.privacy { display:flex; align-items:center; gap:8px; font-size:12px; color:#5A6B76; }
.dot { width:8px; height:8px; border-radius:99px; background:#16A34A; flex:none; }

/* ---- Zona de carga ---- */
.upload-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:28px 0 14px; }
.upload-card { display:flex; flex-direction:column; gap:10px; padding:16px; background:#FFFFFF; border:1px solid #E1E6EA; border-radius:12px; box-shadow:0 2px 10px rgba(23,36,44,0.05); }
.upload-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.upload-label { font-size:12px; font-weight:600; color:#5A6B76; text-transform:uppercase; letter-spacing:0.06em; }
.upload-count { font:500 11px 'IBM Plex Mono',monospace; padding:2px 7px; border-radius:99px; background:#EDF0F3; color:#5A6B76; }
.upload-count.has-files { background:rgba(20,40,74,0.08); color:var(--acento); }

.dropzone { display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 16px; border-radius:10px; cursor:pointer; text-align:center; border:1.5px dashed #C6CFD6; background:#FAFBFC; transition:border-color 0.15s, background 0.15s; }
.dropzone:hover, .dropzone.drag-over { border-color:var(--acento); background:rgba(20,40,74,0.06); }
.dz-icon { font-size:20px; color:#8795A0; }
.dz-title { font-size:13px; font-weight:600; }
.dz-sub { font-size:12px; color:#5A6B76; }

/* ---- Botón principal ---- */
.btn-cruzar { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px 16px; border:none; border-radius:8px; color:#fff; font:600 13px 'IBM Plex Sans',sans-serif; cursor:pointer; background:var(--acento); transition:background 0.15s; }
.btn-cruzar:hover { background:#0E1B33; }

/* ---- Resultados ---- */
#resultado { margin-top:24px; }

.error-msg { padding:11px 16px; border-radius:10px; background:#FDF2F1; border:1px solid #F2D3CF; color:#B4483C; font-size:12.5px; line-height:1.5; }

/* Avisos */
.warnings { display:flex; flex-direction:column; gap:4px; margin-bottom:14px; padding:11px 16px; border-radius:10px; background:#FDF6E7; border:1px solid #F0DFB4; color:#7A5A12; font-size:12.5px; line-height:1.5; }
.warnings ul { margin:0; padding-left:18px; }

/* Resumen */
.summary { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.pill { display:inline-flex; align-items:center; gap:6px; font:500 12px 'IBM Plex Mono',monospace; padding:4px 10px; border-radius:99px; background:#EDF0F3; color:#5A6B76; border:1px solid transparent; }
.pill-ok { background:#F0FDF4; color:#15803D; border-color:#BBF7D0; }
.pill-warn { background:#FDF6E7; color:#7A5A12; border-color:#F0DFB4; }
.pill-err { background:#FDF2F1; color:#B4483C; border-color:#F2D3CF; }

/* Toggles de columnas */
#col-toggles { margin-bottom:14px; padding:12px 16px; background:#FFFFFF; border:1px solid #E1E6EA; border-radius:10px; }
#col-toggles summary { font-size:12px; font-weight:600; color:#5A6B76; text-transform:uppercase; letter-spacing:0.06em; cursor:pointer; user-select:none; }
#col-toggles > div { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
#col-toggles label { display:inline-flex; align-items:center; padding:4px 12px; font-size:12px; font-weight:500; color:#8795A0; background:#FAFBFC; border:1px solid #E1E6EA; border-radius:99px; cursor:pointer; user-select:none; transition:all 0.15s; }
#col-toggles label:has(input:checked) { color:var(--acento); background:rgba(20,40,74,0.06); border-color:var(--acento); }
#col-toggles input[type="checkbox"] { position:absolute; opacity:0; pointer-events:none; }

/* Tabla */
.table-card { background:#FFFFFF; border:1px solid #E1E6EA; border-radius:12px; box-shadow:0 2px 10px rgba(23,36,44,0.05); overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:12.5px; white-space:nowrap; }
thead th { padding:10px 14px; font-size:11px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:#5A6B76; text-align:left; background:#F4F6F8; border-bottom:1px solid #E1E6EA; }
tbody td { padding:11px 14px; border-bottom:1px solid #EDF0F3; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:#FAFBFC; }

td.num { font-family:'IBM Plex Mono',monospace; font-size:12px; }
td.uuid { font:11px 'IBM Plex Mono',monospace; color:#8795A0; max-width:280px; overflow:hidden; text-overflow:ellipsis; }
td.sin-match { color:#8795A0; font-style:italic; }

/* Badges de estado */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; font-size:11px; font-weight:600; border-radius:99px; white-space:nowrap; }
.badge-ok { color:#15803D; background:#F0FDF4; border:1px solid #BBF7D0; }
.badge-warn { color:#7A5A12; background:#FDF6E7; border:1px solid #F0DFB4; }
.badge-err { color:#B4483C; background:#FDF2F1; border:1px solid #F2D3CF; }

/* Secciones adicionales */
.section-label { margin:24px 0 10px; font-size:12px; font-weight:600; color:#5A6B76; text-transform:uppercase; letter-spacing:0.06em; }

/* Ocultar columnas */
.hide-estado .col-estado,
.hide-factura .col-factura,
.hide-complemento .col-complemento,
.hide-uuid .col-uuid,
.hide-ffactura .col-ffactura,
.hide-total .col-total,
.hide-fpago .col-fpago,
.hide-importe .col-importe { display:none; }

/* ---- Pie ---- */
.site-footer { margin-top:48px; padding:20px 0 32px; font-size:12px; color:#8795A0; text-align:center; border-top:1px solid #E1E6EA; }
.site-footer a { display:inline-flex; align-items:center; gap:4px; color:#5A6B76; text-decoration:none; }
.site-footer a:hover { color:var(--acento); }

/* ---- Responsivo / móvil ---- */
@media (max-width:720px) {
  #topbar { flex-direction:column; align-items:flex-start; gap:10px; padding:12px 16px; }
  .privacy { font-size:11px; line-height:1.5; }
  .container { padding:0 16px; }
  .upload-grid { grid-template-columns:1fr; margin-top:20px; }
}