/* =============================================
   profile.css — Página de perfil de usuario
   Requiere: variables.css, layout.css, components.css
   ============================================= */

/*  CONTENEDOR PRINCIPAL  */
#profile-container {
  margin-left: var(--sidebar);
  margin-top: var(--header);
  min-height: calc(100vh - var(--header));
  background: var(--cream);
  padding: 44px;
}

/*  HEADER DEL PERFIL  */
.profile-header {
  max-width: 1100px;
  margin: 0 auto 44px;
}

/* BANNER */
.profile-banner {
  width: 100%; height: 250px; border-radius: 18px;
  background: #f0f0f0 center/cover;
  box-shadow: var(--sh-m); position: relative; margin-bottom: 20px;
}
.profile-banner.no-image {
  background: linear-gradient(135deg, var(--terra-l), var(--gold));
}

/* TARJETA DE PERFIL */
.profile-card {
  background: #fff; border-radius: var(--r); border: 1.5px solid var(--border);
  padding: 32px; box-shadow: var(--sh-m); margin-bottom: 24px;
}

/* FILA SUPERIOR — avatar · info · acciones */
.profile-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px; align-items: flex-start;
}

/* AVATAR */
.profile-avatar-wrap { position: relative; }

.profile-avatar {
  width: 130px; height: 130px; border-radius: 50%; object-fit: cover;
  border: 4px solid #fff; box-shadow: var(--sh-m); background: var(--soft); flex-shrink: 0;
}
.profile-avatar.no-image {
  background: linear-gradient(135deg, var(--cream-d), var(--soft));
  display: flex; align-items: center; justify-content: center;
  font-size: 50px; color: var(--terra);
}
.profile-badge {
  position: absolute; bottom: 0; right: 0;
  width: 36px; height: 36px; background: var(--terra); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; border: 3px solid #fff; box-shadow: var(--sh-s);
}

/* INFO PRINCIPAL */
.profile-type {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cream-d); border: 1.5px solid var(--border);
  padding: 5px 14px; border-radius: 50px;
  font-size: .78rem; font-weight: 600; color: var(--brown, #5C3218); margin-bottom: 12px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cream-d);
  border: 1.5px solid var(--border);
  padding: 5px 14px;
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--brown, #5C3218);
  margin-bottom: 12px;
}
#btn-valoracion:hover {
  color: var(--cream-d);
}
.btn-primary:hover {
  color: var(--cream-d);
  background: var(--terra-h);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(200, 88, 46, .35);
}
.profile-name {
  font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 700;
  color: var(--dark); line-height: 1.2; margin-bottom: 6px;
}
.profile-username { color: var(--muted); font-size: .95rem; margin-bottom: 16px; }
.profile-bio      { color: var(--muted); font-size: .95rem; line-height: 1.6; max-width: 600px; margin-bottom: 18px; }

.profile-meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.meta-item         { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.meta-item span    { color: var(--terra); font-weight: 600; }
.meta-item p       { color: var(--muted); }

.profile-location  { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .9rem; }

/* ACCIONES */
.profile-actions              { display: flex; gap: 12px; flex-wrap: wrap; }
.profile-actions .btn-p,
.profile-actions .btn-s       { min-width: 120px; }

/*  NAVEGACIÓN POR TABS  */
.profile-sections { max-width: 1100px; margin: 0 auto; }

.profile-tabs {
  display: flex; gap: 6px; margin-bottom: 32px;
  border-bottom: 1.5px solid var(--border);
}
.profile-tab {
  padding: 16px 24px; background: transparent; border: none;
  color: var(--muted); font-size: .95rem; font-weight: 500;
  cursor: pointer; position: relative; transition: color .2s;
  font-family: 'DM Sans', sans-serif;
}
.profile-tab:hover       { color: var(--terra); }
.profile-tab.active      { color: var(--terra); }
.profile-tab.active::after {
  content: ''; position: absolute;
  bottom: -1.5px; left: 0; right: 0; height: 2px; background: var(--terra);
  border-radius: 2px 2px 0 0;
}

/* Badge numérico dentro del tab */
.tab-count-badge {
  background: var(--terra); color: #fff;
  border-radius: 50px; font-size: .65rem; font-weight: 700;
  padding: 1px 7px; margin-left: 6px;
  vertical-align: middle; display: inline-block;
}

/* ============================================================
   BLOQUE 1 — Tabs (Valoraciones + Animales)
   ============================================================ */

/* Tarjeta con tabs: sin padding propio, el contenido lo gestiona */
.profile-card--tabs {
  padding: 0;
  overflow: hidden;
}

/* Cabecera del bloque tabs: tabs a la izq, botón añadir mascota a la der */
.profile-card-tabs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1.5px solid var(--border);
  gap: 12px;
}

