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

html,
body{
    width:100%;
    height:100%;
    font-family:Arial,Helvetica,sans-serif;
}

body{
    background:#5f513c;
}

/****************************/
/* MEN� */
/****************************/

.menu{
    position:fixed;
    top:5px;
    right:20px;
    z-index:1000;
}

.hamburger{
    position:relative;
    color:white;
    font-size:34px;
    cursor:pointer;
}

.dropdown{
    display:none;
    position:absolute;
    right:0;
    top:40px;
    min-width:160px;
    background:white;
    border-radius:8px;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
}

.hamburger:hover .dropdown,
.dropdown:hover{
    display:block;
}

.dropdown::before{
    content:"";
    position:absolute;
    right:0;
    bottom:100%;
    width:220px;
    height:42px;
}

.dropdown a{
    display:block;
    padding:10px 16px;
    color:#222;
    text-decoration:none;
    font-size:14px;
}

.dropdown a:first-child{
    border-radius:8px 8px 0 0;
}

.dropdown a:last-child{
    border-radius:0 0 8px 8px;
}

.dropdown a:hover{
    background:#2f6f3c;
    color:white;
}

/****************************/
/* MAIN */
/****************************/

main{
    width:100%;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:50px 20px 80px;
}

/****************************/
/* CHAT */
/****************************/

#chat-container{
    width:100%;
  /*  max-width:850px;*/
    margin:0 auto;
    display:flex;
    flex-direction:column;
    background:#372e19;
    border-radius:14px;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
}

.chatHeader{
    width:100%;
    background:#21617f;
    color:white;
    font-weight:bold;
    border-top-left-radius:14px;
    border-top-right-radius:14px;
}

.chatHeader tbody,
.chatHeader tr{
    width:100%;
}

.chatHeader td{
    padding:8px 12px;
    vertical-align:middle;
}

.chatHeader td:first-child{
    width:100%;
}

.chatHeader td:last-child{
    width:1%;
    white-space:nowrap;
}

.chatTitle{
    font-size:18px;
}

.chatMinimize{
    display:none;
}

/****************************/
/* MENSAJES */
/****************************/

.chatMessages{
    width:100%;
    padding:12px;
    overflow-y:auto;
    max-height:18em;
}

.chatMessages::-webkit-scrollbar{
    width:6px;
}

.chatMessages::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.25);
    border-radius:3px;
}

.chat-line{
    display:flex;
    align-items:flex-start;
    margin:8px 0;
}

.chat-icon{
    margin-right:10px;
}

.chat-logo{
    width:40px;
    height:40px;
}

.chat-text{
    max-width:90%;
    font-size:16px;
    line-height:1.5;
}

.userMessage .chat-text{
    color:#cacfeb;
}

.botMessage .chat-text{
    color:#f5c34e;
}

.systemMessage .chat-text{
    color:#888;
    font-style:italic;
}

/****************************/
/* INPUT */
/****************************/

.chat-bottom{
    width:100%;
}

#chat-container .gwt-HorizontalPanel{
    width:100%;
    padding:12px;
    border-top:1px solid #ddd;
    background:#fafafa;
}

#chat-container .gwt-HorizontalPanel td{
    vertical-align:bottom;
}

#chat-container .gwt-TextBox,
#chat-container .gwt-Button{
    display:block;
    height:44px;
    margin:0;
    box-sizing:border-box;
    line-height:normal;
}

#chat-container .gwt-TextBox{
    padding:10px;
    font-size:17px;
    border:1px solid #ccc;
    border-radius:8px;
}

#chat-container .gwt-Button{
    width:100%;
    background:#007bff;
    color:white;
    border:none;
    padding:10px;
    border-radius:8px;
    cursor:pointer;
    font-size:17px;
    font-weight:bold;
}

#chat-container .gwt-Button:hover{
    background:#0056b3;
}

/****************************/
/* RESPONSIVE */
/****************************/

@media (max-width:700px){

    #chat-container{
        border-radius:10px;
    }

    .chat-logo{
        width:32px;
        height:32px;
    }

    .chat-text{
        font-size:16px;
    }

    .chatTitle{
        font-size:16px;
    }

    #chat-container .gwt-TextBox,
    #chat-container .gwt-Button{
        font-size:16px;
    }

}

