/* GalleryPack — Fichas Técnicas · Frontend Form CSS */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;1,300;1,400&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --gp-burg:    #5C0E3A;
  --gp-burg2:   #3F0826;
  --gp-naranja: #E97A1F;
  --gp-cian:    #1FA9C2;
  --gp-tinta:   #1A0F14;
  --gp-grafito: #3A2D33;
  --gp-niebla:  #C9BFB6;
  --gp-crema:   #EDE4D3;
  --gp-hueso:   #F4EFE6;
  --gp-ff-s: 'Inter Tight', sans-serif;
  --gp-ff-m: 'JetBrains Mono', monospace;
  --gp-ff-d: 'Fraunces', serif;
  --gp-r: 3px;
  --gp-shadow: 0 2px 16px rgba(26,15,20,.1);
}

/* ── Wrapper ── */
.gp-front-wrap {
  font-family: var(--gp-ff-s);
  max-width: 860px;
  margin: 0 auto;
  color: var(--gp-tinta);
}

/* ── Header ── */
.gp-front-header {
  background: var(--gp-burg);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--gp-r) var(--gp-r) 0 0;
  margin-bottom: 0;
}
.gp-front-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gp-front-brand-name {
  font-family: var(--gp-ff-s);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1;
}
.gp-front-brand-name span { color: var(--gp-cian); }
.gp-front-brand-sub {
  font-family: var(--gp-ff-m);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-top: 3px;
}
.gp-front-folio {
  font-family: var(--gp-ff-m);
  font-size: 14px;
  font-weight: 500;
  color: var(--gp-naranja);
}

/* ── Alert ── */
.gp-alert {
  padding: 16px 20px;
  border-radius: var(--gp-r);
  margin-bottom: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 14px;
}
.gp-alert--success {
  background: #f0faf0;
  border: 1.5px solid #4caf50;
  color: #2e7d32;
}
.gp-alert--error {
  background: #fdf0ee;
  border: 1.5px solid #e57373;
  color: #c62828;
}
.gp-alert--info {
  background: rgba(31,169,194,.08);
  border: 1.5px solid var(--gp-cian);
  color: #01579b;
}
.gp-alert-icon { font-size: 20px; line-height: 1; }
.gp-alert-body { flex: 1; }
.gp-alert-body strong { display: block; margin-bottom: 6px; }
.gp-edit-link {
  font-family: var(--gp-ff-m);
  font-size: 11px;
  word-break: break-all;
  color: var(--gp-burg);
  background: rgba(92,14,58,.06);
  padding: 6px 10px;
  display: block;
  margin-top: 6px;
  border-radius: 2px;
  border: 1px solid rgba(92,14,58,.15);
}

/* ── Form body ── */
#gp-front-form {
  background: #fff;
  border: 1px solid #e8e2da;
  border-top: none;
  border-radius: 0 0 var(--gp-r) var(--gp-r);
}

/* ── Tipo row ── */
.gp-f-row--tipo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--gp-hueso);
  padding: 16px 24px;
  border-bottom: 1px solid #e8e2da;
  flex-wrap: wrap;
}
.gp-f-folio { display: flex; align-items: center; gap: 10px; }
.gp-f-folio label {
  font-family: var(--gp-ff-m);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gp-niebla);
  white-space: nowrap;
}
.gp-f-folio input { width: 180px; background: rgba(255,255,255,.6); color: var(--gp-niebla); }

/* ── Tipo toggle ── */
.gp-f-tipo-toggle {
  display: flex;
  border: 1.5px solid var(--gp-niebla);
  border-radius: var(--gp-r);
  overflow: hidden;
}
.gp-f-toggle {
  padding: 9px 20px;
  font-family: var(--gp-ff-m);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gp-niebla);
  cursor: pointer;
  transition: all .2s;
  border-right: 1.5px solid var(--gp-niebla);
}
.gp-f-toggle:last-child { border-right: none; }
.gp-f-toggle input { display: none; }
.gp-f-toggle.gp-active,
.gp-f-toggle:has(input:checked) { background: var(--gp-burg); color: #fff; border-color: var(--gp-burg); }
.gp-f-toggle:not(.gp-active):hover { background: rgba(92,14,58,.07); color: var(--gp-burg); }

/* ── Section ── */
.gp-f-sec-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gp-tinta);
  padding: 10px 24px;
}
.gp-f-sec-num {
  font-family: var(--gp-ff-d);
  font-size: 22px;
  font-style: italic;
  color: var(--gp-naranja);
  line-height: 1;
  min-width: 24px;
}
.gp-f-sec-header h3 {
  font-family: var(--gp-ff-s);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gp-hueso);
  margin: 0;
}
.gp-f-sec-body { padding: 20px 24px; border-bottom: 1px solid #f0ece6; }

/* ── Grid ── */
.gp-f-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.gp-f-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 20px; }
.gp-f-span2 { grid-column: span 2; }
.gp-f-span3 { grid-column: span 3; }
.gp-f-field--mt { margin-top: 16px; }

/* ── Field ── */
.gp-f-field { display: flex; flex-direction: column; gap: 5px; }
.gp-f-field label {
  font-family: var(--gp-ff-m);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gp-niebla);
}

