:root{
    --background:#050b12;
    --panel:#08121c;
    --panel-border:rgba(255,255,255,.08);

    --green:#c8ff1a;
    --white:#fff;

    --radius:22px;
	
    --bottom-panel-height:140px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;

    background:var(--background);
    color:var(--white);

    font-family:Inter, sans-serif;
}


.green
{
	    color:var(--green);
}

/* ==========================
   LAYOUT GENERAL
========================== */

.page{
    height:100vh;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
}
/* ==========================
   HERO
========================== */

.hero{
    flex:0 0 auto;
    padding:6px 12px 4px;
    text-align:center;
}

.hero h1{
    font-size:13px;
    /*font-weight:600;*/
    margin-bottom:4px;
}

.hero-keywords{
    display:flex;
    justify-content:space-between;
    gap:4px;

    margin-bottom:4px;
}

.hero-keywords div{
    flex:1;

    font-size:11px;
    font-weight:800;

    color:var(--green);

    border-bottom:1px solid rgba(255,255,255,.15);

    padding-bottom:3px;
}

.hero p{
    font-size:10px;
    color:#cfd5db;
	margin: 0;
}

/* ==========================
   LOGO + BURGER
========================== */
/*
.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 12px 4px;
	min-height:auto;
	
}

.logo img{
    height:38px;
    width:auto;
}

.burger{
    width:42px;
    height:42px;

    border-radius:50%;

    border:1px solid var(--panel-border);

    background:rgba(8,18,28,.9);

    display:flex;
    align-items:center;
    justify-content:center;

    color:white;
}

*/

.topbar{
    position:absolute;
    top:5px;
    left:12px;
    right:12px;

    z-index:1000;

    display:flex;
    justify-content:space-between;
    align-items:center;

    pointer-events:auto;
}

.logo img{
    height:62px;
}

.burger{
    width:44px;
    height:44px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.1);

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(10px);

    color:white;

    z-index: 1000;
}



/* ==========================
   MAPA
========================== */

.map-wrapper{
    flex:1;
    position:relative;
    min-height:0;
    overflow:hidden;
}

#map{
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
}


.floating-controls{
    position:absolute;
    right:14px;
    /*bottom:14px;*/
	
	
	    bottom:calc(var(--bottom-panel-height) + 20px);
		

    z-index:1000;

    display:flex;
    flex-direction:column;
    gap:8px;
}