/* Ajustar las tabs dentro de esta cabecera */
.profile-card--tabs .profile-tabs {
  margin-bottom: 0;
  border-bottom: none;
  flex: 1;
}

.profile-card--tabs .profile-tab {
  padding: 20px 22px;
}

/* Botón Añadir mascota pegado a la derecha */
.btn-add-pet {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: .82rem;
  padding: 8px 18px;
}

/* Área de contenido de cada tab con padding consistente */
.profile-tab-content--padded {
  padding: 28px;
}

/* ============================================================
   BLOQUE 2 — Publicaciones
   ============================================================ */

.profile-card--posts {
  padding: 0;
  overflow: hidden;
}

/* Cabecera de publicaciones: título a la izq, badge contador a la der */
.profile-card-posts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1.5px solid var(--border);
  gap: 12px;
}

/* El edit-section-title dentro del header de publicaciones no necesita margen */
.profile-card-posts-header .edit-section-title {
  margin-bottom: 0 !important;
}

/* Badge contador de publicaciones */
.posts-count-badge {
  background: var(--terra); color: #fff;
  border-radius: 50px; font-size: .78rem; font-weight: 700;
  padding: 3px 12px; flex-shrink: 0;
}

/* Grid de publicaciones con padding */
.profile-card--posts .publications-grid {
  padding: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 0;
}

/* Hover en cards de publicaciones del perfil */
.post-card-link:hover .post-card {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  border-color: var(--terra) !important;
}

/*  GRIDS DE CONTENIDO  */

/* Mascotas */
.pets-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px; margin-bottom: 0;
}
.pet-card {
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--r);
  overflow: hidden; cursor: pointer;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s;
}
.pet-card:hover { transform: translateY(-5px); box-shadow: var(--sh-m); border-color: var(--terra); }
.pet-card-img   { width: 100%; height: 180px; object-fit: cover; background: var(--soft); display: block; }
.pet-card-body  { padding: 18px; }
.pet-card-name  { font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
.pet-card-meta  { display: flex; gap: 12px; font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.pet-card-species,
.pet-card-age   { display: flex; align-items: center; gap: 4px; }
.pet-card-desc  {
  font-size: .85rem; color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Publicaciones */
.publications-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px; margin-bottom: 44px;
}

/*  ESTADO VACÍO  */
.empty-state {
  text-align: center; padding: 56px 44px;
  background: #fff; border: 1.5px dashed var(--border); border-radius: var(--r);
}
.empty-state-ico   { font-size: 3.5rem; margin-bottom: 16px; opacity: .5; }
.empty-state-title { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.empty-state-desc  { color: var(--muted); font-size: .95rem; margin-bottom: 24px; }

/*  ESTADÍSTICAS DEL PERFIL  */
.profile-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px; margin-bottom: 24px;
}
.stat-item {
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--r);
  padding: 22px; text-align: center;
  transition: box-shadow .25s, transform .25s;
}
.stat-item:hover      { box-shadow: var(--sh-m); transform: translateY(-3px); }
.stat-item-num        { font-family: 'Fraunces', serif; font-size: 1.8rem; font-weight: 700; color: var(--terra); margin-bottom: 4px; }
.stat-item-lbl        { font-size: .85rem; color: var(--muted); }

/*  COMENTARIOS EN PERFIL  */
.comments-section { max-width: 800px; }

.comment-card {
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--r);
  padding: 22px; margin-bottom: 16px; transition: box-shadow .25s;
}
.comment-card:hover { box-shadow: var(--sh-m); }

.comment-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.comment-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; border: 1.5px solid var(--border);
}
.comment-author { flex: 1; }

.comment-card .comment-name {
  font-family: 'Fraunces', serif; font-size: .95rem; font-weight: 600; color: var(--dark);
}
.comment-date   { font-size: .75rem; color: var(--muted); }

.comment-rating { display: flex; gap: 4px; margin-bottom: 12px; }
.comment-star   { color: var(--gold); font-size: .9rem; }
.comment-text   { color: var(--muted); font-size: .9rem; line-height: 1.6; }

/*  FAB — EDITAR PERFIL  */
.profile-edit-fab {
  position: fixed; bottom: 30px; right: 30px;
  width: 56px; height: 56px; background: var(--terra); border-radius: 50%; border: none;
  color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--sh-l); z-index: 100;
  transition: transform .2s, background .2s;
}
.profile-edit-fab:hover { background: var(--terra-h); transform: scale(1.1); }

