/* =========================================
   Configuración base y tipografía
   ========================================= */
:root {
  --color-primary: #0055FF;
  --color-accent:  #00FFBB;
  --color-muted:   #CCDEFF;
  --color-text:    #000000;
}

@font-face {
  font-display: swap;
  font-family: "n27regular";
  font-style: normal;
  font-weight: 100;
  src: url("https://assets.griddo.universidaduddi.com/pro-uddi/static/n27-regular-webfont-a7407afa9aacc8f7c017d43f2d36f356.woff2") format("woff2");
}

html,
body,
h1, h2, h3, h4, h5, h6 {
  font-family: "n27regular" !important;
  color: var(--color-text);
}

/* =========================================
   Títulos
   ========================================= */

/* Tamaños de títulos */
h1,
.h1,
h1.outcomes-management-title,
.quiz-header h1,
h1.css-eas2wa-view-heading,
h1.css-zsripb-view-heading,
h1.css-1ftbaxf-text,
h1.css-ok72d-view-heading,
h1.ic-Action-header__Heading,
h2.css-zsripb-view-heading,
#dashboard_header_container .css-zsripb-view-heading h1.pages.show .page-title {
  font-size: 36px;
  font-weight: normal;
  font-family: "n27regular" !important;
  line-height: 40px;
  color: var(--color-text);
}

h2,
.h2,
.quiz-header h2 {
  font-size: 22px;
  font-weight: normal;
}

/* =========================================
   Botones, controles y avisos
   ========================================= */

/* Logo lateral */
body #right-side .ic-sidebar-logo {
  display: none;
}

/* Avisos / alertas */
body .ic-notification,
body .css-1mwfoug-view-alert,
body .ic-flash-info,
body .ic-flash-success,
body .ic-flash-warning,
body .ic-flash-error,
body .css-fraws6-view-alert,
body .css-yoyplu-view-alert {
  box-shadow: none;
}

/* Botones base */
body .btn,
body .Button,
body .ui-button {
  border-radius: 0;
}

/* Botón ancho lateral */
body .button-sidebar-wide {
  background: var(--color-muted);
}

/* Iconos inline SVG */
body .css-1uay3eu-inlineSVG-svgIcon {
  color: var(--color-primary);
}
body .css-5sj4z-inlineSVG-svgIcon {
  fill: var(--color-primary);
}

/* Checkboxes / radios (facade generadas) */
body .css-fm3zjx-checkboxFacade__facade,
body .css-1hhaxgh-checkboxFacade__facade {
  background: var(--color-primary);
}

/* Contenidos de botones (clases generadas) */
.css-i4zl0d-baseButton__content {
  background-color: var(--color-primary);
  border: none;
}

/* Variantes con color de texto/ícono (clases generadas) */
.css-1e1ui47-baseButton__content,
.css-31gkb3-baseButton__iconSVG,
/* i[class*="icon-"],
i[class^="icon-"] */
{
  color: var(--color-primary);
}

/* Radio y superficies azules (clases generadas) */
.css-h56tce-radioInput__facade,
.css-1b9nv6a,
.css-i4zl0d-baseButton__content,
body .css-1b9nv6a {
  background-color: var(--color-primary);
}

/* Forzar bordes rectos en variantes de botones generadas */
.css-1ta5ds2-baseButton__content,
.css-12mg8q8-view--block-baseButton.css-12mg8q8-view--block-baseButton.css-12mg8q8-view--block-baseButton.css-12mg8q8-view--block-baseButton.css-12mg8q8-view--block-baseButton.css-12mg8q8-view--block-baseButton.css-12mg8q8-view--block-baseButton.css-12mg8q8-view--block-baseButton.css-12mg8q8-view--block-baseButton.css-12mg8q8-view--block-baseButton,
.css-cpvtio-baseButton__content,
.css-83dfl8-baseButton__content,
.css-bijiz5-view--inlineBlock-baseButton.css-1je73pj-view--inlineBlock-baseButton {
  border-radius: 0 !important;
}

/* Padding utilitario en contenedores con .pad-box */
body .pad-box {
  padding: 8px 14px;
}

/* Botón secundario / informativo */
.btn-info,
.Button--secondary {
  border: 2px solid var(--color-primary);
}

/* =========================================
   Listas y navegación
   ========================================= */
.list-view a.active {
  border-left: 2px solid var(--color-accent);
}

/* Iconos de tipo (IG/Canvas) */
.ig-published:not(.student-view) .ig-type-icon,
.context_module_item .type_icon,
.ic-DashboardCard__action {
  color: var(--color-primary);
}

/* Marca de fila publicada */
.ig-list .ig-row.ig-published:not(.student-view):before {
  background-color: var(--color-accent);
}

/* =========================================
   Utilidades de color
   ========================================= */
.azul  { color: var(--color-primary); }
.verde { color: var(--color-accent);  }

/* =========================================
   Tabla / “tiles” del curso
   ========================================= */

/* Contenedor de tiles */



.tiles-table tr {
  display: flex;
}

.tiles-table td {
  flex: 1;
  display: flex;
}

.tiles-table a.tile {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-direction: column;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
  box-sizing: border-box;
  min-height: 110px;
  text-align: center;
}



.tiles-table {
  border-collapse: collapse;
  max-width: 960px;
  margin: 0 auto;
}

.tiles-table td {
  text-align: center;
  padding: 12px;
  vertical-align: middle;
  min-width: 90px;
}

/* Botones tipo “card” */
.tiles-table a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 110px;
  padding: 10px 5px;
  border: 2px solid var(--color-primary);
  text-decoration: none;
  color: var(--color-primary);
  box-sizing: border-box;
  text-align: left;
  flex-direction: column;
  font-size:14px;
  line-height: 18px;
}
.tiles-table a:hover{
background-color: #e5eeff;
}
/* Iconografía en tiles */
.table-big-icons img {
  height: 40px;
}

.tiles-table .tile img {
  width: 40px;
  height: auto;
  display: block;
}

/* Evitar subrayado en contenido de usuario/MCE para tiles */
.user_content .tiles-table a:not(.btn):not(.Button):not(.ui-button):not([role="button"]),
.mceContentBody .tiles-table a:not(.btn):not(.Button):not(.ui-button):not([role="button"]) {
  text-decoration: none;
}




/* =========================================
   Responsive
   ========================================= */
@media (max-width: 820px) {
  .tiles-table {
    width: 100%;
  }

  .tile img {
    width: 56px;
    height: 56px;
  }

  .tiles-table td,
  .table-big-icons td {
    width: auto !important;
    display: flex;
  }

  .table-big-icons a {
    padding-right: 10px;
  }

    .tiles-table { width: 100%; }
  .tiles-table tr { 
    display: block;     /* deja de ser fila flex */
  }
  .tiles-table td {
    display: block;     /* cada celda ocupa todo el ancho */
    width: auto; 
    padding: 0 12px 12px;   /* separaciones entre cajas */
  }
  .tiles-table td:last-child { padding-bottom: 0; }
  .tiles-table a.tile {
    width: 100%;
    min-height: 110px;  /* sigue viéndose “card” */
  }

  
}