/*================================================================================
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Version: 1.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* Logo Loader - Loading predeterminado para toda la aplicación */
.logo-loader {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 40px auto;
  animation: spin 1.4s linear infinite;
}

/* Forma general de cada "hoja" */
.logo-loader .petal {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 26px 26px 6px 26px; /* da una forma tipo gota/hoja */
  transform-origin: 50% 50%;
}

/* Agujerito central */
.logo-loader .petal::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff; /* cámbialo al color de fondo de tu página */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Posiciones y colores, inspirados en tu icono */
.petal-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
  background: #35c153; /* verde */
}

.petal-right {
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  background: #00a0e9; /* azul */
}

.petal-bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(135deg);
  background: #f6a623; /* amarillo/naranja */
}

.petal-left {
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-135deg);
  background: #0078d7; /* azul más oscuro */
}

/* Animación de giro */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Estilo para el tab activo en Detalle de Póliza (usa el mismo verde que .btn-success) */
.wideget-user-tab .nav .nav-link.active {
  background-color: #28D094 !important; /* mismo color que .btn-success background */
  border-color: #20A576 !important;     /* mismo borde que .btn-success */
  color: #ffffff !important;
  border-radius: 4px;
}

/* Alineamos el padding de los tabs al estilo de Noa */
.wideget-user-tab .tab-menu-heading {
  padding: 0;
  border: 0;
}

.wideget-user-tab .tabs-menu1 ul li a {
  padding: 14px 20px;
  display: block;
}

/* ========================================
   MEJORAS UX/UI PARA POLIZA DETALLE VIEW
   ======================================== */

/* Card Principal - Efecto moderno con sombra elevada */
#poliza-profile .card.pull-up {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  border: none;
  overflow: hidden;
}

#poliza-profile .card.pull-up:hover {
  box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

#poliza-profile .card-body {
  padding: 1.8rem;
}

/* Logo de aseguradora con efecto circular */
.profile-img-main {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.profile-img-main:hover {
  transform: scale(1.05);
}

/* Badge de estatus mejorado */
.badge-pill {
  padding: 0.45rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.badge-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Bloque de meta-data bajo el estatus: más compacto y en una sola línea si es posible */
.poliza-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 0.35rem 0.5rem;
  margin-top: 0.15rem;
}

.poliza-meta-item {
  background: #f9fafb;
  border-radius: 5px;
  padding: 0.35rem 0.55rem;
  display: flex;
  align-items: flex-start;
  border: 1px solid #e5e7eb;
  min-width: 0;
}

.poliza-meta-icon {
  flex-shrink: 0;
  margin-right: 0.35rem;
  margin-top: 0.05rem;
}

.poliza-meta-icon i {
  font-size: 0.9rem;
  color: #9ca3af;
}

.poliza-meta-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.poliza-meta-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 0.05rem;
}