.floating-btn{
    width:52px;
    height:52px;

    border-radius:50%;

    background:rgba(10,15,22,.85);

    border:1px solid rgba(255,255,255,.12);

    color:white;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:22px;

    backdrop-filter:blur(10px);

    cursor:pointer;

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


/* ==========================
   SECCIÓN MENSAJE
========================== */

.message-panel{
    background:var(--panel);

    border-top:1px solid var(--panel-border);

    /*padding:16px;*/
	padding:8px 12px;
}

.message-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.message-text{
    font-size:11px;
    line-height:1.2;

    color:#d7dde3;
}

.message-text strong{
    color:var(--green);
}

.btn-grio{
    flex-shrink:0;

    background:var(--green);
    color:#000;

    border:none;

    border-radius:14px;

    padding:8px 12px;

    font-weight:800;
	
	font-size:13px;

    cursor:pointer;
}

/* ==========================
   BUSCADOR + ESTADÍSTICAS
========================== */


.bottom-panel{
    position:fixed;  
    left:10px;
    right:10px;
    bottom:10px;

    z-index:1300;

    background:rgba(5,10,15,.92);
    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;

    padding:12px;
    max-width:900px;
    margin:0 auto;
}

/* TEXTO + BOTÓN */


.message-text{
    flex:1;
    font-size:11px;
    line-height:1.3;
    color:#d6d6d6;
}

.message-text span{
    color:#c8ff1a;
    font-weight:700;
}

.btn-grio{
    white-space:nowrap;
    border:none;
    background:#c8ff1a;
    color:#000;
    border-radius:12px;
    padding:10px 14px;
    font-weight:800;
    font-size:13px;
}



/* BUSCADOR (IZQUIERDA GRANDE) */


.search-box{
    width:100%;
    position:relative;
}


.bottom-panel{
    position:fixed;
    left:10px;
    right:10px;
    bottom:5px;

    z-index:1000;

    background:rgba(5,10,15,.92);
    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;

    padding:6px;
	/*padding:12px;*/
 
    display:flex;
    flex-direction:column;
    gap:10px;
}



.message-text{
    width:100%;
    /*text-align:center;*/

    font-size:12px;
    line-height:1.3;
    color:#d6d6d6;
}



.search-box input{
    width:100%;
    height:44px;

    background:#09111a;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;

    color:white;
    padding-left:42px;
    outline:none;
}

.search-box svg{
    position:absolute;
    left:14px;
    top:12px;
    width:18px;
    height:18px;
    fill:#888;
}







/* =========================
   SEARCH RESULTS DROPDOWN
========================= */

/*
.search-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
*/

.search-box ul {
  position: absolute;

  /*  DESPLEGABLE HACIA ABAJO
  top: calc(100% + 8px);
*/

bottom: calc(100% + 8px);


  left: 0;
  right: 0;

  margin: 0;
  padding: 6px 0;

  list-style: none;


  /*background: white;*/

  background-color: #000;
  color: white;

  border-radius: 16px;

  box-shadow: 0 8px 24px rgba(0,0,0,0.15);

  max-height: 320px;
  overflow-y: auto;

  z-index: 9999;
}


.search-box li {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  padding: 10px 14px;

  cursor: pointer;

  transition: background 0.15s;
}


.search-box li:hover {
    /*
  background: #f5f7fa;*/

  background-color: black;
}


.search-box li .material-symbols-rounded {
  font-size: 20px;
  color: #666;
  margin-top: 2px;
}


.search-box li div {
  display: flex;
  flex-direction: column;
}


.search-box li small {
  color: #777;
  font-size: 12px;
}



/*
.result-text{
  display:flex;
  flex-direction:column;
}

.result-main{
  font-size:14px;
  font-weight:600;
  color:#222;
}

.result-type{
  font-size:12px;
  color:#777;
}

*/



















/* STATS (DERECHA) */
.stats-row{
    flex:1;   /* 👈 más pequeño que el buscador */

    display:flex;
    gap:8px;
}

.stat-card{
    flex:1;

    background:#09111a;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;

    padding:8px;
}

.stat-label{
    font-size:9px;
    color:#8c99a6;
}

.stat-value{
    font-size:14px;
    font-weight:800;
    color:white;
}

.stat-value.green{
    color:#c8ff1a;
}















#navbarNav{
    position:absolute;
    top:65px;
    right:12px;

    z-index:1301;

    width:220px;

    background:rgba(5,10,15,.98);
    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;

    overflow:hidden;
}

.mobile-menu{
    list-style:none;
    margin:0;
    padding:0;
}

.mobile-menu li{
    border-bottom:1px solid rgba(255,255,255,.08);
}

.mobile-menu li:last-child{
    border-bottom:none;
}

.mobile-menu a{
    display:block;
    padding:14px 16px;

    color:white;
    text-decoration:none;

    font-size:13px;
    font-weight:600;
}

.mobile-menu a:hover{
    background:rgba(255,255,255,.05);
}



.bottom-panel{
    min-height:var(--bottom-panel-height);
}




/*

NUEVO GRIO

*/





/* OVERLAY A PANTALLA COMPLETA */

.grio-overlay{
    position:fixed;
    inset:0;
    z-index:1500;

    background:#ffffff;

    overflow-y:auto;
    overflow-x:hidden;

    -webkit-overflow-scrolling:touch;
}

/* CONTENEDOR */

.grio-container{
    width:100%;
    max-width:900px;

    margin:0 auto;

    padding:24px;
    padding-bottom:60px;

    color: #000;
}

/* ESCRITORIO */

@media (min-width:992px){

    .grio-container{
        max-width:700px;
        padding:40px;
    }

}

