/* Grupo c: contracts, contract, edit_document, viewer, split_document, split_result, upload,
   personal_docs, personal_doc_detail, personal_anexo_dashboard. Solo tokens de styles.css. */

/* ============ Compartido del grupo ============ */
.filter-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1 1 140px; max-width: 240px; }
.filter-field > label { margin: 0; }
.filter-field input, .filter-field select { width: 100%; max-width: none; flex: none; }

.ct-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.ct-section-note { margin: calc(-1 * var(--space-2)) 0 var(--space-4); }

/* Cambios de campo (historial de ediciones) */
.ed-changes { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-small); color: var(--text-2); }
.ed-field { font-weight: var(--fw-medium); color: var(--text-3); text-transform: capitalize; }
.ed-old { color: var(--danger); text-decoration: line-through; }
.ed-new { color: var(--green-ink); font-weight: var(--fw-medium); }

/* ============ edit_document ============ */
.ed-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; max-width: 960px; }
.ed-entry-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }

/* ============ viewer ============ */
.vw-title { overflow-wrap: anywhere; }
.vw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-8); align-items: start; }
.vw-main { min-width: 0; }
.vw-frame { height: 72vh; min-height: 420px; border: 1px solid var(--border); border-radius: var(--radius-12); overflow: hidden; background: var(--surface-3); }
.vw-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.vw-retiro-panel { margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-12); }
.vw-retiro-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.vw-retiro-desc { flex: 1 1 220px; margin: 0; }
.vw-retiro-ref { margin: 0; align-self: center; }

.vw-side { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.vw-side-title { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); font-size: var(--fs-h3); border-bottom: 1px solid var(--border); }
.vw-dl { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.vw-dl > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.vw-dl dt { font-size: var(--fs-small); color: var(--text-2); font-weight: var(--fw-medium); }
.vw-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.vw-details { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.vw-details summary { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; cursor: pointer; list-style: none; font-weight: var(--fw-semibold); color: var(--navy); border-radius: var(--radius-8); }
.vw-details summary::-webkit-details-marker { display: none; }
.vw-details summary:hover { color: var(--primary); }
.vw-details summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.vw-chev { color: var(--text-2); transition: transform var(--duration-fast) var(--ease-smooth-out); }
.vw-details[open] > summary .vw-chev { transform: rotate(90deg); }
.vw-details-body { display: flex; flex-direction: column; margin-top: var(--space-2); }
.vw-entry { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.vw-entry:first-child { border-top: 0; }
.vw-entry-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }

.vw-notes { margin: var(--space-8) 0 0; }
.vw-note-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); margin: 0 0 var(--space-6); }
.vw-note-form textarea { flex: 1 1 280px; min-height: 64px; resize: vertical; }
.vw-notes-list { display: flex; flex-direction: column; }
.vw-note { padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.vw-note header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.vw-note-body { color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; }

/* ============ split_document ============ */
.sp-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr); gap: var(--space-8); align-items: start; }
.sp-viewer { height: 78vh; min-height: 420px; border: 1px solid var(--border); border-radius: var(--radius-12); overflow: hidden; background: var(--surface-3); }
.sp-viewer iframe { display: block; width: 100%; height: 100%; border: 0; }
.sp-wizard { min-width: 0; }
.sp-help { margin: calc(-1 * var(--space-2)) 0 var(--space-4); max-width: 60ch; }
.sp-row { padding: var(--space-4); margin-bottom: var(--space-3); background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-12); }
.sp-row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.sp-row-head .row-title { font-size: var(--fs-small); color: var(--navy); }
.sp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.sp-row .form-group { margin-bottom: var(--space-3); }
.sp-row .form-group:last-child { margin-bottom: 0; }
.sp-row .sp-grid-2:last-child .form-group { margin-bottom: 0; }
.sp-otro { margin-top: var(--space-2); }
.sp-error { margin-top: var(--space-4); }

/* ============ upload ============ */
.up-modes { max-width: 760px; margin: 0 0 var(--space-6); }
.toggle-btn { flex: 1; min-height: 44px; padding: 0 var(--space-4); text-align: center; line-height: var(--lh-small); }
.segmented-item.toggle-active { background: var(--surface); color: var(--navy); box-shadow: var(--shadow-rest); }

