/* ========================================================
   ESTILOS OFICIALES REVICASA (CLON VISUAL EXACTO APP NATIVA)
   ======================================================== */

:root {
  /* Identidad Nube: Naranja tirando a amarillo (Ámbar cálido solar) */
  --rev-teal: #F59E0B;
  --rev-teal-dark: #B45309;
  --rev-teal-light: #FFFBEB;
  --rev-teal-active: #FBBF24;
  --rev-gray-bg: #F5F7FA;
  --rev-pill-bg: #ECEEF1;
  --rev-card-bg: #FFFFFF;
  --rev-text: #1D1D1F;
  --rev-text-muted: #64748B;
}

/* Cabecera Oficial Revicasa Curvada */
.rev-official-header {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  border-radius: 0 0 28px 28px;
  padding: 16px 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.35);
  position: sticky;
  top: 0;
  z-index: 90;
}

.rev-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rev-back-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #B45309;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.1s ease;
}

.rev-back-btn:active {
  transform: scale(0.92);
}

.rev-header-title {
  font-size: 22px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.rev-header-cost {
  font-size: 13.5px;
  font-weight: 700;
  color: #FEF3C7;
  margin-top: 2px;
  display: block;
}

.rev-btn-refresh-clean {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
}

/* Sub-notificación */
.rev-subnotice {
  padding: 12px 18px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rev-text-muted);
}

/* Contenedor de Secciones y Desplazamiento Continuo */
.rev-sections-container {
  padding: 8px 14px 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Tarjeta de Sección / Estancia (Fondo Turquesa Suave) */
.rev-section-card {
  background: var(--rev-teal-light);
  border-radius: 20px;
  padding: 14px 14px 8px;
  border: 1px solid rgba(0, 196, 180, 0.2);
}

.rev-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.rev-sec-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--rev-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--rev-teal);
  flex-shrink: 0;
}

.rev-sec-info {
  flex: 1;
  margin: 0 10px;
}

.rev-sec-title {
  font-size: 14px;
  font-weight: 800;
  color: #0F172A;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.25;
}

.rev-sec-meta {
  font-size: 12px;
  margin-top: 3px;
  display: flex;
  gap: 8px;
}

.rev-sec-reviewed {
  color: var(--rev-text-muted);
  font-weight: 600;
}

.rev-sec-incidents {
  color: var(--rev-teal-dark);
  font-weight: 700;
}

.rev-sec-incidents.has-incidents {
  color: #DC2626;
}

.rev-sec-toggle-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #1D1D1F;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.rev-section-card.collapsed .rev-sec-toggle-btn {
  transform: rotate(180deg);
}

.rev-section-card.collapsed .rev-section-body {
  display: none;
}

/* Input de Coste Estimado de la Sección */
.rev-coste-wrap {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #D1D5DB;
  padding: 8px 12px;
  margin: 10px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rev-coste-input {
  border: none;
  outline: none;
  font-size: 14px;
  color: #1D1D1F;
  width: 100%;
  background: transparent;
}

.rev-coste-symbol {
  font-weight: 700;
  color: #64748B;
  margin-left: 6px;
}

/* Element Cards (Tarjetas Blancas de cada Subapartado) */
.rev-item-card {
  background: var(--rev-card-bg);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  border: 1px solid #E2E8F0;
}

.rev-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.rev-item-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding-right: 8px;
}

.rev-item-info-btn {
  background: none;
  border: none;
  font-size: 16px;
  color: #94A3B8;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.rev-item-title {
  font-size: 15px;
  font-weight: 800;
  color: #1E293B;
  line-height: 1.3;
}

.rev-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.rev-circle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease;
}

.rev-circle-btn:active {
  transform: scale(0.92);
}

.rev-btn-camera {
  background: #CBD5E1;
  color: #475569;
}

.rev-btn-camera.has-photos {
  background: var(--rev-teal);
  color: #FFFFFF;
}

.rev-badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--rev-teal-dark);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #FFFFFF;
  padding: 0 3px;
}

.rev-btn-notes {
  background: var(--rev-teal);
  color: #FFFFFF;
}

.rev-btn-notes.has-comment {
  background: #007A70;
}

