/* ====== Variables y reset ====== */
:root{
  --bg: #0b1220;
  --panel: #0f172a;          /* azul muy oscuro */
  --panel-2: #111827;
  --text: #e5e7eb;           /* gris claro */
  --muted: #9ca3af;
  --brand: #3b82f6;          /* azul */
  --brand-2: #6366f1;        /* índigo */
  --success: #10b981;        /* verde */
  --ring: rgba(59,130,246,.35);
  --border: #1f2937;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing: border-box; margin:0; padding:0; }
/* ====== Layout ====== */
/* .page{
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
} */

.card-detail{
  width:auto;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ====== Header ====== */
.card__header{
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #101728;
  border-bottom: 1px solid var(--border);
}

.card__title{
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: .2px;
  color: #C7C7C7;
  align-items: center;
}

.card__badge{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text);
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.35);
  padding: 6px 10px;
  border-radius: 999px;
}

/* ====== Content ====== */
.card__content{
  display: grid;
  gap: 14px;
  background-color: #445266;
  /* padding: 18px 22px 6px; */
}

.detail{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #445266;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.detail:hover{
  transform: translateY(-1px);
  border-color: rgba(148,163,184,.35);
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}

.detail__icon{
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(59,130,246,.14);
  color: var(--brand);
}
.detail__icon--success{
  background: rgba(16,185,129,.14);
  color: var(--success);
}

.detail__icon svg{ width: 24px; height: 24px; }

.detail__text{ display: grid; gap: 4px; }
.detail__label{
  font-size: 12px;
  color: #C7C7C7;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.detail__value{
  font-size: clamp(14px, 2.2vw, 16px);
  font-weight: 600;
  color: #000000;;
}
.detail__value--amount{
  font-size: clamp(16px, 2.4vw, 18px);
  color: var(--success);
}

/* ====== Footer / acciones ====== */
.card__footer{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(2,6,23,.3), rgba(2,6,23,.15));
}

.btn{
  appearance: none;
  border: 1px solid rgba(59,130,246,.45);
  background: linear-gradient(180deg, rgba(59,130,246,.25), rgba(99,102,241,.2));
  color: #eaf2ff;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--ring);
}
.btn:active{ transform: translateY(0); }

.btn--ghost{
  background: transparent;
  border-color: rgba(148,163,184,.35);
  color: var(--text);
}
.btn--ghost:hover{
  border-color: rgba(148,163,184,.6);
}

/* ====== Accesibilidad ====== */
.detail, .btn { outline: none; }
.detail:focus-within, .btn:focus{
  box-shadow: 0 0 0 4px var(--ring);
  border-color: rgba(59,130,246,.6);
}

/* ====== Modo claro opcional según sistema ====== */
@media (prefers-color-scheme: light){
  :root{
    --bg: #f3f4f6;
    --panel: #ffffff;
    --panel-2: #fafafa;
    --text: #0f172a;
    --muted: #6b7280;
    --border: #e5e7eb;
    --shadow: 0 10px 30px rgba(17,24,39,.08);
  }
  .detail{ background: #fff; }
  .card__footer{ background: #fafafa; }
}

#fotosFacturacion {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.5rem;
            padding: 0 0 1rem 0;
            /* Solo padding abajo */
            margin-top: 0 !important;
            /* Elimina margen superior */
        }

        .foto-card {
            transition: box-shadow 0.2s;
            margin-top: 0 !important;
            /* Elimina margen superior extra */
        }

        .foto-card:hover {
            box-shadow: 0 0 10px #2196f3;
        }

        .foto-img-container {
            position: relative;
            height: 130px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card-body {
            padding-top: 0.5rem !important;
            padding-bottom: 0.5rem !important;
        }

        .btnEliminarFoto {
            position: absolute;
            top: 8px;
            right: 8px;
            z-index: 2;

            /* redondo */
            width: 35px;
            height: 35px;
            border-radius: 50%;

            /* fondo blanco medio transparente */
            background-color: rgba(255, 255, 255, 0.8);

            /* quitar estilos por defecto */
            border: none;
            outline: none;

            /* centrar el icono */
            display: flex;
            align-items: center;
            justify-content: center;

            /* sombra ligera para resaltar */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);

            cursor: pointer;
            transition: background 0.2s;
        }

        .btnEliminarFoto:hover {
            background-color: rgba(255, 255, 255, 1);
        }

        .btnEliminarFoto i {
            color: red;
            font-size: 16px;
        }

        #facturacionInfo .card {
            border-radius: 12px;
        }

        #facturacionInfo .card-header {
            font-size: 1.2rem;
            font-weight: 600;
            letter-spacing: 1px;
        }

        #facturacionInfo .list-group-item {
            font-size: 1rem;
            background: #f8f9fa;
            border: none;
            padding: 0.75rem 1rem;
        }

        #facturacionInfo .list-group-item strong {
            color: #495057;
        }