.up-form { max-width: 960px; }
.up-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.up-grid > .form-group { margin-bottom: 0; }
.up-span-2 { grid-column: span 2; }
.up-span-3 { grid-column: span 3; }
.up-span-all { grid-column: 1 / -1; }
.up-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.up-grid-3 .form-group { margin-bottom: 0; }

.up-unit { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-12); }
.up-unit label { margin: 0; }
.up-unit select { max-width: 360px; }
.up-subpanel { padding: var(--space-4); background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-12); }
.up-label-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.up-active-badge { gap: var(--space-1); }
.up-badge-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; background: transparent; border: 0; border-radius: var(--radius-full); color: inherit; cursor: pointer; }
.up-badge-x:hover { background: var(--blue-200); }
.up-badge-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.up-inline { display: flex; align-items: center; gap: var(--space-2); }
.up-inline input { flex: 1 1 auto; min-width: 0; }
.up-inline .btn { flex: none; }
.up-msg { min-height: 0; margin-top: var(--space-1); font-size: var(--fs-xs); line-height: var(--lh-small); }
.up-msg:empty { margin: 0; }
.up-warn { color: var(--text-3); font-weight: var(--fw-medium); }

.up-input-group { display: flex; align-items: stretch; }
.up-input-group input { flex: 1; min-width: 0; }
.up-prefix { align-items: center; padding: 0 var(--space-3); background: var(--surface-2); border: 1px solid var(--border-input); border-right: 0; border-radius: var(--radius-10) 0 0 var(--radius-10); white-space: nowrap; font-weight: var(--fw-medium); color: var(--text-2); }
.up-input-group input.has-prefix { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.up-batch { margin-top: var(--space-3); max-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-10); }
.up-batch table { min-width: 0; margin: 0; }
.up-row-missing td { color: var(--text-2); font-style: italic; }

.up-actions { justify-content: center; margin-bottom: 0; }

.drop-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 132px; padding: var(--space-6) var(--space-5); text-align: center;
  background: var(--surface-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-12); cursor: pointer;
  transition: border-color var(--duration-quick) var(--ease-smooth-out), background-color var(--duration-quick) var(--ease-smooth-out);
}
.drop-zone:hover { border-color: var(--primary); background: var(--page-tint); }
.drop-zone:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); }
.drop-zone.dragover { border-color: var(--primary); border-style: solid; background: var(--blue-50); }
.drop-zone-icon { color: var(--text-2); }
.drop-zone-text { color: var(--text-3); font-weight: var(--fw-medium); }
.drop-zone-hint { color: var(--text-2); font-size: var(--fs-xs); }
.drop-zone.has-file { border-style: solid; border-color: var(--success); background: var(--green-50); }
.drop-zone.has-file .drop-zone-icon { color: var(--green-ink); }
.file-preview { display: flex; align-items: center; justify-content: center; gap: var(--space-3); max-width: 100%; }
.file-preview-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); color: var(--text); }
.file-preview-size { color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; }
.file-preview-remove { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 0; border-radius: var(--radius-8); color: var(--danger); cursor: pointer; }
.file-preview-remove:hover { background: var(--red-50); }
.file-preview-remove:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Popup de exito: id y apertura por JS (style.display) intactos */
.up-success {
  position: fixed; top: 50%; left: 50%; z-index: 1300; transform: translate(-50%, -50%);
  flex-direction: column; align-items: center; gap: var(--space-3);
  min-width: 260px; padding: var(--space-8) var(--space-12);
  background: var(--surface); color: var(--text); text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-20); box-shadow: var(--shadow-modal);
  animation: up-pop-in var(--duration-fast) var(--ease-smooth-out);
}
.up-success-check { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--success); color: var(--on-success); border-radius: var(--radius-full); }
.up-success-msg { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--navy); }
@keyframes up-pop-in { from { opacity: 0; transform: translate(-50%, -48%) scale(var(--scale-large)); filter: blur(var(--blur-small)); } to { opacity: 1; transform: translate(-50%, -50%); filter: none; } }
@keyframes up-pop-out { from { opacity: 1; } to { opacity: 0; } }

