@import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');

escaque = 93%
sep_escaque = 7%
sep_cajas = 2%
margen_sup_caja = 1%
margen_tit_dim = 2%
sep_sup_titulo = 0

titulo = 10%

tamannio-letra(titulo_indicador, pastillas)
  .nombre-indicador
    font-size titulo_indicador
  .titulo-dimension
    font-size (titulo_indicador*1.7*pastillas/3)
  .caja-int-dimension
    grid-template-columns repeat(pastillas, 1fr)
  if pastillas == 3 
    div[mis-columnas="3"]
      display block
  if pastillas == 2
    div[mis-columnas="2"]
      display block

tres-columnas()

dos-columnas()

body
  background-color #f8f8f8

#pizarron
  font-family: 'Roboto', sans-serif;

  [mis-columnas]
    display none
  
  @media (min-width: 2060px)
    display grid
    grid-template-columns repeat(4, 1fr);
    tamannio-letra(0.7vw, 3)
  @media (min-width: 1560px) and (max-width: 2060px)
    display grid
    grid-template-columns repeat(3, 1fr);
    tamannio-letra(1vw, 3)
  @media (min-width: 1060px) and (max-width: 1560px)
    display grid
    grid-template-columns repeat(3, 1fr);
    tamannio-letra(1.4vw, 2)
  @media (min-width: 720px) and (max-width: 1060px)
    display grid
    grid-template-columns repeat(2, 1fr);
    tamannio-letra(2vw, 2)
  @media (min-width: 600px) and (max-width: 720px)
    display grid
    grid-template-columns repeat(1, 1fr);
    tamannio-letra(2.6vw, 3)
  @media                         (max-width: 600px)
    display grid
    grid-template-columns repeat(1, 1fr);
    tamannio-letra(3.6vw, 2)

  div
    x-border 1px solid gray
    x-border-radius 8px
  
  .nombre-dimension
    font-weight bold
  
  .nombre-indicador
    color white
    font-weight bold
    padding-left 5%
    padding-right (@padding-left / 2)
    padding-top 4%
    padding-bottom 3%
    min-height 30%
    x-background rgba(171,169,169,1)
    background linear-gradient(to bottom, rgba(171,169,169,1) 0%, rgba(171,169,169,0) 100%)
    x-background: linear-gradient(to bottom, rgba(171,169,169,1) 0%, rgba(171,169,169,0.32) 50%, rgba(171,169,169,0) 100%);
  
  .la-lista
    grid-column 2
    grid-row 1
    td
      min-height 28px
      height 28px
      vertical-align middle
      border-left 1px solid #e8e8e8
 
  tr:nth-child(even)
    td
      background-color #f0f0f0
  

  .titulo-dimension-contenedor
    padding-bottom 8%
    width 97%
    position relative
    margin margen_tit_dim
    margin-bottom sep_sup_titulo
    margin-left 3%

  .titulo-dimension
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    padding-top 6px
    overflow hidden
    x-color #666
    color #fefefe
  
  .caja-dimension
    overflow hidden
    margin (sep_cajas / 2)
    background-color #eee
    border-radius 10px
  
  .caja-int-dimension
    margin margen_sup_caja
    display grid
    align-items center
    justify-items center
  
  .caja-indicador-contenedor
    width 100%
    padding-bottom 100%
    position relative

  .caja-indicador
    left 0
    right 0
    top 0
    bottom 0
    position absolute
    overflow hidden
    margin (sep_escaque / 2)
    background-size contain
    background-repeat no-repeat
    background-position center 80%
    background-color #f8f8f8
    border-radius 10px

  [id-dimension]
    grid-row auto

.img-preview
  float left
  margin 12px

.MuiDialog-paperFullScreen
  .img-preview
    max-width 50%
    &[full-width=full]
      max-width 100%