/* ============================================================
   Recepción de Archivos — Grupo Espinosa
   Design System CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Custom Properties ─────────────────────────────────── */
:root {
  --ge-dark:       #3c3f47;
  --ge-blue:       #2B5BA1;
  --ge-blue-mid:   #3D7EC5;
  --ge-teal:       #1D9BAE;
  --ge-teal-light: #e6f6f8;
  --ge-blue-light: #e8f0fb;
  --ge-bg:         #f4f7fb;
  --ge-border:     #c8d6e8;
  --ge-muted:      #5a6478;
  --ge-text:       #1e2a3a;
  --ge-readonly:   #f0f3f7;
  --ge-white:      #ffffff;
  --ge-success:    #27a96a;
  --ge-error:      #d93025;
  --ge-error-light:#fde8e6;

  --radius-card:   12px;
  --radius-input:  8px;
  --radius-dz:     10px;

  --transition:    0.15s ease;
}

/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background:  var(--ge-bg);
  color:       var(--ge-text);
  line-height: 1.6;
  min-height:  100vh;
}

/* ── Top Bar ───────────────────────────────────────────── */
.top-bar {
  background:  var(--ge-dark);
  padding:     0.85rem 2rem;
  display:     flex;
  align-items: center;
  gap:         14px;
  position:    sticky;
  top:         0;
  z-index:     100;
}

.logo-icon {
  height:     40px;
  width:      auto;
  max-width:  160px;
  object-fit: contain;
  flex-shrink: 0;
  display:    block;
}

.logo-text {
  color:          #ffffff;
  font-size:      18px;
  font-weight:    400;
  letter-spacing: 0.2px;
}
.logo-text strong { font-weight: 700; }

.top-bar-divider {
  width:      1px;
  height:     28px;
  background: rgba(255,255,255,0.2);
  margin:     0 6px;
}

.top-bar-label {
  color:          rgba(255,255,255,0.65);
  font-size:      13px;
  letter-spacing: 0.3px;
}

/* ── Token Bar ─────────────────────────────────────────── */
.token-bar {
  background:    var(--ge-blue-light);
  border-bottom: 1px solid var(--ge-border);
  padding:       0.5rem 2rem;
  display:       flex;
  align-items:   center;
  gap:           8px;
  font-size:     12px;
  color:         var(--ge-blue);
}

.token-dot {
  width:        7px;
  height:       7px;
  border-radius: 50%;
  background:   var(--ge-success);
  flex-shrink:  0;
  animation:    pulse 2.5s infinite;
}

@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(39,169,106,0.4); }
  50%      { box-shadow: 0 0 0 5px rgba(39,169,106,0); }
}

/* ── Page Wrapper ──────────────────────────────────────── */
.page-wrap {
  min-height: calc(100vh - 56px);
  padding:    0 0 3rem;
}

/* ── Card Layout ───────────────────────────────────────── */
.card-wrap {
  max-width: 780px;
  margin:    2rem auto 0;
  padding:   0 1.25rem;
}

.card {
  background:    var(--ge-white);
  border-radius: var(--radius-card);
  border:        0.5px solid var(--ge-border);
  padding:       1.75rem 2rem;
  margin-bottom: 1.25rem;
  box-shadow:    0 1px 4px rgba(30,42,58,0.06);
}

/* ── Section Titles ────────────────────────────────────── */
.section-title {
  font-size:      12px;
  font-weight:    600;
  color:          var(--ge-blue);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin:         0 0 1.4rem;
  display:        flex;
  align-items:    center;
  gap:            8px;
}

.section-title .ti { font-size: 16px; }

.section-title::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--ge-border);
}

/* ── Form Fields ───────────────────────────────────────── */
.field-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
}

.field-group {
  display:        flex;
  flex-direction: column;
  gap:            5px;
}

.field-group.full { grid-column: 1 / -1; }

