@import url("https://fonts.googleapis.com/css?family=Montserrat");

/* Light mode background — override Bootstrap CSS variable */
[data-bs-theme="light"] {
  --bs-body-bg: #fffffff8;
  --bs-body-bg-rgb: 240, 244, 248;
}

.navbar {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

.bg-dark {
  background-color: #4a90e2 !important;
}

.border-dark {
  border-color: #4a90e2 !important;
}

.btn {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}
.btn, .btn:hover {
  color: #fff;
}
.btn-light, .btn-light:hover {
  color: #5a5a5a;
}
.btn-link, .btn-link:hover {
  color: #1a5490;
}
.btn-link.disabled:hover {
  color: #888;
}
.btn-outline-primary {
  color: #1a5490;
}
.btn-outline-secondary {
  color: #4a90e2;
}
.btn-outline-success {
  color: #56CC9D;
}
.btn-outline-info {
  color: #5dade2;
}
.btn-outline-warning {
  color: #FFCE67;
}
.btn-outline-danger {
  color: #FF7851;
}
.btn-outline-dark {
  color: #343a40;
}
.btn-outline-light {
  color: #f8f9fa;
}

.table-primary, .table-secondary, .table-success, .table-info, .table-warning, .table-danger {
  color: #fff;
}
.table-primary, .table-primary > th, .table-primary > td {
  background-color: #1a5490;
}
.table-secondary, .table-secondary > th, .table-secondary > td {
  background-color: #4a90e2;
}
.table-light, .table-light > th, .table-light > td {
  background-color: #f8f9fa;
}
.table-dark, .table-dark > th, .table-dark > td {
  background-color: #343a40;
}
.table-success, .table-success > th, .table-success > td {
  background-color: #56CC9D;
}
.table-info, .table-info > th, .table-info > td {
  background-color: #5dade2;
}
.table-danger, .table-danger > th, .table-danger > td {
  background-color: #FF7851;
}
.table-warning, .table-warning > th, .table-warning > td {
  background-color: #FFCE67;
}
.table-active, .table-active > th, .table-active > td {
  background-color: #f8f9fa;
}
.table-hover .table-primary:hover, .table-hover .table-primary:hover > th, .table-hover .table-primary:hover > td {
  background-color: rgb(22.1, 71.4, 122.4);
}
.table-hover .table-secondary:hover, .table-hover .table-secondary:hover > th, .table-hover .table-secondary:hover > td {
  background-color: rgb(52.0214285714, 130.5214285714, 222.4785714286);
}
.table-hover .table-light:hover, .table-hover .table-light:hover > th, .table-hover .table-light:hover > td {
  background-color: rgb(233.125, 236.25, 239.375);
}
.table-hover .table-dark:hover, .table-hover .table-dark:hover > th, .table-hover .table-dark:hover > td {
  background-color: rgb(40.5689655172, 45.25, 49.9310344828);
}
.table-hover .table-success:hover, .table-hover .table-success:hover > th, .table-hover .table-success:hover > td {
  background-color: rgb(66.4113636364, 198.0886363636, 145.6409090909);
}
.table-hover .table-info:hover, .table-hover .table-info:hover > th, .table-hover .table-info:hover > td {
  background-color: rgb(71.3717277487, 162.0523560209, 222.1282722513);
}
.table-hover .table-danger:hover, .table-hover .table-danger:hover > th, .table-hover .table-danger:hover > td {
  background-color: rgb(255, 100.2155172414, 55.5);
}
.table-hover .table-warning:hover, .table-hover .table-warning:hover > th, .table-hover .table-warning:hover > td {
  background-color: rgb(255, 197.7796052632, 77.5);
}
.table-hover .table-active:hover, .table-hover .table-active:hover > th, .table-hover .table-active:hover > td {
  background-color: #f8f9fa;
}
.table .thead-dark th {
  background-color: #1a5490;
  border-color: #dee2e6;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

legend {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

.dropdown-menu {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.6);
}
.breadcrumb a:hover {
  color: #fff;
  text-decoration: none;
}

.alert {
  color: #fff;
}
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6 {
  color: inherit;
}
.alert a,
.alert .alert-link {
  color: #fff;
}
.alert-primary, .alert-primary > th, .alert-primary > td {
  background-color: #1a5490;
}
.alert-secondary, .alert-secondary > th, .alert-secondary > td {
  background-color: #4a90e2;
}
.alert-success, .alert-success > th, .alert-success > td {
  background-color: #56CC9D;
}
.alert-info, .alert-info > th, .alert-info > td {
  background-color: #5dade2;
}
.alert-danger, .alert-danger > th, .alert-danger > td {
  background-color: #FF7851;
}
.alert-warning, .alert-warning > th, .alert-warning > td {
  background-color: #FFCE67;
}
.alert-dark, .alert-dark > th, .alert-dark > td {
  background-color: #343a40;
}
.alert-light, .alert-light > th, .alert-light > td {
  background-color: #f8f9fa;
}
.alert-light, .alert-light a:not(.btn), .alert-light .alert-link {
  color: #888;
}

.badge {
  color: #fff;
}
.badge-light {
  color: #5a5a5a;
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.list-group-item h1,
.list-group-item h2,
.list-group-item h3,
.list-group-item h4,
.list-group-item h5,
.list-group-item h6 {
  color: inherit;
}

/* =============================================
   Hover Cards — Action & Module cards
   ============================================= */
.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
[data-bs-theme="dark"] .hover-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

.hover-case-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(13, 110, 253, 0.2) !important;
}
[data-bs-theme="dark"] .hover-case-card:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(13, 110, 253, 0.4) !important;
}

.hover-action-card-blue {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-action-card-blue:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(13, 110, 253, 0.2) !important;
}
[data-bs-theme="dark"] .hover-action-card-blue:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(13, 110, 253, 0.4) !important;
}