/* Tarjetas de proveedores debajo del chat */
#proveedores-container{
    width:100%;
    margin:14px auto 0;
}
.chat-debug{
    width:100%;
    margin:10px auto 0;
    padding:10px 14px;
    background:#f4f7fb;
    border:1px solid #d4e2f0;
    border-radius:8px;
    font-family:Consolas,Menlo,monospace;
    font-size:12px;
    color:#333;
    white-space:pre-wrap;
    overflow-x:auto;
    box-sizing:border-box;
}
.proveedores-container{
    width:100%;
    background:#ffffff;
    border:1px solid #d4e2f0;
    border-radius:12px;
    box-shadow:0 4px 16px rgba(0,0,0,.12);
    padding:10px 14px;
    box-sizing:border-box;
}
.hl-provider{
    padding:14px 0;
}
.hl-provider + .hl-provider{
    border-top:1px solid #e5e8ee;
}
.hl-name{
    font-weight:bold;
    font-size:15px;
    color:#1a4b8c;
    margin-bottom:10px;
}
.hl-body{
    display:flex;
    align-items:flex-start;
}
.hl-media{
    width:25%;
    flex-shrink:0;
    position:relative;
    padding-right:14px;
}
.hl-img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:10px;
    display:block;
}
.hl-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:32px;
    line-height:1;
    color:rgba(255,255,255,.8);
    text-shadow:0 1px 5px rgba(0,0,0,.5);
    cursor:pointer;
    user-select:none;
}
.hl-prev{
    left:6px;
}
.hl-next{
    right:6px;
}
.hl-info{
    width:75%;
    margin-left:auto;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.hl-desc{
    font-size:13.5px;
    color:#333;
    line-height:1.45;
}
.hl-tri{
    display:inline-block;
    cursor:pointer;
    color:#1a4b8c;
    font-size:11px;
    margin-right:5px;
    vertical-align:1px;
}
.hl-short{
    color:#333;
}
.hl-long{
    margin:8px 0 0 18px;
    color:#555;
    font-size:13px;
    line-height:1.5;
}
.hl-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px 16px;
    font-size:12.5px;
    color:#444;
    align-items:center;
    margin-top:2px;
}
.hl-meta-item{
    display:inline-flex;
    align-items:center;
    gap:4px;
}
.hl-meta svg{
    width:15px;
    height:15px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0;
}
.hl-website{
    display:block;
    width:100%;
    margin-top:8px;
    text-align:center;
    box-sizing:border-box;
    background:#007bff;
    color:#fff;
    padding:9px 18px;
    border-radius:8px;
    font-size:13.5px;
    font-weight:bold;
    text-decoration:none;
}
.hl-website:hover{
    background:#0056b3;
}
@media (max-width:700px){
    .hl-body{
        flex-direction:column;
    }
    .hl-media{
        width:100%;
        padding-right:0;
    }
    .hl-info{
        width:100%;
        margin-left:0;
    }
}