/* Pastilla de 5 Calificaciones de Revicasa (Pill Gris) */
.rev-rating-pill-wrap {
  background: var(--rev-pill-bg);
  border-radius: 26px;
  padding: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rev-rate-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #64748B;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.rev-rate-btn:active {
  transform: scale(0.92);
}

/* Estados Activos */
.rev-rate-btn.active.r-bien,
.rev-rate-btn.active.r-aceptable {
  background: var(--rev-teal-active);
  color: #004D40;
  box-shadow: 0 2px 6px rgba(0, 196, 180, 0.4);
}

.rev-rate-btn.active.r-mal {
  background: #FB923C;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(251, 146, 60, 0.4);
}

.rev-rate-btn.active.r-critico {
  background: #EF4444;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45);
}

.rev-rate-btn.active.r-noexiste {
  background: #94A3B8;
  color: #FFFFFF;
}

.rev-rating-legend {
  font-size: 11px;
  font-weight: 600;
  color: #94A3B8;
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.2px;
}

/* Preview de Nota dentro de la tarjeta si ya existe */
.rev-note-preview {
  margin-top: 8px;
  padding: 8px 10px;
  background: #F8FAFC;
  border-left: 3px solid var(--rev-teal);
  border-radius: 4px;
  font-size: 12.5px;
  color: #334155;
  line-height: 1.35;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rev-btn-edit-note {
  background: none;
  border: none;
  color: var(--rev-teal-dark);
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
}

/* Botón Companion IA en Estado General */
.btn-companion-autofill {
  width: 100%;
  margin-top: 8px;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #FFFFFF;
  border: none;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 3px 8px rgba(0, 196, 180, 0.3);
}

.btn-companion-autofill:active {
  transform: scale(0.97);
}

/* Bottom Sheet Modal para Notas y Fotos */
.rev-modal-overlay.active {
  display: flex !important;
}
.rev-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeInModal 0.2s ease-out;
}

.rev-bottom-sheet {
  background: #FFFFFF;
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0,0,0,0.15);
  animation: slideUpSheet 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

