@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root{
/*
 --main:#0a6b28;
 --secun:#f1e70b;
 --tercer:#aa0010;
 --borderGris:#acacac;
 */
  --main: #064e3b;      /* Verde esmeralda profundo (Elegancia) */
  --accent: #fbbf24;    /* Ámbar/Mostaza (Atención sin lastimar) */
  --bg-light: #f9fafb;  /* Fondo casi blanco para limpieza */
  --text-dark: #1f2937; /* Gris muy oscuro para lectura */
  --border: #e5e7eb;    /* Gris sutil para separar platillos */
  --status-success: #22c55e;
  --status-error: #ef4444;

 --naranja:#ff9600;
 --verde:#27ae60;
 --azul:#03afe7;
 --gris:#d8d8d8;
 --rojo:#df4545;
}
*,
*::before,
*::after{
box-sizing:border-box;
}

body {
    font-family: "Roboto", sans-serif;
    margin: 0;
    background: #f5f5f5;
    font-size: 18px;
}
a{
    text-decoration: none;
}
h2 {
    padding: 10px;
    margin: 0;
    background: #fff;
    border-bottom: 1px solid #ddd;
}

.colorMain{color: var(--main);}
.colorSecun{color: var(--accent);}

.borde{
    border: 1px #df0000 solid;
}
#mainContainer{
    width: 96%;
    max-width:600px;
    margin: 10px auto 70px auto;
}

#datosTop{
    width: 100%;
    padding:0px 0px;
    text-align: center;
}
.logotipo {
    width: 80%;
    max-width:300px;
    margin: 0px auto;
    border-radius: 10px;
    aspect-ratio: 2 / 1; /* Esto la hace el doble de ancha que de alta */
    object-fit: contain;  /* Importante: 'contain' evita que el logo se corte */
    display: block;      /* Ayuda a que los márgenes y dimensiones se respeten mejor */
}


.ngo{color: #000;}
.azul{color: var(--azul);}
.verde{color: var(--verde);}
.rojo{color: var(--rojo);}
.naranja{color: var(--naranja);}

/* BOTONES */
.btn{
    display:inline-block;
    cursor:pointer;
    border:none;
    text-align:center;
    box-sizing:border-box;
    border-radius:6px;
    font-weight:300;
    font-size: 20px;
    font-family: "Roboto","Arial","Sans";
    transition:all .2s ease-in-out;
    user-select:none;
}
.btnEnviar{border:1px var(--main) solid;background:var(--main);color:#ffffff;padding:10px 20px;text-align: center;}
.btnVerde{border:1px var(--verde) solid;background:var(--verde);color:#ffffff;padding:10px 20px;text-align: center;}
.btnAzul{border:1px var(--azul) solid;background:var(--azul);color:#ffffff;padding:10px 20px;text-align: center;}
.btnGris{border:1px var(--gris) solid;background:var(--gris);color:#ffffff;padding:10px 20px;text-align: center;}

.btnRojo{border:1px var(--rojo) solid;background:var(--rojo);color:#ffffff;padding:10px 20px;text-align: center;}
.btnCancelar{border:1px var(--gris) solid;background:var(--gris);color:#000000;padding:10px 20px;text-align: center;}
.btn100{width:100%;}

.btnCh{padding:3px 6px;}
.tabla_principal{width:calc(100% - 60px);margin-left:auto; text-align: center;}

.redondo {
    border-radius: 10px;
}

.titulo{font-size:28px;}
.bold{font-weight:700;}
.italica{font-style: italic;}
.extrabold{font-weight:900;}

/*==============================
    MINI ALERTA
======================*/
#miniAlertaBox{
    position:fixed;
    top:-400px;
    left:0;
    width:100%;
    display:flex;
    justify-content:center;
    z-index:9999;
    transition:.4s;
}

#miniAlertaBox.activo{
    top:100px;
}

.miniAlertaContenido{
    background:white;
    padding:20px 30px;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    text-align:center;
    min-width:320px;
}

/* tipos */

.miniAlerta_ok{border-top:10px solid #28a745;}
.miniAlerta_error{border-top:10px solid #dc3545;}
.miniAlerta_warn{border-top:10px solid #ffc107;}
#miniAlertaMensaje{
    margin-bottom:15px;
    font-size:24px;
}
#miniAlertaBtn{
    background:var(--main);
    color:white;
    border:none;
    padding:8px 20px;
    border-radius:6px;
    cursor:pointer;
}

/*==============================
    MINI CONFIRM
======================*/
#miniConfirmBox{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.miniConfirmBtns{
    display:flex;
    gap:10px;
    justify-content:center;
    margin-top:15px;
}

.miniConfirmBtns button{
    padding:8px 18px;
    border:none;
    border-radius:6px;
    cursor:pointer;
}




/*==============================
    MINI CHOICE
======================*/
#miniChoiceBox{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.miniChoiceBtns{
    display:flex;
    gap:10px;
    justify-content:center;
    margin-top:15px;
}

.miniChoiceBtns button{
    padding:8px 18px;
    border:none;
    border-radius:6px;
    cursor:pointer;
}





.tipo-entrega{
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.radioBox{
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 18px;
    background: #fff;
    color:#c0c0c0;
}

.radioBox input{
    display: none;
}

/* seleccionado */
.radioBox:has(input:checked){
    border-color: #129117;
    background: #d9eee2;
    color: #2e7d32;
    font-weight: bold;
    font-style: normal;
}

/* hover */
.radioBox:hover{
    border-color: #bbb;
}






.datos-cliente{
    margin: 15px 0;
    padding: 15px;
    background: #f9fafb;
    border-radius: 12px;
}

/* contenedor */
.form_input{
    margin-bottom: 12px;
    position: relative;
}

/* inputs */
.inputDato{
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 18px;
    outline: none;
    background: #fff;
    transition: all 0.2s ease;
}

/* hover */
.inputDato:hover{
    border-color: #bbb;
}

/* focus */
.inputDato:focus{
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76,175,80,0.15);
}

/* animación suave */
.inputDato::placeholder{
    color: #999;
}

/* campo dirección animado */
#campoDireccion{
    transition: all 0.3s ease;
}

/* opcional: efecto cuando aparece */
#campoDireccion.show{
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn{
    from{
        opacity: 0;
        transform: translateY(-5px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}



input::placeholder, 
textarea::placeholder {
  font-style: italic;
  color: #888; /* Opcional: para darle un tono grisáceo */
}


.form_input::before{
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}

#clienteNombre{ padding-left: 15px; }
#clienteTelefono{ padding-left: 15px; }
#clienteDireccion{ padding-left: 15px; }