label {
  font-size:      11px;
  font-weight:    600;
  color:          var(--ge-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display:        flex;
  align-items:    center;
  gap:            4px;
}

.input-field {
  height:         40px;
  border-radius:  var(--radius-input);
  border:         1px solid var(--ge-border);
  padding:        0 12px;
  font-size:      14px;
  font-family:    inherit;
  color:          var(--ge-text);
  background:     var(--ge-white);
  outline:        none;
  width:          100%;
  transition:     border-color var(--transition), box-shadow var(--transition);
}

.input-field:focus {
  border-color: var(--ge-blue-mid);
  box-shadow:   0 0 0 3px rgba(61,126,197,0.12);
}

.input-field.readonly {
  background:  var(--ge-readonly);
  color:       var(--ge-blue);
  font-weight: 500;
  cursor:      not-allowed;
}

/* ── Readonly Badge ────────────────────────────────────── */
.readonly-badge {
  display:     inline-flex;
  align-items: center;
  gap:         3px;
  font-size:   9px;
  background:  var(--ge-blue-light);
  color:       var(--ge-blue);
  border-radius: 4px;
  padding:     2px 7px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.readonly-badge .ti { font-size: 10px; }

/* ── Field hint & validation ───────────────────────────── */
.field-hint {
  font-size:   11px;
  color:       var(--ge-muted);
  margin:      0;
  line-height: 1.5;
}

.input-field.input-error {
  border-color: var(--ge-error);
  box-shadow:   0 0 0 3px rgba(217,48,37,0.10);
  background:   #fffafa;
}

.input-field.input-error:focus {
  border-color: var(--ge-error);
  box-shadow:   0 0 0 3px rgba(217,48,37,0.15);
}

/* ── Dropzones ─────────────────────────────────────────── */
.dropzone-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.25rem;
}

.dropzone-slot-label {
  font-size:   13px;
  font-weight: 600;
  color:       var(--ge-text);
  margin:      0 0 8px;
}

.dropzone {
  border:         2px dashed var(--ge-border);
  border-radius:  var(--radius-dz);
  background:     var(--ge-bg);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  padding:        2rem 1rem;
  cursor:         pointer;
  transition:     border-color var(--transition), background var(--transition);
  text-align:     center;
  gap:            10px;
  min-height:     170px;
  position:       relative;
  user-select:    none;
}

.dropzone:hover,
.dropzone.drag-over {
  border-color: var(--ge-teal);
  background:   var(--ge-teal-light);
}

.dropzone.drag-over { border-style: solid; }

.dropzone.state-uploading,
.dropzone.state-done {
  cursor: default;
}

.dropzone.state-error {
  border-color: var(--ge-error);
  background:   var(--ge-error-light);
  border-style: solid;
}

/* ── Dropzone Icon Box ─────────────────────────────────── */
.dz-icon-box {
  width:         44px;
  height:        44px;
  background:    var(--ge-blue-light);
  border-radius: 10px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--ge-blue);
  font-size:     22px;
  transition:    background var(--transition), color var(--transition);
  flex-shrink:   0;
}

.dropzone:hover .dz-icon-box,
.dropzone.drag-over .dz-icon-box {
  background: rgba(29,155,174,0.15);
  color:      var(--ge-teal);
}

.dropzone.state-done .dz-icon-box {
  background: rgba(39,169,106,0.12);
  color:      var(--ge-success);
}

.dropzone.state-error .dz-icon-box {
  background: rgba(217,48,37,0.1);
  color:      var(--ge-error);
}

/* ── Dropzone Text ─────────────────────────────────────── */
.dz-label {
  font-size:   13px;
  font-weight: 600;
  color:       var(--ge-blue);
  margin:      0;
}

.dropzone:hover .dz-label,
.dropzone.drag-over .dz-label { color: var(--ge-teal); }

.dz-hint {
  font-size: 11.5px;
  color:     var(--ge-muted);
  margin:    0;
}

.dz-tag {
  font-size:     11px;
  background:    var(--ge-blue-light);
  color:         var(--ge-blue-mid);
  border-radius: 4px;
  padding:       2px 8px;
  font-weight:   500;
}

/* ── Dropzone Uploading State ──────────────────────────── */
.dz-filename {
  font-size:   12px;
  font-weight: 600;
  color:       var(--ge-teal);
  margin:      0;
  word-break:  break-all;
  max-width:   100%;
}

.dz-filesize {
  font-size: 11px;
  color:     var(--ge-muted);
  margin:    0;
}

.dz-progress-wrap {
  width:      100%;
  margin-top: 4px;
}

.dz-progress-label {
  font-size:       11px;
  color:           var(--ge-teal);
  font-weight:     500;
  margin-bottom:   4px;
  display:         flex;
  justify-content: space-between;
}

.dz-progress-bar {
  height:        5px;
  border-radius: 99px;
  background:    rgba(29,155,174,0.15);
  overflow:      hidden;
}

.dz-progress-fill {
  height:        100%;
  border-radius: 99px;
  background:    linear-gradient(90deg, var(--ge-blue-mid), var(--ge-teal));
  width:         0%;
  transition:    width 0.3s ease;
}