/* ── Input ── */
.gp-f-input {
  font-family: var(--gp-ff-s);
  font-size: 14px;
  padding: 9px 12px;
  border: 1.5px solid #ddd5cc;
  border-radius: var(--gp-r);
  background: #fff;
  color: var(--gp-tinta);
  width: 100%;
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none;
}
.gp-f-input:focus {
  outline: none;
  border-color: var(--gp-naranja);
  box-shadow: 0 0 0 3px rgba(233,122,31,.12);
}
.gp-f-input:required:invalid { border-color: #e57373; }
.gp-f-mono { font-family: var(--gp-ff-m) !important; font-size: 13px !important; }
.gp-f-select { cursor: pointer; }
.gp-f-textarea { min-height: 80px; resize: vertical; line-height: 1.5; }

/* ── Dim row ── */
.gp-f-dim { display: flex; align-items: center; gap: 6px; }
.gp-f-dim input { flex: 1; min-width: 0; }
.gp-f-dim span { font-family: var(--gp-ff-m); font-size: 11px; color: var(--gp-niebla); }

/* ── Estado chips ── */
.gp-f-estado-row { display: flex; gap: 8px; flex-wrap: wrap; }
.gp-f-ec {
  flex: 1;
  min-width: 70px;
  padding: 8px 6px;
  border: 1.5px solid #ddd5cc;
  border-radius: var(--gp-r);
  text-align: center;
  font-family: var(--gp-ff-m);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--gp-niebla);
  transition: all .18s;
}
.gp-f-ec input { display: none; }
.gp-f-ec:hover { border-color: var(--gp-niebla); color: var(--gp-grafito); }
.gp-f-ec.gp-active, .gp-f-ec:has(input:checked) { color: #fff !important; }
.gp-f-ec--excelente.gp-active,  .gp-f-ec--excelente:has(input:checked)   { background:#2e7d32; border-color:#2e7d32; }
.gp-f-ec--bueno.gp-active,      .gp-f-ec--bueno:has(input:checked)       { background:#558b2f; border-color:#558b2f; }
.gp-f-ec--regular.gp-active,    .gp-f-ec--regular:has(input:checked)     { background:#f57f17; border-color:#f57f17; }
.gp-f-ec--deteriorado.gp-active,.gp-f-ec--deteriorado:has(input:checked) { background:#e65100; border-color:#e65100; }
.gp-f-ec--critico.gp-active,    .gp-f-ec--critico:has(input:checked)     { background:#b71c1c; border-color:#b71c1c; }

/* ── Danos grid ── */
.gp-f-danos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; }
.gp-f-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--gp-tinta); }
.gp-f-check input { display: none; }
.gp-f-cb {
  width: 17px; height: 17px; min-width: 17px;
  border: 1.5px solid #ddd5cc;
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; font-size: 11px;
}
.gp-f-check input:checked + .gp-f-cb { background: var(--gp-burg); border-color: var(--gp-burg); color: #fff; }
.gp-f-check input:checked + .gp-f-cb::after { content: '✓'; }

/* ── Photo uploader ── */
.gp-f-foto { display: flex; flex-direction: column; gap: 8px; }
.gp-f-foto-preview {
  width: 100%; height: 110px;
  background: var(--gp-crema);
  border: 1.5px dashed var(--gp-niebla);
  border-radius: var(--gp-r);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-family: var(--gp-ff-m);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gp-niebla);
}
.gp-f-foto-preview img { width: 100%; height: 100%; object-fit: cover; }
.gp-f-foto-preview.has-img { border-style: solid; }
.gp-f-foto-btns { display: flex; gap: 6px; }

/* ── Buttons ── */
.gp-f-btn {
  font-family: var(--gp-ff-s);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 20px;
  border: none;
  border-radius: var(--gp-r);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .2s;
  line-height: 1;
}
.gp-f-btn--primary { background: var(--gp-burg); color: #fff; }
.gp-f-btn--primary:hover { background: var(--gp-burg2); color: #fff; }
.gp-f-btn--primary:disabled { opacity: .6; cursor: not-allowed; }
.gp-f-btn--outline { background: transparent; color: var(--gp-burg); border: 1.5px solid var(--gp-burg); }
.gp-f-btn--outline:hover { background: var(--gp-burg); color: #fff; }
.gp-f-btn--ghost { background: transparent; color: var(--gp-niebla); border: 1.5px solid #ddd5cc; }
.gp-f-btn--ghost:hover { color: var(--gp-grafito); border-color: var(--gp-niebla); }
.gp-f-btn--sm { padding: 6px 12px; font-size: 10px; }
.gp-f-btn--lg { padding: 14px 32px; font-size: 12px; }

/* ── Form footer ── */
.gp-f-footer {
  padding: 24px;
  background: var(--gp-hueso);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid #e8e2da;
  border-radius: 0 0 var(--gp-r) var(--gp-r);
}
.gp-f-pdf-links { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* ── Progress bar ── */
.gp-f-progress {
  height: 3px;
  background: var(--gp-crema);
  overflow: hidden;
  border-radius: 2px;
  margin-top: 2px;
}
.gp-f-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gp-naranja), var(--gp-cian));
  width: 30%;
  animation: gp-progress 1.2s ease-in-out infinite;
}
@keyframes gp-progress {
  0%   { width: 0; margin-left: 0; }
  50%  { width: 60%; }
  100% { width: 0; margin-left: 100%; }
}

/* ── Utilities ── */
.gp-f-hidden { display: none !important; }
.gp-f-tipo-block { }

/* ── Responsive ── */
@media (max-width: 640px) {
  .gp-f-grid2, .gp-f-grid3 { grid-template-columns: 1fr; }
  .gp-f-span2, .gp-f-span3 { grid-column: span 1; }
  .gp-f-estado-row { flex-wrap: wrap; }
  .gp-f-ec { min-width: calc(33% - 6px); }
  .gp-f-danos-grid { grid-template-columns: 1fr 1fr; }
  .gp-f-row--tipo { flex-direction: column; align-items: flex-start; }
  .gp-front-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .gp-f-pdf-links { margin-left: 0; }
}