/* Estilos estandarizados para EMENU */

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

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

/* BODY */
.body { background-color: #C0C0C0; 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: 10px; border: 6px solid #CCCCCC; background-color: #999999; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 24px; color: #FFFFFF; cursor: pointer; height: 60px; width: 155px; }                
.button-small {  border-radius: 10px; border: 6px solid #CCCCCC; background-color: #999999; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 24px; color: #FFFFFF; cursor: pointer; height: 70px; width: 168px; }
.button-medium { border-radius: 10px; border: 6px solid #CCCCCC; background-color: #999999; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 24px; color: #FFFFFF; cursor: pointer; height: 70px; width: 334px; }
.button-large {  border-radius: 10px; border: 6px solid #CCCCCC; background-color: #999999; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 24px; color: #FFFFFF; cursor: pointer; height: 80px; width: 345px; }                
.button-xlarge { border-radius: 10px; border: 6px solid #CCCCCC; background-color: #999999; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 24px; color: #FFFFFF; cursor: pointer; height: 100px; width: 345px; }                

/* DRINKS */
.drinks-table { border-radius: 10px; border: 6px solid #CCCCCC; background-color: #FFFFFF; text-align: center;  height: auto; width: 168px; padding-top: 8px; }
.drinks-image { border-radius: 5px; height: 141px; width: 141px; margin-top: 5px; margin-bottom: 2px; }
.drinks-font-small { font-style: italic; font-size: 16px; }
.drinks-font-medium { font-style: italic; font-size: 19px; }
.drinks-button { border-radius: 5px; background-color: #CCCCCC; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 16px; color: #000000; cursor: pointer; height: 40px; width: 141px; margin-top: 6px; margin-bottom: 9px; }

/* MANAGER */
.mngr-edit-button {   border-radius: 5px; background-color: #008000; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 45px; width: 104px; margin-top: 6px; margin-bottom: 6px; }
.mngr-status-button { border-radius: 5px; background-color: #FF8000; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 45px; width: 104px; margin-top: 6px; margin-bottom: 6px; }
.mngr-delete-button { border-radius: 5px; background-color: #FF0000; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #FFFFFF; cursor: pointer; height: 45px; width: 104px; margin-top: 6px; margin-bottom: 6px; }
.mngr-image { border-radius: 0px; height: 107px; width: 158px; margin-left: 7px; margin-top: 0px; margin-right: 7px; margin-bottom: 2px; }
.mngr-text-container { border-radius: 2px; border: 2px solid #CCCCCC; background-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #808080; text-align: left; padding: 3px; margin-left: 7px; margin-right: 7px; }
.mngr-font { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 20px; color: #000000; margin-top: 4px; }
.mngr-status-font { font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #008000; }

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

/* FONTS */
.font-xsmall { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
.font-small  { font-family: Arial, Helvetica, sans-serif; font-size: 15px; }
.font-medium { font-family: Arial, Helvetica, sans-serif; font-size: 18px; }
.font-large  { font-family: Arial, Helvetica, sans-serif; font-size: 21px; }
.font-xlarge { font-family: Arial, Helvetica, sans-serif; font-size: 24px; }
.font-help { text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 14px; padding-left: 14px; }

/* FONT COLOR */
.color-1 { color: #818181; }
.color-2 { color: #000000; }
.color-3 { color: #FFFFFF; }

/* FORM */
.form-input  { border-radius: 7px;  border: 4px solid #CCCCCC; background-color: #F6F7F8; text-align: left; font-family: Arial; font-size: 20px; color: #818181; height: 55px; width: 320px; padding-left: 10px; }
.form-select { border-radius: 7px;  border: 4px solid #CCCCCC; background-color: #F6F7F8; text-align: left; font-family: Arial; font-size: 20px; color: #818181; height: 65px; width: 340px; padding-left: 10px; }
.form-under-space  { margin-bottom: 7px; }

/* FRAMES */
.frame-menu { border-radius: 10px; border: 6px solid #CCCCCC; background-color: #000000; text-align: center; height: auto; width: auto; margin-left: 10px; margin-right: 10px; }

/* IMAGES */
.image-logo { border-radius: 10px; border: 6px solid #CCCCCC; height: 250px; width: 333px; }
.image-menu { border-radius: 5px; height: 215px; width: 317px; }

/* MEDIUM TABLE / BUTTON */
.medium-button { border-radius: 5px; border: 5px solid #CCCCCC; background-color: #999999; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 24px; color: #FFFFFF; cursor: pointer; height: 70px; width: 318px; }

/* MENU */
.menu-frame { border-radius: 10px; border: 6px solid #CCCCCC; background-color: #FFFFFF; height: auto; width: auto; margin-left: 10px; margin-right: 10px; }

/* PRODUCT */
.product-table { border-radius: 10px; border: 6px solid #CCCCCC; background-color: #FFFFFF; text-align: center; height: auto; width: 345px; padding-top: 8px; }
.product-image { border-radius: 5px; height: 215px; width: 317px; margin-top: 5px; margin-bottom: 3px; }
.product-description { border-radius: 5px; border: 1px solid #CCCCCC; background-color: #F3F5F7; text-align: center; padding: 3px; margin-left: 7px; margin-bottom: 3px; margin-right: 7px; }
.product-button { border-radius: 5px; background-color: #CCCCCC; border: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; color: #000000; cursor: pointer; height: 50px; width: 317px; margin-top: 3px; margin-bottom: 8px; }

/* SEPARATOR */
.separator { height: 6px; background-color: #CCCCCC; }
.separator-thin { height: 1px; background-color: #CCCCCC; }

/* TABLES */
.table-main { border-radius: 15px; background-color: #000000; width: 365px; min-height: 90.5dvh; }
.table-     main { border-radius: 15px; background-color: #000000; margin: 0 auto; /* centra el contenido */ height: auto; min-height: 100%; max-height: auto; width: 365px; /* Dejar el ancho en 365px */ }
.table-2nd  { border-radius: 10px; border: 6px solid #CCCCCC; background-color: #FFFFFF; text-align: center; height: auto; width: 345px; }

/* TITLE */
.title-frame { border-radius: 10px; border: 6px solid #CCCCCC; background-color: #FFFFFF; height: auto; width: auto; margin-left: 10px; margin-right: 10px; }
.title-text-centered { display: flex; justify-content: center; /* Centra horizontalmente */ align-items: center; /* Centra verticalmente */ height: 90px; /* Ajusta la altura según tu diseño */ text-align: center; /* Alinea texto internamente */ }

/* TOTAL */
.total-frame { border-radius: 10px; border: 6px solid #CCCCCC; background-color: #FFFFFF; height: 80px; width: auto; margin-left: 10px; margin-right: 10px; }
.total-font { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 25px; color: #808080; }