/* ── Dropzone Done State ───────────────────────────────── */
.dz-done-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  font-size:     10px;
  font-weight:   600;
  color:         var(--ge-success);
  background:    rgba(39,169,106,0.1);
  border-radius: 4px;
  padding:       2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.dz-done-name {
  font-size:   12px;
  font-weight: 600;
  color:       var(--ge-text);
  margin:      0;
  word-break:  break-all;
}

/* ── Dropzone Error State ──────────────────────────────── */
.dz-error-msg {
  font-size:   11.5px;
  color:       var(--ge-error);
  margin:      0;
  font-weight: 500;
}

/* ── Hidden file input ─────────────────────────────────── */
.file-input-hidden {
  position: absolute;
  inset:    0;
  opacity:  0;
  cursor:   pointer;
  width:    100%;
  height:   100%;
}

.dropzone.state-uploading .file-input-hidden,
.dropzone.state-done .file-input-hidden {
  display: none;
}

/* ── Actions ───────────────────────────────────────────── */
.actions {
  display:         flex;
  justify-content: flex-end;
  align-items:     center;
  gap:             10px;
  margin-top:      1.5rem;
}

.btn-cancel {
  height:        40px;
  padding:       0 22px;
  border-radius: var(--radius-input);
  border:        1px solid var(--ge-border);
  background:    var(--ge-white);
  color:         var(--ge-muted);
  font-size:     14px;
  font-weight:   500;
  font-family:   inherit;
  cursor:        pointer;
  transition:    background var(--transition), color var(--transition);
}

.btn-cancel:hover {
  background: var(--ge-bg);
  color:      var(--ge-text);
}

.btn-send {
  height:        40px;
  padding:       0 28px;
  border-radius: var(--radius-input);
  border:        none;
  background:    linear-gradient(135deg, var(--ge-blue) 0%, var(--ge-blue-mid) 60%, var(--ge-teal) 100%);
  color:         #fff;
  font-size:     14px;
  font-weight:   500;
  font-family:   inherit;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  gap:           8px;
  transition:    opacity var(--transition);
  position:      relative;
}

.btn-send:hover:not(:disabled) { opacity: 0.88; }

.btn-send:disabled {
  opacity: 0.4;
  cursor:  not-allowed;
}

/* Spinner en botón */
.btn-spinner {
  display:      none;
  width:        16px;
  height:       16px;
  border:       2px solid rgba(255,255,255,0.3);
  border-top:   2px solid #fff;
  border-radius: 50%;
  animation:    spin 0.7s linear infinite;
}

.btn-send.loading .btn-spinner { display: block; }
.btn-send.loading .btn-icon    { display: none; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse-fill {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* ── Footer ────────────────────────────────────────────── */
.page-footer {
  font-size:  11px;
  color:      var(--ge-muted);
  text-align: center;
  margin-top: 0.5rem;
}

/* ── Full-page States (Error / Success) ────────────────── */
.fullpage-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      calc(100vh - 100px);
  padding:         2rem;
  text-align:      center;
  gap:             1rem;
}

.state-icon-wrap {
  width:         80px;
  height:        80px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     40px;
  margin-bottom: 0.5rem;
}

.state-icon-wrap.muted   { background: rgba(90,100,120,0.1); color: var(--ge-muted); }
.state-icon-wrap.teal    { background: rgba(29,155,174,0.1); color: var(--ge-teal); }
.state-icon-wrap.red     { background: rgba(217,48,37,0.1);  color: var(--ge-error); }
.state-icon-wrap.success { background: rgba(39,169,106,0.1); color: var(--ge-success); }

.state-title {
  font-size:   22px;
  font-weight: 700;
  color:       var(--ge-text);
  max-width:   460px;
}

.state-desc {
  font-size:  14px;
  color:      var(--ge-muted);
  max-width:  400px;
  line-height: 1.7;
}

/* ── Success Animated Checkmark ────────────────────────── */
.success-circle {
  width:         80px;
  height:        80px;
  border-radius: 50%;
  background:    rgba(29,155,174,0.1);
  border:        3px solid var(--ge-teal);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     38px;
  color:         var(--ge-teal);
  animation:     popIn 0.5s cubic-bezier(0.22,1.2,0.36,1) both;
}

@keyframes popIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.submission-id {
  font-family:   'Courier New', monospace;
  font-size:     12px;
  color:         var(--ge-blue);
  background:    var(--ge-blue-light);
  padding:       4px 12px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 640px) {
  .top-bar { padding: 0.75rem 1rem; }

  .card-wrap { margin-top: 1.25rem; padding: 0 0.75rem; }

  .card { padding: 1.25rem 1rem; }

  .field-grid,
  .dropzone-grid { grid-template-columns: 1fr; }

  .field-group.full { grid-column: 1; }

  .actions { flex-direction: column-reverse; }
  .actions .btn-cancel,
  .actions .btn-send { width: 100%; justify-content: center; }

  .history-table  { font-size: 0.8rem; }
  .history-thead,
  .history-row    { grid-template-columns: 110px 1fr; }
  .history-date   { display: none; }
}

/* ── History Card ──────────────────────────────────────────────────────────── */
.history-card {
  border-left: 3px solid var(--ge-teal);
  background:  var(--ge-white);
}

.history-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
}