.hover-action-card-green {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-action-card-green:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(40, 167, 69, 0.2) !important;
}
[data-bs-theme="dark"] .hover-action-card-green:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(40, 167, 69, 0.4) !important;
}

.hover-module-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-module-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(13, 110, 253, 0.2) !important;
}
[data-bs-theme="dark"] .hover-module-card:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(13, 110, 253, 0.4) !important;
}

/* =============================================
   Borde giratorio azul (spinning border)
   Uso: envolver la card en un div.card-spin-wrapper
   ============================================= */
@property --spin-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes card-spin-rotate {
    to { --spin-angle: 360deg; }
}

.card-spin-wrapper {
    padding: 3px;
    border-radius: calc(0.375rem + 3px);
    background: transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-spin-wrapper:hover {
    transform: translateY(-5px);
    background: conic-gradient(
        from var(--spin-angle),
        #0d6efd   0deg,
        #93c5fd  90deg,
        #0d6efd 180deg,
        #60a5fa 270deg,
        #0d6efd 360deg
    );
    animation: card-spin-rotate 2s linear infinite;
    box-shadow: 0 0.5rem 1.5rem rgba(13, 110, 253, 0.35) !important;
}

[data-bs-theme="dark"] .card-spin-wrapper:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(13, 110, 253, 0.6) !important;
}

.card-spin-wrapper > .card {
    border-radius: 0.375rem;
    height: 100%;
}

.modal-content {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

.breadcrumb a {
  color: #4a90e2;
}
.breadcrumb a:hover {
  color: #1a5490;
  text-decoration: none;
}

.breadcrumb .active {
  color: #888;
}

/* ── Valoración Inicial: Vista de revisión (readonly) ── */
.vi-readonly h5 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.vi-readonly p.text-body-secondary.fw-semibold.text-uppercase {
  color: var(--bs-body-color) !important;
  font-weight: 800 !important;
  font-size: .82rem !important;
  letter-spacing: .1em !important;
}
.vi-readonly p.text-body-secondary.fw-semibold:not(.text-uppercase) {
  color: var(--bs-body-color) !important;
  font-weight: 700 !important;
  font-size: .8rem !important;
  letter-spacing: .08em !important;
}
.vi-readonly p.mb-1.text-body-secondary {
  color: var(--bs-secondary-color) !important;
  font-weight: 700 !important;
  font-size: .74rem !important;
  letter-spacing: .07em !important;
}
.vi-readonly .fw-semibold.text-body {
  font-size: .98rem;
}

/* Celdas con borde por campo en readonly */
.vi-readonly .row.g-3 > [class*="col-"],
.vi-readonly .row.g-4 > [class*="col-"] {
  border: 1px solid rgba(128,128,128,.35);
  border-radius: .4rem;
  padding-top: .55rem !important;
  padding-bottom: .55rem !important;
}

/* Clase auxiliar vi-field para secciones con wrapper explícito */
.vi-readonly .vi-field {
  border: 1px solid var(--bs-border-color);
  border-radius: .4rem;
  padding: .45rem .65rem;
  height: 100%;
  background: color-mix(in srgb, var(--bs-body-bg) 97%, var(--bs-primary) 3%);
}