/* BOTÓN CERRAR */

.grio-close{

    position:fixed;
    top:20px;
    right:20px;

    width:48px;
    height:48px;

    border:none;
    border-radius:50%;

    background:#fff;

    box-shadow:0 2px 15px rgba(0,0,0,.15);

    z-index:1000000;

    cursor:pointer;
}

/* CABECERA */

.grio-step-header{

    display:flex;
    align-items:flex-start;
    gap:16px;

    margin-bottom:24px;
}

.step-circle{

    width:40px;
    height:40px;

    border-radius:50%;

    background:#d7f000;

    color:#000;

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:700;
    font-size:20px;

    flex-shrink:0;
}

.grio-step-header h3{

    margin:0;
    font-size:24px;
    font-weight:700;
}

.grio-step-header p{

    margin-top:4px;
    color:#666;
}

/* TEXTAREA */

.grio-textarea-wrapper{
    position:relative;
}


.grio-label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
}

.grio-input
{
    width:100%;

    border:1px solid #ddd;
    border-radius:14px;

    padding:20px;

    resize:vertical;

    font-size:16px;
}



.grio-textarea{

    width:100%;
    min-height:180px;

    border:1px solid #ddd;
    border-radius:14px;

    padding:20px;

    resize:vertical;

    font-size:16px;
}

.voice-btn{

    position:absolute;
    bottom:16px;
    right:16px;

    border:none;
    background:transparent;

    color:#99c600;

    font-weight:600;
}

.char-counter{

    margin-top:10px;

    font-size:13px;
    color:#999;
}

/* CHIPS */

.grio-chips{

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:12px;

    margin-top:24px;
}

.grio-chip{

    border:1px solid #e5e5e5;
    border-radius:12px;

    padding:12px;

    display:flex;
    gap:10px;
    align-items:flex-start;

    background:#fff;
}

.grio-chip i{

    color:#a5cf00;
    font-size:20px;
}

.grio-chip strong{

    display:block;
    font-size:14px;
}

.grio-chip small{

    color:#666;
}

/* RESPONSIVE CHIPS */

@media (max-width:768px){

    .grio-chips{
        grid-template-columns:1fr;
    }

}

/* INFO BOX */

.grio-info-box{

    margin-top:20px;

    display:flex;
    gap:12px;

    padding:16px;

    border-radius:12px;

    background:#f6f8eb;
}

.grio-info-box i{

    color:#a5cf00;
    font-size:20px;
}

/* OPCIONES */

.grio-options{

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:12px;

    margin-top:20px;
}

@media (max-width:768px){

    .grio-options{
        grid-template-columns:1fr;
    }

}

.grio-option-btn{

    height:56px;

    border:1px solid #ddd;
    border-radius:12px;

    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    cursor:pointer;
}

.grio-option-btn i{

    color:#666;
}

/* CHECK */

.form-check{

    margin-top:24px;



    display: flex;
    align-items: center;
    gap: 8px;

}

/* CTA */

.grio-submit-btn{

    width:100%;
    height:56px;

    margin-top:24px;

    border:none;
    border-radius:10px;

    background:#c5ef00;
    color:#000;

    font-weight:700;
    font-size:18px;

    cursor:pointer;
}

.grio-submit-btn i{

    margin-right:8px;
}




.grio-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.grio-actions .grio-submit-btn {
    flex: 1;
    width: auto;
    margin-top: 0;
}









/* PRIVACIDAD */

.grio-privacy-note{

    margin-top:14px;

    text-align:center;

    color:#777;
    font-size:13px;
}

.grio-privacy-note i{

    margin-right:6px;
}




/*
.grio-header {

   
    background: #000;

    height: 84px;

    padding: 0 20px;

    box-shadow:
        0 1px 0 rgba(0,0,0,.06);
}

*/

.grio-header {

    position: sticky;
    top: 0;

    z-index: 1000;

    background: #000;

    border-bottom: 1px solid #ececec;

    height: 80px;
}

