body {background:#f1f1f1;}

  .BordeGris
      {
      border-style:solid;
      border-top:2px solid;border-bottom:2px solid;border-left:1px solid;border-right:1px solid;
      border-color:#Dfdcd7;
      width=98%
  }

  A:{text-decoration:none}
  A:link {text-decoration:none;color:#000;}
  A:visited {text-decoration:none;color:#000;}
  A:active {text-decoration:none;color:#000;}
  A:hover {font-weight:bold; text-decoration:none;color:#000;}


  .btn {
  border: 2px solid black;
  background-color: white;
  color: black;
  padding: 10px 24px;
  font-size: 16px;
  cursor: pointer;
  text-decoration:none;
  }

  /* Green */
  .success {
  border-color: #04AA6D;
  color: green;
  }

  .success:hover {
  background-color: #04AA6D;
  color: white;
  }

#frmOpinion {
    width: 100%;
    background: #fff;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0,0,0,.15);
    text-align: left;
}

#mapaOpinion {
    width: 100%;
    height: 500px;
    border-radius: 10px;
    border: 1px solid #CCC;
    margin-top: 10px;
    margin-bottom: 15px;
}

label {
    font-weight: bold;
    color: #444;
}

input, textarea {
    border-radius: 8px !important;
}

/* Estilo rápido para la sección de capas */
.capas-container {
    margin-top: 15px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
}
.capas-container label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
    font-weight: normal;
}

.header-opinion{
    background:linear-gradient(135deg,#691b32,#842541);
    color:#FFF;
    padding:20px 20px;
    border-radius:15px;
    text-align:center;
    margin-bottom:25px;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.header-opinion h2{
    margin:0;
    color:#FFF;
    font-size:2em;
}

.header-opinion p{
    margin:8px 0 0;
    color:rgba(255,255,255,.9);
    font-size:.95em;
}

.tabla-responsive{

overflow-x:auto;

}

.tabla-moderna{

width:100%;

border-collapse:collapse;

background:#FFF;

border-radius:12px;

overflow:hidden;

box-shadow:0 8px 25px rgba(0,0,0,.10);

font-size:15px;

}

.tabla-moderna thead{

background:#691b32;

color:white;

}

.tabla-moderna thead tr th{
background:linear-gradient(135deg,#691b32,#842541) !important;
}

.tabla-moderna thead tr th strong{
color:#fff !important
}



.tabla-moderna th{

padding:15px;

text-align:left;

font-weight:600;

}

.tabla-moderna td{

padding:14px 15px;

border-bottom:1px solid #ECECEC;

}

.tabla-moderna tbody tr{

transition:.25s;

}

.tabla-moderna tbody tr:nth-child(even){

background:#FAFAFA;

}

.tabla-moderna tbody tr:hover{

background:#f0f0f0;

}

.celda-checkbox{

text-align:center;

vertical-align:middle;

}

.celda-checkbox label {
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start;
gap: 8px;
width: 100%;
cursor: pointer;
font-weight: normal;
line-height: 1.2;
}

/* Quita el borde punteado nativo al hacer clic en los botones */
#btn-toggle-todas:focus,
#btn-toggle-ojo:focus,
.celda-checkbox input:focus {
outline: none !important;
box-shadow: none !important; /* Por si el navegador aplica un resplandor azul */
}

/* Aplicado globalmente a cualquier botón dentro de la tabla para asegurar */
.tabla-moderna button:focus {
outline: none !important;
box-shadow: none !important;
}

/* Opcional: Un estilo limpio de enfoque para cuando te desplaces con el teclado,
pero que no se vea la línea punteada fea al hacer clic con el mouse */
#btn-toggle-todas:focus-visible,
#btn-toggle-ojo:focus-visible {
outline: 2px solid #691b32;
outline-offset: 2px;
}

.modal-mensaje {
display:none;
position:fixed;
z-index:99999;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
align-items:center;
justify-content:center;
}

.modal-contenido {

background:#fff;
width:320px;
padding:25px;
border-radius:15px;
text-align:center;
box-shadow:0 10px 35px rgba(0,0,0,.25);
animation: aparecer .3s ease;

}

.modal-contenido h3{

margin:10px 0;
color:#691b32;
font-size:20px;

}


.modal-contenido p{

color:#555;
font-size:14px;

}


.modal-contenido button{

margin-top:15px;
background:#691b32;
color:white;
border:none;
padding:10px 30px;
border-radius:8px;
cursor:pointer;

}


.icono-ok{

font-size:45px;
color:#28a745;

}


.icono-error{

font-size:45px;
color:#dc3545;

}


@keyframes aparecer{

from{
transform:scale(.8);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}

}

.contenedor-boton{
width:100%;
display:flex;
justify-content:center;
align-items:center;
margin:25px 0;
}
.btn-enviar-opinion{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;

padding:14px 34px;
min-width:220px;

border:none;
border-radius:50px;

background:linear-gradient(135deg,#691b32,#8b2741);
color:#fff;

font-size:16px;
font-weight:600;
letter-spacing:.4px;

cursor:pointer;
transition:all .25s ease;

box-shadow:0 8px 18px rgba(105,27,50,.30);
}

.btn-enviar-opinion:hover{
transform:translateY(-3px);
box-shadow:0 14px 28px rgba(105,27,50,.45);
background:linear-gradient(135deg,#7c1f3b,#9d2f4d);
}

.btn-enviar-opinion:active{
transform:scale(.98);
}

.btn-enviar-opinion i{
font-size:18px;
}

.fases{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
}

.fase-item{
    flex:0 0 19%;
    max-width:19%;
    text-align:center;
    margin-bottom:20px;
}

.fase-item img{
    width:89px;
    height:89px;
}

.fase-item a{
    display:block;
    text-align:center;
    text-decoration:none;
}

.fase-item a p{
    margin-bottom:6px;
}

@media (max-width:992px){
    .fase-item{
        flex:0 0 48%;
        max-width:48%;
    }
}

@media (max-width:576px){
    .fase-item{
        flex:0 0 100%;
        max-width:100%;
    }
}

#frmOpinion .form-control,
#frmOpinion .form-select{
    background-color: #fff !important;
    color: #691b32 !important;
    border: 1px solid #c9a7b3 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

#frmOpinion .form-control:focus,
#frmOpinion .form-select:focus{
    background-color: #fff !important;
    border-color: #691b32 !important;
    box-shadow: 0 0 0 .25rem rgba(105, 27, 50, .20) !important;
}