/*
* Tema visual — piedra + pátina, minimalista y limpio.
* Solo se han tocado color, tipografía y radios de borde: ningún float,
* ancho, posición o comportamiento existente se ha modificado.
*/
:root{
    --stone: #EFECE4;
    --surface: #F8F6F1;
    --surface-raised: #FFFFFF;
    --ink: #211E1A;
    --ink-muted: #6B6255;
    --line: #DCD6C9;
    --patina: #4F6A5C;
    --patina-ink: #F8F6F1;
    --good-ink: #5C6E3A;
    --good-soft: #E1E6D2;
    --warn-ink: #8A6A2E;
    --warn-soft: #EFE1C7;
    --danger-ink: #A2503C;
    --danger-soft: #F1DAD3;
    --patina-soft: #DCE5DF;
    --radius: 8px;
    --radius-pill: 100px;
}

body{
    margin: 0;
    padding: 0;
    background-color: var(--stone) !important;
    font-size: medium;
    color: var(--ink);
    font-family: 'Work Sans', -apple-system, 'Segoe UI', sans-serif;
}

h1, h2, h3, #h1title, .titleh2, #modelo_nombre{
    font-family: 'Spectral', Georgia, 'Times New Roman', serif;
}

a{
    color: var(--patina);
}

.imagenlistado{
    max-width: 100px;
}

.bandera{
    max-width: 50px;
}
.banderamini{
    max-width: 15px;
}


/* LOGIN */
#containerform{
    margin: 1% 0;
}
#containerform label{
    color: var(--ink);
    font-size: x-large;
}
.botonnaranja{
    background-color: var(--patina);
    border: none;
    color: var(--patina-ink);
    padding: 5px 20px;
    -webkit-border-radius: var(--radius);
    -moz-border-radius: var(--radius);
    border-radius: var(--radius);
    font-size: x-large;
}
.borderdetail{
    border-bottom: 1px solid var(--line);
}
.verde{
    color: var(--good-ink);
}
.rojo{
    color: var(--danger-ink);
}
.azul{
    color: var(--ink);
}
a.ver{
    text-decoration: none;
    float: left;
    font-size: large;
    color: var(--ink);
    font-family: 'Work Sans', sans-serif;
    z-index: 300;
}
.enlacefichero{
    text-decoration: none;
    color: var(--ink);
    cursor: pointer;
}
.floatright{
    float: right;
}


.mrgbtm0{
    margin-bottom: 0px !important;
}
.mrgtop0{
    margin-top: 0px !important;
}
.pddng0{
    padding: 0 !important;
}
.pddngt1{
    padding-top: 1% !important;
}
/* Menú lateral */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: var(--surface);
    overflow-x: hidden;
    transition: 0.5s;
}


#menulateral{
    width: 15%;
    color: var(--ink-muted);
    background-position: right;
    border-right: 1px solid var(--line);
}

#containerinterior{
    width: 85%;
    transition: margin-left .5s;
    margin-left: 15%;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 0;
    overflow-x: hidden;
}

#menulateralsuperior{
    position: relative;
    float: left;
    width: 100%;
    padding: 10px 0;
    height: 90px;
    text-align: center;
    background-color: var(--surface);
    border-bottom: 1px solid var(--line);
}
.imagenpromo{
    height: 80px;
    text-align: center;
}

#menulateralsuperior svg{
    color: var(--patina);
}

#menulateralsuperior label{
    position: relative;
    float: left;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    color: var(--patina);
    font-size: larger;
}

#menulateralsuperior label span, #copydirection, #search{
    color: var(--patina);
}

#menulateralsuperior label svg:hover{
    cursor: pointer;
}

.margtopbott{
    margin-top: 10px;
    margin-bottom: 10px;
}



.itemmenu{
    position: relative;
    float: left;
    width: 94%;
    padding: 8px 8%;
}

.itemmenu a{
    color: var(--ink-muted);
    text-decoration: none;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
}

.itemmenu a:hover,
.itemmenu.active a{
    color: var(--patina);
}

#menuinterior{
    position: relative;
    float: left;
    width: 100%;
    height: 90px;
    background-color: var(--patina);
}

#menulogin{
    float: right;
    list-style: none;
    margin: 0 1% 0 0;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#menulogin li a{
    color: var(--patina-ink);
    text-decoration: none;
    font-family: 'Work Sans', sans-serif;
}

#menulogin li .dropdown-menu li a{
    color: var(--patina-ink);
}

#conenidointerior{
    position: relative;
    float: left;
    width: 100%;
    padding: 1%;
}
.div100{
    position: relative;
    float:left;
    width: 100%;
}
#divh1title{
    margin: 0;
    padding: 0 0 0 1%;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    height: 100%;
}