.grio-header-container {

    max-width: 700px;

    height: 100%;

    margin: 0 auto;

    padding: 0 24px;

    display: flex;
    align-items: center;
}



.grio-logo img {

    height: 48px;
}

.grio-menu-btn {

    width: 52px;
    height: 52px;

    border: 1px solid #d9f03f;

    border-radius: 4px;

    color: #b6e000;
}

.grio-menu-btn i {

    font-size: 30px;
}

.grio-close {

    margin-left: 12px;

    width: 52px;
    height: 52px;

    border: 1px solid #e7e7e7;

    box-shadow: none;
}


/*
    FIN NUEVO GRIO
*/



/*
    REVISAR GRIOS
*/

/*
.review-card {

    position: absolute;
    left: 40px;
    bottom: 40px;

    width: 460px;
    max-width: calc(100vw - 30px);

    background: rgba(6,18,30,.92);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 28px;

    color: #fff;

    padding: 28px;

    box-shadow:
        0 15px 45px rgba(0,0,0,.65),
        inset 0 0 50px rgba(0,140,255,.05);

    z-index: 9999;
}

.review-card:before {

    content: "";

    position: absolute;
    inset: 0;

    border-radius: 28px;

    background:
        radial-gradient(
            circle at top left,
            rgba(0,150,255,.08),
            transparent 40%
        );

    pointer-events: none;
}

.review-close {

    position: absolute;

    top: 18px;
    right: 18px;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.15);

    background: transparent;

    color: white;

    font-size: 20px;

    cursor: pointer;
}

.review-header {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 25px;
}

.review-logo {

    width: 56px;
    height: 56px;

    border-radius: 50%;

    background: #d11f1f;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 32px;
    font-weight: bold;

    color: white;
}

.review-id {

    font-size: 18px;
    color: rgba(255,255,255,.85);

    margin-bottom: 4px;
}

.review-date {

    color: rgba(255,255,255,.6);

    font-size: 15px;
}

.review-content h2 {

    margin: 0 0 22px;

    font-size: 36px;
    font-weight: 700;

    line-height: 1.15;
}

.review-content p {

    font-size: 25px;

    line-height: 1.7;

    color: rgba(255,255,255,.9);

    margin-bottom: 30px;
}

.review-nav {

    position: absolute;

    right: 20px;
    top: 200px;

    display: flex;
    flex-direction: column;

    gap: 10px;
}

.review-nav button {

    width: 50px;
    height: 50px;

    background: transparent;

    border: none;

    color: white;

    font-size: 30px;

    cursor: pointer;
}

.review-footer {

    margin-top: 20px;

    border-top: 1px solid rgba(255,255,255,.1);

    padding-top: 20px;
}

.review-actions {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 10px;
}

.review-actions button {

    height: 80px;

    border-radius: 14px;

    background: rgba(255,255,255,.03);

    border: 1px solid rgba(255,255,255,.08);

    color: white;

    cursor: pointer;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    font-size: 15px;
}

.positive {

    color: #86ff42;
}

.negative {

    color: #ff4545;
}

.review-actions span {

    margin-top: 6px;

    font-size: 20px;

    font-weight: 700;
}

.review-visits {

    margin-top: 15px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 14px;

    padding: 16px;

    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 22px;
}

.review-visits span {

    color: #9cff39;

    font-size: 34px;

    font-weight: bold;
}

.review-pagination {

    margin-top: 18px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;
}

.review-pagination button {

    width: 40px;
    height: 40px;

    border-radius: 50%;

    border: none;

    background: rgba(255,255,255,.08);

    color: white;

    cursor: pointer;
}






.review-card {

    position: absolute;

    left: 15px;
    right: 15px;
    bottom: 15px;

    width: auto;

    max-width: 550px;

    height: 78vh;
    max-height: 900px;

    background: rgba(6,18,30,.94);

    backdrop-filter: blur(25px);

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 24px;

    color: white;

    box-shadow:
        0 25px 60px rgba(0,0,0,.55);

    z-index: 9999;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}



.review-header {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 24px 24px 15px 24px;
}



.review-content {

    flex: 1;

    overflow-y: auto;

    padding: 0 24px;
}




.review-content h2 {

    margin: 0 0 20px;

    font-size: 2rem;

    line-height: 1.2;

    font-weight: 700;
}



.review-content p {

    font-size: 1.2rem;

    line-height: 1.7;

    color: rgba(255,255,255,.92);

    margin-bottom: 30px;
}




.review-footer {

    flex-shrink: 0;

    padding: 20px;

    border-top: 1px solid rgba(255,255,255,.08);

    background: rgba(255,255,255,.02);
}


.review-actions {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 10px;
}

.review-actions button {

    min-height: 72px;

    border-radius: 14px;

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(255,255,255,.08);

    color: white;

    cursor: pointer;

    transition: .25s;
}

.review-actions button:hover {

    background: rgba(255,255,255,.08);
}




.review-pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;

    margin-top: 15px;
}

.review-pagination button {

    width: 48px;
    height: 48px;

    border-radius: 50%;

    border: none;

    background: rgba(255,255,255,.08);

    color: white;

    font-size: 20px;

    cursor: pointer;
}



@media (max-width: 768px) {

    .review-card {

        left: 10px;
        right: 10px;
        bottom: 10px;

        height: 82vh;

        border-radius: 20px;
    }

    .review-content h2 {

        font-size: 1.7rem;
    }

    .review-content p {

        font-size: 1.15rem;

        line-height: 1.8;
    }

    .review-actions {

        grid-template-columns: repeat(2,1fr);
    }

}



@media (min-width: 1200px) {

    .review-card {

        width: 560px;

        left: 30px;
        bottom: 30px;

        height: 720px;
    }

    .review-content h2 {

        font-size: 2.3rem;
    }

    .review-content p {

        font-size: 1.3rem;
    }

}





.review-card {

    animation: reviewAppear .25s ease-out;
}

@keyframes reviewAppear {

    from {

        opacity: 0;

        transform:
            translateY(30px)
            scale(.96);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

*/



