@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.1/cdn/themes/dark.css';
@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.1/cdn/themes/light.css';

@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap';

* {
  margin: 0;
  padding: 0;
}

*,
*::after,
*::before {
  position: relative;
  box-sizing: border-box;
}

:not(:defined) {
  visibility: hidden;
}

:root, :host {
  --sl-font-sans: 'Roboto' !important;
  /* Redefinimos la fuente sans-serif por defecto de Shoelace */

  --sl-utdt-heading-font-weight: var(--sl-font-weight-bold);
  --sl-utdt-paragraph-font-weight: var(--sl-font-weight-normal);
  --sl-utdt-bold-paragraph-font-weight: var(--sl-font-weight-bold);
  --sl-utdt-secondary-paragraph-font-weight: var(--sl-font-weight-normal);
  --sl-utdt-secondary-bold-paragraph-font-weight: var(--sl-font-weight-bold);
  --sl-utdt-secondary-semibold-paragraph-font-weight: var(--sl-font-weight-semibold);
  --sl-utdt-tertiary-paragraph-font-weight: var(--sl-font-weight-normal);
  --sl-utdt-tertiary-bold-paragraph-font-weight: var(--sl-font-weight-bold);
  --sl-utdt-tertiary-semibold-paragraph-font-weight: var(--sl-font-weight-semibold);

  --sl-utdt-link-font-weight: var(--sl-font-weight-semibold);

  --sl-utdt-color-blanco: #FFFFFF;
  --sl-utdt-color-negro: #424242;
  --sl-utdt-color-gris: #EEEEEE;
  --sl-utdt-color-gris-light: #F9F9F9;
  --sl-utdt-color-gris-dark: #B7B7B7;

  --sl-utdt-color-verde-agua: #00C4B3;
  --sl-utdt-color-verde-agua-light: #AAE5E0;
  --sl-utdt-color-verde-agua-dark: #00998C;
  --sl-utdt-color-magenta: #E31D93;
  --sl-utdt-color-magenta-light: #F780C7;
  --sl-utdt-color-magenta-dark: #BB1177;
  --sl-utdt-color-amarillo: #F5A800;
  --sl-utdt-color-amarillo-light: #F5DBA3;
  --sl-utdt-color-amarillo-dark: #D69300;

  --sl-utdt-color-escala-magenta: #F780C7;
  --sl-utdt-color-escala-naranja: #F6B7B1;
  --sl-utdt-color-escala-amarillo: #F4DBA3;
  --sl-utdt-color-escala-verde: #CEE0C2;
  --sl-utdt-color-escala-verde-agua: #AAE5E0;

  --sl-utdt-color-escuela-economia-primary: rgb(32, 157, 174);
  --sl-utdt-color-escuela-economia-secondary: rgb(32, 157, 174, 40%);
  --sl-utdt-color-escuela-economia-tertiary: rgb(32, 157, 174, 20%);
  --sl-utdt-color-escuela-arte-primary: rgb(168, 168, 167);
  --sl-utdt-color-escuela-arte-secondary: rgb(168, 168, 167, 40%);
  --sl-utdt-color-escuela-arte-tertiary: rgb(168, 168, 167, 20%);
  --sl-utdt-color-escuela-politica-primary: rgb(86, 136, 190);
  --sl-utdt-color-escuela-politica-secondary: rgb(86, 136, 190, 40%);
  --sl-utdt-color-escuela-politica-tertiary: rgb(86, 136, 190, 20%);
  --sl-utdt-color-escuela-historia-primary: rgb(245, 170, 40);
  --sl-utdt-color-escuela-historia-secondary: rgb(245, 170, 40, 40%);
  --sl-utdt-color-escuela-historia-tertiary: rgb(245, 170, 40, 20%);
  --sl-utdt-color-escuela-matematica-primary: rgb(86, 37, 130);
  --sl-utdt-color-escuela-matematica-secondary: rgb(86, 37, 130, 40%);
  --sl-utdt-color-escuela-matematica-tertiary: rgb(86, 37, 130, 20%);
  --sl-utdt-color-escuela-negocios-primary: rgb(137, 181, 217);
  --sl-utdt-color-escuela-negocios-secondary: rgb(137, 181, 217, 40%);
  --sl-utdt-color-escuela-negocios-tertiary: rgb(137, 181, 217, 20%);
  --sl-utdt-color-escuela-gobierno-primary: rgb(171, 194, 39);
  --sl-utdt-color-escuela-gobierno-secondary: rgb(171, 194, 39, 40%);
  --sl-utdt-color-escuela-gobierno-tertiary: rgb(171, 194, 39, 20%);
  --sl-utdt-color-escuela-derecho-primary: rgb(175, 144, 191);
  --sl-utdt-color-escuela-derecho-secondary: rgb(175, 144, 191, 40%);
  --sl-utdt-color-escuela-derecho-tertiary: rgb(175, 144, 191, 20%);
  --sl-utdt-color-escuela-arquitectura-primary: rgb(210, 39, 48);
  --sl-utdt-color-escuela-arquitectura-secondary: rgb(210, 39, 48, 40%);
  --sl-utdt-color-escuela-arquitectura-tertiary: rgb(210, 39, 48, 20%);
  --sl-utdt-color-escuela-diseño-primary: rgb(39, 169, 103);
  --sl-utdt-color-escuela-diseño-secondary: rgb(39, 169, 103, 40%);
  --sl-utdt-color-escuela-diseño-tertiary: rgb(39, 169, 103, 20%);

  --sl-utdt-box-shadow-thead: var(--sl-shadow-small);
  --sl-utdt-box-shadow-alert: var(--sl-shadow-medium);
  --sl-utdt-box-shadow-elements: var(--sl-shadow-large);
  --sl-utdt-box-shadow-pop-up: var(--sl-shadow-x-large);

  --sl-overlayUTDT-background-color: hsl(0deg 0% 100% / 66%);
}