/* Panel de proveedores */
.prov-card{max-width:640px;margin:14px auto 0;background:#fff;border:1px solid #d4e2f0;border-radius:12px;padding:18px;box-shadow:0 4px 16px rgba(0,0,0,.12);box-sizing:border-box;color:#222}
.prov-title{font-weight:bold;font-size:17px;color:#1a4b8c;margin-bottom:12px}
.prov-label{font-size:12.5px;color:#666;margin:8px 0 3px}
.prov-card input[type=text],.prov-card input[type=password],.prov-card textarea{width:100%;padding:8px;border:1px solid #ccc;border-radius:6px;font-size:14px;box-sizing:border-box;font-family:inherit}
.prov-btn{display:inline-block;margin:10px 6px 0 0;background:#007bff;color:#fff;border:none;padding:9px 16px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:bold}
.prov-btn:hover{background:#0056b3}
.prov-btn-secondary{background:#6c757d}
.prov-btn-secondary:hover{background:#545b62}
.prov-btn-danger{background:#dc3545}
.prov-btn-danger:hover{background:#c82333}
.prov-msg{margin-top:10px;font-size:13.5px}
.prov-msg-error{color:#c0392b}
.prov-msg-ok{color:#1e7e34}
.prov-info-line{white-space:pre-wrap;margin:12px 0;padding:10px;background:#f4f7fb;border-radius:8px;font-size:13px;color:#444}
.prov-sep{height:1px;background:#e5e8ee;margin:16px 0}
.prov-foto{margin:8px 0;padding:8px;border:1px solid #e5e8ee;border-radius:8px}
.portada-badge{display:inline-block;background:#2f6f3c;color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;margin-bottom:4px}
#providers-app{max-width:640px;margin:auto}
#providers-app:empty{display:none}

/* Pagina Sobre HelloLocals */
#about-content h2{font-size:16px;color:#1a4b8c;margin:16px 0 4px}
#about-content p{font-size:14px;color:#333;line-height:1.5;margin:0 0 12px}

/* Enlaces SEO proveedores */
.link-row{border:1px solid #e5e8ee;border-radius:8px;padding:8px;margin:8px 0}
.link-url{font-weight:bold;font-size:13px;color:#1a4b8c;word-break:break-all}
.link-meta{font-size:12px;color:#444;margin-top:4px}
.link-breakdown{font-size:11.5px;color:#555;margin-top:4px}
#pf-links-contrib{margin:6px 0}
#pf-links-contrib .gwt-DisclosurePanel-content{margin-left:14px;font-size:12px;color:#555;line-height:1.45}
.pf-links-code{display:block;margin:8px 0;padding:10px;background:#f4f4f4;border:1px solid #ddd;border-radius:6px;font-family:Consolas,Menlo,monospace;font-size:12.5px;color:#222;word-break:break-all}
.link-detail{font-size:11.5px;color:#555;margin-top:4px;line-height:1.45}
.link-ok{color:#1e7e34;font-weight:bold}
.link-ok_baja{color:#8a6d3b;font-weight:bold}
.link-err{color:#c0392b;font-weight:bold}
.link-pend{color:#8a6d3b;font-weight:bold}

/* Seccion Estado proveedores */
.prov-estado-row{margin:2px 0}
.prov-estado-row td{vertical-align:middle}
.prov-badge-ok{display:inline-block;margin-left:8px;background:#e6f4ea;color:#1e7e34;border:1px solid #b7dfc2;border-radius:10px;padding:0 8px;font-size:11px;font-weight:bold}
.prov-badge-no{display:inline-block;margin-left:8px;background:#fdecea;color:#c0392b;border:1px solid #f5c6cb;border-radius:10px;padding:0 8px;font-size:11px;font-weight:bold}
.prov-badge-none{display:inline-block;margin-left:8px;background:#fff4e5;color:#b26a00;border:1px solid #ffd8a8;border-radius:10px;padding:0 8px;font-size:11px;font-weight:bold}
.prov-general{margin-top:8px}
.prov-general .header{font-weight:bold;font-size:14px}
.prov-general-title{font-weight:bold;font-size:14px;color:#1a4b8c}
.prov-estado-label{font-weight:bold;color:#1a4b8c;font-size:13px;margin-right:4px}
.prov-estado-val{font-size:13px;color:#333;margin-right:2px}
.gwt-DisclosurePanel .prov-disc-arrow{display:inline-block;width:0;height:0;margin:3px 7px 0 0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:6px solid #555}
.gwt-DisclosurePanel-open .prov-disc-arrow{border-top:0;border-bottom:6px solid #555;border-left:5px solid transparent;border-right:5px solid transparent}
#pf-status-general{margin:10px 0}
#pf-status-general .gwt-DisclosurePanel-content{margin-left:14px;font-size:12px;color:#555;line-height:1.5}


/* Ubicacion del proveedor (mapa Leaflet) */
.prov-geo{margin:6px 0 10px}
.prov-geo-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0}
.prov-geo-label{font-size:12.5px;color:#666}
.prov-card input.prov-geo-km{width:90px}
.prov-map{width:100%;height:260px;margin-top:8px;border:1px solid #ccc;border-radius:8px;box-sizing:border-box;position:relative;z-index:0}
.prov-zones{margin:6px 0 10px}
#pf-zone-list{width:100%}
#pf-zone-list>table{width:100%;border-collapse:separate}
#pf-zone-list>table>tr>td,#pf-zone-list>table>tbody>tr>td{width:100%;padding:0;vertical-align:middle}
.zone-row{width:100%;border:1px solid #e0e0e0;border-radius:8px;padding:6px 8px;margin:6px 0;box-sizing:border-box}
.zone-row>tr>td,.zone-row>tbody>tr>td{padding:0;vertical-align:middle}
.zone-row>tr>td:first-child,.zone-row>tbody>tr>td:first-child{width:100%}
.zone-name{display:inline-block;cursor:pointer;font-size:13.5px;color:#1a4b8c;font-weight:bold}
.zone-name:hover{text-decoration:underline}
.zone-actions{white-space:nowrap}
.zone-actions>tr>td,.zone-actions>tbody>tr>td{padding:0 0 0 6px;vertical-align:middle}
.zone-actions .prov-btn{height:30px;font-size:12.5px;padding:0 10px;margin:0}
.prov-zones #btn-zone-add{margin-top:8px}
.prov-zones #btn-zone-save,.prov-zones #btn-zone-cancel{margin-top:0}
.prov-zone-hint{font-size:12px;color:#666;margin:4px 0}
.prov-zone-empty{font-size:13px;color:#666;margin:6px 0}
#pf-zone-detail{margin-top:8px}
#pf-zone-list-rec{width:100%}
#pf-zone-list-rec>table{width:100%;border-collapse:separate}
#pf-zone-list-rec>table>tr>td,#pf-zone-list-rec>table>tbody>tr>td{width:100%;padding:0;vertical-align:middle}
#pf-zone-rec-wrap{margin:6px 0 10px}
#pf-zone-rec-wrap .prov-zones{margin:6px 0 0}
.prov-check{display:block;font-size:13.5px;color:#333;margin:6px 0}
.prov-check input{margin-right:6px;vertical-align:middle}
.prov-zone-title{font-weight:bold;font-size:14px;color:#1a4b8c}

/* Pagina Sobre (contenido dinamico con MathJax) */
.sobre-app{width:100%}
.sobre-app h2{font-size:16px;color:#1a4b8c;margin:16px 0 4px}
.sobre-app p{font-size:14px;color:#333;line-height:1.5;margin:0 0 12px}
.sobre-app .sobre-formula{overflow-x:auto;margin:10px 0;text-align:center}