/*
.review-card {

    width: 100%;
    max-width: 450px;

    background: rgba(8, 18, 30, 0.95);

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 24px;

    color: #fff;

    padding: 20px;

    backdrop-filter: blur(12px);

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

    display: flex;
    flex-direction: column;
}

*/


/*
.review-card {

    position: absolute;

    left: 10px;
    bottom: 5px;

    width: 500px;
    min-height: 500px;

    z-index: 99999;

    background: #07121d;

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 25px;

    color: white;

    box-shadow:
        0 0 30px rgba(0,0,0,.6);

    overflow: hidden;
}
*/


.review-card {

    position: absolute;

    left: 10px;
    right: 10px;

    width: auto;
    max-width: 500px;

    height: 85vh;
    max-height: 750px;
    min-height: 350px;

    z-index: 1600;

    background: #07121d;

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 20px;

    color: white;

    box-shadow: 0 0 30px rgba(0,0,0,.6);

    overflow: hidden;

    display: flex;
    flex-direction: column;

    padding: 15px;
}



.review-card {

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;

    max-width: none;

    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    
    z-index: 1000;
}

@media (min-width: 769px) {

    .review-card {

        left: 10px;
        bottom: 10px;

        width: 500px;
        max-width: 500px;

        border-radius: 20px;
    }
}


/* CABECERA */

/*
.review-header {

    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 15px;
}
    */


.review-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}



.review-severity img {

    width: 52px;
    height: 52px;
    object-fit: contain;
}

.review-title {

    flex: 1;

    font-size: 1.5rem;
    font-weight: 700;

    line-height: 1.2;
}

/*
.close-btn {

    width: 40px;
    height: 40px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.2);

    background: transparent;

    color: white;

    cursor: pointer;

    font-size: 1.3rem;
}
*/

.close-btn {
    margin-left: auto;
    align-self: flex-start;

    width: 40px;
    height: 40px;

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    background: transparent;
    color: white;
    cursor: pointer;
    font-size: 1.3rem;
}