@keyframes slideUpSheet {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.rev-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.rev-sheet-title {
  font-size: 17px;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

.rev-sheet-close {
  background: #F1F5F9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
}

.rev-sheet-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border-radius: 14px;
  border: 1.5px solid #CBD5E1;
  font-size: 15px;
  color: #1E293B;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}

.rev-sheet-textarea:focus {
  border-color: var(--rev-teal);
  outline: none;
}

.rev-sheet-btn-save {
  margin-top: 14px;
  background: var(--rev-teal);
  color: #FFFFFF;
  border: none;
  padding: 14px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.rev-sheet-btn-save:active {
  background: var(--rev-teal-dark);
}


/* ========================================================
   SISTEMA DE COLORES PASTEL APPLE PARA CADA CATEGORÍA
   ======================================================== */

.rev-section-card {
  border-radius: 20px;
  padding: 16px 14px 10px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.04);
  position: relative;
}

/* 01 Parcela y Vallado - Pastel Salvia */
.theme-parcela { background: #F1F6F2 !important; border: 1.5px solid #D5E4D8 !important; }
.theme-parcela .rev-sec-title { color: #3B6E4C !important; }
.theme-parcela .rev-sec-icon-wrap { background: #FFFFFF; border: 1.5px solid #D5E4D8; color: #3B6E4C; }
.theme-parcela .rev-item-card { background: #FAFCFA !important; border: 1px solid #DCEADB !important; border-left: 4px solid #3B6E4C !important; }

/* 02 Jardín y Piscina - Pastel Menta Marina */
.theme-jardin { background: #EFF8F7 !important; border: 1.5px solid #CEEBE8 !important; }
.theme-jardin .rev-sec-title { color: #267571 !important; }
.theme-jardin .rev-sec-icon-wrap { background: #FFFFFF; border: 1.5px solid #CEEBE8; color: #267571; }
.theme-jardin .rev-item-card { background: #FAFEFD !important; border: 1px solid #D5EFEB !important; border-left: 4px solid #267571 !important; }

/* 03 Garaje y Almacén - Pastel Acero Perlado */
.theme-garaje { background: #F3F5F8 !important; border: 1.5px solid #D7DFE9 !important; }
.theme-garaje .rev-sec-title { color: #455972 !important; }
.theme-garaje .rev-sec-icon-wrap { background: #FFFFFF; border: 1.5px solid #D7DFE9; color: #455972; }
.theme-garaje .rev-item-card { background: #FAFBFC !important; border: 1px solid #DFE5EE !important; border-left: 4px solid #455972 !important; }

/* 04 Fachada y Envolvente - Pastel Arena Cálida */
.theme-fachada { background: #FAF6F0 !important; border: 1.5px solid #EDE3D2 !important; }
.theme-fachada .rev-sec-title { color: #7A5932 !important; }
.theme-fachada .rev-sec-icon-wrap { background: #FFFFFF; border: 1.5px solid #EDE3D2; color: #7A5932; }
.theme-fachada .rev-item-card { background: #FDFCFA !important; border: 1px solid #F0E9DC !important; border-left: 4px solid #7A5932 !important; }

/* 05 Cubierta y Tejado - Pastel Arcilla Ceniza */
.theme-cubierta { background: #F9F2F2 !important; border: 1.5px solid #EDD6D6 !important; }
.theme-cubierta .rev-sec-title { color: #824646 !important; }
.theme-cubierta .rev-sec-icon-wrap { background: #FFFFFF; border: 1.5px solid #EDD6D6; color: #824646; }
.theme-cubierta .rev-item-card { background: #FDFBFB !important; border: 1px solid #F2DEDE !important; border-left: 4px solid #824646 !important; }

/* 06 Terrazas y Porche - Pastel Albaricoque Seda */
.theme-terrazas { background: #FDF4EE !important; border: 1.5px solid #F7DFCE !important; }
.theme-terrazas .rev-sec-title { color: #8E5120 !important; }
.theme-terrazas .rev-sec-icon-wrap { background: #FFFFFF; border: 1.5px solid #F7DFCE; color: #8E5120; }
.theme-terrazas .rev-item-card { background: #FFFBF9 !important; border: 1px solid #FCE5D6 !important; border-left: 4px solid #8E5120 !important; }

/* 07 Puerta Principal - Pastel Roble Suave */
.theme-puerta { background: #F7F3EE !important; border: 1.5px solid #EAE0D3 !important; }
.theme-puerta .rev-sec-title { color: #6E4C2E !important; }
.theme-puerta .rev-sec-icon-wrap { background: #FFFFFF; border: 1.5px solid #EAE0D3; color: #6E4C2E; }
.theme-puerta .rev-item-card { background: #FCFAF8 !important; border: 1px solid #EFE6DC !important; border-left: 4px solid #6E4C2E !important; }

/* 08 Recibidor y Cuadro Eléctrico - Pastel Ámbar Atenuado */
.theme-recibidor { background: #FDF9ED !important; border: 1.5px solid #F6ECC8 !important; }
.theme-recibidor .rev-sec-title { color: #7A5D12 !important; }
.theme-recibidor .rev-sec-icon-wrap { background: #FFFFFF; border: 1.5px solid #F6ECC8; color: #7A5D12; }
.theme-recibidor .rev-item-card { background: #FFFCF5 !important; border: 1px solid #F8F0D4 !important; border-left: 4px solid #7A5D12 !important; }

/* 09 Escalera Interior - Pastel Lavanda Niebla */
.theme-escalera { background: #F3F3FA !important; border: 1.5px solid #DDDEF0 !important; }
.theme-escalera .rev-sec-title { color: #43497D !important; }
.theme-escalera .rev-sec-icon-wrap { background: #FFFFFF; border: 1.5px solid #DDDEF0; color: #43497D; }
.theme-escalera .rev-item-card { background: #FAF9FE !important; border: 1px solid #E4E5F4 !important; border-left: 4px solid #43497D !important; }

/* 10 Cocina - Pastel Pistacho Fresco */
.theme-cocina { background: #F0F8F3 !important; border: 1.5px solid #D0EBD7 !important; }
.theme-cocina .rev-sec-title { color: #246B40 !important; }
.theme-cocina .rev-sec-icon-wrap { background: #FFFFFF; border: 1.5px solid #D0EBD7; color: #246B40; }
.theme-cocina .rev-item-card { background: #FAFCFA !important; border: 1px solid #D9EFE0 !important; border-left: 4px solid #246B40 !important; }

/* 11 Salón Comedor - Pastel Azul Brisa */
.theme-salon { background: #EFF5FB !important; border: 1.5px solid #D0E3F5 !important; }
.theme-salon .rev-sec-title { color: #1F5987 !important; }
.theme-salon .rev-sec-icon-wrap { background: #FFFFFF; border: 1.5px solid #D0E3F5; color: #1F5987; }
.theme-salon .rev-item-card { background: #F9FCFE !important; border: 1px solid #D8E8F8 !important; border-left: 4px solid #1F5987 !important; }

/* 12 Baños y Aseos - Pastel Turquesa Spa */
.theme-banos { background: #EDF8F8 !important; border: 1.5px solid #CDECEC !important; }
.theme-banos .rev-sec-title { color: #16696C !important; }
.theme-banos .rev-sec-icon-wrap { background: #FFFFFF; border: 1.5px solid #CDECEC; color: #16696C; }
.theme-banos .rev-item-card { background: #F9FCFC !important; border: 1px solid #D6F1F1 !important; border-left: 4px solid #16696C !important; }

/* 13 Dormitorios - Pastel Malva Seda */
.theme-dormitorios { background: #F6F1F9 !important; border: 1.5px solid #E7DAF2 !important; }
.theme-dormitorios .rev-sec-title { color: #5C3A73 !important; }
.theme-dormitorios .rev-sec-icon-wrap { background: #FFFFFF; border: 1.5px solid #E7DAF2; color: #5C3A73; }
.theme-dormitorios .rev-item-card { background: #FAF8FC !important; border: 1px solid #ECE0F6 !important; border-left: 4px solid #5C3A73 !important; }

/* 14 Sala Calderas / Clima - Pastel Rosa Ceniza */
.theme-calderas { background: #FBF2F1 !important; border: 1.5px solid #F2D8D6 !important; }
.theme-calderas .rev-sec-title { color: #853B36 !important; }
.theme-calderas .rev-sec-icon-wrap { background: #FFFFFF; border: 1.5px solid #F2D8D6; color: #853B36; }
.theme-calderas .rev-item-card { background: #FCF8F8 !important; border: 1px solid #F5DFDE !important; border-left: 4px solid #853B36 !important; }

/* Element Cards (Apple Card Design) */
.rev-item-card {
  border-radius: 16px;
  padding: 14px 14px 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rev-item-card:focus-within {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}

.apple-cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

/* Apple Circular Action Buttons (Cámara y Notas) */
.apple-circle-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #FFFFFF;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.apple-circle-btn:active {
  transform: scale(0.92);
}

.apple-btn-camera.has-photos {
  background: #007AFF !important;
  color: #FFFFFF !important;
  border-color: #007AFF !important;
  box-shadow: 0 3px 10px rgba(0, 122, 255, 0.35) !important;
}

.apple-btn-notes.has-comment {
  background: #10B981 !important;
  color: #FFFFFF !important;
  border-color: #10B981 !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35) !important;
}

/* Segmented Control Calificación Apple (6 Opciones: N/A, Crítico, Mal, Aceptable, Bien, Óptimo) */
.apple-segmented-rating {
  background: rgba(230, 234, 240, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 14px;
  padding: 4px;
  display: flex;
  gap: 4px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  margin-top: 8px;
}

.apple-rate-btn {
  flex: 1;
  min-height: 48px;
  border-radius: 10px;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
  padding: 4px 1px;
}

.apple-rate-btn:active {
  transform: scale(0.92);
}

.apple-rate-sym {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  color: #475569;
}

.apple-rate-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: #64748B;
  text-transform: uppercase;
}

/* Estados Activos Apple */
.apple-rate-btn.active {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.apple-rate-btn.active .apple-rate-sym,
.apple-rate-btn.active .apple-rate-lbl {
  color: #FFFFFF !important;
}

.apple-rate-btn.opt-noexiste.active, .apple-rate-btn.opt-na.active {
  background: #64748B !important;
}

.apple-rate-btn.opt-critico.active {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35) !important;
}

.apple-rate-btn.opt-mal.active {
  background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%) !important;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.35) !important;
}

.apple-rate-btn.opt-aceptable.active {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%) !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35) !important;
}

.apple-rate-btn.opt-bien.active {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
}



/* Botón Companion IA estilo Apple Intelligence */
.btn-apple-companion {
  width: 100%;
  margin-top: 10px;
  background: linear-gradient(135deg, #FFFFFF 0%, #F5F7FD 100%);
  border: 1.5px solid #007AFF;
  color: #007AFF;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 3px 10px rgba(0, 122, 255, 0.12);
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-apple-companion:active {
  transform: scale(0.97);
  background: #EBF2FE;
}


/* ========================================================
   ESTILOS OFICIALES REVICASA v21.0
   BOTONERA IDÉNTICA A REVICASA: BIEN, ACEPTABLE, MAL, CRÍTICO, NO EXISTE
   Y PALETAS PASTEL APPLE POR CATEGORÍA
   ======================================================== */

/* Contenedor Segmentado Superior para alternar Vistas */
.rev-view-switch-bar {
  display: flex;
  background: #E8ECEF;
  border-radius: 12px;
  padding: 4px;
  margin: 10px 16px 14px 16px;
  gap: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}

.rev-switch-tab {
  flex: 1;
  padding: 8px 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: #64748B;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.rev-switch-tab.active {
  background: #FFFFFF;
  color: var(--rev-teal-dark);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* ========================================================
   PALETA PASTEL APPLE POR CATEGORÍA
   ======================================================== */

/* 1. Exteriores (Arena Cálida / Ocre Dorado Pastel) */
.rev-section-card.cat-exterior {
  background: #FFFFFF;
  border: 1.5px solid #FDE68A;
}
.rev-section-card.cat-exterior .rev-section-head {
  background: #FFFBEB;
  border-bottom: 1px solid #FDE68A;
}
.cat-tag-exterior {
  background: #FFFBEB !important;
  color: #B45309 !important;
  border: 1px solid #FDE68A !important;
}

/* 2. Recibidor y Cuadro Eléctrico (Ámbar / Miel Pastel) */
.rev-section-card.cat-recibidor {
  background: #FFFFFF;
  border: 1.5px solid #FFE082;
}
.rev-section-card.cat-recibidor .rev-section-head {
  background: #FFF8E1;
  border-bottom: 1px solid #FFE082;
}
.cat-tag-recibidor {
  background: #FFF8E1 !important;
  color: #B45309 !important;
  border: 1px solid #FFE082 !important;
}

/* 3. Cocina (Menta Turquesa Pastel Revicasa) */
.rev-section-card.cat-cocina {
  background: #FFFFFF;
  border: 1.5px solid #80CBC4;
}
.rev-section-card.cat-cocina .rev-section-head {
  background: #E0F2F1;
  border-bottom: 1px solid #80CBC4;
}
.cat-tag-cocina {
  background: #E0F2F1 !important;
  color: #00796B !important;
  border: 1px solid #80CBC4 !important;
}

/* 4. Salón Comedor (Azul Cielo Pastel) */
.rev-section-card.cat-salon {
  background: #FFFFFF;
  border: 1.5px solid #BAE6FD;
}
.rev-section-card.cat-salon .rev-section-head {
  background: #E0F2FE;
  border-bottom: 1px solid #BAE6FD;
}
.cat-tag-salon {
  background: #E0F2FE !important;
  color: #0369A1 !important;
  border: 1px solid #BAE6FD !important;
}

/* 5. Dormitorios (Lavanda / Morado Suave Pastel) */
.rev-section-card.cat-dormitorios {
  background: #FFFFFF;
  border: 1.5px solid #E9D5FF;
}
.rev-section-card.cat-dormitorios .rev-section-head {
  background: #F3E8FF;
  border-bottom: 1px solid #E9D5FF;
}
.cat-tag-dormitorios {
  background: #F3E8FF !important;
  color: #6B21A8 !important;
  border: 1px solid #E9D5FF !important;
}

/* 6. Baños y Aseos (Aguamarina / Celeste Pastel) */
.rev-section-card.cat-banos {
  background: #FFFFFF;
  border: 1.5px solid #B2EBF2;
}
.rev-section-card.cat-banos .rev-section-head {
  background: #E0F7FA;
  border-bottom: 1px solid #B2EBF2;
}
.cat-tag-banos {
  background: #E0F7FA !important;
  color: #00838F !important;
  border: 1px solid #B2EBF2 !important;
}

/* 7. Escalera y Distribuidores (Melocotón / Cálido Pastel) */
.rev-section-card.cat-escalera {
  background: #FFFFFF;
  border: 1.5px solid #FFD8CC;
}
.rev-section-card.cat-escalera .rev-section-head {
  background: #FFF1ED;
  border-bottom: 1px solid #FFD8CC;
}
.cat-tag-escalera {
  background: #FFF1ED !important;
  color: #9A3412 !important;
  border: 1px solid #FFD8CC !important;
}

/* 8. Caldera e Instalaciones Térmicas (Rosa Suave / Cálido Pastel) */
.rev-section-card.cat-caldera {
  background: #FFFFFF;
  border: 1.5px solid #FECDD3;
}
.rev-section-card.cat-caldera .rev-section-head {
  background: #FFE4E6;
  border-bottom: 1px solid #FECDD3;
}
.cat-tag-caldera {
  background: #FFE4E6 !important;
  color: #9F1239 !important;
  border: 1px solid #FECDD3 !important;
}

/* 9. Estructura, Orientación y Confort (Índigo Pastel) */
.rev-section-card.cat-estructura {
  background: #FFFFFF;
  border: 1.5px solid #DDD6FE;
}
.rev-section-card.cat-estructura .rev-section-head {
  background: #EDE9FE;
  border-bottom: 1px solid #DDD6FE;
}
.cat-tag-estructura {
  background: #EDE9FE !important;
  color: #3730A3 !important;
  border: 1px solid #DDD6FE !important;
}

/* ========================================================
   BOTONERA OFICIAL REVICASA (CLON VISUAL EXACTO PANTALLAZO)
   5 BOTONES CIRCULARES DENTRO DE PÍLDORA GRIS
   1. ✓ (Bien)
   2. 👍 (Aceptable)
   3. 👎 (Mal)
   4. ! (Crítico)
   5. ✕ (No existe)
   Y LEYENDA: Bien . Aceptable . Mal . Crítico . No existe
   ======================================================== */

.rev-rating-pill-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  width: 100%;
}

.rev-rating-bar {
  background: #E8ECEF;
  border-radius: 999px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.rev-circle-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 800;
  color: #64748B;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.rev-circle-btn:active {
  transform: scale(0.90);
}

.rev-circle-btn .rev-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Estados Inactivos con color propio solicitado por Antonio */
.rev-circle-btn.opt-bien { color: #16A34A; }
.rev-circle-btn.opt-aceptable { color: #16A34A; }
.rev-circle-btn.opt-mal { color: #EF4444; }
.rev-circle-btn.opt-critico { color: #DC2626; font-size: 22px; font-weight: 900; }
.rev-circle-btn.opt-noexiste { color: #64748B; }

/* Estados Activos Conforme a la Aplicación Revicasa */
.rev-circle-btn.opt-bien.active {
  background: #16A34A !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.45) !important;
  transform: scale(1.08);
}

.rev-circle-btn.opt-aceptable.active {
  background: #16A34A !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.45) !important;
  transform: scale(1.08);
}

.rev-circle-btn.opt-mal.active {
  background: #EF4444 !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.45) !important;
  transform: scale(1.08);
}

.rev-circle-btn.opt-critico.active {
  background: #DC2626 !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.48) !important;
  transform: scale(1.08);
}

.rev-circle-btn.opt-noexiste.active {
  background: #64748B !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 8px rgba(100, 116, 139, 0.45) !important;
  transform: scale(1.08);
}

.rev-rating-labels {
  font-size: 11px;
  font-weight: 500;
  color: #8E8E93;
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.2px;
  user-select: none;
}

/* Botones de Acción Superiores en Item Card (Cámara y Observaciones) */
.rev-act-circle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #E8ECEF;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.rev-act-circle-btn:active {
  transform: scale(0.92);
}

.rev-act-circle-btn.btn-notes {
  background: #E0F2F1;
  color: var(--rev-teal-dark);
}

.rev-act-circle-btn.btn-notes.has-comment {
  background: var(--rev-teal);
  color: #FFFFFF;
}

.rev-act-circle-btn.btn-camera.has-photos {
  background: var(--rev-teal);
  color: #FFFFFF;
}

/* Badge contador de fotos */
.rev-act-circle-btn .rev-badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--rev-teal-dark);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}



/* ========================================================
   COLORES PASTEL APPLE PARA LAS 9 CATEGORÍAS OFICIALES REVICASA
   ======================================================== */

/* 1. ZONAS EXTERIORES (Arena C\xe1lida / \xc1mbar Solar Pastel) */
.rev-section-card.cat-exterior {
  background: #FFFFFF;
  border: 1.5px solid #FDE68A;
}
.rev-section-card.cat-exterior .rev-section-head {
  background: #FFFBEB;
  border-bottom: 1px solid #FDE68A;
}
.cat-tag-exterior {
  background: #FFFBEB !important;
  color: #B45309 !important;
  border: 1px solid #FDE68A !important;
}

/* 2. COCINA (Menta Turquesa Revicasa) */
.rev-section-card.cat-cocina {
  background: #FFFFFF;
  border: 1.5px solid #80CBC4;
}
.rev-section-card.cat-cocina .rev-section-head {
  background: #E0F2F1;
  border-bottom: 1px solid #80CBC4;
}
.cat-tag-cocina {
  background: #E0F2F1 !important;
  color: #00796B !important;
  border: 1px solid #80CBC4 !important;
}

/* 3. BAÑOS (Aguamarina / Celeste) */
.rev-section-card.cat-banos {
  background: #FFFFFF;
  border: 1.5px solid #B2EBF2;
}
.rev-section-card.cat-banos .rev-section-head {
  background: #E0F7FA;
  border-bottom: 1px solid #B2EBF2;
}
.cat-tag-banos {
  background: #E0F7FA !important;
  color: #00838F !important;
  border: 1px solid #B2EBF2 !important;
}

/* 4. ESTANCIAS DE LA VIVIENDA (Azul Cielo Pastel) */
.rev-section-card.cat-estancias, .rev-section-card.cat-salon, .rev-section-card.cat-dormitorios {
  background: #FFFFFF;
  border: 1.5px solid #BAE6FD;
}
.rev-section-card.cat-estancias .rev-section-head, .rev-section-card.cat-salon .rev-section-head, .rev-section-card.cat-dormitorios .rev-section-head {
  background: #E0F2FE;
  border-bottom: 1px solid #BAE6FD;
}
.cat-tag-estancias {
  background: #E0F2FE !important;
  color: #0284C7 !important;
  border: 1px solid #BAE6FD !important;
}

/* 5. INSTALACIÓN ELÉCTRICA (Ámbar / Miel Pastel) */
.rev-section-card.cat-electrica, .rev-section-card.cat-recibidor {
  background: #FFFFFF;
  border: 1.5px solid #FFE082;
}
.rev-section-card.cat-electrica .rev-section-head, .rev-section-card.cat-recibidor .rev-section-head {
  background: #FFF8E1;
  border-bottom: 1px solid #FFE082;
}
.cat-tag-electrica {
  background: #FFF8E1 !important;
  color: #B45309 !important;
  border: 1px solid #FFE082 !important;
}

/* 6. FONTANERÍA Y SANEAMIENTO (Azul Glaciar / Celeste) */
.rev-section-card.cat-fontaneria {
  background: #FFFFFF;
  border: 1.5px solid #C7D7FE;
}
.rev-section-card.cat-fontaneria .rev-section-head {
  background: #EEF4FF;
  border-bottom: 1px solid #C7D7FE;
}
.cat-tag-fontaneria {
  background: #EEF4FF !important;
  color: #3538CD !important;
  border: 1px solid #C7D7FE !important;
}

/* 7. CLIMATIZACIÓN (Rosa Suave / Salmón Cálido) */
.rev-section-card.cat-clima, .rev-section-card.cat-caldera {
  background: #FFFFFF;
  border: 1.5px solid #FECDD3;
}
.rev-section-card.cat-clima .rev-section-head, .rev-section-card.cat-caldera .rev-section-head {
  background: #FFE4E6;
  border-bottom: 1px solid #FECDD3;
}
.cat-tag-clima {
  background: #FFE4E6 !important;
  color: #BE123C !important;
  border: 1px solid #FECDD3 !important;
}

/* 8. ESTRUCTURA (Melocotón Cálido Pastel) */
.rev-section-card.cat-estructura, .rev-section-card.cat-escalera {
  background: #FFFFFF;
  border: 1.5px solid #FFD8CC;
}
.rev-section-card.cat-estructura .rev-section-head, .rev-section-card.cat-escalera .rev-section-head {
  background: #FFF1ED;
  border-bottom: 1px solid #FFD8CC;
}
.cat-tag-estructura {
  background: #FFF1ED !important;
  color: #C2410C !important;
  border: 1px solid #FFD8CC !important;
}

/* 9. ORIENTACIÓN Y CONFORT (Lavanda / Índigo Pastel) */
.rev-section-card.cat-confort {
  background: #FFFFFF;
  border: 1.5px solid #DDD6FE;
}
.rev-section-card.cat-confort .rev-section-head {
  background: #EDE9FE;
  border-bottom: 1px solid #DDD6FE;
}
.cat-tag-confort {
  background: #EDE9FE !important;
  color: #4338CA !important;
  border: 1px solid #DDD6FE !important;
}



/* ========================================================
   PUNTOS OBLIGATORIOS (CRÍTICOS) Y VOLCADO OFICIAL REVICASA
   ======================================================== */

.rev-criticos-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  border-radius: 20px;
  padding: 5px 12px;
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rev-criticos-badge.completo {
  background: #10B981 !important;
  border-color: #A7F3D0 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.criticos-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FEF08A;
  display: inline-block;
  animation: pulseDot 2s infinite;
}

.rev-criticos-badge.completo .criticos-dot {
  background: #FFFFFF;
  animation: none;
}

.critico-item-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: all 0.2s ease;
}

.critico-item-card.ok {
  border-color: #86EFAC;
  background: #F0FDF4;
}

.critico-item-card.pendiente {
  border-color: #FCD34D;
  background: #FFFBEB;
}

.critico-info-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1E293B;
  display: flex;
  align-items: center;
  gap: 6px;
}

.critico-info-desc {
  font-size: 11.5px;
  color: #64748B;
  margin-top: 2px;
}

.critico-btn-ir {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1.5px solid #CBD5E1;
  background: #FFFFFF;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.btn-volcar-revicasa {
  width: 100%;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
  color: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(3, 105, 161, 0.35);
  transition: transform 0.15s ease;
}

.btn-volcar-revicasa:active {
  transform: scale(0.98);
}


/* ===================================================
   ESTILOS OFICIALES: ACTA DE VISITA Y FIRMAS
   =================================================== */
.visita-banner-card {
  margin: 12px 16px 8px;
  background: linear-gradient(135deg, #1E293B, #0F172A);
  border: 1.5px solid #F59E0B;
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.visita-banner-card:active {
  transform: scale(0.98);
}
.visita-banner-left {
  flex: 1;
}
.visita-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  color: #10B981;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 8px;
  border-radius: 8px;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.visita-banner-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: #F8FAFC;
  letter-spacing: -0.2px;
}
.visita-banner-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.visita-tag {
  font-size: 11px;
  font-weight: 600;
  color: #CBD5E1;
  background: #334155;
  padding: 2px 7px;
  border-radius: 6px;
}
.visita-banner-thumb-wrap {
  width: 68px;
  height: 68px;
  border-radius: 14px;
  overflow: hidden;
  background: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}
.visita-banner-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Modal Acta de Visita */
.visita-modal-content {
  background: #0F172A;
  color: #F8FAFC;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  border-radius: 24px;
  border: 1px solid #334155;
  padding: 20px;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.visita-section-box {
  background: #1E293B;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid #334155;
}
.visita-section-title {
  font-size: 12px;
  font-weight: 800;
  color: #F59E0B;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.visita-pills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.visita-pill-toggle {
  background: #0F172A;
  border: 1.5px solid #475569;
  border-radius: 10px;
  padding: 8px 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #94A3B8;
  cursor: pointer;
  transition: all 0.2s;
}
.visita-pill-toggle.active {
  background: #10B981;
  border-color: #10B981;
  color: #FFFFFF;
}
.visita-sig-box {
  background: #FFFFFF;
  border-radius: 12px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.visita-sig-box img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}