/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[3]!./src/app/page.module.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
.page_page__ZU32B {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh; 
  overflow: hidden; 
}

.page_header__kVzhN {
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  background-color: #1b1b1b;
  padding: 10px;
  color: #fff;
  border-bottom: 2px solid #333;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.page_footer__sHKi3 {
  background-color: #1b1b1b;
  color: rgb(138, 138, 138);
  padding: 10px;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  border-top: 3px solid #333;
  box-shadow: 10px 4px 10px rgba(34, 34, 34, 0.3);
}

.page_title__3jonF {
  margin: 0;
  padding-left: 20px;
}

.page_container__aoG4z {
  display: flex;
  width: 100%;
  height: 100%; 
  box-sizing: border-box;
}

.page_data__0KoIv {
  display: flex;
  flex-basis: 50%;
  flex-direction: column;
  max-width: 100%; 
  overflow-x: hidden; 
  padding: 20px; 
  border-right: 2px solid #333;
}

.page_inputContainer__8v5CU {
  display: flex;
  align-items: center;
  width: 100%;
}


.page_input___cVLA{
  width: 100%;
  padding: 10px;
  margin-bottom: 20px; 
  border: 1px solid #555;
  border-radius: 4px 0 0 4px ;
  background-color: #222;
  color: #ffffff;
  font-size: 14px;
  transition: border-color 0.3s, background-color 0.3s;
}

.page_buttonsubmit__nAz2C {
  border: 1px solid #0d246e;
  border-radius: 0 4px 4px 0; 
  margin-bottom: 20px; 
  font-size: 14px;
  padding: 10px;
  cursor: pointer;
  background-color: #4A90E2;
  border-color: #4A90E2;
  color: #fff;
}

.page_input___cVLA::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.page_input___cVLA:focus, .page_buttonsubmit__nAz2C:focus {
  outline: none;
  border-color: #4A90E2;
  background-color: #333;
}

.page_error__Jil8M {
  color: #ff4d4d; 
  font-size: 14px;
  background-color: rgba(255, 77, 77, 0.1); 
  border: 1px solid #ff4d4d; 
  border-radius: 4px; 
  padding: 10px; 
  text-align: center; 
  animation: page_fadeIn__wvzG6 0.7s; 
}

@media (max-width: 768px) {
  .page_container__aoG4z {
    flex-direction: column; 
  }

  .page_data__0KoIv, .page_automata-container__qX1gC {
    flex-basis: 100%; 
    height: 50vh; 
  }

  .page_automata-container__qX1gC {
    height: 50vh; 
  }
}

@keyframes page_fadeIn__wvzG6 {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

.page_navbar__chktt {
  position: relative;
}

.page_methodButtons__J2XXI {
  display: flex;
  justify-content: center; 
  gap: 10px; 
}

.page_menuItem__cJDSN {
  background-color: #2a2a2a;
  color: #fff;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.page_menuItem__cJDSN:hover {
  background-color: #9b3b04; 
  box-shadow: 0px 0px 10px #be4f0e;
}

.page_active__q3_T3 {
  background-color: #be4f0e; 
  box-shadow: 0px 0px 10px #c45819;
  border:2 px solid #be4f0e;
}

@media (max-width: 768px) {
  .page_dropbtn__3AvEl {
    font-size: 14px;
    padding: 8px 16px;
  }

  .page_menuItem__cJDSN {
    font-size: 12px;
    padding: 10px 12px;
  }
}

.page_information__jA9OB {
  display: flex;
  flex-direction: column; 
  overflow-y: auto; 
  max-height: 83vh;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[7].use[3]!./src/app/components/component.module.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
/* Transition Table*/
.component_transitionsTable__tSXGi, .component_statesTable__ZiarR{
  justify-content: center;
  padding: 20px;
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.component_transitionsTable__tSXGi{
  margin-top: 15px;
}

.component_statesTable__ZiarR{
  margin-top: 20px;
  margin-bottom: 20px;
}

.component_transitionsTable__tSXGi h2, .component_statesTable__ZiarR h2{
  color: #ffffff;
  text-align: center;
  margin-bottom: 15px;
}

.component_wrapper__JF2_n {
  display: flex;
  justify-content: center;
  max-width: 100%;
  overflow-x: auto; /* Horizontal scrolling */
}

.component_tableContainer__D6uaS {
  display: flex; 
  justify-content: flex-start; 
  max-height: 61vh;
  width: 100%;
  overflow-y: auto;
  overflow-x: auto; /* Ensure horizontal scrolling is enabled */
  border: 1px solid #555; 
  border-radius: 8px; 
  position: relative;
}

.component_table__U52ug {
  width: 100%; /* Allow the table to grow based on content */
  border-collapse: collapse;
}

.component_table__U52ug th, .component_table__U52ug td {
    padding: 12px;
    text-align: center;
    border: 1px solid #555;
    color: #ffffff;
}

.component_table__U52ug th {
    background-color: #333;
    color: #ffffff;
    font-weight: bold;
    top: 0; 
}

.component_table__U52ug tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.1);
}

.component_table__U52ug tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

.component_table__U52ug tr:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s ease;
}

