.h12 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Antonio";
    font-size: 28px;
    font-weight: bold;
    color: #73134cfa;
     margin: 15px 0; 
    text-transform: uppercase;
}
.h12::before,
.h12::after {
  content: "";
  flex: 1;
  border-bottom: 2px solid #ccc; /* grosor y color de la rayita */
  margin: 0 12px;                /* espacio entre texto y línea */
}
.h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Antonio";
    font-size: 28px;
    font-weight: bold;
    color: #73134cfa;
    /* margin: 10px 0; */
    text-transform: uppercase;
}
.h1::before,
.h1::after {
  content: "";
  flex: 1;
  border-bottom: 2px solid #ccc; /* grosor y color de la rayita */
  margin: 0 12px;                /* espacio entre texto y línea */
}
body{font-family:system-ui;background:#f8f6ef; margin: 0;}
.card {
    background: #f3b1c557;
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 16px;
}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;}
label{font-weight:700;font-size:14px;}
input, textarea, select {
    background: #fff;
    width: 96%;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #ddd;
    color: #020101;
}
button{padding:10px;border:none;border-radius:10px;cursor:pointer;font-weight:700;}
.btn-main{background:#000;color:#fff;}
.btn-soft{background:#fff;border:1px solid #ddd;}
.btn-gold{background:#ebc10a;color:#111;}
.inline-note{font-size:12px;color:#666;margin-top:4px;font-family:"Delius";}
.tipo-box{display:flex;gap:14px;flex-wrap:wrap;}
.variant{border:1px dashed #ccc;border-radius:12px;padding:12px;margin-top:12px;background:#fffdf7;}
.variant-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;}
.preview-grid{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:12px;
}

.preview-grid img{
width:90px;
height:90px;
object-fit:cover;
border-radius:12px;
border:1px solid #ddd;
background:#fff;
}

/* =================================
   🌙 ADMIN PRODUCTOS DARK MODE
================================= */



/* TITULOS */



.dark .h12::before,.dark .h12::after,.dark .h1::before,.dark .h1::after{

border-bottom:
2px solid rgba(255,255,255,.12);;
}

/* CARDS */

.dark .card{



border:
1px solid rgba(255,255,255,.05);;


}

/* LABELS */



/* INPUTS */

.dark input,.dark textarea,.dark select{

appearance:none;;
-webkit-appearance:none;;



border:
1px solid #4b3535;;





color-scheme:dark;;



transition:
border .2s ease,
background .2s ease,
box-shadow .2s ease;;
}

/* PLACEHOLDER */



/* HOVER */



/* FOCUS */

.dark input:focus,.dark textarea:focus,.dark select:focus{

outline:none;;






}

/* BOTONES */

.dark button{

border:none;;



transition:
transform .2s ease,
filter .2s ease,
background .2s ease;;
}

.dark button:hover{

transform:translateY(-1px);;
}

/* BTN MAIN */



/* BTN SOFT */

.dark .btn-soft{



border:
1px solid rgba(255,255,255,.06);;


}

/* BTN GOLD */



/* NOTES */



/* TIPO BOX */



/* VARIANTS */

.dark .variant{



border:
1px dashed rgba(255,255,255,.12);;


}

/* HEAD */



/* PREVIEW */

.dark .preview-grid img{

border:
1px solid rgba(255,255,255,.08);;




}