/* ============ personal_docs: franja de estados ============ */
/* Tablero de revision: cada cifra en su cajita de color (total azul, sin revisar ambar,
   observados rojo, revisados verde). La elegida queda rellena con el color fuerte. */
.pd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; border: 0; }
.pd-stat {
  --c: var(--primary); --c-bg: var(--blue-50); --c-ink: var(--blue-ink); --c-line: var(--blue-200);
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--space-3); min-height: 84px;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-6);
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-16);
  color: var(--c-ink); text-decoration: none; box-shadow: var(--shadow-rest);
  transition: box-shadow var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-fast), color var(--duration-fast);
}
.pd-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.pd-stat:hover { color: var(--c-ink); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.pd-stat:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.pd-stat--pendiente { --c: var(--amber); --c-bg: var(--amber-50); --c-ink: var(--amber-ink); --c-line: var(--amber-line); }
.pd-stat--observado { --c: var(--danger); --c-bg: var(--red-50); --c-ink: var(--danger); --c-line: var(--danger-border); }
.pd-stat--revisado { --c: var(--success); --c-bg: var(--green-50); --c-ink: var(--green-ink); --c-line: var(--green-line); }
.pd-stat-icon {
  flex: none; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-12); background: var(--c); color: #fff;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--c) 35%, transparent);
}
.pd-stat-text { display: flex; flex-direction: column; min-width: 0; }
.pd-stat-num { font-size: 28px; line-height: 32px; font-weight: var(--fw-semibold); color: var(--c-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pd-stat--total .pd-stat-num { font-size: 28px; line-height: 32px; }
.pd-stat-lbl { font-size: 11px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
/* Filtro activo: la caja se rellena con el color fuerte */
.pd-stat.is-current { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 30%, transparent); }
.pd-stat.is-current::before { background: rgba(255, 255, 255, .35); }
.pd-stat.is-current .pd-stat-num, .pd-stat.is-current .pd-stat-lbl { color: #fff; opacity: 1; box-shadow: none; }
.pd-stat.is-current .pd-stat-icon { background: rgba(255, 255, 255, .2); box-shadow: none; }
html[data-theme="dark"] .pd-stat.is-current, html[data-theme="dark"] .pd-stat.is-current .pd-stat-num, html[data-theme="dark"] .pd-stat.is-current .pd-stat-lbl { color: #0B1220; }
html[data-theme="dark"] .pd-stat-icon { color: #0B1220; }

/* ============ personal_anexo_dashboard ============ */
.anexo-wrap { max-width: 1080px; padding-bottom: var(--space-12); }
.anexo-summary { align-items: baseline; margin-bottom: var(--space-4); }
.anexo-num { font-size: 28px; line-height: 34px; font-weight: var(--fw-semibold); color: var(--navy); font-variant-numeric: tabular-nums; }
.anexo-chips { margin-bottom: var(--space-6); }
.anexo-chips .chip { text-decoration: none; }

.anexo-sec { margin: 0 0 var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-16); box-shadow: var(--shadow-rest); overflow: hidden; }
.anexo-sec.warn { border-color: var(--border-strong); }
.anexo-sec-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; min-height: 52px; padding: var(--space-3) var(--space-5); margin: 0;
  background: var(--surface-3); color: var(--navy); border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  font: inherit; text-align: left; cursor: pointer; user-select: none; box-shadow: none;
  transition: background-color var(--duration-quick) var(--ease-smooth-out);
}
.anexo-sec-head:hover { background: var(--row-hover); }
.anexo-sec-head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.anexo-sec-head:active { transform: none; }
.anexo-sec-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-weight: var(--fw-semibold); font-size: var(--fs-body); }
.anexo-chev { display: inline-flex; flex: none; color: var(--text-2); transition: transform var(--duration-fast) var(--ease-smooth-out); }
.anexo-chev.is-open { transform: rotate(90deg); }

.anexo-subtitle { padding: var(--space-3) var(--space-5) var(--space-2); font-weight: var(--fw-semibold); font-size: var(--fs-small); color: var(--blue-ink); background: var(--page-tint); border-top: 1px solid var(--border); }

.tanda-head {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-5); margin: 0;
  border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none;
  font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-align: left;
}
.tanda-head.latest { background: var(--green-50); color: var(--green-ink); }
.tanda-head.old { background: var(--surface-3); color: var(--text-2); cursor: pointer; user-select: none; transition: background-color var(--duration-quick) var(--ease-smooth-out); }
.tanda-head.old:hover { background: var(--row-hover); }
.tanda-head.old:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.tanda-old-body .anexo-row { opacity: 0.85; }

.anexo-row { display: grid; grid-template-columns: minmax(220px, 1fr) 140px 90px auto; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); transition: background-color var(--duration-quick) var(--ease-smooth-out); }
.anexo-row:hover { background: var(--row-hover); }
.anexo-fcell { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.anexo-fcell .del-check { margin-top: 2px; }
.anexo-row .fname { display: inline-block; font-weight: var(--fw-medium); font-size: var(--fs-small); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.fname:hover { color: var(--primary); text-decoration: underline; }
.anexo-row .flabel { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-2); }
.anexo-row .fmeta { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.anexo-row .facts { display: flex; gap: var(--space-2); justify-content: flex-end; }

.anexo-review-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--surface-3); border-bottom: 1px solid var(--border); }
.anexo-review-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.anexo-review-block { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); }
.anexo-review > :last-child { border-bottom: 0; }
.anexo-estado-form { align-items: flex-start; }
.anexo-estado-form textarea { flex: 1 1 340px; min-height: 52px; font-size: var(--fs-small); }
.anexo-estado-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.anexo-alerta-form input[type="email"] { width: 260px; max-width: 100%; }
.anexo-hist-toggle { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text-2); text-decoration: none; }
.anexo-hist-toggle:hover { color: var(--primary); }
.anexo-hist { flex-basis: 100%; margin-top: var(--space-2); }
.anexo-hist-row { padding: var(--space-1) 0; border-top: 1px dashed var(--border); }