#h1title{
    margin: 0;
    padding: 0;
    font-size: large;
    font-weight: 600;
    color: var(--patina-ink);
    display: flex;
    justify-content: center;
    align-items: center;
}
a.btn{
    text-decoration: none;
}
.titlevolver{
    color: var(--patina-ink);
}

#h1title svg{
    font-size: xx-large;
}

#titleinterior{
    position: relative;
    float: left;
    width: 100%;
    padding: 0 0 1% 0;
    font-size: x-large;
    color: var(--patina);
    font-weight: 600;
}

#h1title .botonadd, #h1title .botonrecover, #h1title .botonnotice, #h1title .botonlist{
    background-color: var(--surface-raised);
    font-size: medium;
    font-weight: 600;
    -webkit-border-radius: var(--radius-pill);
    -moz-border-radius: var(--radius-pill);
    border-radius: var(--radius-pill);
    color: var(--patina);
    text-decoration: none;
    padding: 7px 10px;
}
#h1title .botonlist{
   background-color: var(--good-soft);
   color: var(--good-ink);
}
#h1title .botonnotice{
   background-color: var(--danger-soft);
   color: var(--danger-ink);
}
#h1title .botonadd svg, #h1title .botonrecover svg, #h1title .botonnotice svg{
    font-size: medium;
}
#h1title .botonrecover{
    background-color: var(--danger-soft);
    color: var(--danger-ink);
}
button.botonrecover{
    border-width: 0px;
}
#h1title #container_textbuscar{
    display: inline-block;
    -webkit-border-radius: var(--radius-pill);
    -moz-border-radius: var(--radius-pill);
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    margin-left: 15px;
}



#formularioedicion, #formulariototal{
    position: relative;
    float: left;
    width: 100%;
    background-color: var(--surface-raised);
    padding: 1%;
}

#formularioedicion input[type=text],
#formularioedicion input[type=password],
#formularioedicion input[type=email]{
    border: 1px solid var(--line);
    background-color: var(--surface);
    -webkit-border-radius: var(--radius);
    -moz-border-radius: var(--radius);
    border-radius: var(--radius);
}

#formularioedicion label, #formulariototal label{
    color: var(--ink);
    font-weight: 400;
    margin-bottom: 5px;
    display: inline-block;
}

#formulariototal label{
    margin-top: 3%;
}
.btneditar{
    -webkit-border-radius: var(--radius);
    -moz-border-radius: var(--radius);
    border-radius: var(--radius);
    color: var(--patina-ink);
    background-color: var(--patina);
    border: none;
    padding: 5px 20px;
}

.botontitle, .botontitleleft{
    text-decoration: none;
    float: right;
    padding: 5px 10px;
    font-size: large;
    border:none;
    font-weight: 400;
}
.botontitleleft{
    float: left;
}
.fondorojo{
    background-color: var(--danger-soft);
    color: var(--danger-ink);
}

.fondoverde{
    background-color: var(--good-soft);
    color: var(--good-ink);
}
.fondomorado{
    background-color: var(--surface);
    color: var(--ink-muted);
}
.fondogris{
    background-color: var(--surface);
    color: var(--ink-muted);
}


.fcolorrojo{
    color: var(--danger-ink);
}

.colorverde{
    color: var(--good-ink);
}
.colormorado{
    color: var(--ink);
}
.colorgris{
    color: var(--ink-muted);
}
.colorrojo{
    color: var(--danger-ink);
}

/* Tablas — id heredado (#tablelist) y las tablas Bootstrap (.table) que
   realmente usan las pantallas de listado (Monumentos, Recomendados…) */
#tablelist,
.table-responsive .table{
    background-color: var(--surface-raised);
}

#tablelist thead,
.table-responsive .table thead{
    background-color: var(--surface);
    color: var(--ink-muted);
    text-transform: uppercase;
    font-size: small;
    letter-spacing: .04em;
    border: none;
}
.table-responsive .table thead th{
    border-bottom: 1px solid var(--line);
    font-weight: 600;
}

#tablelist tbody tr,
.table-responsive .table tbody tr{
    border-bottom: 1px solid var(--line);
}

#tablelist tbody tr:hover,
.table-responsive .table tbody tr:hover{
    cursor: pointer;
    background-color: var(--stone);
}
.table-responsive{
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

#containertabla{
    position: relative;
    float: left;
    width: 100%;
    transition: width 0.5s;
    -webkit-transition: width 0.5s;
}

