:root {
  --background: #FFFFFF;
  --heading: #0D47A1;
  --text: #212121;
  --button: #1565C0;
  --focus: #FFB300;
  --card: #F5F5F5;
  --border: #BDBDBD;
}

body {
  background: var(--background);
  color: var(--text);
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

h1, h2, legend {
  color: var(--heading);
}

.skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  background: var(--button);
  color: white;
  padding: 0.75rem;
}

.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 4px solid var(--focus) !important;
  outline-offset: 4px;
}

.braille-text {
  font-size: 1.5rem;
  letter-spacing: 0.15rem;
}

.accessible-card,
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.accessible-card {
  max-width: 36rem;
}

.panel label {
  display: block;
  padding: 0.45rem 0;
}

.menu-button {
  width: 100%;
  min-height: 5rem;
  padding: 1rem;
  border: 2px solid var(--button);
  border-radius: 0.5rem;
  background: var(--button);
  color: white;
  text-align: left;
  font-weight: 700;
}

.menu-button.secondary {
  background: #424242;
  border-color: #424242;
}

.menu-button:disabled {
  background: #EEEEEE;
  color: #424242;
  border-color: var(--border);
  opacity: 1;
}

#timer-display {
  display: inline-block;
  font-size: 2rem;
  padding: 0.5rem;
  border: 2px solid var(--heading);
  border-radius: 0.4rem;
}

#global-status {
  min-height: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}


.conversation-log {
  border: 1px solid var(--border);
  background: #FFFFFF;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  min-height: 10rem;
  max-height: 26rem;
  overflow-y: auto;
}

.message {
  border-left: 5px solid var(--heading);
  background: var(--card);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

.message-user {
  border-left-color: #424242;
}

.message-label {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

#evaluation-content dt{font-weight:700;color:#0D47A1;margin-top:0.75rem}
#evaluation-content dd{margin-left:0;margin-bottom:0.5rem}

#audio-start-status{min-height:1.5rem;font-weight:700}

.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.level-guidance-summary{
  border:2px solid currentColor;
  border-radius:.5rem;
  padding:1rem;
  margin:1rem 0;
}

.level-fieldset{
  border:0;
  padding:0;
  margin:0 0 1rem;
}

[data-level][aria-pressed="true"]{
  outline:4px solid #ffeb3b;
  outline-offset:3px;
  font-weight:700;
}

.audio-response-controls{
  margin:1rem 0;
}

.audio-response-controls label{
  display:block;
  margin-bottom:.75rem;
}

#send-message-instruction{
  font-weight:700;
  margin-top:.75rem;
}

#microphone-toggle-button[aria-pressed="true"]{
  outline:4px solid #ffeb3b;
  outline-offset:4px;
  font-weight:700;
}

#voice-status{
  font-weight:700;
  min-height:2rem;
}

#realtime-audio{
  width:100%;
  margin:1rem 0;
}

#english-level{
  width:100%;
  min-height:3rem;
  padding:.65rem;
  font-size:1rem;
}

#english-level:focus{
  outline:4px solid #ffeb3b;
  outline-offset:3px;
}

#level-selection-help{
  margin-top:.5rem;
}


/* Controles compactos sin reducir la legibilidad ni el área táctil mínima */
.form-control-compact {
  width: min(100%, 24rem);
  min-height: 2.75rem;
}

.button-compact {
  width: auto;
  min-width: 9rem;
  min-height: 2.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (max-width: 40rem) {
  .form-control-compact {
    width: 100%;
  }
}