/*
 * Base del tema. Va en una capa (@layer) para que el CSS de LMS Core, que no usa capas, gane siempre,
 * igual que ganaba sobre el reset de Bricks. Conserva solo las reglas de ese reset de las que dependían
 * pantallas del LMS que no definen su propio estilo (etiquetas, select, textarea, botones, imágenes,
 * enlaces, tablas). Tamaño de letra raíz y caja: los fija lms-frontend.css.
 */
@layer acg-base {
  html { -webkit-text-size-adjust: 100%; line-height: 1.15; }
  *, ::before, ::after { box-sizing: border-box; }
  * { border-color: #dddedf; }
  body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #fff;
    color: #363636;
    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
  }

  h1, h2, h3, h4, h5, h6 { margin: 0; text-rendering: optimizeLegibility; }
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: currentcolor; }
  h1 { font-size: 2.4em; }
  h2 { font-size: 2.1em; }
  h3 { font-size: 1.8em; }
  h4 { font-size: 1.6em; }
  h5 { font-size: 1.3em; }
  h6 { font-size: 1.1em; }
  h1, h2, h3, h4, h5, h6 { line-height: 1.4; }
  :where(p) { margin-block: 0 1.2em; }
  :where(p:last-of-type) { margin-block-end: 0; }

  :where(a) { border-color: currentcolor; color: currentcolor; cursor: pointer; text-decoration: none; }
  img { border-style: none; height: auto; max-width: 100%; vertical-align: middle; }
  audio, iframe { max-width: 100%; }
  svg:not([width]) { min-width: 1em; }
  svg:not([height]) { min-height: 1em; }
  small { font-size: 80%; }
  code, kbd, samp { font-family: monospace; font-size: 1em; }
  hr { border: none; border-top: 1px solid #dddedf; margin: 1em 0; height: 0; }
  table { width: 100%; }
  [hidden], template { display: none; }

  button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    text-align: inherit;
  }
  button, input { overflow: visible; }
  button, select { text-transform: none; }
  button { border: none; cursor: pointer; outline: none; padding: 0; }
  [type=button], [type=reset], [type=submit], button { -webkit-appearance: button; }
  [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; }
  .input, input:not([type=submit]), select, textarea {
    border-style: solid;
    border-width: 1px;
    box-shadow: none;
    color: currentcolor;
    font-size: inherit;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    width: 100%;
  }
  input[type=range] { border: none; height: auto; line-height: 1; padding: 0; }
  input[type=button], input[type=checkbox], input[type=radio] { width: auto; }
  [type=checkbox], [type=radio], [type=submit], select { cursor: pointer; }
  [type=search] { -webkit-appearance: textfield; outline-offset: -2px; }
  ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
  label { color: #9e9e9e; display: block; font-weight: 400; margin-bottom: 5px; }
  select {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: linear-gradient(45deg, transparent 50%, gray 0), linear-gradient(135deg, gray 50%, transparent 0);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-repeat: no-repeat;
    background-size: 4px 4px, 4px 4px;
    border-radius: 0;
  }
  textarea { height: auto; line-height: inherit !important; min-height: 90px; overflow: auto; padding: 10px 12px; }
  ::placeholder { color: #9e9e9e; }
  :focus-visible { outline: auto; }

  /* Enlace de salto: invisible hasta recibir el foco con el teclado. Dentro del shell del LMS se oculta
     (el shell trae el suyo, UX-004). */
  .skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
    padding: 5px 10px;
    background: #000;
    color: #fff;
    font-weight: 700;
    border-bottom-right-radius: 8px;
  }
  .skip-link:focus { clip: auto; width: auto; height: auto; overflow: visible; }
}

/* 404 del tema: clases propias, fuera de la capa para que no las pise el estilo de enlaces del LMS. */
.acg-not-found {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px;
  text-align: center;
  background: var(--color-surface, #f8f7f4);
}
.acg-not-found h1 { color: var(--color-secondary, #002d62); }
.acg-not-found p { color: var(--color-on-surface-variant, #555); margin: 0; }
.acg-not-found-link {
  margin-top: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md, 8px);
  background: var(--color-secondary, #002d62);
  color: #fff;
  font-weight: 700;
}