/* ================================================================
   PANEL.CSS — Control de Cambios · Glass Blanco Legible
   Modal: vidrio blanco 82% opacidad, texto oscuro, sin transparencia excesiva
   ================================================================ */

.panel-body,
.cc-modal .modal-content {
  --sf: -apple-system,"SF Pro Display","SF Pro Text","Helvetica Neue",sans-serif;

  --blue:     #007aff;
  --blue-h:   #0071e3;
  --blue-d:   #004fa3;
  --blue-dim: rgba(0,122,255,.09);
  --blue-g:   rgba(0,122,255,.28);

  --ok:   #1a7a38; --ok-bg:  rgba(52,199,89,.12);
  --warn: #8a5200; --warn-bg:rgba(255,159,10,.13);
  --err:  #b91c1c; --err-bg: rgba(239,68,68,.11);

  /* Texto */
  --tx1:#111827; --tx2:#374151; --tx3:#6b7280; --tx4:#9ca3af;

  /* Superficies */
  --s0:#fff; --s1:#f4f6f9; --s2:#eaedf2;
  --brd:rgba(0,0,0,.08); --brdw:rgba(255,255,255,.9);

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-2xl:28px;

  --sh-card: 0 2px 12px rgba(0,0,0,.06),0 0 0 .5px rgba(0,0,0,.06),
             0 1px 0 rgba(255,255,255,.9) inset;
  --sh-btn:  0 1px 3px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.10),
             0 1px 0 rgba(255,255,255,.3) inset;
  --sh-in:   inset 0 1px 3px rgba(0,0,0,.07);

  --t:.16s; --ease:cubic-bezier(.4,0,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
}

.panel-body,.cc-modal .modal-content {
  font-family:var(--sf) !important;
  -webkit-font-smoothing:antialiased;
}

/* ================================================================
   HEADER + TABLE — sólidas, fuera del modal
   ================================================================ */
.cc-header-card {
  background:var(--s0); border:.5px solid var(--brd);
  border-top:1px solid var(--brdw); border-radius:var(--r-2xl);
  box-shadow:var(--sh-card); padding:.9rem 1.35rem;
  display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem;
}
.cc-header-label {
  display:flex; align-items:center; gap:.55rem;
  font-size:.78rem; font-weight:600; letter-spacing:-.015em; color:var(--tx2);
}
.cc-header-label i {
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  background:var(--blue-dim); color:var(--blue); border-radius:var(--r-xs); font-size:.78rem;
}

.cc-table-card {
  background:var(--s0); border:.5px solid var(--brd);
  border-top:1px solid var(--brdw); border-radius:var(--r-2xl);
  box-shadow:var(--sh-card); overflow:hidden;
}
.cc-table-card .card-body { padding:1.2rem 1.35rem 1.5rem; }

/* ================================================================
   BOTONES
   ================================================================ */