/*  MODAL EDITAR PERFIL  */
.edit-profile-modal {
  position: fixed; inset: 0; background: rgba(24,12,4,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 400; padding: 20px;
}
.edit-profile-form {
  background: #fff; border-radius: var(--r); padding: 44px;
  max-width: 600px; width: 100%;
  box-shadow: var(--sh-l); border: 1.5px solid var(--border);
}
.edit-form-group  { margin-bottom: 22px; }
.edit-form-label  { display: block; font-weight: 600; color: var(--dark); margin-bottom: 8px; font-size: .9rem; }

.edit-form-input,
.edit-form-textarea {
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--border);
  border-radius: 10px; font-size: .9rem; color: var(--txt); transition: border-color .2s;
}
.edit-form-input:focus,
.edit-form-textarea:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px rgba(200,88,46,.1); }
.edit-form-textarea { resize: vertical; min-height: 100px; }

.edit-form-actions { display: flex; gap: 12px; margin-top: 32px; justify-content: flex-end; }

/*  FORMULARIO DE EDICIÓN (edit.blade)  */
.edit-section-title {
  font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 700;
  color: var(--dark); margin-bottom: 22px;
  display: flex; align-items: center; gap: 8px;
}

.edit-media-preview {
  width: 100%; height: 160px; border-radius: var(--r-s);
  background: var(--cream-d) center/cover;
  border: 1.5px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.edit-media-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--muted); font-size: .85rem; pointer-events: none;
}
.edit-media-placeholder i { font-size: 1.6rem; }

.edit-file-label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 18px; background: var(--soft);
  border: 1.5px solid var(--border); border-radius: 50px;
  font-size: .82rem; font-weight: 600; color: var(--txt);
  transition: border-color .2s, color .2s;
}
.edit-file-label:hover { border-color: var(--terra); color: var(--terra); }
.edit-file-input        { display: none; }