html {
  min-height: 100%;
  position: relative;

  font-weight: normal;
  font-family: var(--sl-font-sans);
  font-size: clamp(0.875rem, 0.8125rem + 0.2778vw, 1rem);

  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0 auto;
  overflow-x: hidden;
  color: var(--sl-utdt-color-negro);
  background-color: var(--sl-utdt-color-gris-light);
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.75rem, 1.6250rem + 0.5556vw, 2rem);
}

h2 {
  font-size: var(--sl-font-size-x-large)
}

h3 {
  font-size: var(--sl-font-size-large)
}

p {
  letter-spacing: var(--sl-letter-spacing-normal);
}

.text-small,
small,
.help-text {
  font-size: clamp(0.813rem, 0.7989rem + -0.2174vw, 0.625rem);
}

/* GRID 12 / 5 */
.grid125 {
  overflow: hidden;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(12, 1fr);
  background: #fff
}

.grid125>[class*="col"] {
  display: flex;
}

.grid125>[class*="col1"] {
  grid-column: span 1;
}

.grid125>[class*="col2"] {
  grid-column: span 2;
}

.grid125>[class*="col3"] {
  grid-column: span 3;
}

.grid125>[class*="col4"] {
  grid-column: span 4;
}

.grid125>[class*="col5"] {
  grid-column: span 5;
}

.grid125>[class*="col6"] {
  grid-column: span 6;
}

.grid125>[class*="col7"] {
  grid-column: span 7;
}

.grid125>[class*="col8"] {
  grid-column: span 8;
}

.grid125>[class*="col9"] {
  grid-column: span 9;
}

.grid125>[class*="col10"] {
  grid-column: span 10;
}

.grid125>[class*="col11"] {
  grid-column: span 11;
}

.grid125>[class*="col12"] {
  grid-column: span 12;
}

.grid125>.row1 {
  grid-row-end: span 1;
}

.grid125>.row2 {
  grid-row-end: span 2;
}

.grid125>.row3 {
  grid-row-end: span 3;
}

.grid125>.row4 {
  grid-row-end: span 4;
}

.grid125>.row5 {
  grid-row-end: span 5;
}

/* DIVIDERS */
.grid125>[class*="sep-"]::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0.5em;
  bottom: 0;
  left: 0.5em;
  border: 1px solid #fff;
  pointer-events: none
}

.grid125>[class*="sep-"]::after {
  content: '';
  position: absolute;
  top: 0.5em;
  right: 0;
  bottom: 0.5em;
  left: 0;
  border: 1px solid #fff;
  pointer-events: none
}

.grid125>[class*="sep-"]:not(.box) {
  height: 2px;
}

.grid125>[class*="-top"]:not([class*="-top5"])::before {
  border-top-color: pink;
}

.grid125>[class*="-right"]:not([class*="-right5"])::after {
  border-right-color: pink;
}

