/* =========================================== Botones nuevos ============================================================= */
/* ====================   Usos
<div class="btn-row"> ..... </div>
    <button class="btn btn-default">Button</button>
    <button class="btn btn-search">  <i data-feather="corner-up-left"></i> Search </button>
    <button class="btn btn-primary"> <i data-feather="user-check"></i> Primary </button>
    <button class="btn btn-success"> <i data-feather="thumbs-up"></i> Success </button>
    <button class="btn btn-danger">  <i data-feather="trash-2"></i> Delete </button>
    <button class="btn btn-ghost">   <i data-feather="book"></i> Ghost </button>
    <button class="btn btn-warn">    <i data-feather="book"></i> Ghost </button>


    Tamaños:  Agregar estas clases, btn-xs, btn-sm y btn-lg 
    Animacion:  Agregar estas clases, btn-loading

    Para fondo oscuro:
                      btn-dark-default                      
                      btn-dark-search
                      btn-dark-primary
                      btn-dark-success
                      btn-dark-danger
                      btn-dark-ghost
btn btn-danger btn-sm
btn btn-primary btn-sm
    Iconos:
          Volver        <i data-feather="corner-up-left"></i>
          Circulo alert <i data-feather="alert-circle"></i>
          book          <i data-feather="book"></i>
          camera        <i data-feather="camera"></i>
          check         <i data-feather="check"></i>
          delete        <i data-feather="delete"></i>
          download      <i data-feather="download"></i>
          file          <i data-feather="file"></i>
          save          <i data-feather="save"></i>
          search        <i data-feather="search"></i>
          settings      <i data-feather="settings"></i>
          smile         <i data-feather="smile"></i>
          trash-2       <i data-feather="trash-2"></i>
          tool          <i data-feather="tool"></i>
          thumbs-up     <i data-feather="thumbs-up"></i>
          user-check    <i data-feather="user-check"></i>
          users         <i data-feather="users"></i>
          x-circle      <i data-feather="x-circle"></i>
          tool          <i data-feather="tool"></i>

        Usando varios botones o grupos
        
        <div class="btn-group" role="group" aria-label="Basic example">

        </div>

*/

  .btn38px
  {
    height: 38px;
    margin-bottom: 20px;
    width: 90%;
  }


  .btn-row  { display: flex;    flex-wrap: wrap;    gap: 16px;    align-items: center;  }
  .light-bg { background: #e8eaed;  }  /* ======= FONDO CLARO ========== */
  .dark-bg  { background: #1a1d23;  }  /* ======= FONDO OSCURO ========== */

  /* =============================================     BASE BUTTON  ============================================= */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    cursor: pointer;
    outline: none;
    position: relative;
    transition:
      background 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.15s ease,
      color 0.2s ease,
      filter 0.2s ease;
    user-select: none;
    letter-spacing: 0.01em;
  }

  .btn_rnd {
    gap: 7px;
    padding: 4px 4px;
    border: none;
    border-radius: 50px !important;
    font-size: 10px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .dt-button 
  {
    border-radius: 10px !important;
    transition:
      background 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.15s ease,
      color 0.2s ease,
      filter 0.2s ease !important;
  }

  .btn:active {
    transform: scale(0.96) translateY(1px);
  }

  .btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }

  /* =============================================
     VARIANTE: DEFAULT (gris claro — fondo claro)
  ============================================= */
  .btn-default {
    background: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%);
    color: #3a3a3a;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.9) inset,
      0 2px 4px rgba(0,0,0,0.15),
      0 1px 2px rgba(0,0,0,0.1);
  }

  .btn-default:hover {
    background: linear-gradient(180deg, #ffffff 0%, #e8e8e8 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,1) inset,
      0 4px 10px rgba(0,0,0,0.18),
      0 1px 3px rgba(0,0,0,0.12);
    transform: translateY(-1px);
    color: #111;
  }

  .btn-default:focus-visible {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.9) inset,
      0 2px 4px rgba(0,0,0,0.15),
      0 0 0 3px rgba(100,100,100,0.3);
  }

  /* =============================================     VARIANTE:  (azul — fondo claro)  ============================================= */
  .btn-search {
    background: linear-gradient(180deg, #6ab0f5 0%, #4a90d9 100%);
    color: #fff !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.35) inset,
      0 2px 5px rgba(74,144,217,0.45),
      0 1px 2px rgba(0,0,0,0.15);
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
  }

  .btn-search:hover {
    background: linear-gradient(180deg, #7bbcff 0%, #5aa0e8 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.4) inset,
      0 6px 16px rgba(74,144,217,0.5),
      0 2px 4px rgba(0,0,0,0.15);
    transform: translateY(-1px);
  }

  .btn-search:focus-visible {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.35) inset,
      0 2px 5px rgba(74,144,217,0.45),
      0 0 0 3px rgba(74,144,217,0.4);
  }

  /* =============================================     VARIANTE: PRIMARY (azul oscuro — fondo claro)  ============================================= */
  .btn-primary {
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.2) inset,
      0 3px 8px rgba(29,78,216,0.45),
      0 1px 2px rgba(0,0,0,0.2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  }

  .btn-primary:hover {
    background: linear-gradient(180deg, #4f93ff 0%, #2563eb 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.25) inset,
      0 6px 18px rgba(29,78,216,0.5),
      0 2px 4px rgba(0,0,0,0.2);
    transform: translateY(-1px);
  }

  .btn-primary:focus-visible {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.2) inset,
      0 3px 8px rgba(29,78,216,0.45),
      0 0 0 3px rgba(59,130,246,0.45);
  }

  /* =============================================     VARIANTE: PRIMARY (azul oscuro — fondo claro)  ============================================= */
  .btn-warn {
    background: linear-gradient(180deg, #ffc107 0%, #d8521d 100%);
    color: #fff !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.2) inset,
      0 3px 8px rgba(216, 157, 29,0.45),
      0 1px 2px rgba(0,0,0,0.2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  }

  .btn-warn:hover {
    background: linear-gradient(180deg, #ffc107 0%, #fd7038 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.25) inset,
      0 6px 18px rgba(216, 157, 29, 0.5),
      0 2px 4px rgba(0,0,0,0.2);
    transform: translateY(-1px);
  }

  .btn-warn:focus-visible {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.2) inset,
      0 3px 8px rgba(255, 185, 35, 0.45),
      0 0 0 3px rgba(252, 186, 46, 0.45);
  }

  /* =============================================     VARIANTE: SUCCESS (verde — fondo claro)  ============================================= */
  .btn-success {
    background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
    color: #fff !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.25) inset,
      0 3px 8px rgba(22,163,74,0.4),
      0 1px 2px rgba(0,0,0,0.15);
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
  }

  .btn-success:hover {
    background: linear-gradient(180deg, #5ef090 0%, #22c55e 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.3) inset,
      0 6px 16px rgba(22,163,74,0.45),
      0 2px 4px rgba(0,0,0,0.15);
    transform: translateY(-1px);
  }

  /* =============================================     VARIANTE: DANGER (rojo — fondo claro)  ============================================= */
  .btn-danger {
    background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
    color: #fff !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.2) inset,
      0 3px 8px rgba(220,38,38,0.4),
      0 1px 2px rgba(0,0,0,0.15);
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
  }

  .btn-danger:hover {
    background: linear-gradient(180deg, #ff8585 0%, #ef4444 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.25) inset,
      0 6px 16px rgba(220,38,38,0.45),
      0 2px 4px rgba(0,0,0,0.15);
    transform: translateY(-1px);
  }

  /* =============================================     VARIANTE: GHOST (transparente — fondo claro)  ============================================= */
  .btn-ghost {
    background: transparent;
    color: #3a3a3a !important;
    box-shadow: 0 0 0 1.5px rgba(0,0,0,0.2);
  }

  .btn-ghost:hover {
    background: rgba(0,0,0,0.06);
    box-shadow: 0 0 0 1.5px rgba(0,0,0,0.35);
    transform: translateY(-1px);
  }

  /* =============================================     VARIANTE: DARK DEFAULT (gris oscuro — fondo oscuro)  ============================================= */
  .btn-dark-default {
    background: linear-gradient(180deg, #3a3f4b 0%, #2a2e38 100%);
    color: #e0e4ef !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.08) inset,
      0 2px 6px rgba(0,0,0,0.4),
      0 1px 2px rgba(0,0,0,0.3);
  }

  .btn-dark-default:hover {
    background: linear-gradient(180deg, #464c5a 0%, #33384a 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.1) inset,
      0 5px 14px rgba(0,0,0,0.5),
      0 2px 4px rgba(0,0,0,0.3);
    transform: translateY(-1px);
    color: #fff !important;
  }

  /* =============================================     VARIANTE: DARK SEARCH (azul neón — fondo oscuro)  ============================================= */
  .btn-dark-search {
    background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%);
    color: #fff !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.15) inset,
      0 3px 10px rgba(59,130,246,0.5),
      0 0 20px rgba(59,130,246,0.2);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }

  .btn-dark-search:hover {
    background: linear-gradient(180deg, #4f93ff 0%, #2563eb 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.2) inset,
      0 6px 20px rgba(59,130,246,0.6),
      0 0 30px rgba(59,130,246,0.35);
    transform: translateY(-1px);
  }

  /* =============================================     VARIANTE: DARK GHOST (transparente — fondo oscuro)  ============================================= */
  .btn-dark-ghost {
    background: transparent;
    color: #a0aec0 !important;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.15);
  }

  .btn-dark-ghost:hover {
    background: rgba(255,255,255,0.07);
    color: #e2e8f0 !important;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.3);
    transform: translateY(-1px);
  }

  /* =============================================     VARIANTE: DARK SUCCESS (verde neón — fondo oscuro)  ============================================= */
  .btn-dark-success {
    background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
    color: #fff !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.15) inset,
      0 3px 10px rgba(34,197,94,0.45),
      0 0 18px rgba(34,197,94,0.2);
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  }

  .btn-dark-success:hover {
    background: linear-gradient(180deg, #34d36e 0%, #16a34a 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.2) inset,
      0 6px 18px rgba(34,197,94,0.55),
      0 0 28px rgba(34,197,94,0.3);
    transform: translateY(-1px);
  }

  /* =============================================     VARIANTE: DARK DANGER (rojo neón — fondo oscuro)  ============================================= */
  .btn-dark-danger {
    background: linear-gradient(180deg, #f87171 0%, #991b1b 100%);
    color: #fff !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.12) inset,
      0 3px 10px rgba(248,113,113,0.4),
      0 0 18px rgba(248,113,113,0.18);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }

  .btn-dark-danger:hover {
    background: linear-gradient(180deg, #ff8585 0%, #b91c1c 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.15) inset,
      0 6px 18px rgba(248,113,113,0.5),
      0 0 28px rgba(248,113,113,0.28);
    transform: translateY(-1px);
  }

  /* =============================================     TAMAÑOS  ============================================= */
  .btn-xs {
    padding: 4px 6px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
    gap: 3px !important;
  }

  .btn-sm {
    padding: 7px 14px;
    font-size: 12px;
    border-radius: 8px;
    gap: 5px;
  }

  .btn-sm svg { width: 12px; height: 12px; }

  .btn-lg {
    padding: 13px 28px;
    font-size: 16px;
    border-radius: 12px;
    gap: 9px;
  }

  .btn-lg svg { width: 18px; height: 18px; }

  /* =============================================     ESTADO DISABLED  ============================================= */
  .btn:disabled,
  .btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    filter: grayscale(30%);
  }

  /* =============================================     ESTADO LOADING  ============================================= */
  .btn-loading {    pointer-events: none;    opacity: 0.8;  }

  .spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff !important;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
  }

  .spinner-dark {    border-color: rgba(0,0,0,0.2);    border-top-color: #555;  }

  @keyframes spin {    to { transform: rotate(360deg); }
  }

  /* =============================================     CÓDIGO DE USO  ============================================= */
  .code-section {
    background: #1e2130;
    color: #abb2bf !important;
    padding: 28px 32px;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.7;
  }

  .code-section h3 {
    color: #61afef !important;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 16px;
    font-family: -apple-system, sans-serif;
    font-weight: 700;
  }

  .code-block {
    background: #161820;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 20px;
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,0.06);
  }

/* =============================================     colores   ============================================= */
  .kw  { color: #c678dd; }
  .cl  { color: #e5c07b; }
  .at  { color: #61afef; }
  .vl  { color: #98c379; }
  .cm  { color: #5c6370; font-style: italic; }
  .tg  { color: #e06c75; }
  .tx  { color: #abb2bf; }

  /* =============================================     LAYOUT GENERAL  ============================================= */
  .label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }

  .light-bg .label { color: #666 !important; }
  .dark-bg  .label { color: #6b7280 !important; }

  .divider {    height: 1px;    background: rgba(128,128,128,0.15);    margin: 0;  }