@import url("base.css?v=5");

:root {
  --color-text: #333;
  --color-background: #eee;
  --color-concesion:#f3ffe8;
  --color-obra: #ddfeff;
  --color-proyecto: #ffffcc;
  --color-permiso: #ffcceb;

  --pane-padding: 5px 42px;
  --gutter: 0.8em;
  /*--lanes-color: #ffd8b1;*/
  --concesiones-color: #efffe1;

  --color-sincomenzar: #30acff;
  --color-encurso: #ffcc00;
  --color-detenido: #f01d1d;
  --color-finalizado: #19cb41;
}


.hidden {
    display: none;
}

/* marcadores SVG de colores */
div.sin-comenzar {
    fill: currentColor;
    color: var(--color-sincomenzar);
}
div.en-curso {
    fill: currentColor;
    color: var(--color-encurso);
}
div.detenido {
    fill: currentColor;
    color: var(--color-detenido);
}
div.finalizado {
    fill: currentColor;
    color: var(--color-finalizado);
}
.leyenda > * {
    display: inline-block;
    vertical-align: middle;
}
.leyenda svg {
    width: 30px;
    height: 30px;
}
.leyenda {
    margin: 0.5rem;
}
.sin_comenzar-label {
    background-color: var(--color-sincomenzar);
}
.en_curso-label {
    background-color: var(--color-encurso);
}
.detenido-label {
    background-color: var(--color-detenido);
}
.finalizado-label {
    background-color: var(--color-finalizado);
}

.paneles {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
}
.paneles .panel {
    flex: 1 1 auto;
    margin: var(--gutter);
    width: 15rem;
}


a {
    text-decoration: none;
}
a:link {
    /*color: #008673;*/
}
a:hover {
    text-decoration: underline;
    background: ;
}
a:visited {
    /*color: #004633;*/
}

img.icon {
    width: 1.5em;
    height: 1.5em;
}


/*    color: #39aa0f; */

section.obra h3 {  background: var(--color-obra); }
section.proyecto h3 {  background: var(--color-proyecto); }
section.concesion h3 {  background: var(--color-concesion); }
section.permiso h3 {  background: var(--color-permiso); }

/*
div.square {
    width: 50%;
    padding-bottom: 50%;
    position: relative;
    background: blue;
}
div.square > div {
    position: absolute;
    top: 0;  bottom: 0;  left: 0;  right:0;  stretch to parent
}*/

#map {
    height: 500px;
    width: calc(100% - 1cm);  space left for touch devices
}

section.lanes h3 {
    background: var(--lanes-color);
}
section.facility h3 {
    background: var(--faciliy-color);
}

li.admin {
    float: right;
}

.element {
    /* background-color: #eee; */
    padding: 10px;
}

.gallery div, .gallery img {
    display: inline-block;
    margin: var(--gutter);
}

.gallery > div {
    background-color: #eee;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    border-radius: 0.4em;
    /* max-width: 200px; */
}
.gallery > div > img {
    flex: 0 0 auto;
}
.gallery > div > div {
    flex: 1 1 60%;
}

.pictures {
    text-align: center;
}
.picture {
    display: inline-block;
    vertical-align: top;
}
.picture p {
    width: 120px;
}


.tolllist th:nth-child(2),
.tolllist td:nth-child(2) {
    text-align: left;
    /*padding-left: 3em;*/
    width: 10%;
}

/*dl.data > div {
    display: inline-block;
    margin: 0 2em 0 2em;
    vertical-align: top;
}*/
dl.data {
    display: inline-block;
    vertical-align: top;
    margin-left: 2em;
    margin-right: 2em;
    margin-bottom: 0.5em;
    margin-top: 0;
}
dl.data dd {
    margin-bottom: 0.5em;
}


ul.data {
    list-style-type: none;
    /*column-count: 4;*/
    column-width: 15em;
}
ul.data h5 {
    display: inline-block;
    font-size: 1em;
    font-weight: bold;
    min-width: 8em;
    padding: 0;
    margin: 0.2em;
}
ul.data h5:after {
    content: ":";
}
ul.data div {
    display: inline-block;
}

table.properties {

}
table.properties th {
    text-align: right;
    padding-right: 2em;
}
table.properties th:after {
    content: ":";
}
table.properties tr {
    height: 2.5em;
}
table.properties td {
    /*border-top: 2px solid #eee;*/
}
.id {
    white-space: nowrap;
}

/* Vue component avances */
/* .error {
    background: red;
} */
input[type=text].error {
    border: 1px solid red;
}
/* para mostar los <span> como <input> al editarlos en componentes vue */
[contenteditable=true]:focus {
    overflow: hidden;
    border: 1px solid transparent;

    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;

    /* white-space: nowrap;
    border-radius: 10px; */
}
.vuecomp input {
    height: 2rem;
}
.vuecomp button,
.vuecomp .btn {
    padding: 0.3rem 1.0rem;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}


.avances {
    display: flex;
    flex-wrap: wrap;
    margin: 1rem 2rem;
}
.avances > div {
    flex: 1 1 auto;
    margin: var(--gutter);
    width: 15rem;
}

/* listado de visitas de obra en home */
.card {
    display: flex;
    align-items: stretch;
    background: white;
    width: 100%;
    margin: 1rem 0;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
}
.card > :nth-child(1) {
    flex: 0 0;
    white-space: nowrap;
    background-color: #e4e7e8;
    padding: 0.5em 0.5em;
}
.card > * {
    flex: 1 1 90%;
    padding: 0.5em 1em;
}
.card p {
    margin: 0rem;
}
.card .thumbs {
    margin: 0.5rem 0;
}


.mosaico {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 1rem;
    /*
    grid-auto-columns: 10rem;
    grid-auto-rows: 10rem;
    grid-auto-flow: row;
   */
}

.proyecto-card {
    padding: 0.5em;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);
}

.proyecto-card p {
    margin: 0;
    font-size: 0.9rem;
}
.proyecto-card a {
    font-size: 1rem;
}



progress {
    /* see <progress> and <meter> HTML5 elements
        https://css-tricks.com/html5-progress-element/   */
    /* Reset the default appearance */
    appearance: none;
  
    width: 80%;
    height: 1rem;
    
    /* only for Firefox */
    border: none;  /* Get rid of default border in Firefox. */
    -moz-appearance: none;
    background-color: #eee;
    border-radius: 8px;
    /* only for Webkit/blink */
    -webkit-appearance: none;
}

/* for Webkit/Blink */
progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 8px;
}

progress[value]::-webkit-progress-value {
    border-radius: 8px;
    background-color: #40aaca;
}

/* for Firefox */
progress[value]::-moz-progress-bar {
    border-radius: 8px;
    background-color: #40aaca;
}