/* ═══════════════════════════════════════════
   DOCUMENTOS DEL VIAJERO — Estilos
   ═══════════════════════════════════════════ */

/* ── Panel principal ── */
.docs-area {
  max-width:480px; margin:0 auto; padding:24px 16px 40px;
}
.docs-header {
  display:flex; align-items:center; gap:12px;
  margin-bottom:20px;
}
.docs-back {
  width:36px; height:36px; border-radius:10px;
  background:rgba(255,255,255,.04); border:none;
  color:rgba(244,239,230,.6); font-size:18px;
  cursor:pointer; transition:all .2s;
  display:flex; align-items:center; justify-content:center;
}
.docs-back:hover { background:rgba(255,255,255,.08); color:var(--crema); }
.docs-title {
  font-family:var(--font-tight); font-size:22px; font-weight:700;
  color:var(--crema); letter-spacing:-.02em;
}

/* ── Alerta de caducidad ── */
.docs-alert {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:var(--radius-sm);
  margin-bottom:16px; font-size:13px; line-height:1.4;
  color:rgba(244,239,230,.85);
}
.docs-alert-expired {
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.25);
}
.docs-alert-critical {
  background:rgba(251,146,60,.1);
  border:1px solid rgba(251,146,60,.2);
}
.docs-alert-icon { font-size:18px; flex-shrink:0; }

/* ── Lista de documentos ── */
.docs-list {
  display:flex; flex-direction:column;
  margin-bottom:20px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}

