:root{
  --brand:#133145;         /* color detectado del Excel (FF133145) */
  --brand-2:#0b2a4a;       /* variante azul oscuro */
  --bg:#f2f6fb;
  --soft:#e9f1ff;
}

body{ background: var(--bg); }

.app-header{
  background: var(--brand);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.brand-mark{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.14);
  position: relative;
}
.brand-mark::after{
  content:'';
  position:absolute;
  inset:10px;
  border-radius:8px;
  background: rgba(255,255,255,.28);
}

.card-elevated{
  border: 0;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(19,49,69,.10);
}

.section-title{
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--brand);
  margin-bottom: .25rem;
}
.section-subtitle{
  color: rgba(19,49,69,.70);
  margin: 0;
}

.bg-soft{
  background: rgba(19,49,69,.10);
  color: var(--brand);
  border: 1px solid rgba(19,49,69,.15);
}

.btn-primary{
  background: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover{ filter: brightness(.95); }

.btn-outline-primary{
  color: var(--brand);
  border-color: rgba(19,49,69,.35);
}
.btn-outline-primary:hover{
  background: rgba(19,49,69,.08);
  border-color: rgba(19,49,69,.45);
  color: var(--brand);
}

.sig-card{
  border: 1px solid rgba(19,49,69,.12);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}
.sig-title{
  font-weight: 800;
  color: var(--brand-2);
  margin-bottom: 8px;
}

.form-control, .form-select{
  border-radius: 12px;
}

hr{ border-top: 1px solid rgba(19,49,69,.12); }


.preview-wrap{
  border: 1px dashed rgba(19,49,69,.25);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

.photo-preview{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

@media (min-width: 576px){
  .photo-preview{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

.photo-thumb{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(19,49,69,.12);
  background: #f8fafc;
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.photo-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.photo-cap{
  position:absolute;
  left:0; right:0; bottom:0;
  background: rgba(0,0,0,.55);
  color:#fff;
  font-size:10px;
  padding:4px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}