@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300&display=swap');
         
    :root {
        --xml-accent: #2ca01c; /* palabra XML */
        --xml-teal: #16b900; /* botón/realce */
        --xml-green: #138a36; /* texto verde en inputs */
        --soft: #eef2f5; /* gris de campos readonly */
        --ink: #1f2937; /* texto principal */
        --muted: #6b7280; /* texto secundario */
        --card: #ffffff; /* fondo tarjeta */
        --border: #e6e6e6;
        --shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
      }
      html,
      body {
        height: 100%;
      }
      body {
        margin: 0;
        color: var(--ink);
        font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial,
          sans-serif;
      }
      /* utilitaria que usa tu JS */
      .d-none {
        display: none !important;
      }

      /* =========================
   Contenedor y encabezado
   ========================= */
      .xml-wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 16px;
      }
      .xml-band {
        border-radius: 20px;
        padding: 28px 18px;
        max-width: 1500px;
        margin: 0 auto;
      }



      .xml-title {
        margin: 8px 0 18px;
        font-weight: 800;
        letter-spacing: 0.2px;
        color: #2d3340;
        text-align: center;
      }
      .xml-title .accent {
        color: var(--xml-accent);
      }

  .img {
    content: url(/static/images/FacturadorPlusB.png);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto; 
    max-width: 190px;
  }   

  .logo {
    max-width: 190px;
  }


      /* =========================
   Tarjeta búsqueda
   ========================= */
      .card {
        background: var(--card);
        border: 1px solid #e9ecef;
        border-radius: 16px;
        box-shadow: var(--shadow);
      }
      .p-3 {
        padding: 1rem;
      }
      .p-md-4 {
        padding: 1.25rem;
      }
      @media (min-width: 768px) {
        .p-md-4 {
          padding: 1.5rem;
        }
      }
      .xml-query .xml-hint small {
        display:flex;
        color: var(--muted);
        font-weight: 600;
        text-align: center !important;
        margin-top: 0.5rem;
        width: 1500px;
      }

      /* toolbar del input + botón */
      .xml-toolbar {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
      }
      .xml-toolbar__field {
        flex: 1 1 260px;
      }

      /* input */
      #xml-clave {
        width: 100%;
        height: 56px;
        border: 1px solid var(--xml-teal);
        border-radius: 999px;
        padding: 0 12px 0 18px;
        font-size: 1rem;
        outline: 0;
        transition: box-shadow 0.15s, border-color 0.15s;
      }
      #xml-clave:focus {
        border-color: var(--xml-teal);
        box-shadow: 0 0 0 0.25rem rgba(18, 214, 166, 0.2);
      }

      .xml-clave {
        width: 100%;
        height: 56px;
        border: 1px solid var(--xml-teal);
        border-radius: 999px;
        padding: 0 12px 0 18px;
        font-size: 1rem;
        outline: 0;
        transition: box-shadow 0.15s, border-color 0.15s;
      }
      .xml-clave:focus {
        border-color: var(--xml-teal);
        box-shadow: 0 0 0 0.25rem rgba(18, 214, 166, 0.2);
      }


      /* botón consultar */
      #xml-submit {
        height: 56px;
        padding: 0 22px;
        border: 1px solid var(--xml-teal);
        border-radius: 999px;
        background: var(--xml-teal);
        color: #fff;
        font-weight: 800;
        cursor: pointer;
      }
      #xml-submit:hover {
        background: #048500;
        border-color: #048500;
      }

      /* alertas */
      .alert {
        margin-top: 1rem;
        padding: 0.75rem 1rem;
        border: 1px solid transparent;
        border-radius: 0.5rem;
      }
      .alert-danger {
        color: #842029;
        background: #f8d7da;
        border-color: #f1aeb5;
      }

      /* =========================
   Panel de resultados
   ========================= */
      .xml-card {
        background: var(--card);
        border: 1px solid #e9ecef;
        border-radius: 16px;
        box-shadow: var(--shadow);
      }
      /* estado */
      .xml-state {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 0.6rem;
      }
      .xml-state__label {
        font-size: 0.75rem;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--muted);
      }

      /* utilidades mínimas para el badge que tu JS setea */
      .badge {
        display: inline-block;
        padding: 0.4em 0.65em;
        font-size: 0.85em;
        border-radius: 0.5rem;
      }
      .text-secondary {
        color: #475569;
      }
      .bg-secondary-subtle {
        background: #f1f3f5;
      }
      .border {
        border: 1px solid var(--border);
      }
      .border-secondary-subtle {
        border-color: #e2e3e5;
      }
      .fw-bold {
        font-weight: 700;
      }

      /* etiquetas */
      .form-label {
        display: block;
        margin-bottom: 0.35rem;
        font-size: 0.875rem;
        color: var(--muted);
      }

      /* grid responsive propio */
      .xml-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1rem;
        margin-bottom: 0.75rem;
      }

      /* inputs readonly del resultado */
      .xml-field {
        margin-bottom: 0.75rem;
      }
      .xml-input {
        width: 100%;
        height: 48px;
        border: 1px solid var(--border);
        border-radius: 0.625rem;
        background: var(--soft);
        color: var(--xml-green);
        padding: 0.6rem 0.8rem;
      }
      .xml-textarea {
        width: 100%;
        min-height: 140px;
        border: 1px solid var(--border);
        border-radius: 0.625rem;
        background: var(--soft);
        color: var(--ink);
        padding: 0.6rem 0.8rem;
        resize: vertical;
      }

      /* subtítulos */
      .xml-section {
        font-weight: 800;
        color: #1f2937;
        margin: 8px 0 10px;
      }

      /* acciones */
      .xml-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
      }
      .btn-outline,
      .btn-primary {
        padding: 0.6rem 1rem;
        border-radius: 0.75rem;
        font-weight: 700;
        cursor: pointer;
        border: 1px solid transparent;
      }
      .btn-outline {
        background: transparent;
        color: #6c757d;
        border-color: #6c757d;
      }
      .btn-outline:hover {
        background: #6c757d;
        color: #fff;
      }
      .btn-primary {
        background: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
      }
      .btn-primary:hover {
        filter: brightness(0.95);
      }

      /* animación de aparición */
      .xml-reveal {
        animation: xmlRev 0.28s ease both;
      }
      @keyframes xmlRev {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      /* =========================
   Overlay de carga
   ========================= */
      .xml-loading {
        position: fixed;
        inset: 0;
        z-index: 1080;
        background: rgba(255, 255, 255, 0.65);
        backdrop-filter: saturate(120%) blur(2px);
        display: grid;
        place-items: center;
      }
      .xml-loading .box {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 16px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
        padding: 20px 26px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }
      /* spinner */
      .spinner-border {
        width: 3rem;
        height: 3rem;
        color: var(--xml-teal);
        border: 0.35rem solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spin 0.75s linear infinite;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
    
 /* ___________________________

         TABLA DE CABYS
    ___________________________ */

.modern-table {
  width: 100%;
  border: none;
  border-radius: 12px;
  text-align: center;
}
 
 .modern-table thead th {
  border: none;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  padding: 20px 10px;
  position: sticky;
  top: 0;
  background: #ebe9e9; 
  z-index: 2;
}
.modern-table tbody tr {
  border: none;
  transition: all 0.2s ease;
  background: white;
}

.modern-table tbody tr:hover {
  background: #f8f9fa;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.modern-table tbody td {
  border: none;
  padding: 15px 10px;
  font-size: 14px;
  vertical-align: middle;
  font-family: "Lato", sans-serif;
  font-weight: 600;
  font-style: normal;
}