#containerdetalle{
    position: relative;
    float: right;
    width: 0%;
    display: none;
    transition: width 0.5s;
    -webkit-transition: width 0.5s;
    background-color: var(--surface-raised);
    overflow-y: auto;
}

#cabeceradetail{
    background-color: var(--ink);
    position: relative;
    float: left;
    width: 100%;
}

#cabeceradetail .botondetail{
    text-decoration: none;
    float: right;
    padding: 5px 5px;
    text-align: center;
    font-size: larger;
    margin-left: 2px;
    color: var(--patina-ink);
}

#cabeceradetail .botondetail span{
    display: none;
}

#cabeceradetail .botondetail:hover span{
    display: inline-block;
}

#contenidodetail{
    padding: 2%;
    position: relative;
    float: left;
    width: 100%;

}

#contenidodetail #detail_conlogo{
    position: relative;
    float: left;
    width: 69%;
}

#contenidodetail #detail_sinlogo{
    position: relative;
    float: left;
    width: 100%;
}

.detail_item{
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 10px;
    font-weight: 400;
}

.detail_item span{
    position: relative;
    float: left;
    display: block;
    width: 100%;
    margin-bottom: 5px;
    font-size: x-small;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.detail_item label{
    position: relative;
    float: left;
    display: block;
    width: 100%;
    font-size: large;
}

.imageempresa{
    position: relative;
    float: left;
    width: 10%;
    margin-top: 20px;
}

.imageempresa span{
    position: absolute;
    top: 0;
    color: var(--danger-ink);
}

.imageempresa span:hover{
    cursor: pointer;
}

.imageempresa img{
    width: 100%;
}

#contenidodetail #detail_div_logo{
    position: relative;
    float: right;
    width: 30%;
    text-align: center;
}

#contenidodetail #detail_div_logo img{
    max-width: 80%;
    margin: 0 10%;
    border: solid 1px var(--line);
}

#containertabla .titleh2{
    color: var(--ink);
    font-size: larger;
    margin: 20px 1%;
    padding-bottom: 5px;
    width: 98%;
    position: relative;
    float: left;
    border-bottom: 1px solid var(--line);
}

#variables_container{
    margin: 10px 0;
    width: 100%;
    position: relative;
    float: left;
}

#variables_container .itemvariable{
    position: relative;
    float: left;
    width: 23%;
    margin: 10px 1%;
    background-color: var(--surface);
    color: var(--ink);
    text-align: center;
    padding: 20px 0;
    border-radius: var(--radius);
}

#variables_container .itemvariable a{
    color: var(--ink);
    text-decoration: none;
    font-size: larger;
}


th a{
    color: var(--ink-muted);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.ordennombre{
    color: var(--ink);
    text-transform: none;
}

 .edit svg:hover{
    curso: pointer;
}
.tabledetalle .disabledpropiedad, .tabledetalle .disabledincidencia, th .disabledpropiedad{
    border-width: 0px;
    cursor: not-allowed;
    background-color: transparent;
    width:100%;
    -webkit-appearance: none;
}

.height150{
    height: 150px;
}

.tabledetalle{
    max-width: 98%;
    min-width: 98%;
    width: 98%;
    margin: 5px 1%;
    font-size: medium;
    font-weight: 400;
    color: var(--ink);
}

.tabledetalle thead{
    border-bottom: 1px solid var(--line);
}

.tabledetalle th,
.tabledetalle td{
    font-size: large;
    font-weight: 400;
}

.tabledetalle tbody svg{
    color: var(--patina);
    font-size: x-large;
}

.tabledetalle tbody svg:hover, th a svg:hover, .comunidad_opciones a svg:hover{
    cursor: pointer;
}

.tabledetalle tbody tr{
    border-bottom: 1px solid var(--line);
}



.botonmodal{
    background-color: var(--danger-ink);
    color: var(--patina-ink);
    text-decoration: none;
}

.botonmodal:hover{
    color: var(--patina-ink) !important;
}

.selectfilatable{
    background-color: var(--stone);
}

.imagendetail{
    width: 100%;
}

.textareaform{
    max-width: 100%;
    min-width: 100%;
    height: 400px !important;
}

.linemovimientos textarea{
    max-width: 150px;
    min-width: 150px;
    width: 150px;
}
#modelo_nombre{
    font-size: x-large;
    padding: 0px 12px;
    color: var(--patina);
}
.labelnuevotipo{
    display: none;
    margin-bottom: 0px !important;
}
.mb1{
    margin-bottom: 1px !important;
}
.mb10{
    margin-bottom: 10px !important;
}
.btnlist{
    display: inline-block;
    margin: 0;
    padding: 0 5px;
    color: var(--ink-muted);
    text-decoration: none;
}
.btnlist:hover{
    cursor: pointer;
    color: var(--patina);
}