/* Como botón toggle */
.history-toggle {
  width:      100%;
  background: none;
  border:     none;
  padding:    0;
  cursor:     pointer;
  text-align: left;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  transition: background var(--transition);
  margin-bottom: 0;
}
.history-toggle:hover  { background: rgba(29, 155, 174, 0.04); }
.history-toggle:focus-visible {
  outline: 2px solid var(--ge-teal);
  outline-offset: 2px;
}
/* Cuando la tabla está expandida, dejar espacio inferior */
.history-toggle[aria-expanded="true"] { margin-bottom: 1.25rem; }

/* Grupo derecho: badge + chevron */
.history-right-group {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
}

/* Chevron */
.history-chevron {
  font-size:  1rem;
  color:      var(--ge-teal);
  transition: transform 0.25s ease;
}
.history-chevron.expanded {
  transform: rotate(180deg);
}

/* Contenedor colapsable */
.history-collapse {
  transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}


.history-title-wrap {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.history-icon-wrap {
  width:           38px;
  height:          38px;
  border-radius:   9px;
  background:      var(--ge-teal-light);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.history-icon-wrap .ti {
  color:     var(--ge-teal);
  font-size: 1.2rem;
}

.history-title {
  font-size:   0.95rem;
  font-weight: 600;
  color:       var(--ge-text);
  margin:      0;
}
.history-subtitle {
  font-size:  0.78rem;
  color:      var(--ge-muted);
  margin-top: 2px;
}

.history-count-badge {
  background:    var(--ge-teal);
  color:         #fff;
  font-size:     0.78rem;
  font-weight:   700;
  border-radius: 20px;
  padding:       2px 11px;
  letter-spacing: 0.3px;
  flex-shrink:   0;
}

/* ── Table ────────────────────────────────────── */
.history-table {
  border:        1px solid var(--ge-border);
  border-radius: var(--radius-input);
  overflow:      hidden;
  font-size:     0.82rem;
}

.history-thead,
.history-row {
  display:               grid;
  grid-template-columns: 120px 1fr 180px;
  align-items:           center;
}

.history-thead {
  background:  var(--ge-readonly);
  border-bottom: 1px solid var(--ge-border);
}
.history-thead span {
  padding:     8px 14px;
  font-weight: 600;
  font-size:   0.75rem;
  color:       var(--ge-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.history-row {
  border-bottom: 1px solid var(--ge-border);
  transition:    background var(--transition);
}
.history-row:last-child { border-bottom: none; }
.history-row:hover { background: var(--ge-bg); }

.history-cell {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.history-slot-badge {
  display:       inline-flex;
  align-items:   center;
  border-radius: 6px;
  padding:       3px 10px;
  font-size:     0.72rem;
  font-weight:   700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.badge-int {
  background: var(--ge-blue-light);
  color:      var(--ge-blue);
}
.badge-for {
  background: #edf7f0;
  color:      #1a7a45;
}

.history-filename {
  color:       var(--ge-text);
  font-size:   0.82rem;
  word-break:  break-all;
}
.history-file-icon {
  color:     var(--ge-error);
  font-size: 1rem;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}

.history-filenames {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}
.history-filerun-name {
  font-family: 'Courier New', monospace;
  font-size:   0.8rem;
  font-weight: 600;
  color:       var(--ge-text);
}
.history-original-name {
  font-size:  0.72rem;
  color:      var(--ge-muted);
  font-style: italic;
}

.history-date {
  color:     var(--ge-muted);
  font-size: 0.78rem;
}
.history-check-icon {
  color:       var(--ge-success);
  font-size:   0.95rem;
  flex-shrink: 0;
}