.component_automatacontainer__DKTY8{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.component_inputContainer__D_j8r, .component_acceptance__POrSh {
    flex: 1 1; 
}

.component_infoContainer__jYlua {
    margin: 20px;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    gap: 20px; 
}

.component_acceptance__POrSh {
    display: flex;
    justify-content: space-around; 
    align-items: center;
    gap: 20px; 
    padding: 10.5px 15px;
    border-radius: 4px;
    border: 1px solid #444; 
    background-color: rgba(255, 255, 255, 0.1);
}

.component_option__5HXpl {
  display: flex;
  align-items: center;
  gap: 10px; 
}

.component_indicator__01xgl {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: grey; 
}

.component_text__JrHxq {
  font-weight: bold;
}

.component_input__Yrcsh {
  flex: 1 1;
  padding: 12px 15px;
  border-radius: 4px 0 0 4px ;
  border: 1px solid #444; 
  background-color: #222;
  color: #fff; 
  outline: none; 
  transition: border 0.3s ease, box-shadow 0.3s ease;
}

.component_input__Yrcsh::placeholder {
  color: #aaa; 
}

.component_input__Yrcsh:focus {
  border: 1px solid  #4A90E2; 
  box-shadow: 0 0 5px  #123761(76, 175, 80, 0.5); 
}

/* Estilo del botón submit */
.component_buttonsubmit__hHwja {
  padding: 12px 20px;
  background-color:  #4A90E2; 
  color: white; 
  border: 1px solid  #4A90E2; 
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto hover en el botón */
.component_buttonsubmit__hHwja:hover {
  background-color:  #205fa7; 
  box-shadow: 0 4px 8px  #235792(76, 175, 80, 0.3); 
}


/* Alphabet*/
.component_Alphabet__0Izz7 {
    position: relative;
    flex-grow: 1; 
    text-align: center; 
    font-size: larger;
    color: #fff;
}

.component_title__i7wWc {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.component_disabled__gbmfs {
  background-color: rgba(255, 255, 255, 0.041); 
  color: rgba(255, 255, 255, 0.5); 
  pointer-events: none; 
  border: 1px solid rgba(255, 255, 255, 0.3); 
}

.component_cancelButton__oN684 {
  position: absolute;
  bottom: 5vh; 
  left: 1vw; 
  background-color: red;
  color: white;
  border: none;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem; 
  cursor: pointer;
  z-index: 10;
  font-size: 1rem; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  transition: background-color 0.3s ease, transform 0.2s ease; 
}

.component_cancelButton__oN684:hover {
  background-color: darkred;
  transform: scale(1.05); 
}


.component_identicalStatesSection__UzVCH {
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.component_identicalStatesSection__UzVCH h2 {
  color: #ffffff;
  text-align: center;
  margin-bottom: 15px;
}

.component_list__5fa57 {
  list-style-type: none; 
  padding: 0; 
}

.component_listItem__GgEeO {
  background-color: #464646;
  border: 1px solid #ccc; 
  border-radius: 5px;
  padding: 10px; 
  margin: 5px 0; 
  color: #fff;
}