/* ============================================================
   Orion — Sistema de diseño compartido (fintech limpio)
   Lo enlazan todas las páginas: <link rel="stylesheet" href="styles.css">
   ============================================================ */

:root{
  --bg:#f6f7f9; --surface:#ffffff; --border:#e6e8ec; --border-soft:#eef0f3;
  --text:#0f1729; --text-2:#5b6472; --muted:#98a1ae;
  --primary:#2563eb; --primary-600:#1d4ed8; --primary-50:#eff4ff;
  --ok:#059669; --ok-50:#ecfdf5; --warn:#d97706; --warn-50:#fffbeb; --danger:#dc2626; --danger-50:#fef2f2;
}

*{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
}

.container{ max-width:1100px; margin:0 auto; padding:34px 28px 60px; }
.page-title{
  font-size:22px; font-weight:700; color:var(--text);
  letter-spacing:-.4px; display:flex; align-items:center; gap:10px; margin-bottom:4px;
}
.page-title svg{ width:24px; height:24px; fill:none; stroke:var(--primary); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.page-sub{ font-size:13.5px; color:var(--text-2); margin-bottom:24px; }

/* ---------- Sidebar ---------- */
body{ padding-left:240px; }
.sidebar{
  position:fixed; top:0; left:0; width:240px; height:100vh;
  background:var(--surface); border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column; padding:18px 14px; z-index:100;
}
.sidebar .brand{
  display:flex; align-items:center; gap:10px;
  padding:6px 8px 22px; font-size:17px; font-weight:700; color:var(--text); letter-spacing:-.3px;
}
.sidebar .brand .logo{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,#2563eb,#4f46e5);
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(37,99,235,.30);
}
.sidebar nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.sidebar a{
  color:var(--text-2); text-decoration:none; font-size:14px; font-weight:500;
  padding:10px 12px; border-radius:9px; display:flex; align-items:center; gap:11px;
  transition:background .15s, color .15s;
}
.sidebar a svg{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
.sidebar a:hover{ background:#f3f4f6; color:var(--text); }
.sidebar a.active{ background:var(--primary-50); color:var(--primary-600); font-weight:600; }
.sidebar a.active svg{ opacity:1; }
.sidebar .bottom{ border-top:1px solid var(--border-soft); padding-top:8px; margin-top:8px; }
.sidebar .bottom a{ color:var(--muted); }
.sidebar .bottom a:hover{ color:var(--danger); background:var(--danger-50); }

.menu-toggle{
  display:none; align-items:center; justify-content:center; width:40px; height:40px;
  border:1px solid var(--border); background:#fff; border-radius:9px; cursor:pointer; color:var(--text);
}
.menu-toggle svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.menu-toggle .ic-close{ display:none; }

@media (max-width:820px){
  body{ padding-left:0; padding-top:62px; }
  .sidebar{
    position:fixed; top:0; left:0; right:0; width:100%; height:auto;
    flex-direction:row; flex-wrap:wrap; align-items:center; padding:11px 16px; gap:0;
    border-right:none; border-bottom:1px solid var(--border-soft); box-shadow:0 1px 4px rgba(16,24,40,.05);
  }
  .sidebar .brand{ flex:1; padding:0; font-size:16px; }
  .menu-toggle{ display:inline-flex; }
  .sidebar.open .menu-toggle .ic-open{ display:none; }
  .sidebar.open .menu-toggle .ic-close{ display:inline; }
  .sidebar nav, .sidebar .bottom{ display:none; flex-basis:100%; width:100%; }
  .sidebar.open nav{ display:flex; flex-direction:column; gap:3px; margin-top:12px; }
  .sidebar.open .bottom{ display:block; margin-top:8px; padding-top:10px; border-top:1px solid var(--border-soft); }
  .sidebar a{ padding:12px; }
  .container{ padding:24px 18px 50px; }
}

/* ---------- Tarjetas ---------- */
.card{
  background:var(--surface); border-radius:16px; border:1px solid var(--border);
  padding:26px; margin-bottom:20px; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
}
.card h2{ font-size:15.5px; font-weight:600; color:var(--text); margin-bottom:5px; }
.hint{ font-size:13px; color:var(--text-2); margin-bottom:18px; line-height:1.55; }

/* ---------- Drop zone ---------- */
.drop-zone{ border:1.5px dashed #cdd3dc; border-radius:14px; padding:48px 24px; text-align:center; cursor:pointer; background:#fafbfc; position:relative; transition:all .2s; }
.drop-zone:hover, .drop-zone.drag-over{ border-color:var(--primary); background:var(--primary-50); }
.drop-zone input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.drop-zone .ico{ width:50px; height:50px; margin:0 auto 13px; border-radius:13px; background:var(--primary-50); color:var(--primary); display:flex; align-items:center; justify-content:center; }
.drop-zone .ico svg{ width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.drop-zone p{ color:var(--text); font-size:14.5px; font-weight:500; } .drop-zone strong{ color:var(--primary); }
.drop-zone small{ color:var(--muted); font-size:12.5px; display:block; margin-top:5px; }

/* ---------- Loader ---------- */
#loader{ display:none; text-align:center; padding:30px; }
.spinner{ width:38px; height:38px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 12px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
#loader p{ color:var(--text-2); font-size:14px; }

/* ---------- Split imagen + campos, con zoom ---------- */
.work{ display:none; }
.split{ display:grid; grid-template-columns:.85fr 1fr; gap:26px; align-items:start; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }
.img-pane{
  background:linear-gradient(180deg,#f8fafc,#eef1f5); border:1px solid var(--border); border-radius:14px;
  display:flex; align-items:center; justify-content:center; padding:20px; position:sticky; top:24px; overflow:hidden;
}
.img-pane img{ max-width:100%; max-height:520px; object-fit:contain; border-radius:10px; box-shadow:0 8px 24px rgba(16,24,40,.12); cursor:zoom-in; user-select:none; -webkit-user-select:none; transition:transform .15s ease; touch-action:none; -webkit-user-drag:none; }
.img-pane img.zoomed{ cursor:grab; transition:none; }
.img-pane img.panning{ cursor:grabbing; }
.zoom-hint{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); font-size:11.5px; color:var(--text-2); background:rgba(255,255,255,.85); border:1px solid var(--border-soft); padding:4px 11px; border-radius:14px; pointer-events:none; white-space:nowrap; }

/* ---------- Campos de formulario ---------- */
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:5px; }
.field input, .field textarea, .field select{ width:100%; border:1px solid var(--border); border-radius:10px; padding:10px 13px; font-size:14px; outline:none; color:var(--text); font-family:inherit; background:#fff; transition:border .15s, box-shadow .15s; }
.field input::placeholder{ color:#b6bcc6; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-50); }
.field.changed input{ border-color:var(--warn); background:var(--warn-50); }
.field.highlight label::after{ content:'•'; color:var(--primary); margin-left:5px; }
.field .orig{ font-size:11.5px; color:var(--warn); margin-top:4px; display:none; }
.field.changed .orig{ display:block; }

/* ---------- Botones ---------- */
.actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:8px; background:var(--primary); color:#fff; border:none; border-radius:10px; padding:11px 18px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:background .15s, box-shadow .15s; box-shadow:0 1px 2px rgba(37,99,235,.25); text-decoration:none; }
.btn:hover{ background:var(--primary-600); }
.btn:disabled{ background:#a9c3f5; cursor:not-allowed; box-shadow:none; }
.btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn-sm{ padding:8px 14px; font-size:13px; }
.btn-ghost{ background:#fff; color:var(--text-2); border:1px solid var(--border); box-shadow:none; }
.btn-ghost:hover{ background:#f6f7f9; color:var(--text); }
.btn-warn{ background:var(--warn); box-shadow:0 1px 2px rgba(217,119,6,.25); } .btn-warn:hover{ background:#b45309; }
.btn-danger{ background:#fff; color:var(--danger); border:1px solid #fecaca; box-shadow:none; } .btn-danger:hover{ background:var(--danger-50); }

/* ---------- Alertas ---------- */
.alert{ padding:12px 15px; border-radius:10px; font-size:13.5px; margin-bottom:18px; font-weight:500; }
.alert-ok{ background:var(--ok-50); color:#065f46; border:1px solid #a7f3d0; }
.alert-err{ background:var(--danger-50); color:#991b1b; border:1px solid #fecaca; }
.alert-warn{ background:#fffbeb; color:#92400e; border:1px solid #fcd34d; }

/* ---------- Estadísticas ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:22px; }
.stat{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 18px; }
.stat-num{ font-size:22px; font-weight:700; color:var(--text); letter-spacing:-.3px; }
.stat-num.accent{ color:var(--primary); }
.stat-num.money{ color:var(--ok); }
.stat-label{ font-size:11.5px; color:var(--muted); margin-top:3px; }

/* ---------- Barra superior / filtros ---------- */
.top-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.top-bar h2{ font-size:15.5px; font-weight:600; color:var(--text); }
.filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.filters input, .filters select{ padding:8px 12px; border:1px solid var(--border); border-radius:9px; font-size:13px; outline:none; color:var(--text); background:#fff; font-family:inherit; }
.filters input:focus, .filters select:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-50); }
.filters input[type=search]{ min-width:190px; }

/* ---------- Tabla ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--border-soft); border-radius:12px; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
th{ background:#f9fafb; padding:11px 12px; text-align:left; font-weight:600; color:var(--text-2); border-bottom:1px solid var(--border); white-space:nowrap; }
th a{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
th a:hover{ color:var(--primary); }
th .arrow{ font-size:10px; opacity:.7; }
td{ padding:11px 12px; border-bottom:1px solid var(--border-soft); color:var(--text); vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
tbody tr:hover td{ background:#fafbfc; }
.valor{ font-weight:600; color:var(--ok); white-space:nowrap; }
.empty{ text-align:center; padding:48px; color:var(--muted); }
.img-thumb{ width:42px; height:42px; object-fit:cover; border-radius:7px; border:1px solid var(--border); cursor:pointer; transition:transform .12s; }
.img-thumb:hover{ transform:scale(1.06); }
.badge{ display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; background:var(--primary-50); color:var(--primary-600); }
.row-actions{ display:flex; gap:6px; }
.icon-btn{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); background:#fff; border-radius:8px; cursor:pointer; color:var(--text-2); }
.icon-btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn:hover{ background:#f3f4f6; color:var(--text); }
.icon-btn.danger:hover{ background:var(--danger-50); color:var(--danger); border-color:#fecaca; }

/* ---------- Paginación ---------- */
.pager{ display:flex; gap:6px; align-items:center; justify-content:center; margin-top:18px; flex-wrap:wrap; }
.pager a, .pager span{ min-width:34px; height:34px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:8px; font-size:13px; text-decoration:none; color:var(--text-2); background:#fff; }
.pager a:hover{ background:#f3f4f6; color:var(--text); }
.pager .cur{ background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600; }
.pager .gap{ border:none; background:none; }

/* ---------- Modal ---------- */
.modal-overlay{ display:none; position:fixed; inset:0; z-index:1000; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); align-items:center; justify-content:center; padding:24px; }
.modal-overlay.open{ display:flex; }
.modal{ background:#fff; border-radius:16px; overflow:hidden; display:flex; max-width:980px; width:100%; max-height:88vh; box-shadow:0 24px 70px rgba(0,0,0,.35); }
.modal-img-pane{ flex:1 1 55%; background:linear-gradient(180deg,#f8fafc,#eef1f5); display:flex; align-items:center; justify-content:center; padding:18px; min-width:0; overflow:hidden; }
.modal-img-pane img{ max-width:100%; max-height:84vh; object-fit:contain; border-radius:8px; box-shadow:0 8px 24px rgba(16,24,40,.14); cursor:zoom-in; user-select:none; touch-action:none; transition:transform .15s ease; }
.modal-img-pane img.zoomed{ cursor:grab; transition:none; }
.modal-img-pane img.panning{ cursor:grabbing; }
.modal-info-pane{ flex:1 1 45%; padding:24px; overflow-y:auto; display:flex; flex-direction:column; }
.modal-info-pane h3{ font-size:16px; font-weight:700; color:var(--text); margin-bottom:16px; }
.modal-close{ background:none; border:none; font-size:24px; line-height:1; color:var(--muted); cursor:pointer; align-self:flex-end; margin:-8px -8px 0 0; }
.modal-close:hover{ color:var(--text); }
.info-row{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-soft); font-size:13px; }
.info-row:last-child{ border-bottom:none; }
.info-label{ color:var(--muted); font-weight:500; }
.info-value{ color:var(--text); font-weight:600; text-align:right; word-break:break-word; }
.info-value.valor{ color:var(--ok); }

@media (max-width:600px){
  .modal{ flex-direction:column; max-height:92vh; }
  .modal-img-pane{ max-height:40vh; }
  th, td{ padding:9px 8px; }
}