/* CUERPO */

.review-body {

    /*
    min-height: 180px;
    max-height: 250px;*/


    flex: 1;


    overflow-y: auto;

    min-height: 0;

    padding-right: 10px;

    /*
    margin-bottom: 20px;

    padding-right: 10px;
*/

}

.review-date {

    color: #9ca8b3;

    font-size: .9rem;

    margin-bottom: 12px;
}

.review-text {

    font-size: 1.15rem;

    line-height: 1.6;
}


/* SCROLL */

.review-body::-webkit-scrollbar {

    width: 6px;
}

.review-body::-webkit-scrollbar-thumb {

    background: rgba(255,255,255,.25);

    border-radius: 30px;
}


/* ACCIONES */

.review-actions {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 8px;

    margin-top: auto;
}

.action-box {

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 12px;

    padding: 10px;

    text-align: center;

    cursor: pointer;

    transition: .2s;
}

.action-box:hover {

    background: rgba(255,255,255,.05);
}

.action-box i {

    display: block;

    font-size: 1.3rem;

    margin-bottom: 6px;
}

.action-box span {

    display: block;

    font-size: .85rem;
}


/* COLORES */

.fa-thumbs-up {

    color: #7CFF33;
}

.fa-thumbs-down {

    color: #FF4A4A;
}

.fa-eye {

    color: #fff;
}


/* NAVEGACIÓN */

.review-navigation {

    margin-top: 15px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px;
}

.nav-btn {

    width: 44px;
    height: 44px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.15);

    background: transparent;

    color: white;

    cursor: pointer;

    font-size: 1.8rem;
}

.nav-btn:disabled {

    opacity: .3;

    cursor: default;
}

.review-counter {

    color: #9ca8b3;

    font-size: .9rem;
}




.review-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.review-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.review-date {
    color: #9ca8b3;
    font-size: .9rem;
    margin-top: 4px;
}



/*
    FIN REVISAR GRIOS
*/






.modal-backdrop {
    z-index: 1500 !important;
}

#errorModal {
    z-index: 1501 !important;
    color: #000;
}


#successModal {
    z-index: 1501 !important;
    color: #000;
}




/* MENSAJE DE ESPERA */

/*
.grio-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;
}

.grio-overlay-content {
    width: 90%;
    max-width: 450px;

    background: white;
    border-radius: 16px;

    padding: 32px;

    text-align: center;

    box-shadow: 0 15px 50px rgba(0,0,0,.25);
}

.grio-overlay-content h3 {
    margin-top: 16px;
    margin-bottom: 12px;
}

.grio-overlay-content p {
    color: #666;
}



.grio-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;
}

.grio-overlay-content {
    width: 90%;
    max-width: 450px;

    background: white;
    border-radius: 16px;

    padding: 32px;

    text-align: center;

    box-shadow: 0 15px 50px rgba(0,0,0,.25);
}

.grio-overlay-content h3 {
    margin-top: 16px;
    margin-bottom: 12px;
}

.grio-overlay-content p {
    color: #666;
}
*/


.grio-ia-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,.92);

    z-index: 2000;

    backdrop-filter: blur(4px);
}


.grio-ia-box {

    width: 90%;
    max-width: 420px;

    background: white;

    border-radius: 18px;

    padding: 30px;

    text-align: center;

    box-shadow:
        0 10px 40px rgba(0,0,0,.15);
}


.grio-ia-spinner {

    width: 64px;
    height: 64px;

    margin: 0 auto 20px;

    border: 6px solid #ececec;
    border-top-color: var(--green);

    border-radius: 50%;

    animation: grio-spin 1s linear infinite;
}

@keyframes grio-spin {
    to {
        transform: rotate(360deg);
    }
}


.grio-ia-title {

    font-size: 22px;
    font-weight: 700;

    margin-bottom: 10px;

    color: #000;
}

.grio-ia-message {

    font-size: 15px;

    color: #666;

    line-height: 1.5;
}



/* FIN MENSAJE DE ESPERA */