.edit-hint        { display: block; margin-top: 7px; font-size: .75rem; color: var(--muted); }
.edit-field-error {
    color: var(--terra);
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.alert-banner {
  display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px;
  border-radius: var(--r-s); font-size: .88rem;
  background: #EBF5E2; color: var(--green); border: 1.5px solid #c3e6a8;
}
.alert-banner--error { background: #FFF0E4; color: var(--terra); border-color: #f5c6a8; }

/*  AJUSTES / SETTINGS  */
.settings-option-grid { display: flex; gap: 14px; }
.settings-option {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 12px; border: 1.5px solid var(--border); border-radius: var(--r-s);
  cursor: pointer; text-align: center; transition: border-color .2s, background .2s;
}
.settings-option input           { display: none; }
.settings-option:hover           { border-color: var(--terra); background: var(--cream-d); }
.settings-option.selected        { border-color: var(--terra); background: #FFF0E4; }
.settings-option-ico             { font-size: 1.6rem; }
.settings-option-lbl             { font-size: .85rem; font-weight: 600; color: var(--txt); }

.settings-select {
  width: 100%; padding: 10px 38px 10px 16px;
  border: 1.5px solid var(--border); border-radius: var(--r-s);
  font-size: .9rem; color: var(--txt); background-color: #fff; cursor: pointer;
  outline: none; transition: border-color .2s; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A6248' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.settings-select:focus { border-color: var(--terra); }

.settings-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.settings-toggle-lbl  { font-weight: 600; font-size: .9rem; color: var(--dark); margin-bottom: 3px; }
.settings-toggle-hint { font-size: .78rem; color: var(--muted); }

.toggle-switch {
  position: relative; display: inline-block;
  width: 44px; height: 24px; flex-shrink: 0; cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-thumb {
  position: absolute; inset: 0; background: var(--border);
  border-radius: 50px; transition: background .2s;
}
.toggle-thumb::before {
  content: ''; position: absolute; width: 18px; height: 18px;
  left: 3px; top: 3px; background: #fff; border-radius: 50%;
  transition: transform .2s; box-shadow: var(--sh-s);
}
.toggle-switch input:checked + .toggle-thumb            { background: var(--terra); }
.toggle-switch input:checked + .toggle-thumb::before   { transform: translateX(20px); }

/* Botones Expandibles en el Banner */
.banner-actions {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  gap: 12px;
}
.banner-btn-p, .banner-btn-s {
  display: flex;
  align-items: center;
  height: 44px;
  border-radius: 50px;
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--sh-m);
  transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease !important;
  max-width: 44px;
  padding: 0;
}
.banner-btn-p {
  background: var(--terra);
  color: #fff;
}
.banner-btn-s {
  background: #fff;
  color: var(--dark);
  border: 1.5px solid var(--border);
}
.banner-btn-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}
.banner-btn-text {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.2s ease !important;
}
.banner-btn-p:hover, .banner-btn-s:hover {
  max-width: 180px;
  padding-right: 20px;
}
.banner-btn-p:hover .banner-btn-text, .banner-btn-s:hover .banner-btn-text {
  opacity: 1;
  transition-delay: 0.1s;
}
.banner-btn-s:hover { color: var(--terra); border-color: var(--terra); }

/* Campos bloqueados (Seguridad) */
.locked-input-group {
  position: relative;
}
.locked-input-group input {
  background-color: #f1f1f1 !important;
  color: #777;
  pointer-events: none;
}
.locked-overlay {
  position: absolute; inset: 0; z-index: 10; cursor: help;
}
.input-lock-icon {
  position: absolute; right: 15px; top: 38px; color: #aaa;
}

.edit-form-input.is-invalid,
.edit-form-textarea.is-invalid {
    border: 2px solid var(--terra) !important;
    background-color: rgba(230, 126, 34, 0.05);
}

/* =============================================
   SISTEMA DE VALORACIONES (show.blade)
   ============================================= */

.review-form-container {
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 22px 24px;
  margin-bottom: 28px;
}
.review-form-container h4 {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#starRating {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 14px;
  cursor: pointer;
  user-select: none;
}
#starRating i {
  font-size: 2rem;
  color: var(--border);
  transition: color .12s, transform .12s;
  display: inline-block;
}
#starRating i.star-lit     { color: var(--terra); }
#starRating i.star-preview { color: var(--terra-l); transform: scale(1.15); }

.review-list { display: flex; flex-direction: column; gap: 14px; }

.review-item {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-s);
  padding: 16px 18px;
  transition: box-shadow .22s;
}
.review-item:hover { box-shadow: var(--sh-s); }

.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.review-header strong {
  font-size: .88rem;
  font-weight: 700;
  color: var(--dark);
}
.review-stars {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  font-size: .9rem;
}
.review-stars .fa-solid,
.review-stars .fa-regular { color: var(--terra); }

.review-item > p {
  font-size: .85rem;
  color: var(--txt);
  line-height: 1.6;
  margin-bottom: 6px;
}
.review-item > small {
  font-size: .72rem;
  color: var(--muted);
}

/* Modal de confirmación */
body:has(#overwriteWarning[style*="display: block"]) {
  overflow: hidden;
  padding-right: var(--scrollbar-compensation, 15px);
}
#overwriteWarning {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 9999 !important;
  max-width: 420px;
  width: calc(100vw - 40px) !important;
  padding: 36px 36px 30px !important;
  background: var(--cream) !important;
  border-radius: 20px !important;
  border: 1.5px solid var(--border);
  box-shadow:
    0 0 0 100vmax rgba(16, 8, 2, .72),
    0 20px 80px rgba(16, 8, 2, .38) !important;
  text-align: center;
  animation: overwritePop .32s cubic-bezier(.34, 1.2, .64, 1) both;
}
#overwriteWarning > div:first-child {
  width: 56px !important;
  height: 56px !important;
  background: #FFF0E4;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 18px !important;
  font-size: 1.4rem !important;
  color: var(--terra) !important;
}
#overwriteWarning h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 10px !important;
  line-height: 1.2;
}
#overwriteWarning p {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 24px !important;
  max-width: 320px;
  margin-left: auto !important;
  margin-right: auto !important;
}
#overwriteWarning > div:last-child {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-top: 0 !important;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
@keyframes overwritePop {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.93); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/*  RESPONSIVE  */
@media (max-width: 900px) {
  #profile-container { padding: 22px; margin-left: 0; }
}

@media (max-width: 768px) {
  .profile-top              { grid-template-columns: 1fr; gap: 22px; }
  .profile-avatar           { width: 100px; height: 100px; }
  .profile-name             { font-size: 1.5rem; }
  .profile-banner           { height: 150px; }
  .pets-grid                { grid-template-columns: 1fr; }
  .profile-card--posts .publications-grid { grid-template-columns: 1fr; }
  .profile-card-tabs-header { flex-wrap: wrap; gap: 8px; padding: 12px 18px; }
  .profile-card-posts-header { padding: 14px 18px; }
  .profile-tab-content--padded { padding: 18px; }
  .profile-card--posts .publications-grid { padding: 18px; }
  .btn-add-pet              { width: 100%; justify-content: center; }
  .profile-edit-fab         { bottom: 20px; right: 20px; width: 48px; height: 48px; font-size: 18px; }
  .edit-profile-form        { padding: 28px; }
}

@media (max-width: 480px) {
  #profile-container            { padding: 16px; }
  .profile-card                 { padding: 20px; }
  .profile-name                 { font-size: 1.2rem; }
  .profile-meta                 { flex-direction: column; gap: 12px; }
  .profile-actions              { flex-direction: column; }
  .profile-actions .btn-p,
  .profile-actions .btn-s       { width: 100%; }
}