.grid125>[class*="-bottom"]:not([class*="-bottom5"])::before {
  border-bottom-color: pink;
}

.grid125>[class*="-left"]:not([class*="-left5"])::after {
  border-left-color: pink;
}

sl-dialog::part(panel) {
  max-width: 400px;
  position: relative;
  flex-direction: column;
  margin: var(--sl-spacing-2x-large);
  border-top: 4px solid var(--sl-utdt-color-verde-agua);
}

sl-dialog::part(body) {
  text-align: center;
  padding: var(--sl-spacing-2x-large) var(--sl-spacing-medium);
}

sl-dialog::part(header) {
  right: 0;
  position: absolute;
}

sl-dialog sl-icon {
  flex-shrink: 0;
  color: var(--sl-utdt-color-verde-agua);
  font-size: var(--sl-font-size-4x-large);
}

sl-dialog h4 {
  margin: var(--sl-spacing-large) 0 var(--sl-spacing-2x-small);
}

@media (min-width: 740px) {
  sl-dialog::part(panel) {
    margin: unset;
    max-width: unset;
    flex-direction: row-reverse;
  }

  sl-dialog::part(body) {
    text-align: left;
    padding: var(--sl-spacing-large);
  }

  sl-dialog::part(header) {
    position: unset;
  }

  sl-dialog .msg {
    display: flex;
    align-items: center;
  }

  sl-dialog sl-icon {
    margin-right: var(--sl-spacing-medium);
    font-size: var(--sl-font-size-2x-large);
  }

  sl-dialog h4 {
    margin: 0 0 var(--sl-spacing-2x-small);
  }

  sl-dialog::part(base) {
    align-items: start;
    justify-content: right;
    padding: var(--sl-spacing-large);
  }

  sl-dialog::part(overlay),
  sl-dialog::part(title) {
    display: none;
  }
}


@media (max-width: 768px) {
  .grid125 {
    grid-template-columns: repeat(5, 1fr);
  }

  .grid125::before {
    grid-column: span 5;
  }

  .grid125>[class*="col6"],
  .grid125>[class*="col7"],
  .grid125>[class*="col8"],
  .grid125>[class*="col9"],
  .grid125>[class*="col10"],
  .grid125>[class*="col11"],
  .grid125>[class*="col12"] {
    grid-column: span 5;
  }

  .grid125>[class*="-1"] {
    grid-column: span 1;
  }

  .grid125>[class*="-2"] {
    grid-column: span 2;
  }

  .grid125>[class*="-3"] {
    grid-column: span 3;
  }

  .grid125>[class*="-4"] {
    grid-column: span 4;
  }

  .grid125>[class*="-5"] {
    grid-column: span 5;
  }

  .grid125>[class*="-top"]:not([class*="-top12"])::before {
    border-top-color: pink;
  }

  .grid125>[class*="-right"]:not([class*="-right12"])::after {
    border-right-color: pink;
  }

  .grid125>[class*="-bottom"]:not([class*="-bottom12"])::before {
    border-bottom-color: pink;
  }

  .grid125>[class*="-left"]:not([class*="-left12"])::after {
    border-left-color: pink;
  }

}

/* UTDT buttons */

sl-button::part(base) {
  transition:
    color var(--sl-transition-medium) ease-in-out,
    border-color var(--sl-transition-medium) ease-in-out,
    background-color var(--sl-transition-medium) ease-in-out;
}

/* UTDT forms */

form {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sl-spacing-medium);
  --sl-input-required-content-color: var(--sl-color-danger-700);
}

form:not(.utdt-web-form) {
  padding: var(--sl-spacing-x-large);
  border-radius: var(--sl-border-radius-large);
  border: .2rem solid var(--sl-color-neutral-200);
}

form:has([data-user-invalid]) { border-color: var(--sl-color-danger-300); }
form:not(:has([data-invalid]))form:has([data-user-valid]) { border-color: var(--sl-color-success-300); }

.sh-form-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sl-spacing-large);
}

.sh-form-field.with-help {
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--sl-spacing-2x-small);
}

.sh-form-field > * { width: 100%; }

.utdt-web-form-field sl-input::part(base),
.utdt-web-form-field sl-select::part(combobox),
.utdt-web-form-field sl-textarea::part(base) {
  border-radius: unset;
  box-shadow: none !important;
}

.sh-form-field sl-input::part(clear-button) { color: var(--sl-color-neutral-400); }

