body {
 background-image: url('img/background_copia.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color:#e6e9ef;
    
}

.hero {
    background-size: cover;
    background-position: center;
    height: 50vh;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    }
 .hero-content {
   text-align: center;
   background: rgba(6, 182, 0, 0.6);
   padding: 2rem;
   border-radius: 10px;
    }
  .btn-custom {
    margin-top: 1rem;
    }


      

        th, td{
            padding: 10px;
            color: rgb(19, 19, 19); 
        }
        th{
            text-align: left;
                        
        }

        /* este es una nota */

        .custombw {
            width: 190px !important;
        }

        .timebtn {
            width: 100px !important;
            height: 35px !important;
        }

        .btn-primary:hover, .btn-primary:focus {
            color: rgb(24, 24, 24);
            background-color: #FEC107;  
            
        }



       /* CSS PARA QR */


       :root{
--accent:#0f62fe;
--card:#ffffff;
--muted:#6b7280;
--radius:12px;
--shadow: 0 6px 18px rgba(12,17,26,0.06);
}






.container{
max-width:1100px;
margin:40px auto;
padding:24px;
}
.brand{margin-bottom:18px}
.brand h1{margin:0;font-size:1.6rem}
.subtitle{margin:4px 0 0;color:#e6e9ef(--muted)}


.card{
display:grid;
grid-template-columns: 1fr 360px;
gap:24px;
background:var(--card);
padding:20px;
border-radius:var(--radius);
box-shadow:var(--shadow);
align-items:start;
}


.form-col label, .preview-col label{display:block;font-weight:600;margin-bottom:8px}
textarea#text{width:100%;padding:10px;border-radius:8px;border:1px solid #e6e9ef;resize:vertical;font-size:0.95rem}
.row{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
.field{flex:1;min-width:120px}
.field input[type=color]{width:100%;height:44px;padding:4px;border-radius:8px;border:1px solid #e6e9ef}
.field input[type=range]{width:100%}
.small{font-size:0.85rem;color:var(--muted);margin-top:6px}


.actions{display:flex;gap:10px;margin-top:14px}
.btn{appearance:none;border:0;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600}
.btn.ghost{background:transparent;border:1px solid #e6e9ef}
.btn.primary{background:var(--accent);color:white}
.btn.full{display:inline-block;width:100%;text-align:center}
.preview-col{display:flex;flex-direction:column;gap:12px}
.preview{display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px dashed #e6e9ef;padding:18px;height:320px;background:linear-gradient(180deg, #fff, #fbfdff)}
.preview img{max-width:100%;max-height:100%;display:block}
.note{font-size:0.85rem;color:var(--muted);margin:6px 0 0}
.foot{text-align:center;margin-top:16px;color:var(--muted)}


@media (max-width:920px){
}