.poliza-meta-value {
  font-size: 0.85rem;
  color: #111827;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .poliza-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Indicadores principales (Prima Anual, Fechas) - Diseño premium */
.indicador-principal {
  background: #ffffff;
  border: 2px solid #e8e8e8;
  border-radius: 10px;
  padding: 1.2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.indicador-principal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.indicador-principal:hover {
  border-color: currentColor;
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.indicador-principal:hover::before {
  opacity: 1;
}

.indicador-principal.success-indicator {
  color: #28D094;
}

.indicador-principal.info-indicator {
  color: #00B5B8;
}

.indicador-principal.danger-indicator {
  color: #FF586B;
}

.indicador-principal .m-0 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.indicador-principal h5 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.indicador-principal .la {
  font-size: 1.2rem;
  opacity: 0.8;
}

/* Tabs - Mejora visual con animaciones */
.wideget-user-tab {
  background: #fbfcfe; /* gris casi blanco para un fondo muy sutil */
  border-radius: 0 0 8px 8px;
}

.wideget-user-tab .tab-menu-heading,
.wideget-user-tab .tabs-menu1 {
  background: transparent;
}

.wideget-user-tab .nav-tabs {
  border-bottom: 1px solid #eceff4;
  background: transparent;
  padding: 0.5rem 0.5rem 0;
  margin: 0;
}

.wideget-user-tab .nav-tabs .nav-item {
  margin: 0 0.25rem;
}

.wideget-user-tab .nav-tabs .nav-link {
  border: 1px solid #dde1e7; /* contorno suave para tabs inactivos */
  border-radius: 6px 6px 0 0;
  padding: 0.55rem 0.85rem;
  color: #6c757d;
  font-weight: 600;
  font-size: 0.8rem;
  transition: all 0.2s ease;
  position: relative;
  background: transparent;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.wideget-user-tab .nav-tabs .nav-link:hover {
  color: #28D094;
  background: rgba(40, 208, 148, 0.05);
  border-bottom-color: rgba(40, 208, 148, 0.3);
}

.wideget-user-tab .nav-tabs .nav-link.active {
  color: #28D094 !important;
  background: rgba(40, 208, 148, 0.1) !important;
  border-bottom-color: #28D094 !important;
  box-shadow: 0 2px 8px rgba(40, 208, 148, 0.2);
}

.wideget-user-tab .nav-tabs .nav-link i {
  margin-right: 0.4rem;
  font-size: 1.1rem;
  vertical-align: middle;
}

.wideget-user-tab .nav-tabs .nav-link .badge {
  margin-left: 0.4rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
}

/* Contenido de tabs con entrada suave */
.tab-content > .tab-pane {
  animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cards de información detallada - estilo minimalista como dashboard */
#poliza-profile .card-header.bg-light {
  background: #ffffff !important;
  color: #2c2c2c !important;
  border-radius: 6px 6px 0 0;
  padding: 1rem 1.25rem;
  border: none;
  border-bottom: 2px solid #f0f0f0;
}

#poliza-profile .card-header.bg-light h4 {
  color: #2c2c2c !important;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
}

#poliza-profile .card-header.bg-light i {
  color: #667eea;
  margin-right: 0.5rem;
  font-size: 1.2rem;
}

/* Tablas dentro de cards - mejor legibilidad */
#poliza-profile .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

#poliza-profile .table th {
  font-weight: 600;
  color: #495057;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-top: none;
  padding: 0.85rem;
  width: 35%;
}

#poliza-profile .table td {
  color: #6c757d;
  font-size: 0.9rem;
  padding: 0.85rem;
  border-top: 1px solid #e9ecef;
}

/* Botones principales (editar, acciones) unificados por clase */
#poliza-profile .btn-success,
.btn.btn-sm.btn-success {
  background: linear-gradient(135deg, #28D094 0%, #20A576 100%);
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(40, 208, 148, 0.3);
  transition: all 0.3s ease;
}

#poliza-profile .btn-success:hover,
.btn.btn-sm.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(40, 208, 148, 0.4);
}

#poliza-profile .btn-info,
.btn.btn-sm.btn-info {
  /* Azul basado en alert-info / btn-info del tema */
  background: linear-gradient(135deg, #62BCF6 0%, #1E9FF2 100%);
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(30, 159, 242, 0.35);
  transition: all 0.3s ease;
}

#poliza-profile .btn-info:hover,
.btn.btn-sm.btn-info:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 159, 242, 0.45);
}

/* Botones primarios pequeños (ej. Acción en recibos) en azul */
.btn.btn-sm.btn-primary {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.3rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.35);
  transition: all 0.3s ease;
  color: #ffffff;
}

.btn.btn-sm.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 64, 175, 0.45);
}

/* Cards de estadísticas (Total a Pagar, Total Pagado, etc.) */
.card.pull-up.border-info,
.card.pull-up.border-success,
.card.pull-up.border-warning,
.card.pull-up.border-danger {
  border-width: 0;
  border-left: 4px solid;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.card.pull-up.border-info {
  border-left-color: #00B5B8;
}

.card.pull-up.border-success {
  border-left-color: #28D094;
}

.card.pull-up.border-warning {
  border-left-color: #FFB64D;
}

.card.pull-up.border-danger {
  border-left-color: #FF586B;
}

.card.pull-up:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.card.pull-up .media h3 {
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 0.25rem;
}

.card.pull-up .media h6 {
  font-weight: 600;
  font-size: 0.85rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.card.pull-up .media i {
  font-size: 2.5rem;
  opacity: 0.3;
}

/* Barra de progreso mejorada */
.progress {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  background-color: #e9ecef;
}

.progress-bar {
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.6s ease;
}

/* Responsive - Ajustes para móviles */
@media (max-width: 768px) {
  #poliza-profile .card-body {
    padding: 1.2rem;
  }

  .indicador-principal {
    margin-bottom: 1rem;
  }

  .indicador-principal h5 {
    font-size: 1.2rem;
  }

  .wideget-user-tab .nav-tabs .nav-link {
    padding: 0.45rem 0.55rem;
    font-size: 0.75rem;
  }

  .wideget-user-tab .nav-tabs .nav-link i {
    font-size: 0.9rem;
    margin-right: 0.25rem;
  }

  .card.pull-up .media h3 {
    font-size: 1.3rem;
  }

  .card.pull-up .media h6 {
    font-size: 0.75rem;
  }
}
