/* CLASS STYLES FOR DELYSUPER.COM */

/* A HREF */
a { text-decoration: none; /* Remove underline from links */ }

/* ALERT MESAGES */
.alert-message-error-red   { border-radius: 5px; border: 2px solid #F5C6CB; background-color: #F8D7DA; text-align: center; padding: 10px; font-family: Arial; font-size: 15px; color: #721C24; 
    margin-left: 10px; margin-right: 10px; max-width: 345px; }
.alert-message-info-blu    { border-radius: 5px; border: 2px solid #BEE5EB; background-color: #D1ECF1; text-align: center; padding: 10px; font-family: Arial; font-size: 15px; color: #0C5460; 
    margin-left: 10px; margin-right: 10px; max-width: 345px; }
.alert-message-success-grn { border-radius: 5px; border: 2px solid #C3E6CB; background-color: #D4EDDA; text-align: center; padding: 10px; font-family: Arial; font-size: 15px; color: #155724;
    margin-left: 10px; margin-right: 10px; max-width: 345px; }

/* ALIGNMENT */
.align-left   { text-align: left; }
.align-center { text-align: center; }
.align-right  { text-align: right; }

/* BODY */
.body { background-color: #ACB1B9; margin: 0; padding: 10px 0; overflow-x: hidden; /* evita scroll lateral */ -webkit-text-size-adjust: 100%; }

/* BOLD */
.bold { font-weight: bold; }

/* BUTTONS */
.button-xsmall { border-radius: 7px; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 65px; width: 154px; }
.button-small  { border-radius: 7px; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 19px; color: #FFFFFF; cursor: pointer; height: 65px; width: 169px; }
.button-medium { border-radius: 7px; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 20px; color: #FFFFFF; cursor: pointer; height: 65px; width: 315px; }
.button-large  { border-radius: 7px; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 21px; color: #FFFFFF; cursor: pointer; height: 65px; width: 345px; }

/* COLORS */
.bg-color-1 { background-color: #488C4C; }
.bg-color-2 { background-color: #F37735; }
.bg-color-3 { background-color: #ACB1B9; }
.bg-color-4 { background-color: #D32F2F; }

/* CHECK BOX */
.check-box { margin-left: 12px; height: 30px; width: 30px; }
.check-box-font { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #000000; margin-left: 2px; }

/* FLAG CONTAINER */
.flag-container { display: flex; flex-direction: column; align-items: center; width: 100%; }
.flag-font { text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 24px; color: #818181; padding-left: 7px; padding-right: 7px; white-space: nowrap; }
.flag-table { width: 315px; margin: 0 auto; }

/* FONT COLOR */
.font-color-1 { color: #999999; }
.font-color-2 { color: #000000; }
.font-color-3 { color: #009846; }
.font-color-4 { color: #FF8000; }
.font-color-5 { color: #FFFFFF; }
.font-color-6 { color: #FF0000; }

/* FONTS */
.font-help   { padding-left: 12px; text-align: left; font-family: Arial; font-size: 13px !important; color: #818181; display: block; margin-bottom: 7px; }
.font-xsmall { font-family: Arial; font-size: 13px; }
.font-small  { font-family: Arial; font-size: 16px; }
.font-small-italic { font-style: italic; font-size: 16px; color: #818181; margin-bottom: 7px; }
.font-medium { font-family: Arial; font-size: 19px; }
.font-large  { font-family: Arial; font-size: 22px; }
.font-xlarge { font-family: Arial; font-size: 25px; }

/* FORM */
.form-space        { margin-bottom: 8px; }

.form-input-sml    { border-radius: 7px; border: 1px solid #CCCCCC; background-color: #F6F7F8; outline: none; text-align: left; padding-left: 8px; font-family: Arial; font-size: 20px; color: #818181; height: 55px; width: 142px; }
.form-input-med    { border-radius: 7px; border: 1px solid #CCCCCC; background-color: #F6F7F8; outline: none; text-align: left; padding-left: 8px; font-family: Arial; font-size: 20px; color: #818181; height: 55px; width: 301px; }

.form-price-sml    { border-radius: 7px; border: 1px solid #CCCCCC; background-color: #F6F7F8; outline: none; text-align: left; padding-left: 8px; font-family: Arial; font-size: 20px; color: #818181; height: 55px; width: 129px; }
.form-price-med    { border-radius: 7px; border: 1px solid #CCCCCC; background-color: #F6F7F8; outline: none; text-align: left; padding-left: 8px; font-family: Arial; font-size: 20px; color: #818181; height: 55px; width: 288px; }

.form-select-sml   { border-radius: 7px; border: 1px solid #CCCCCC; background-color: #F6F7F8; outline: none; text-align: left; padding-left: 8px; font-family: Arial; font-size: 20px; color: #818181; height: 60px; width: 153px; }   
.form-select-med   { border-radius: 7px; border: 1px solid #CCCCCC; background-color: #F6F7F8; outline: none; text-align: left; padding-left: 8px; font-family: Arial; font-size: 20px; color: #818181; height: 60px; width: 313px; }

.form-textarea-med { border-radius: 7px; border: 1px solid #ACB1B9; background-color: #F6F7F8; outline: none; text-align: left; padding-left: 8px; font-family: Arial; font-size: 18px; color: #888888; height: 55px; width: 302px; }

/* INDEX */
.index-button-english { border-radius: 5px; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 38px; width: 90px; }
.index-image { height: 110px; width: 280px; }
.index-gif-es { display: block; margin: 0 auto; max-width: 300px; /* o 300px, según tu preferencia */ height: auto; /* mantiene proporciones del gif */ }
.index-menu-icon {float: right; padding-right: 9px; height: 35px; width: 38px; }
.index-logo { height: 58px; width: 280px; }

/* IMAGES */
.image-logo { height: 58px; width: 280px; /* Original size: h 160 w 760 */ }

/* META THEME COLOR */
:root { --theme-color: #000000; }

/* MI_TIENDA.PHP */
.mitienda-image-logo    { border-radius: 7px; border: 3px solid #FFFFFF; display: block; margin: 0 auto; max-width: 150px; max-height: 150px; margin-top: 3px; margin-bottom: 6px; }
.mitienda-button-xsmall { border-radius: 7px; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 40px; width: 154px; }
.boton-entregas         { border-radius: 7px; background-color: #ACB1B9; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif;; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 40px; width: 315px; }
.mitienda-button-delete { border-radius: 7px; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 40px; width: 315px; }
.table-sin-tienda       { border-radius: 7px; border: 2px solid #BEE5EB; background-color: #D1ECF1; font-family: Arial, Helvetica, sans-serif;; font-size: 16px; color: #0C5460; height: 220px; width: 340px; }
    
/* PRODUCTO - COMIDA */
.products-button-select { border-radius: 7px; background-color: #488C4C; border: none; outline: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 20px; color: #FFFFFF;
    cursor: pointer; height: 45px; width: 100%; display: block; margin-top: 8px; }
.products-image-p  { border-radius: 7px; border: 3px solid #FFFFFF; margin-right: 7px; height: 125px; width: 125px; }
.products-table-p  { border-radius: 7px; border: 1px solid #DDDDDD; background-color: #EEEEEE; text-align: center; padding: 8px; height: auto; width: 345px; }

/* PRODUCT ITEMS */
.products-grid { display: grid; grid-template-columns: repeat(2, 0fr); gap: 7px; }
.product-item { border-radius: 25px; border: 10px solid #CCCCCC; background-color: #FFFFFF; padding: 25px; display: flex; flex-direction: column; align-items: center; width: 400px; box-sizing: border-box; }
.product-image { border-radius: 7px; border: 0px solid #000000; text-align: center; height: 143px; width: 143px; object-fit: contain; display: block; margin-bottom: 7px; }
.product-info { width: 100%; text-align: center; margin-bottom: 15px; }
.product-select { border-radius: 5px; background-color: #488C4C; border: none; text-align: center; font-family: Arial; font-weight: 300; font-size: 17px; color: #FFFFFF;
    cursor: pointer; height: 40px; margin: 7px; width: 91%; display: block; }.product-select:focus, .product-select:focus-visible { outline: none; box-shadow: none; border: none; }
.product-table { border-radius: 10px; border: 5px solid #C4C8CE; background-color: #FFFFFF; width: 169px; padding-top: 10px; }
.unasigned-product-total-amount { border-radius: 25px; background-color: #CCCCCC; font-size: 40pt; padding: 0 20px; height: 80px;  width: 300px; text-align: right; }

/* SEARCH BAR */
.search-bar-input { border-radius: 5px; border: 1px solid #D5D8DC; background-color: #F6F7F8; text-align: left; padding-left: 7px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #818181;
    margin-right: 2px; height: 45px; width: 266px; }
.search-bar-button { border-radius: 5px; border: none; background-color: #488C4C; font-size: 20px; color: white; height: 47px; width: 47px; }

/* SEARCH FILE CONTAINER */
.search-table { border-radius: 10px; border: 5px solid #C4C8CE; background-color: #EEEEEE; text-align: center; width: 345px; padding: 7px; }
.search-image { border-radius: 5px; border: 3px solid #FFFFFF; height: 125px; width: 125px; margin-right: 7px; }
.search-button { border-radius: 7px; background-color: #488C4C; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: 300; color: #FFFFFF; cursor: pointer;
    height: 50px; width: 100%; display: block; }

/* SEPARATOR */
   .separator-0 { height: 6px; background-color: #D5D8DC; }
.separator-thin { height: 3px; background-color: #D5D8DC; }

/* STORES */
.stores-button { border-radius: 7px; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 20px; color: #FFFFFF; cursor: pointer;
    height: 50px; width: 100%; display: block; margin-top: 10px; }
.stores-grid { display: grid; grid-template-columns: repeat(1, 1fr); text-align: center; }
.stores-image { border-radius: 5px; border: 2px solid #FFFFFF; text-align: left; display: block; height: 125px; width: 125px; }
.stores-logo { height: 25px; width: 125px; margin-top: 10px; }
.stores-table { border-radius: 10px; border: 5px solid #ACB1B9; background-color: #EEEEEE; width: 345px; margin-bottom: 10px; padding: 10px; }

/* STORE SECTIONS */
.store-sections-table { border-radius: 7px; border: 1px solid #D5D8DC; background-color: #EEEEEE; padding: 10px; height: auto; width: 345px; }
.store-sections-image { border-radius: 10px; border: 4px solid #FFFFFF; max-height: 200px; max-width: 300px; }

/* TABLES */
.table-main { border-radius: 10px; background-color: #FFFFFF; width: 365px; }
.table-2nd { border-radius: 10px; border: 5px solid #ACB1B9; width: 345px; padding-top: 10px; padding-bottom: 10px; }
.table-3rd { border-radius: 7px; border: 1px solid #DDDDDD; background-color: #EEEFF1; height: auto; width: 325px; }
.table-title { border-radius: 5px; border: 1px solid #DDDDDD; background-color: #F6F7F8; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; color: #009846; height: 75px; width: 330px; padding: 10px; }

/* TOTAL CONTAINER */
.total-container { border-radius: 5px; border: 1px solid #DDDDDD; background-color: #EEEEEE; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 22px; color: #000000; 
    height: 65px; width: 313px; margin-bottom: 8px; display: flex; justify-content: space-between; /* izquierda / derecha */ align-items: center; /* centrado vertical */ padding: 0 15px; /* espacio interno */ }
    
/* UPPER CASES */
.only-mayus { text-transform: uppercase; }