.btn-cc-primary {
  display:inline-flex; align-items:center; gap:.42rem; padding:.5rem 1.1rem;
  font-family:var(--sf) !important; font-size:.78rem; font-weight:600;
  letter-spacing:-.01em; color:#fff !important;
  background:linear-gradient(180deg,#3395ff 0%,var(--blue-h) 100%);
  border:none; border-radius:var(--r-md);
  box-shadow:var(--sh-btn),0 4px 14px var(--blue-g);
  text-decoration:none !important; cursor:pointer; position:relative; overflow:hidden;
  transition:filter var(--t) var(--ease),transform var(--t) var(--ease);
}
.btn-cc-primary::before {
  content:''; position:absolute; inset:0 0 52% 0;
  background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 100%);
  pointer-events:none;
}
.btn-cc-primary:hover  { filter:brightness(1.06); color:#fff !important; text-decoration:none !important; }
.btn-cc-primary:active { transform:scale(.96); }

.btn-cc-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0; border-radius:var(--r-xs);
  background:var(--s1); border:.5px solid var(--brd);
  color:var(--tx3) !important; font-size:.76rem; cursor:pointer;
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
.btn-cc-icon:hover  { background:var(--blue-dim); color:var(--blue) !important; }
.btn-cc-icon:active { transform:scale(.92); }

/* Cierre modal — icono oscuro sobre fondo claro */
.btn-cc-close {
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:.5px solid rgba(0,0,0,.1);
  background:rgba(0,0,0,.06);
  color:var(--tx3); font-size:.78rem; cursor:pointer; flex-shrink:0;
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
.btn-cc-close:hover { background:rgba(0,0,0,.1); color:var(--tx1); }

/* Footer dismiss */
.btn-cc-dismiss {
  display:inline-flex; align-items:center; gap:.35rem; padding:.44rem 1.1rem;
  font-family:var(--sf) !important; font-size:.77rem; font-weight:500;
  color:var(--blue);
  background:var(--blue-dim); border:.5px solid rgba(0,122,255,.18);
  border-radius:var(--r-sm); cursor:pointer;
  transition:background var(--t) var(--ease),filter var(--t) var(--ease);
}
.btn-cc-dismiss:hover { filter:brightness(.94); }

/* ================================================================
   BADGES — fuera del modal
   ================================================================ */
.cc-badge {
  display:inline-flex; align-items:center; padding:.2em .72em;
  font-family:var(--sf) !important; font-size:.67rem; font-weight:600;
  letter-spacing:-.005em; border-radius:100px; white-space:nowrap; line-height:1.7;
}
.cc-badge-success { background:var(--ok-bg);   color:var(--ok);   }
.cc-badge-danger  { background:var(--err-bg);  color:var(--err);  }
.cc-badge-warning { background:var(--warn-bg); color:var(--warn); }
.cc-badge-neutral { background:var(--s2);      color:var(--tx3);  }
.cc-badge-nuevo   { background:var(--blue-dim);color:var(--blue-d); }
.cc-badge-proceso { background:rgba(0,122,255,.13); color:var(--blue-h); }
.cc-badge-info    { background:var(--blue-dim);color:var(--blue-h); }

/* ================================================================
   TABLA
   ================================================================ */
.cc-table { width:100%; border-collapse:collapse; font-family:var(--sf) !important; font-size:.82rem; color:var(--tx1); }
.cc-table thead { background:rgba(0,0,0,.022); }
.cc-table thead th {
  padding:.65rem 1rem; font-size:.65rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--tx4);
  border-bottom:.5px solid rgba(0,0,0,.08); border-top:none; white-space:nowrap;
}
.cc-table tbody td { padding:.72rem 1rem; vertical-align:middle; border-top:.5px solid rgba(0,0,0,.055); line-height:1.42; }
.cc-table tbody tr:first-child td { border-top:none; }
.cc-table tbody tr { transition:background var(--t) var(--ease); }
.cc-table tbody tr:hover td { background:rgba(0,122,255,.04); }

.cc-td-id { font-variant-numeric:tabular-nums; }
.cc-pill-id {
  display:inline-flex; align-items:center; gap:.18rem; padding:.18em .62em;
  background:var(--blue-dim); border-radius:100px;
  font-size:.73rem; font-weight:600; color:var(--blue-d);
}
.cc-pill-id span { color:rgba(0,122,255,.45); font-weight:400; }
.cc-td-notes { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--tx2); }
.cc-td-date  { font-size:.73rem; color:var(--tx4); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cc-td-vig   { display:flex; flex-direction:column; gap:.2rem; }
.cc-td-vig-sub { font-size:.68rem; color:var(--tx4); line-height:1.3; }

/* ================================================================
   DATATABLES
   ================================================================ */
.cc-table-card .dataTables_wrapper { font-family:var(--sf) !important; }
.cc-table-card .dataTables_filter  { margin-bottom:.85rem; }
.cc-table-card .dataTables_filter label { font-size:.76rem; color:var(--tx2); display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.cc-table-card .dataTables_filter input {
  border:.5px solid rgba(0,0,0,.14) !important; border-radius:var(--r-sm) !important;
  padding:.4rem .9rem !important; font-size:.79rem !important; font-family:var(--sf) !important;
  color:var(--tx1) !important; background:var(--s1) !important;
  box-shadow:var(--sh-in) !important; outline:none; min-width:200px;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.cc-table-card .dataTables_filter input:focus {
  border-color:var(--blue) !important; box-shadow:var(--sh-in),0 0 0 3px var(--blue-dim) !important;
}
.cc-table-card .dataTables_info { font-size:.72rem !important; color:var(--tx4) !important; padding-top:.8rem !important; font-family:var(--sf) !important; }
.cc-table-card .dataTables_paginate { padding-top:.8rem !important; }
.cc-table-card .dataTables_paginate .paginate_button {
  font-family:var(--sf) !important; font-size:.72rem !important; font-weight:500 !important;
  padding:.28rem .62rem !important; margin:0 2px !important; border-radius:var(--r-xs) !important;
  border:.5px solid rgba(0,0,0,.1) !important; background:var(--s0) !important; color:var(--tx2) !important;
  transition:all var(--t) var(--ease);
}
.cc-table-card .dataTables_paginate .paginate_button:hover { background:var(--blue-dim) !important; color:var(--blue) !important; border-color:rgba(0,122,255,.22) !important; box-shadow:none !important; }
.cc-table-card .dataTables_paginate .paginate_button.current,
.cc-table-card .dataTables_paginate .paginate_button.current:hover {
  background:linear-gradient(180deg,#3395ff 0%,var(--blue-h) 100%) !important;
  color:#fff !important; border-color:transparent !important; box-shadow:0 2px 8px var(--blue-g) !important;
}
.cc-table-card .dataTables_paginate .paginate_button.disabled,
.cc-table-card .dataTables_paginate .paginate_button.disabled:hover { color:var(--tx4) !important; background:var(--s1) !important; cursor:not-allowed; }

/* ================================================================
   DIVISOR
   ================================================================ */
.cc-divider { height:.5px; background:rgba(0,0,0,.09); margin:1rem 0; }

/* ================================================================
   MODAL — Overlay oscuro + vidrio BLANCO opaco
   ================================================================ */

/* Gradiente azul marino detrás para el efecto glass */
.cc-modal .modal-dialog::before {
  content:''; position:fixed; inset:0;
  background:
    radial-gradient(ellipse 65% 55% at 12% 18%,  #002d7a 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 82%,  #120040 0%, transparent 58%),
    radial-gradient(ellipse 50% 40% at 58% 18%,  #004585 0%, transparent 55%),
    linear-gradient(160deg, #010d25 0%, #060818 100%);
  pointer-events:none; z-index:-1;
}

/* ── Vidrio blanco 82% — texto oscuro perfectamente legible ── */
.cc-modal .modal-content {
  background:rgba(255,255,255,0.82) !important;
  -webkit-backdrop-filter:blur(36px) saturate(180%) !important;
  backdrop-filter:blur(36px) saturate(180%) !important;

  border:.5px solid rgba(255,255,255,.95) !important;
  border-top:1px solid #fff !important;

  border-radius:var(--r-2xl) !important;
  box-shadow:
    0 40px 100px rgba(0,0,0,.55),
    0 12px 36px  rgba(0,0,0,.28),
    0 0 0 .5px  rgba(255,255,255,.6),
    0 1px 0     rgba(255,255,255,1) inset !important;

  overflow:hidden; position:relative;
  max-height:92vh;
  display:flex !important; flex-direction:column !important;
}

/* Brillo superior muy sutil */
.cc-modal .modal-content::before {
  content:''; position:absolute; top:0; left:0; right:0; height:35%;
  background:linear-gradient(175deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,0)   100%);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  pointer-events:none; z-index:0;
}
/* Tinte azulado muy sutil en la base */
.cc-modal .modal-content::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:25%;
  background:linear-gradient(0deg,rgba(0,100,220,.04) 0%,transparent 100%);
  pointer-events:none; z-index:0;
}

/* Header */
.cc-modal .modal-header {
  background:transparent !important; border-bottom:none !important;
  padding:1.3rem 1.5rem .4rem !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  position:relative; z-index:1; flex-shrink:0;
}
.cc-modal .modal-title {
  font-family:var(--sf) !important; font-size:.9rem; font-weight:700;
  letter-spacing:-.02em; color:var(--tx1);
  display:flex; align-items:center; gap:.45rem;
}
.cc-modal .modal-title i { color:var(--blue); }

/* Body con scroll */
.cc-modal .modal-body {
  position:relative; z-index:1;
  overflow-y:auto; flex:1 1 auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.15) transparent;
}
.cc-modal .modal-body::-webkit-scrollbar { width:5px; }
.cc-modal .modal-body::-webkit-scrollbar-track { background:transparent; }
.cc-modal .modal-body::-webkit-scrollbar-thumb { background:rgba(0,0,0,.13); border-radius:10px; }
.cc-modal .modal-body::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.22); }

/* Footer */
.cc-modal .modal-footer {
  background:rgba(0,0,0,.03) !important;
  border-top:.5px solid rgba(0,0,0,.08) !important;
  padding:.8rem 1.5rem !important;
  display:flex; justify-content:flex-end;
  position:relative; z-index:1; flex-shrink:0;
}

/* Divisor dentro del modal */
.cc-modal .cc-divider { background:rgba(0,0,0,.08); }

/* Animación */
.cc-modal.fade .modal-dialog { transform:translateY(20px) scale(.972); transition:transform .28s var(--spring),opacity .2s ease; }
.cc-modal.show .modal-dialog { transform:none; }

/* ================================================================
   DETALLE — texto OSCURO sobre fondo blanco
   ================================================================ */
.cc-detail { padding:1.1rem 1.5rem 1.4rem; }

/* Encabezado */
.cc-detail-head {
  display:flex; flex-wrap:wrap; align-items:flex-start;
  justify-content:space-between; gap:.75rem; margin-bottom:.1rem;
}
.cc-record-num {
  font-family:var(--sf) !important; font-size:1.1rem; font-weight:700;
  letter-spacing:-.03em; color:var(--tx1); margin:0 0 .25rem;
  display:flex; align-items:baseline; gap:.28rem;
}
.cc-record-num .cc-record-hash  { font-size:.8rem; font-weight:400; color:var(--tx4); }
.cc-record-num .cc-record-id    { color:var(--blue); }
.cc-record-num .cc-record-label { font-size:.7rem; font-weight:400; color:var(--tx4); }

.cc-detail-meta {
  font-size:.72rem; font-family:var(--sf) !important; color:var(--tx4);
  display:flex; align-items:center; gap:.65rem; flex-wrap:wrap;
}
.cc-detail-badges { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }

/* ── Badges en modal — mismos que fuera (fondo blanco = paleta normal) ── */
/* Heredan directamente los estilos base, no necesitan override */

/* Bloques clave — tarjeta sutil sobre fondo blanco */
.cc-key-block {
  background:rgba(0,0,0,.025);
  border:.5px solid rgba(0,0,0,.07);
  border-radius:var(--r-md);
  padding:.72rem .9rem; margin-bottom:.52rem;
  transition:background var(--t) var(--ease);
}
.cc-key-block:hover { background:rgba(0,0,0,.04); }
.cc-key-block:last-child { margin-bottom:0; }

/* Acents de color — visibles sobre blanco */
.cc-key-block.--cause  { border-left:2.5px solid var(--blue);        }
.cc-key-block.--type   { border-left:2.5px solid #00b8a9;            }
.cc-key-block.--vig    { border-left:2.5px solid #f59e0b;            }
.cc-key-block.--auth   { border-left:2.5px solid #22c55e;            }
.cc-key-block.--change { border-left:2.5px solid #a855f7;            }

.cc-key-block-label {
  font-family:var(--sf) !important; font-size:.61rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--tx4);
  margin-bottom:.22rem; display:flex; align-items:center; gap:.28rem;
}
.cc-key-block-value {
  font-family:var(--sf) !important; font-size:.83rem; font-weight:500;
  letter-spacing:-.01em; color:var(--tx1);
}

/* Labels y campos */
.cc-label {
  font-family:var(--sf) !important; font-size:.61rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--tx4);
  margin-bottom:.28rem; display:flex; align-items:center; gap:.28rem;
}
.cc-field { margin-bottom:.88rem; }
.cc-field:last-child { margin-bottom:0; }

/* Inset textarea — fondo gris muy claro, texto oscuro */
.cc-inset {
  background:rgba(0,0,0,.03);
  border:.5px solid rgba(0,0,0,.08);
  border-radius:var(--r-md);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.05);
  padding:.7rem .9rem; min-height:72px;
  font-family:var(--sf) !important; font-size:.81rem; font-weight:400;
  letter-spacing:-.01em; color:var(--tx2); line-height:1.65;
}
.cc-inset .cc-placeholder { color:var(--tx4); font-style:italic; }

/* ================================================================
   GALERÍA
   ================================================================ */
.cc-sub-card {
  background:rgba(0,0,0,.025);
  border:.5px solid rgba(0,0,0,.08);
  border-radius:var(--r-lg); overflow:hidden; margin-top:1.2rem;
}
.cc-sub-card-head {
  background:rgba(0,0,0,.03); border-bottom:.5px solid rgba(0,0,0,.07);
  padding:.6rem 1rem; font-family:var(--sf) !important;
  font-size:.61rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tx4); display:flex; align-items:center; justify-content:space-between;
}
.cc-sub-card-head-left { display:flex; align-items:center; gap:.38rem; }
.cc-sub-card-head i   { color:var(--blue); font-size:.68rem; }

.cc-img-count {
  font-size:.65rem; font-weight:700; padding:.1em .55em;
  background:var(--blue-dim); border-radius:100px; color:var(--blue-d);
}

.cc-sub-card-body { padding:1rem; background:transparent; }

/* Grid auto-fill */
.cc-img-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:.75rem;
}

.cc-img-item { display:flex; flex-direction:column; gap:.28rem; }

.cc-img-wrap {
  display:block; border-radius:var(--r-md); overflow:hidden;
  border:.5px solid rgba(0,0,0,.1); background:var(--s1);
  position:relative; aspect-ratio:4/3;
  transition:box-shadow var(--t) var(--ease),transform var(--t) var(--spring);
  text-decoration:none !important;
}
.cc-img-wrap img {
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform .25s var(--ease);
}
.cc-img-wrap:hover { box-shadow:0 10px 30px rgba(0,0,0,.18); transform:translateY(-3px) scale(1.02); }
.cc-img-wrap:hover img { transform:scale(1.04); }

/* Overlay lupa */
.cc-img-wrap::after {
  content:'\f065';
  font-family:'Font Awesome 5 Free'; font-weight:900;
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:#fff;
  background:rgba(0,30,80,.30);
  opacity:0; transition:opacity var(--t) var(--ease);
}
.cc-img-wrap:hover::after { opacity:1; }

.cc-img-id {
  font-size:.67rem; color:var(--tx4);
  text-align:center; font-family:var(--sf) !important;
}

/* Estado vacío */
.cc-empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2.2rem; gap:.5rem;
  font-family:var(--sf) !important; color:var(--tx4); font-size:.79rem;
}
.cc-empty-state i { font-size:1.6rem; opacity:.25; color:var(--tx3); }

/* Loading */
.cc-loading {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem; padding:3rem;
  font-family:var(--sf) !important; color:var(--tx3); font-size:.8rem;
}
.cc-loading i { font-size:1.3rem; color:var(--blue); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:991px) { .cc-img-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); } }
@media (max-width:767px) {
  .cc-detail { padding:.9rem 1rem 1.2rem; }
  .cc-modal .modal-header { padding:1rem 1rem .35rem !important; }
  .cc-modal .modal-footer { padding:.65rem 1rem !important; }
  .cc-header-card { flex-direction:column; align-items:flex-start; gap:.75rem; }
  .cc-img-grid { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.5rem; }
}