.anexo-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-12); }
.anexo-bulk-btn { margin-left: auto; }

.anexo-pv { max-width: 960px; width: min(960px, 96vw); height: min(88vh, 900px); }
.anexo-pv .modal-header { flex-wrap: wrap; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.anexo-pv-name { font-size: var(--fs-body); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexo-pv-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.anexo-pv-frame { flex: 1; width: 100%; border: 0; background: var(--surface-3); }

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .vw-layout { grid-template-columns: minmax(0, 1fr); }
  .vw-side { position: static; }
  .sp-layout { grid-template-columns: minmax(0, 1fr); }
  .ed-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .up-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .up-span-3 { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .anexo-row { grid-template-columns: 1fr auto; }
  .anexo-row .fmeta.fdate { grid-column: 1; }
  .anexo-row .fmeta.fsize { display: none; }
  .anexo-row .facts { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 600px) {
  .filter-field { flex: 1 1 100%; max-width: none; }
  .vw-frame { height: 60vh; min-height: 320px; }
  .sp-viewer { height: 60vh; }
  .sp-grid-2 { grid-template-columns: 1fr; }
  .up-grid, .up-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .up-span-2, .up-span-3 { grid-column: 1 / -1; }
  .toggle-btn { min-height: 48px; padding: 0 var(--space-2); font-size: var(--fs-xs); }
  .file-preview { flex-wrap: wrap; }
  .file-preview-name { max-width: 180px; }
  .up-success { min-width: 0; width: calc(100vw - 2 * var(--space-6)); padding: var(--space-6); }
  .pd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .pd-stat { padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); gap: var(--space-2); min-height: 72px; }
  .pd-stat-icon { width: 34px; height: 34px; }
  .pd-stat-num, .pd-stat--total .pd-stat-num { font-size: 22px; line-height: 28px; }
  .anexo-pv { height: 92vh; }
  .anexo-bulk-btn { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .up-success { animation: none; }
  .vw-chev, .anexo-chev { transition: none; }
}

.up-form input[type="file"].hidden { display: none; }