.sh-form-field sl-radio-group::part(form-control-label) { margin-bottom: var(--sl-spacing-small); }

.sh-form-field sl-radio-group::part(form-control-input) {
  gap: var(--sl-spacing-medium);
  display: flex;
}

/* user invalid styles */

.utdt-web-form-field sl-input[data-invalid]::part(base),
.utdt-web-form-field sl-select[data-invalid]::part(combobox),
.utdt-web-form-field sl-textarea[data-invalid]::part(base)  {
  border-bottom-width: 1px;
  border-bottom-color: var(--sl-color-danger-600);
}

.sh-form-field sl-input[data-user-invalid]::part(base),
.sh-form-field sl-textarea[data-user-invalid]::part(base),
.sh-form-field sl-select[data-user-invalid]::part(combobox) {
  border-bottom-width: 1px;
  border-bottom-color: var(--sl-color-danger-600);
}

.sh-form-field [data-user-invalid]::part(form-control-help-text) { color: var(--sl-color-danger-700); }

.sh-form-field sl-checkbox[data-user-invalid]::part(control) { outline: none; }

.utdt-web-form-field sl-input:focus-within[data-invalid]::part(base),
.utdt-web-form-field sl-textarea:focus-within[data-invalid]::part(base),
.utdt-web-form-field sl-select:focus-within[data-invalid]::part(combobox),
.utdt-web-form-field sl-checkbox:focus-within[data-invalid]::part(control) {
  border-color: var(--sl-color-danger-600);
}

.sh-form-field sl-input:focus-within[data-user-invalid]::part(base),
.sh-form-field sl-textarea:focus-within[data-user-invalid]::part(base),
.sh-form-field sl-select:focus-within[data-user-invalid]::part(combobox),
.sh-form-field sl-checkbox:focus-within[data-user-invalid]::part(control) {
  border-color: var(--sl-color-danger-600);
  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-300);
}

/* User valid styles */

.utdt-web-form-field [data-optional][data-valid]::part(base)  {
  border-bottom-width: 1px;
  border-bottom-color: var(--sl-color-success-600);
}

.sh-form-field sl-input[data-user-valid]::part(base),
.sh-form-field sl-textarea[data-user-valid]::part(base),
.sh-form-field sl-select[data-user-valid]::part(combobox) {
  border-bottom-width: 1px;
  border-bottom-color: var(--sl-color-success-600);
}

.sh-form-field sl-checkbox[data-user-valid]::part(control) {
  background-color: var(--sl-color-success-600);
  outline: none;
}

.utdt-web-form-field sl-input:not([data-invalid]):focus-within::part(base),
.utdt-web-form-field sl-textarea:not([data-invalid]):focus-within::part(base),
.utdt-web-form-field sl-select:not([data-invalid]):focus-within::part(combobox),
.utdt-web-form-field sl-checkbox:not([data-invalid]):focus-within::part(control) {
  border-bottom-width: 1px;
  border-color: var(--sl-color-success-600);
}

.sh-form-field sl-input:focus-within[data-user-valid]::part(base),
.sh-form-field sl-textarea:focus-within[data-user-valid]::part(base),
.sh-form-field sl-select:focus-within[data-user-valid]::part(combobox),
.sh-form-field sl-checkbox:focus-within[data-user-valid]::part(control) {
  border-color: var(--sl-color-success-600);
  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-success-300);
}

.form-actions {
  gap: 1rem;
  display: flex;
  width: -moz-available;
  width: -webkit-fill-available;
}

.form-actions sl-button { width: 100%; }

.form-actions sl-button::part(label) {
  text-transform: uppercase;
  font-weight: var(--sl-font-weight-bold);
}

form:has([data-invalid]) sl-button[type="submit"] { cursor: not-allowed; }

form:has([data-invalid]) sl-button[type="submit"]::part(base) {
  opacity: .5;
  pointer-events: none;
}

/* ------------------------------------------------------------- */

.box {
  align-items: center;
  background-color: #fff;
  color: #000;
  padding: 0.75em;
  margin: 0;
}

/* EXAMPLE STYLES */
.example-card {
  padding: 0.25em 0;
  background: #fff;
  border-radius: 0.5em
}

.example-head .box {
  background-color: #eee;
}

@media (max-width: 768px) {
  .example-head {
    display: none;
  }

  .example-table>div {
    margin-bottom: 0.5em;
  }

}

sl-input {
  width: 100%
}