/* ── Fila documento ── */
.doc-row {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; cursor:pointer;
  transition:background .2s;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.doc-row:last-child { border-bottom:none; }
.doc-row:hover { background:rgba(212,160,23,.06); }
.doc-row:active { background:rgba(212,160,23,.1); }
.doc-row-emoji {
  font-size:22px; flex-shrink:0; width:32px; text-align:center;
  filter:grayscale(1) brightness(.6); transition:filter .2s;
}
.doc-row:hover .doc-row-emoji { filter:grayscale(.5) brightness(.8); }
.doc-row-info {
  flex:1; min-width:0;
}
.doc-row-name {
  font-size:14px; font-weight:600; color:rgba(244,239,230,.85);
  line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.doc-row-cat {
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em;
  color:rgba(244,239,230,.3); text-transform:uppercase; margin-top:2px;
}
.doc-row-right {
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.doc-row-badge {
  font-family:var(--font-mono); font-size:9px; font-weight:700;
  letter-spacing:.06em; padding:3px 8px;
  border-radius:6px;
}
.doc-badge-expired {
  background:rgba(239,68,68,.15); color:#f87171;
  border:1px solid rgba(239,68,68,.25);
}
.doc-badge-critical {
  background:rgba(251,146,60,.12); color:#fb923c;
  border:1px solid rgba(251,146,60,.2);
}
.doc-badge-warning {
  background:rgba(250,204,21,.1); color:#facc15;
  border:1px solid rgba(250,204,21,.15);
}
.doc-badge-ok {
  background:rgba(74,222,128,.08); color:#4ade80;
  border:1px solid rgba(74,222,128,.12);
}
.doc-row-arrow {
  color:rgba(244,239,230,.2); font-size:16px; font-weight:300;
}

/* ── Fila añadir ── */
.doc-row-add {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; cursor:pointer;
  transition:background .2s;
  border-top:1px solid rgba(240,180,41,.08);
}
.doc-row-add:hover { background:rgba(240,180,41,.04); }
.doc-row-add-icon {
  width:32px; height:32px; border-radius:50%;
  background:rgba(240,180,41,.08);
  display:flex; align-items:center; justify-content:center;
  color:var(--dorado); font-size:18px; font-weight:300;
  transition:all .2s; flex-shrink:0;
}
.doc-row-add:hover .doc-row-add-icon { background:rgba(240,180,41,.15); }
.doc-row-add-label {
  font-size:14px; color:rgba(240,180,41,.5);
  font-weight:600; transition:color .2s;
}
.doc-row-add:hover .doc-row-add-label { color:var(--dorado); }

/* ── Botón Consultar a Salma ── */
.docs-salma-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px;
  background:rgba(240,180,41,.06);
  border:1px solid rgba(240,180,41,.15);
  border-radius:var(--radius);
  color:var(--dorado); font-size:14px; font-weight:600;
  font-family:var(--font-tight);
  cursor:pointer; transition:all .2s;
}
.docs-salma-btn:hover {
  background:rgba(240,180,41,.12);
  border-color:rgba(240,180,41,.3);
}

/* ── Estado vacío ── */
.docs-empty {
  display:flex; flex-direction:column; align-items:center;
  gap:12px; padding:40px 20px; text-align:center;
}
.docs-empty-icon { font-size:40px; opacity:.4; }
.docs-empty-text {
  font-size:14px; color:rgba(244,239,230,.4); line-height:1.5;
}

/* ═══ MODAL ═══ */
.docs-modal-overlay {
  position:fixed; inset:0; z-index:9998;
  background:rgba(0,0,0,.75); backdrop-filter:blur(6px);
  display:flex; align-items:flex-end; justify-content:center;
  animation:docs-fade-in .2s ease;
}
.docs-modal {
  width:100%; max-width:480px;
  background:var(--gris); border-radius:20px 20px 0 0;
  padding:24px 20px 32px; max-height:85vh;
  overflow-y:auto; animation:docs-slide-up .25s ease;
}
@keyframes docs-fade-in {
  from { opacity:0; } to { opacity:1; }
}
@keyframes docs-slide-up {
  from { transform:translateY(40px); opacity:0; }
  to   { transform:translateY(0); opacity:1; }
}
.docs-modal-handle {
  width:36px; height:4px; border-radius:2px;
  background:rgba(244,239,230,.12); margin:0 auto 20px;
}
.docs-modal-title {
  font-family:var(--font-tight); font-size:18px; font-weight:700;
  color:var(--crema); margin-bottom:20px;
}

/* ── Campos del formulario ── */
.docs-field { margin-bottom:16px; }
.docs-label {
  display:block; font-size:12px; font-weight:600;
  font-family:var(--font-mono); letter-spacing:.08em;
  color:rgba(244,239,230,.4); text-transform:uppercase;
  margin-bottom:6px;
}
.docs-input,
.docs-select,
.docs-textarea {
  width:100%; padding:12px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--linea);
  border-radius:var(--radius-sm);
  color:var(--crema); font-size:14px;
  font-family:var(--font-body);
  transition:border-color .2s, background .2s;
  outline:none;
  box-sizing:border-box;
}
.docs-input:focus,
.docs-select:focus,
.docs-textarea:focus {
  border-color:var(--linea-fuerte);
  background:rgba(255,255,255,.08);
}
.docs-select {
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(244,239,230,0.3)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:36px;
}
.docs-select option { background:var(--gris); color:var(--crema); }
.docs-textarea { resize:vertical; min-height:60px; }
.docs-input[type="date"] { color-scheme:dark; }

/* ── File input — botones cámara + archivo ── */
.docs-file-buttons {
  display:flex; gap:10px; margin-bottom:10px;
}
.docs-file-btn {
  flex:1; padding:14px 12px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--linea);
  border-radius:var(--radius-sm);
  color:rgba(244,239,230,.7); font-size:14px;
  font-family:var(--font-tight); font-weight:600;
  cursor:pointer; transition:all .2s;
  text-align:center;
}
.docs-file-btn:hover {
  background:rgba(255,255,255,.08);
  border-color:var(--linea-fuerte);
  color:var(--crema);
}
.docs-file-btn:active { transform:scale(.97); }
/* ── Lista de archivos seleccionados ── */
.docs-file-list {
  display:flex; flex-direction:column; gap:6px;
}
.docs-file-item {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:rgba(74,222,128,.06);
  border:1px solid rgba(74,222,128,.15);
  border-radius:var(--radius-sm);
}
.docs-file-item-name {
  flex:1; font-size:13px; color:rgba(244,239,230,.75);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.docs-file-item-size {
  font-family:var(--font-mono); font-size:11px;
  color:rgba(244,239,230,.3); flex-shrink:0;
}
.docs-file-item-remove {
  width:22px; height:22px; border-radius:50%;
  background:rgba(239,68,68,.1); border:none;
  color:rgba(239,68,68,.6); font-size:12px;
  cursor:pointer; transition:all .2s;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.docs-file-item-remove:hover {
  background:rgba(239,68,68,.2); color:#f87171;
}

/* ── Preview inline de archivos ── */
.docs-preview-grid {
  display:flex; flex-direction:column; gap:12px;
  margin-bottom:16px;
}
.docs-preview-item {
  border-radius:var(--radius-sm); overflow:hidden;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.docs-preview-img {
  width:100%; display:block;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
.docs-preview-pdf {
  width:100%; height:300px; border:none; display:block;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  background:#fff;
}
.docs-preview-download {
  display:block; padding:8px 12px;
  font-size:12px; color:rgba(244,239,230,.4);
  text-decoration:none; transition:color .2s;
  font-family:var(--font-mono); letter-spacing:.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.docs-preview-download:hover { color:var(--dorado); }
.docs-view-file-link {
  display:block; padding:12px 14px;
  color:var(--dorado); font-size:13px;
  text-decoration:none; transition:all .2s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.docs-view-file-link:hover {
  background:rgba(240,180,41,.06);
}
.docs-file-name {
  font-size:13px; color:var(--dorado); font-weight:600;
  margin-top:4px; word-break:break-all;
}
.docs-file-size {
  font-family:var(--font-mono); font-size:11px;
  color:rgba(244,239,230,.3); margin-top:2px;
}
.docs-file-error {
  font-size:12px; color:var(--rojo); margin-top:6px;
}

/* ── Botones del modal ── */
.docs-modal-actions {
  display:flex; gap:10px; margin-top:24px;
}
.docs-btn {
  flex:1; padding:14px;
  border-radius:var(--radius-sm);
  font-size:14px; font-weight:700;
  font-family:var(--font-tight);
  cursor:pointer; transition:all .2s;
  border:none; text-align:center;
}
.docs-btn-primary {
  background:var(--dorado); color:var(--negro);
}
.docs-btn-primary:hover { background:var(--dorado2); }
.docs-btn-primary:disabled {
  opacity:.4; cursor:not-allowed;
}
.docs-btn-secondary {
  background:rgba(255,255,255,.06);
  color:rgba(244,239,230,.6);
  border:1px solid rgba(255,255,255,.08);
}
.docs-btn-secondary:hover {
  background:rgba(255,255,255,.1);
  color:var(--crema);
}
.docs-btn-danger {
  background:rgba(239,68,68,.1);
  color:#f87171; border:1px solid rgba(239,68,68,.2);
}
.docs-btn-danger:hover {
  background:rgba(239,68,68,.2);
}

/* ── Progreso de subida ── */
.docs-progress {
  width:100%; height:4px; border-radius:2px;
  background:rgba(255,255,255,.06);
  margin-top:12px; overflow:hidden;
}
.docs-progress-bar {
  height:100%; border-radius:2px;
  background:var(--dorado);
  transition:width .3s ease;
  width:0%;
}

/* ── Modal vista de documento ── */
.docs-view-info {
  display:flex; flex-direction:column; gap:12px;
  margin-bottom:20px;
}
.docs-view-row {
  display:flex; justify-content:space-between; align-items:center;
}
.docs-view-label {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.08em; color:rgba(244,239,230,.35);
  text-transform:uppercase;
}
.docs-view-value {
  font-size:14px; color:rgba(244,239,230,.8);
  text-align:right;
}
.docs-view-notes {
  font-size:13px; color:rgba(244,239,230,.5);
  line-height:1.5; padding:12px;
  background:rgba(255,255,255,.03);
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.04);
}