/* Estilos modernos para el formulario de Datos Facturación Electrónica.
   Se carga después de Bootstrap 3 para sobrescribir su apariencia por defecto. */

:root {
   /* Paleta neutra (gris carbón) para que sirva a cualquier cliente.
       Para un cliente con marca propia basta cambiar estas tres variables. */
   --sp-primary: #3f4652;
   --sp-primary-hover: #262b33;
   --sp-primary-soft: rgba(63, 70, 82, 0.12);
   --sp-primary-shadow: rgba(38, 43, 51, 0.25);
   --sp-text: #1f2937;
   --sp-muted: #6b7280;
   --sp-border: #d1d5db;
   --sp-bg: #f3f4f6;
   --sp-card: #ffffff;
   --sp-danger: #dc2626;
   --sp-radius: 10px;
}

html, body {
   min-height: 100%;
}

body {
   padding: 0 !important;
   background: linear-gradient(160deg, #fafafa 0%, var(--sp-bg) 50%, #e5e7eb 100%) fixed;
   color: var(--sp-text);
   font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 15px;
   -webkit-font-smoothing: antialiased;
}

/* ---------- Encabezado ---------- */
.sp-header {
   padding: 32px 15px 8px;
}

   .sp-header h2 {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin: 0;
      font-size: 24px;
      font-weight: 600;
      color: var(--sp-text);
   }

   .sp-header img {
      max-height: 56px !important;
   }

.sp-subtitle {
   padding-bottom: 20px !important;
}

   .sp-subtitle span {
      display: inline-block;
      padding: 4px 14px;
      border-radius: 999px;
      background: var(--sp-primary-soft);
      color: var(--sp-primary-hover);
      font-size: 13px !important;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
   }

/* ---------- Tarjeta del formulario ---------- */
.sp-card {
   margin-bottom: 40px;
   padding: 28px 28px 20px;
   background: var(--sp-card);
   border-top: 4px solid var(--sp-primary);
   border-radius: 16px;
   box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08), 0 2px 6px rgba(17, 24, 39, 0.05);
}

   .sp-card .table {
      margin-bottom: 0;
      background: transparent;
   }

      .sp-card .table > tbody > tr > td,
      .sp-card .table > tbody > tr > th {
         border: none;
         vertical-align: middle;
      }

   .sp-card .CeldaEncabezado {
      padding-right: 12px;
      text-align: left;
   }

   .sp-card label,
   .sp-card .control-label {
      margin: 0;
      color: #374151;
      font-size: 13px;
      font-weight: 600;
   }

   /* ---------- Campos ---------- */
   .sp-card .form-control {
      height: 42px;
      padding: 8px 12px;
      border: 1px solid var(--sp-border);
      border-radius: var(--sp-radius);
      box-shadow: none;
      color: var(--sp-text);
      font-size: 14px;
      transition: border-color .15s ease, box-shadow .15s ease;
   }

      .sp-card .form-control:hover {
         border-color: #9ca3af;
      }

      .sp-card .form-control:focus {
         border-color: var(--sp-primary);
         outline: none;
         box-shadow: 0 0 0 3px var(--sp-primary-soft);
      }

   .sp-card select.form-control {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      padding-right: 36px;
      background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
   }

      /* Los <br /> después de los DropDownList dejan un hueco grande */
      .sp-card select.form-control + br {
         display: none;
      }

   .sp-card textarea {
      width: 100%;
      padding: 14px;
      border: 1px solid #e5e7eb;
      border-radius: var(--sp-radius);
      background: #f9fafb;
      color: var(--sp-muted);
      font-size: 13px;
      line-height: 1.5;
      text-align: left !important;
   }

   .sp-card input[type="checkbox"] {
      width: 18px;
      height: 18px;
      margin: 0;
      vertical-align: middle;
      accent-color: var(--sp-primary);
      cursor: pointer;
   }

   /* ---------- Mensajes de validación ---------- */
   .sp-card .text-danger {
      display: block;
      margin-top: 4px;
      color: var(--sp-danger);
      font-size: 12px;
   }

   /* ---------- Enlaces ---------- */
   .sp-card a,
   .sp-card .btn-link {
      color: var(--sp-primary);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
   }

      .sp-card a:hover,
      .sp-card a:focus,
      .sp-card .btn-link:hover,
      .sp-card .btn-link:focus {
         color: var(--sp-primary-hover);
      }

   /* ---------- Botones ---------- */
   .sp-card .btn-default {
      min-width: 140px;
      margin: 6px 4px;
      padding: 10px 24px;
      border: none;
      border-radius: var(--sp-radius);
      background: var(--sp-primary);
      background-image: none;
      box-shadow: 0 4px 12px var(--sp-primary-shadow);
      color: #fff;
      font-weight: 600;
      text-shadow: none;
      transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
   }

      .sp-card .btn-default:hover,
      .sp-card .btn-default:focus {
         background: var(--sp-primary-hover);
         box-shadow: 0 6px 16px var(--sp-primary-shadow);
         color: #fff;
      }

      .sp-card .btn-default:active {
         transform: translateY(1px);
         box-shadow: 0 2px 6px var(--sp-primary-shadow);
      }

/* ---------- Móvil: etiqueta arriba, campo abajo ---------- */
@media (max-width: 767px) {
   .sp-header {
      padding-top: 20px;
   }

      .sp-header h2 {
         font-size: 20px;
      }

   .sp-card {
      padding: 20px 16px 12px;
      border-radius: 12px;
   }

      .sp-card .table,
      .sp-card .table > tbody {
         display: block;
         width: 100%;
      }

         .sp-card .table > tbody > tr {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 6px;
         }

            .sp-card .table > tbody > tr > td.CeldaEncabezado {
               width: 100%;
               padding: 6px 0 4px;
            }

            .sp-card .table > tbody > tr > td.CeldaDetalle {
               flex: 1;
               width: auto;
            }

            .sp-card .table > tbody > tr > td[colspan],
            .sp-card .table > tbody > tr > th[colspan] {
               width: 100%;
            }

      .sp-card .btn-default {
         width: 100%;
         margin: 6px 0;
      }
}