/* Kennel Profile - Perfil del Kennel (Diseno Premium, Botones Grises, Acordeon Publico) */

.kennel-profile-container, .kennel-details-accordion { font-family: "Plus Jakarta Sans", sans-serif; }
.kennel-profile-container { position: relative; width: 100%; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 0;}
.kennel-profile-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; filter: blur(10px); z-index: 1; }
.kennel-profile-content { position: relative; z-index: 2; text-align: left; padding: 40px; display: flex; align-items: center; background: rgba(215, 71, 9, 0.85); }
.kennel-profile-image { width: 130px; height: 130px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-right: 30px; overflow: hidden; position: relative; flex-shrink:0; }
.kennel-profile-image img { width: 100%; height: 100%; object-fit: cover; }
.kennel-profile-upload-label { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 24px; cursor: pointer; opacity: 0; transition: opacity 0.3s ease; z-index: 5;}
.kennel-profile-image:hover .kennel-profile-upload-label { opacity: 1; }
.kennel-profile-info { display: flex; flex-direction: column; justify-content: center; }
.kennel-profile-name { font-size: 28px; font-weight: 700; margin-bottom: 0; color: #ffffff; line-height: 1.1; }
.kennel-verified-badge { width: 24px; height: 24px; object-fit: contain; }
.verified-badge-wrapper { position: relative; display: inline-flex; align-items: center; cursor: pointer; outline: none; margin-left: 8px; }

.kennel-profile-button { margin-top: 15px; }
.kennel-profile-button .btn { display: inline-block; padding: 10px 20px; font-size: 15px; font-weight: bold; color: #fff; background-color: #000; border: none; border-radius: 100px; text-decoration: none; transition: 0.3s ease; cursor: pointer; text-transform: none !important; }
.kennel-profile-button .btn:hover { background-color: #333; }

.upload-progress-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 10;}
.loading-bar-inner { position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background-color: #D74709; transition: height 0.3s ease; }
.loading-percentage { position: relative; color: #fff; font-weight: 700; z-index: 11; font-size: 14px;}

/* Acordeones Backend */
.backend-wrapper { padding-top: 30px; }
.kennel-details-accordion { border: 1px solid #eee; border-radius: 12px; margin: 0 30px 15px 30px; overflow: hidden; background: #fff;}
.kennel-details-header { background-color: #fff; padding: 20px 25px; cursor: pointer; font-size: 16px; font-weight: 700; color: #333; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s;}
.kennel-details-header:hover { background: #fafafa; }
.kennel-details-header::after { content: '\f078'; font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900; color: #999; transition: 0.3s; }
.kennel-details-accordion.open .kennel-details-header::after { transform: rotate(180deg); color: #D74709;}
.kennel-details-content { display: none; padding: 25px; border-top: 1px solid #eee; background-color: #fdfdfd; }

.form-group-clean { margin-bottom: 15px; }
.form-group-clean label { display:block; margin-bottom:6px; font-weight:600; font-size: 13px; color: #444; }
.form-group-clean label i { color: #888; margin-right: 5px; font-size:15px; }
.form-group-clean input[type="text"], .form-group-clean input[type="url"], .form-group-clean input[type="number"], .form-group-clean input[type="date"], .form-group-clean textarea, .form-group-clean select { width: 100%; padding: 10px 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; box-sizing: border-box; font-family: "Plus Jakarta Sans", sans-serif; transition: border 0.2s; outline:none; background: #fff;}
.form-group-clean input:focus, .form-group-clean textarea:focus, .form-group-clean select:focus { border-color: #D74709; }
.form-group-clean textarea { resize: vertical; min-height: 100px;}

/* BOTON DE GUARDAR MINIMALISTA (Gris -> Negro, Derecha) */
.btn-save-clean { background: #e5e5e5; color: #333; border: none; padding: 10px 25px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; transition: 0.2s; width: auto; display: block; margin: 20px 0 0 auto; font-family: "Plus Jakarta Sans", sans-serif;}
.btn-save-clean:hover { background: #000; color: #fff; }

.templates-wrapper { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; padding: 15px; background: #f5f5f5; border-radius: 8px;}
.template-btn { background: #fff; border: 1px solid #ccc; padding: 8px 15px; border-radius: 20px; font-size: 13px; font-weight: 600; color: #555; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 6px;}
.template-btn:hover { background: #000; border-color: #000; color: #fff;}

.builder-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.builder-item { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid #ddd; padding: 15px; border-radius: 8px;}
.builder-item.locked { background: #f9f9f9; color: #888; align-items: center;}
.builder-item.sortable { cursor: grab; box-shadow: 0 2px 4px rgba(0,0,0,0.02);}
.builder-item.sortable:active { cursor: grabbing; }
.builder-item i.drag-handle { color: #ccc; font-size: 14px; margin-top: 12px;}
.builder-item.locked i.drag-handle { margin-top: 0; }

.builder-inputs { display: flex; flex: 1; gap: 10px; flex-wrap: wrap;}
.builder-inputs input.q-label { flex: 2; min-width: 200px; border: 1px solid #ddd; border-radius: 6px; padding: 10px; font-family: inherit; font-size: 14px; font-weight: 500; outline:none; transition:0.2s;}
.builder-inputs input.q-label:focus { border-color: #D74709;}
.builder-inputs select.q-type { flex: 1; min-width: 150px; border: 1px solid #ddd; border-radius: 6px; padding: 10px; font-family: inherit; font-size: 14px; background:#f9f9f9; outline:none;}
.builder-inputs input.q-options { flex: 100%; border: 1px dashed #ccc; padding: 10px; border-radius: 6px; font-family: inherit; font-size: 13px; margin-top: 5px; outline:none; background:#fffcfc;}
.builder-inputs input.q-options:focus { border-color: #D74709;}

.btn-remove-q { background: none; border: none; color: #e74c3c; cursor: pointer; font-size: 18px; padding: 5px; opacity: 0.5; transition: 0.2s; margin-top: 5px;}
.btn-remove-q:hover { opacity: 1; }
.btn-add-q { background: transparent; border: 2px dashed #ccc; color: #666; width: 100%; padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: 0.2s;}
.btn-add-q:hover { border-color: #D74709; color: #D74709; background: #fff9f5;}

.embed-tabs { display: flex; gap: 10px; margin-bottom: 25px; border-bottom: 2px solid #eee; padding-bottom: 15px; flex-wrap: wrap;}
.embed-tab-btn { background: #f9f9f9; border: 1px solid #eee; padding: 12px 20px; font-weight: 600; color: #555; cursor: pointer; border-radius: 8px; transition: 0.2s; font-size: 14px; font-family: inherit;}
.embed-tab-btn.active { background: #D74709; color: #fff; border-color: #D74709; }
.embed-tab-btn:hover:not(.active) { background: #eee; color: #333; }
.embed-tab-content { display: none; animation: fadeIn 0.3s; }
.embed-tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

.embed-3col-layout { display: grid; grid-template-columns: minmax(300px, 1fr) 1fr 1fr; gap: 30px; align-items: stretch; }
.embed-col-options { display: flex; flex-direction: column; gap: 10px;}
.options-inner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.embed-col-options input[type="color"] { width: 100%; height: 44px; padding: 2px; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; }

.embed-col-preview { border: 1px solid #ddd; border-radius: 12px; background: #fdfdfd; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.embed-col-preview p { margin: 0 0 20px 0; font-size: 14px; color: #555; font-weight: 600;}

.embed-col-code { border: 1px solid #ddd; border-radius: 12px; background: #fdfdfd; padding: 20px; display: flex; flex-direction: column; position: relative; }
.embed-col-code p { margin: 0 0 10px 0; font-size: 14px; color: #555; font-weight: 600;}
.embed-code-wrapper { position: relative; width: 100%; margin-bottom: 20px; display: flex;}
.embed-code-wrapper textarea { flex-grow: 1; width: 100%; font-family: monospace; font-size: 13px; background: #282c34; color: #abb2bf; padding: 15px; border-radius: 8px; border: none; resize: none; box-sizing: border-box; min-height: 180px;}
.embed-code-wrapper input { width: 100%; font-family: monospace; font-size: 13px; background: #f5f5f5; color: #333; padding: 12px; border-radius: 8px; border: 1px solid #ccc; box-sizing: border-box; }
.copy-embed-btn { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.1); color: #fff; border: none; border-radius: 5px; cursor: pointer; width: 35px; height: 35px; transition: 0.2s; display: flex; align-items: center; justify-content: center;}
.copy-embed-btn:hover { background: #D74709; }
.copy-embed-btn.dark { background: #333; }

.integration-step { background: #f9f9f9; border: 1px solid #eee; border-radius: 8px; padding: 20px; margin-bottom: 15px;}

#glp-toast { visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 8px; padding: 15px; position: fixed; z-index: 999999; left: 50%; bottom: 30px; transform: translateX(-50%); font-weight: 600; opacity: 0; transition: opacity 0.3s, bottom 0.3s; box-shadow: 0 10px 20px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; gap: 10px;}
#glp-toast.show { visibility: visible; opacity: 1; bottom: 50px; }

/* Estilos Toggle WhatsApp */
.wa-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; font-weight: 600; margin-bottom: 20px;}
.wa-toggle input { display: none; }
.wa-toggle .toggle-slider { width: 44px; height: 24px; background: #ccc; border-radius: 24px; position: relative; transition: 0.3s; }
.wa-toggle .toggle-slider::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; background:#fff; border-radius:50%; transition:0.3s; box-shadow:0 2px 5px rgba(0,0,0,0.2);}
.wa-toggle input:checked + .toggle-slider { background: #25D366; }
.wa-toggle input:checked + .toggle-slider::after { transform: translateX(20px); }

/* ESTILOS FRONTEND ACORDEON PUBLICO (Ancho completo, Divisor) */
.public-kennel-accordion { width: 100%; border-bottom: 1px solid #eee; background: #fff; font-family: "Plus Jakarta Sans", sans-serif; }
.public-kennel-header { padding: 25px 30px; cursor: pointer; font-size: 18px; font-weight: 700; color: #333; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; }
.public-kennel-header:hover { background: #fafafa; }
.public-kennel-header::after { content: '\f078'; font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900; color: #999; transition: 0.3s; }
.public-kennel-accordion.open .public-kennel-header::after { transform: rotate(180deg); color: #D74709;}

.public-kennel-content { display: none; padding: 10px 30px 40px 30px; background-color: #fff; }
.public-kennel-desc { font-size: 16px; color: #444; line-height: 1.7; margin-bottom: 30px; white-space: pre-wrap; max-width: 900px; }
.public-meta-grid { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px dashed #eee; }
.public-meta-item { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #333; font-weight: 500; }
.public-meta-item i { color: #D74709; font-size: 20px; }
.public-meta-item a { color: inherit; text-decoration: none; transition: 0.2s;}
.public-meta-item a:hover { color: #D74709;}

.public-socials { display: flex; gap: 15px; flex-wrap: wrap; align-items: center;}
.public-socials span { font-weight: 600; font-size: 14px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-right: 10px;}
.public-socials a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #f5f5f5; color: #555; font-size: 18px; text-decoration: none; transition: 0.2s; }
.public-socials a:hover { transform: translateY(-3px); color: #fff;}
.social-fb:hover { background: #1877F2; }
.social-ig:hover { background: #E1306C; }
.social-tt:hover { background: #000000; }
.social-yt:hover { background: #FF0000; }

@media (max-width: 1100px) { .embed-3col-layout { grid-template-columns: 1fr; } .embed-col-preview { min-height: 150px; } }
@media (max-width: 768px) { .kennel-profile-content { flex-direction: column; align-items: center; text-align: center; } .kennel-profile-image { margin-right: 0; margin-bottom: 15px; } .options-inner-grid { grid-template-columns: 1fr; } .kennel-details-accordion { margin: 0 15px 15px 15px; } .public-kennel-header, .public-kennel-content { padding-left: 20px; padding-right: 20px;} }