.deleteimage{
    top: 0;
    left: 0;
    color: var(--patina);
}

.deleteimage:hover{
    cursor: pointer;
}

.marginleft10{
    margin-left: 10px;
}

/* Botones Bootstrap (.btn / .btn-primary / .btn-danger…) usados en los
   formularios y listados de todos los bundles admin, re-temados. */
.btn{
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    border-radius: var(--radius);
    background-image: none;
    box-shadow: none;
    text-shadow: none;
}
.btn-primary,
.btn-info,
.btn-success{
    background-color: var(--patina);
    border-color: var(--patina);
    color: var(--patina-ink);
}
.btn-primary:hover, .btn-primary:focus,
.btn-info:hover, .btn-info:focus,
.btn-success:hover, .btn-success:focus{
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--patina-ink);
}
.btn-danger{
    background-color: var(--danger-ink);
    border-color: var(--danger-ink);
    color: var(--patina-ink);
}
.btn-danger:hover, .btn-danger:focus{
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--patina-ink);
}
.btn-secondary{
    background-color: var(--surface-raised);
    border-color: var(--line);
    color: var(--ink-muted);
}
.btn-secondary:hover, .btn-secondary:focus{
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

/* Formularios Symfony/Bootstrap (form_widget genera .form-control) */
.form-group{
    margin-bottom: 20px;
}
.form-group label{
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ink-muted);
    margin-bottom: 6px;
    display: inline-block;
}
.form-control{
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    background-color: var(--surface-raised);
    box-shadow: none;
    font-family: 'Work Sans', sans-serif;
}
.form-control:focus{
    border-color: var(--patina);
    outline: 2px solid var(--patina);
    outline-offset: 1px;
    box-shadow: none;
}
input[type="checkbox"], input[type="radio"]{
    accent-color: var(--patina);
}
.alert-success{
    background-color: var(--good-soft);
    background-image: none;
    border-color: var(--good-soft);
    color: var(--good-ink);
}
.alert-danger{
    background-color: var(--danger-soft);
    background-image: none;
    border-color: var(--danger-soft);
    color: var(--danger-ink);
}
/* Botón de confirmar borrado (combina .btn-primary + .alert-danger) */
.btn.alert-danger{
    background-color: var(--danger-ink);
    border-color: var(--danger-ink);
    color: var(--patina-ink);
}
.btn.alert-danger:hover, .btn.alert-danger:focus{
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--patina-ink);
}

/* Tarjetas de sección para agrupar formularios largos */
.form-section{
    background-color: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    margin: 0 0 24px;
    overflow: hidden;
}
.form-section-title{
    font-family: 'Spectral', Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.lang-block{
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 16px;
    overflow: hidden;
}
.lang-block:last-child{
    margin-bottom: 0;
}
.lang-block-title{
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--patina);
    margin: 0 0 14px;
}

/* Botón "Escuchar" de las guías de audio */
.btn-listen{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    background-color: var(--patina-soft);
    color: var(--patina);
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
}
.btn-listen:hover, .btn-listen:focus{
    background-color: var(--patina);
    color: var(--patina-ink);
    text-decoration: none;
}
.btn-listen i{
    font-size: 11px;
}
.audio-current{
    display: block;
    font-size: 12.5px;
    color: var(--ink-muted);
    margin-top: 10px;
}

/* Lista de checkboxes de monumentos (Recommended/edit) — el widget genera
   input+label sueltos y sin envoltorio, así que la agrupación visual se
   hace por separación uniforme en flex + un pequeño solape input-label. */
#monuments{
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
}
.check-item{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.check-item input[type="checkbox"]{
    margin: 0;
    accent-color: var(--patina);
}
.check-item label{
    margin: 0;
    text-transform: none;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--ink);
    cursor: pointer;
}

/* Pastillas de estado (p.ej. Publicado / Borrador) */
.pill{
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
}
.pill--good{ background-color: var(--good-soft); color: var(--good-ink); }
.pill--warn{ background-color: var(--warn-soft); color: var(--warn-ink); }

@media screen and (max-width: 1024px) {
    .letramenu, #menulateralsuperior label{
        font-size: small;
    }

    .imagenpromo {
        height: 60px;
        width: 115px;
    }
}

.lineform{
    position: relative;
    float: left;
    width: 100%;
}

#sortable{
    margin: 0;
    padding: 0;
    list-style: none;
}

#sortable li{
    display: inline-block;
    margin: 10px;
}