:root {
  --primary: #0070c0;
  --primary-light: #9ad4ff;
  --primary-dark: #004a80;
  --bg: #f5f5f5;
  --bg2: #ffffd8;
  --bg3: #ead0d0;
  --bg4: #d0ead7;
  --bg_sel: #d5d5d5;
  --green: #089981;
  --red: #f23645;
  --fi_color: purple;
  --acc_color: darkorange;
  --etf_color: #00bcff;
  --pf_color: var(--primary-dark);
  --pf_noselect: #9ad4ff;
  --text: #222;
  --muted: #666;
  --radius: 6px;
}

html {
  height: 100%;
  font-size: 110%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "TechnicBold";
  src: url("fonts/TechnicBold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  font-family:
    "Calibri",
    system-ui,
    -apple-system,
    Segoe UI,
    sans-serif;
  /*font-family: 'Monospac821 BT', 'IBM Plex Mono', 'Lucida Console';*/
  color: var(--text);
  line-height: 1.3;
  background: var(--bg);
  
  min-height: 100vh;          /* full viewport height minimum */
  display: flex;              /* body is now flex container */
  flex-direction: column;     /* stack vertically */
}

a {
  color: inherit;
  text-decoration: none;
}

h2 {
  background: linear-gradient(120deg, #f8cbad, transparent);
  padding: 0 0.5rem;
}

strong {
  color: var(--primary);
}

.noselect {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* old Edge */
}

.left_right {
  display: flex; 
  justify-content: space-between;
  flex-direction: row;
  align-items: flex-end;
  align-content: center;
}

#global_data {
  display: none;
}

.container {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 0 1rem;
}

.container2 {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 0;
}

.container h2 {
  font-size: 1.2rem;
}

.container_topbar {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 0.3rem 1.3rem;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar {
  background: LightSlateGray;
  color: #fff;
  font-size: 0.9rem;
}

.topbar .container {
  gap: 0.5rem;
}

.topbar-left span {
  margin-right: 1rem;
}

.topbar-right a {
  color: #fff;
  text-decoration: none;
}

.site-header {
  background: #fff;
  border-bottom: 1px solid #ddd;
  position: sticky;
  top: 0;
  z-index: 50;
}

.logo {
  font-weight: 700;
  font-size: 1.5rem;
  font-family: TechnicBold;
  color: var(--primary);
}

.logo2 {
  font-weight: 550;
  font-size: 1.1rem;
  color: darkslategray;
  background-color: #f8cbad;
}

.main-nav {
  padding: 0;
  color: var(--muted);
}

.main-nav ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  padding: 0.5rem 0.5rem;
}

.main-nav li {
  padding: 0.2rem 0;
}

.main-nav li:last-child {
  border-bottom: none;
}

.main-nav a {
  padding: 0.5rem 0;
  font-weight: 500;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0 solid #ddd;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 1.4rem;
}

.hero {
  background: linear-gradient(120deg, #123755, #0070c0);
  color: #fff;
  padding: 0.5rem 0 1rem;
  text-align: left;
}

.hero-content {
  max-width: 550px;
}

.hero h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 1rem;
}

.hero p {
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
}

.btn {
  display: inline-block;
  background: #fff;
  color: var(--primary);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
}

.section {
  color: var(--muted);
  padding: 2.3rem 0;
}

.section.alt {
  background: var(--bg);
}

.section h2 {
  margin-bottom: 0.5rem;
}

.section-lead {
  color: var(--muted);
  margin-bottom: 2rem;
  padding: 0 0.5rem;
}

.section-lead.alt {
  background: var(--bg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  justify-content: center;
  gap: 1.5rem;
}

.card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.card.alt {
  background: var(--bg);
}

.card.alt2 {
  background: var(--bg2);
}

.card.alt3 {
  background: var(--bg3);
}

.card.alt4 {
  background: var(--bg4);
}

.card h3 {
  margin-top: 0;
}

.card-video .card-date {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--muted);
}

.card-link {
  display: inline-block;
  margin-top: 0;
  color: var(--primary);
  font-weight: 500;
}

a.card-link:link {
  color: var(--primary);
}
a.card-link:active {
  color: var(--primary);
}
a.card-link:visited {
  color: var(--primary);
}
a.card-link:hover {
  color: var(--primary);
}

.btn-link {
  display: inline-block;
  margin-top: 0;
  color: var(--primary);
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  background: white;
  padding-left: 4px;
  padding-right: 4px;
}

.btn-link.gray {
  border: 1px solid black;
  background: #e5e5e5;
}

.two-cols {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 2rem;
  align-items: flex-start;
}

.three-cols {
  display: grid;
  grid-template-columns: min-content min-content min-content;
  gap: 2rem;
  align-items: flex-start;
}

.box {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid #e5e5e5;
}

.box.alt {
  background: var(--bg);
}

.center {
  text-align: center;
}

.newsletter-form {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.newsletter-form input {
  padding: 0.5rem 0.7rem;
  min-width: 250px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.contact-form {
  display: grid;
  gap: 0.6rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
  font: inherit;
}

.contact-form button {
  width: 50%;
  background-color: #f8cbad;
  color: var(--primary);
  padding: 10px;
  margin: 20px auto;
  margin-bottom: 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}

.form_c {
  max-width: 370px;
  border-radius: 4px;
  border: 2px solid #f8cbad;
  background-color: #f2f2f2;
  padding: 20px;
}

.login-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.login-form label {
  min-width: 30%;
  margin-bottom: 5px;
  margin-top: 5px;
  text-align: left;
}

.login-form input,
.login-form textarea {
  min-width: 45%;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
}

.login-form button {
  width: 50%;
  background-color: #f8cbad;
  color: var(--primary);
  padding: 10px;
  margin: 20px auto;
  margin-bottom: 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}

#user-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* shifts left by 50% of own width */
  z-index: 100;
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 0;
  display: none;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

#user-menu {
  display: flex;
  align-items: center;
  right: 0.4rem;
  top: 2.2rem;
  background: LightSlateGray;
  border: 1px solid LightSlateGray;
  width: fit-content;
  color: white;
  pointer-events: all;
}

#user-menu ul {
  display: flex;
  list-style: none;
  padding: 0;
  flex-direction: column;
  gap: 0;
  margin: 0.1rem 0.5rem;
}

#user-menu li {
  padding: 0.4rem 0;
  border-bottom: 1px solid #4e646f;
}

#user-menu li:last-child {
  border-bottom: none;
}

dialog {
  margin: auto;
  border: none;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  padding: 1rem;
  max-width: 500px;
  min-width: 300px;
  background: white;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(1px);
}

/* Optional: nice fade-in */
dialog[open] {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

dialog label {
  min-width: 30%;
  margin-bottom: 5px;
  margin-top: 5px;
  text-align: left;
  font-size: 0.85rem;
  color: slategray;
}

dialog input,
dialog textarea {
  min-width: 45%;
  min-height: 30px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  font-size: 0.9rem;
}

dialog button {
  display: inline-block;
  margin-left: 6px;
  color: var(--primary);
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  background: white;
  padding: 6px;
  cursor: pointer;
}

dialog button:hover {
  border: 1px solid black;
}

.status_ok {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--green); /* verde */
  vertical-align: -1px;
}
.status_error {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--red); /* rojo */
  vertical-align: -1px;
}
.status_warn {
  font-size: 1.1rem;
  font-weight: 600;
  color: darkorange;
  vertical-align: -1px;
}

.status_loading {
  width: 20px;
  height: 20px;
  display: inline-block;
  border: 3px solid #ddd;
  border-top-color: #0d6efd;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -4px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.bg_hover:hover {
  background-color: white !important;
}

.hover-circle {
  width: fit-content;
  height: fit-content;
  background-color: transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 2px;
  text-align-last: center;
}

.hover-circle:hover {
  background-color: silver;
}

.pf_row_action {
  vertical-align: middle;
  padding: 3px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
}

.pf_row_action:hover {
  border: 1px solid black;
  border-radius: 2px;
  background-color: white;

}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #eee;
  border-radius: 6px;
  background: #fff;
}

.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.inv-table thead {
  background: #0070c0;
  color: #fff;
}

.inv-table th,
.inv-table td {
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: top;
}

.inv-table tbody tr:nth-child(even) {
  background-color: #eaeaea;
}

.inv-table th:nth-last-child(-n + 2),
.inv-table td:nth-last-child(-n + 2) {
  text-align: right;
  /* white-space: nowrap; */
}

.inv-table tbody tr:hover {
  background-color: #e6f3ff !important; 
}

.sys-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px;
  font-size: 0.9rem;
}

.sys-table thead {
  background: #0070c0;
  color: #fff;
}

.sys-table th,
.sys-table td {
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: top;
}

.sys-table tbody tr:nth-child(even) {
  background-color: #eaeaea;
}

.sys-table tbody tr:hover {
  background-color: #e6f3ff !important; 
}



.change-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.change-table thead {
  background: #0070c0;
  color: #fff;
}

.change-table th,
.change-table td {
  padding: 0.15rem 0.3rem;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: top;
}

.change-table tbody tr:nth-child(even) {
  background: #eaeaea;
}

.change-table tbody tr:hover {
  background-color: #e6f3ff !important; 
}

.last2_right th:nth-last-child(-n+2),
.last2_right td:nth-last-child(-n+2) {
  text-align: right;
}


.stats-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px;
  font-size: 0.9rem;
}

.stats-table thead {
  background: #0070c0;
  color: #fff;
}

.stats-table th,
.stats-table td {
  padding: 0.1rem 0.4rem;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

.stats-table th {
  text-align: center;
}

.stats-table td {
  text-align: right;
}

.stats-table th:first-child,
.stats-table td:first-child {
  text-align: left;
}


.stats-table tbody tr:nth-child(even) {
  background-color: #eaeaea;
}

.stats-table tbody tr:hover {
  background-color: #e6f3ff !important; 
}

.stats_btns_wrap{
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: right;
  align-items: flex-start;
  align-content: stretch;
  margin-bottom: 10px;
  gap: 10px;
}

.stats_btns{  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  text-align: right;
  height: fit-content;
}

.pie-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}

.notes-table{
  width: 98%;
  border-collapse: collapse;
  min-width: 300px;
  font-size: 0.8rem;

}

.notes-table tbody{
  border: solid 1px gray;
}

.notes-table th,
.notes-table td {
  text-align: left;
  vertical-align: middle;
}

.notes-table td:nth-child(1){
  max-width: 150px;
  min-width: 150px;
}

.notes-table tbody tr:nth-child(even) {
  background-color: white;
}

.pf_btns_wrap_parent {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: flex-start;
  align-content: flex-start;
}

.pf_btns_wrap {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: normal;
  align-items: flex-start;
  align-content: stretch;
  margin-bottom: 10px;
}

.pf_btns {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  background: var(--pf_noselect);
  color: var(--pf_color);
  padding: 4px 6px;
  margin: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
}

.pf_btns.active {
  background: var(--pf_color);
  color: white;
  cursor: default;
}


.pf_tabs_wrap{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-end;
  gap: 1px;
}


.pf_tabs {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  vertical-align: bottom;
  padding: 1px 5px;
  border-radius: 5px 5px 0 0;
  background: var(--pf_noselect);
  color: var(--pf_color);
  cursor: pointer;
}


.pf_tabs.active {
  background-color: var(--pf_color); 
  color: white;
  margin: 0; 
  cursor: default;
}

.pf_tabs_container {
  border: 2px solid var(--pf_color);
  padding: 24px 16px 16px 16px;
  margin-top: 0;
}

.pf_edit_btns_wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-start;
  align-content: stretch;
  margin-bottom: 10px;
}


.pf_edit_btns {
  display: block;
  background-color: #c1c9d1;
  padding: 4px 6px;
  margin: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: default;
  pointer-events: none;
}

.active_green_btn {
  background-color: var(--green); 
  color: white;
  cursor: pointer;
  pointer-events: auto;
}

.active_red_btn {
  background-color: var(--red); 
  color: white;
  cursor: pointer;
  pointer-events: auto;
}

.active_darkred_btn {
  background-color: var(--pf_color); 
  color: white;
  cursor: pointer;
  pointer-events: auto;
}

.move-up,
.move-down {
  cursor: pointer;
}

.move_disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.move-up:hover,
.move-down:hover {
  background-color: #78c7ff;
}

.slot-input {
  padding: 0;
  margin: 0;
  width: 30px;
  display: none;
  border-radius: 3px;
  font-family: "Calibri", system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 0.8rem;
}

.slot-input:focus {
  outline: none;
}

.sort-icon {
  font-family: Arial, sans-serif;
  font-weight: 100;
  font-stretch: semi-condensed;
  position: relative;
  top: -1px;
}

.legend-icon {
  width: 16px;
  position: relative;
  top: 4px;
}

.legend-btn {
  padding-bottom: 1px; 
  border-radius: 3px;
  border:1px solid transparent;
}

.legend-btn.active {
  border:1px solid var(--primary);
}

.legend-filtered {
  display: none;
}

.faq-container {
  padding: 1rem 0.25rem;
  background: white;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
}

.faq-section {
  padding-top: 1.2rem;
  padding-bottom: 0.5rem;
}

.faq-section strong{
  font-size: 1.2rem;
}

.faq-card {
  background: #fff;
  padding: 0.1rem 0.5rem;
}

.faq-hr{
  border-top: 1px solid gray;
  border-bottom: 0;
  margin: 0.5rem 0;
}

.faq-icon {
  width: 20px;
  height: 20px;
  position: relative;
  top: 4px;
  margin-right: 4px;
}

.faq-pregunta {
  border-radius: var(--radius);
  padding-bottom: 1px;
}

.faq-pregunta:hover {
  background-color: #cae9ff;
}

.faq-pregunta h2 {
  font-size: 1.1rem;
  background: initial;
  margin: 0;
  padding: 0 0.1rem;
}

.faq-respuesta {
  padding: 0.8rem;
  border-top: 1px solid gray;
  background-color: var(--bg);
  border-radius: 0 0 var(--radius) var(--radius); 
  
}

.topbar-right {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.topbar-right .divider {
  color: rgba(255, 255, 255, 0.5);
}

.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #fff;
}

.topbar-link svg {
  flex-shrink: 0;
}

a.topbar-link:link {
  color: #fff;
}
a.topbar-link:active {
  color: #fff;
}
a.topbar-link:visited {
  color: #fff;
}
a.topbar-link:hover {
  color: #fff;
}

.footer {
  margin-top: auto;
  background: lightslategray;
  color: #fff;
  padding: 0;
  font-size: 0.85rem;
  /*margin-top: 0.5rem;*/
}

.footer a {
  color: #fff;
  text-decoration: none;
}

.footer p {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

.footer-inner {
  gap: 1rem;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #fff;
  text-decoration: none;
}

a.footer-link:link {
  color: #fff;
}
a.footer-link:active {
  color: #fff;
}
a.footer-link:visited {
  color: #fff;
}
a.footer-link:hover {
  color: #fff;
}

div.best-viewed {
  display: none;
}
#table_portfolios_act {
  display: none;
}




.slider_checkbox {
  display: none;
}

.slider {
  width: 60px;
  height: 30px;
  background-color: lightgray;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 4px solid transparent;
  transition: .3s;
  box-shadow: 0 0 10px 0 rgb(0, 0, 0, 0.25) inset;
  cursor: pointer;
  transform: scale(0.5);
  transform-origin: left; /* center | top | left | etc. */
}

.slider::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translateX(-30px);
  border-radius: 20px;
  transition: .3s;
  box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);
}

.slider_checkbox:checked ~ .slider::before {
  transform: translateX(30px);
  box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);
}

.slider_checkbox:checked ~ .slider {
  background-color: #42ec9e;
}

.slider_checkbox:active ~ .slider::before {
  transform: translate(0);
}


@media (max-width: 950px) {
  .grid-auto {
    grid-template-columns: repeat(2, 300px);
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }
  .two-cols {
    grid-template-columns: 1fr 1fr;
  }
  .newsletter-form {
    flex-direction: column;
    align-items: center;
  }
  .newsletter-form input {
    width: 100%;
    max-width: 360px;
  }
  .main-nav {
    position: absolute;
    right: 0;
    top: 2.3rem;
    background: #fff;
    border: 1px solid #ddd;
    display: none;
    flex-direction: column;
    width: 200px;
  }
  .main-nav.open {
    display: flex;
  }
  .main-nav ul {
    margin: 0;
    flex-direction: column;
    gap: 0;
  }
  .main-nav li {
    border-bottom: 1px solid #eee;
  }
  .nav-toggle {
    display: block;
  }
  .footer {
    font-size: 0.75rem;
  }
}

@media (max-width: 650px) {
  article.card {
    padding: 1rem 0.5rem;
  }
  
  article.cartera {
    padding-top: 0;
  }
  
  .container, .container2 {
    padding: 0 0.3rem;
  }
  .topbar .container {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .section-lead, .section {
    padding: 0 0.1rem;
  }
  
  .grid-auto {
    grid-template-columns: 300px;
  }
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .two-cols {
    grid-template-columns: 1fr;
  }
  .hero {
    text-align: left;
  }
  .hero-content {
    max-width: 100%;
  }

  #ini-reg_login {
    margin-left: 16px;
    margin-right: 16px;
  }
  .inv-table {
    font-size: 0.8rem;
  }
  
  .footer {
    font-size: 0.7rem;
  }
  
  div.best-viewed {
    display: block;
  }
  
  h3.best-viewed {
    margin-bottom: 0;
  }
  
  #table_portfolios th:nth-child(3),
  #table_portfolios td:nth-child(3) {
    display: none;
  }
  
  #table_portfolios_act {
    display: block;
  }
  
}


/* =============================================================================
   Periodo en funcionamiento - clave real_desde de sistemas.json
   Lo usan: sistemas_comparativa.php y sistemas_func.php
   ============================================================================= */

/* Barra de origen bajo cada rentabilidad anual (Comparativa Rentabilidad).
   Se dibuja con pseudo-elementos para que sobreviva al textContent del JS.
   El ancho del tramo intenso sale de --sr-frac, que escribe PHP en cada celda. */
.sys-table td.sr_origen {
  position: relative;
  /* !important: la celda lleva padding inline desde PHP y hay que reservar
     el hueco de la barra */
  padding-bottom: 6px !important;
  --sr-barw: 70%;
}

.sys-table td.sr_origen::before,
.sys-table td.sr_origen::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  bottom: 2px;
  height: 3px;
  border-radius: 1px;
}

.sys-table td.sr_origen::before {
  width: var(--sr-barw);
  background: var(--primary-light);
}

.sys-table td.sr_origen::after {
  width: calc(var(--sr-barw) * var(--sr-frac));
  background: var(--primary);
}

/* Etiqueta de resultado (En funcionamiento) */
.sr_tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
}

.sr_tag_bajo {
  background: #fdf0e2;
  color: #a35b12;
  border-color: #e8b98a;
}

.sr_tag_medio {
  background: #fff;
  color: #888;
  border-color: #ddd;
}

.sr_tag_alto {
  background: #eaf4fc;
  color: #2a6f9e;
  border-color: #a8cfe8;
}

/* Barra de posicion historica (En funcionamiento) */
.sr_pos {
  position: relative;
  display: inline-block;
  width: 96px;
  height: 11px;
  background: #efefef;
  border-radius: 2px;
  vertical-align: middle;
}

.sr_pos_iqr {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #d9d9d9;
}

.sr_pos_mk {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 3px;
  margin-left: -1.5px;
  background: var(--primary);
  border-radius: 1px;
}

/* Pie de card: fecha a la izquierda, mini-leyenda a la derecha */
.sr_pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem 1.2rem;
  margin-top: 0.9rem;
}

.sr_fecha {
  font-size: 0.7rem;
  white-space: nowrap;
}

.sr_leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem 1.2rem;
  margin: 0 0 0 auto;
  font-size: 0.72rem;
  color: var(--muted);
}

.sr_leyenda .sr_pos {
  width: 56px;
  height: 9px;
}

.sr_lg {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sr_sw {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 1px;
}

.sr_sw_sim {
  background: var(--primary-light);
}

.sr_sw_live {
  background: var(--primary);
}

.sr_sw_none {
  background: transparent;
  border-bottom: 1px dashed #bbb;
  height: 0;
}

/* Sistemas que aun no han entrado en funcionamiento */
.sr_otros {
  font-size: 0.7rem;
  color: var(--muted);
  text-align: left;
  margin-top: 0.4rem;
}

/* Separacion entre las cards de sistemas y con la nota final.
   Sustituye a los <p>&nbsp;</p> intercalados, para gobernar el ritmo
   vertical desde un unico sitio. */
.sr_card + .sr_card {
  margin-top: 1.5rem;
}

/* Referencia a la nota, bajo la introduccion de la pagina */
.sr_ref {
  font-size: 0.8rem;
  text-align: right;
  margin: -0.8rem 0 1.2rem;
}

.sr_ref a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px dotted var(--primary);
}

.sr_ref a::after {
  content: " \2193";
  border-bottom: 0;
}

.sr_ref a:hover {
  color: var(--primary-dark);
  border-bottom-color: var(--primary-dark);
}

/* Aviso de origen de los datos, al pie de Analisis Estadistico */
.sr_aviso {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 1.5rem 0 0;
}

.sr_aviso a {
  color: var(--primary);
}

/* Nota explicativa al pie de la seccion. El titulo repite el texto del
   enlace de arriba, para que se reconozca al llegar por el ancla. */
.sr_nota_titulo {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

/* Nota explicativa al pie de la seccion */
.sr_nota {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text);
  background: #fff;
  margin: 1.5rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  scroll-margin-top: 80px;
}

@media (max-width: 650px) {
  .sr_leyenda {
    justify-content: flex-start;
    margin-left: 0;
  }
  .sr_nota {
    font-size: 0.8rem;
  }
}

/* =============================================================================
   Bloque mc2_ · micartera2.php
   ========================================================================== */

/* El melocotón de acción del sitio, en un solo sitio. Lo comparten el botón
   Añadir posición, el botón Personalizar, la cabecera del selector y la casilla
   de los sistemas añadidos en la simulación: si se toca, se mueven los cuatro a
   la vez y no puede quedar uno desparejado. */
:root {
  --mc2_accion:        #f8cbad;
  --mc2_accion_hover:  #f5b894;
  --mc2_accion_borde:  #e0a882;
  --mc2_accion_borde2: #c98a5f;
  --mc2_accion_suave:  #fdeee2;   /* melocotón muy claro, para fondos de fila */
}

/* =============================================================================
   micartera2.php · selector agrupado de sistemas          bloque mc2_ · v0.1
   Añadir AL FINAL de apmt.css. No modifica ninguna regla existente.
   El verde queda reservado a rentabilidades positivas: aquí solo azules y grises.
   ========================================================================== */

/* --- Cabecera de grupo -------------------------------------------------- */
/* La zebra de .change-table cuenta filas, y las cabeceras de grupo le rompen
   la paridad. En la tabla agrupada la zebra se apaga y la separación la da el
   propio grupo. */
.change-table.mc2_agrupada tbody tr:nth-child(even) { background: transparent; }

.change-table.mc2_agrupada tbody tr.mc2_grp td {
  background: #cae9ff;
  color: var(--primary-dark);
  padding: 0.4rem 0.4rem;
  border-top: 1px solid var(--primary);
  border-bottom: 1px solid var(--primary);
}
.change-table.mc2_agrupada tbody tr.mc2_grp:hover td { background: #cae9ff !important; }

.mc2_grp_t { font-weight: 700; }
.mc2_grp_n { font-weight: 400; color: var(--primary-dark); opacity: 0.75; margin-left: 0.6rem; }
.mc2_grp_d {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #33506b;
  margin-top: 3px;
}

/* --- Celda de sistema --------------------------------------------------- */
.mc2_ico  { vertical-align: -3px; margin-right: 4px; }
.mc2_desc { display: block; font-size: 0.75rem; color: var(--muted); }
.mc2_nota { display: block; font-size: 0.72rem; color: var(--muted); font-style: italic; margin-top: 2px; }
.mc2_hoy  { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.mc2_hoy img { vertical-align: -2px; margin-right: 3px; }

/* --- Etiquetas de zona y estrategia ------------------------------------- */
.mc2_tag {
  display: inline-block;
  font-size: 0.7rem;
  line-height: 1.5;
  padding: 0 5px;
  margin: 1px 2px 1px 0;
  border: 1px solid #cfd8e0;
  border-radius: 3px;
  background: var(--bg);
  color: #33506b;
  white-space: nowrap;
}
/* Universo abierto: no es una etiqueta de cobertura, es una aclaración */
.mc2_tag_abierto { font-style: italic; border-style: dashed; color: var(--muted); }
/* Taxonomía ausente o no aplicable. Sin caja a propósito: un recuadro con borde
   se lee como un valor de taxonomía más, y aquí lo que se dice es que no hay
   ninguno. Texto gris y punto. */
.mc2_sin_tax { font-size: 0.7rem; color: var(--muted); font-style: italic; }
/* Resto recortado. El title lleva la lista completa; la ficha del sistema, el detalle */
.mc2_tag_mas { border-style: dashed; color: var(--primary-dark); cursor: help; }

/* --- Varios ------------------------------------------------------------- */
/* Extremo deja de mostrarse, pero loadMonthlyData() sigue escribiendo en ella */
.mc2_oculta { display: none; }

.mc2_accion { white-space: nowrap; text-align: right; }


/* --- Móvil -------------------------------------------------------------- */
@media (max-width: 780px) {
  .mc2_grp_d { display: none; }
  .mc2_hoy   { display: none; }
}


/* =============================================================================
   Tabla de posiciones elegidas (mc2_seleccion.div.php)
   ========================================================================== */

.mc2_nowrap { white-space: nowrap; }

/* --- Contador de posiciones --------------------------------------------- */
.mc2_pos { white-space: nowrap; }

/* El ancho de los iconos del stepper vive aquí y no solo en el atributo width
   del <img>, porque la fila de total lo replica con huecos vacíos para alinear
   el número. Un solo valor gobierna los dos sitios. */
.mc2_pos, .mc2_pos_total { --mc2_stepper_ico: 18px; }

.mc2_stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.mc2_slot_menos,
.mc2_slot_mas,
.mc2_hueco { width: var(--mc2_stepper_ico); }
.mc2_hueco { display: inline-block; height: 1px; }
.mc2_stepper .slot-txt {
  display: inline-block;
  min-width: 2.2em;
  text-align: center;
  font-weight: 600;
  /* Cifras de ancho fijo. Sin esto, el 1 de Calibri es más estrecho que el 4 y
     que el resto, así que un 1 y un 10 no caen sobre el mismo eje aunque sus
     cajas sí estén alineadas. Afecta a las filas y al total por igual. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.mc2_slot_menos,
.mc2_slot_mas {
  cursor: pointer;
  border-radius: 3px;
}
.mc2_slot_menos:hover,
.mc2_slot_mas:hover { background-color: #78c7ff; }

/* Tope alcanzado, o mínimo de una posición. Mismo tratamiento que .move_disabled */
.mc2_slot_menos.move_disabled,
.mc2_slot_mas.move_disabled { opacity: 0.4; cursor: default; }
.mc2_slot_menos.move_disabled:hover,
.mc2_slot_mas.move_disabled:hover { background-color: transparent; }

/* El lápiz abre el valor decimal. Mientras está abierto, el stepper se retira:
   dos formas de escribir el mismo dato a la vez confunden. */
.mc2_pos.mc2_editando .mc2_stepper { display: none; }

.slot-edit { cursor: pointer; vertical-align: -1px; margin-left: 6px; }

/* En producción estos dos se ocultan desde JS al arrancar, lo que deja un
   parpadeo hasta que corre el script. Aquí nacen ocultos y el JS los muestra. */
.mc2_seleccion .slot-check,
.mc2_seleccion .slot-cancel { display: none; cursor: pointer; vertical-align: -3px; }
.mc2_seleccion .slot-check { margin-left: 6px; }
.mc2_seleccion .slot-cancel { margin-left: 6px; }

/* --- Peso y total -------------------------------------------------------- */
.mc2_peso { white-space: nowrap; font-weight: 600; }

.mc2_total td {
  border-top: 1px solid var(--primary);
  background-color: #e6f3ff;
}
/* El total se lee bajo la columna de posiciones, así que se centra igual que
   el contador de cada fila, que va centrado dentro del stepper. */
/* .change-table td declara text-align:left con especificidad (0,1,1); una clase
   suelta es (0,1,0) y pierde. Por eso el total seguía a la izquierda pese al
   text-align:center. Hay que calificar con el elemento. */
/* Sin text-align: el centrado lo da el stepper replicado, igual que en las filas.
   Centrar la celda entera desplazaba el número respecto a los de arriba. */
.change-table td.mc2_pos_total {
  white-space: nowrap;
  color: var(--muted);
  font-weight: 600;
}

/* Mismo problema, mismo remedio: la celda de acciones tampoco se alineaba */
.change-table td.mc2_accion { text-align: right; }

/* --- Sistema retirado de sistemas.json ----------------------------------- */
/* Ni icono roto ni enlace muerto: se dice lo que pasa y se deja quitar la fila */
.mc2_retirado td { opacity: 0.7; }
.mc2_nd { font-style: italic; color: var(--muted); }

/* --- Móvil --------------------------------------------------------------- */
@media (max-width: 780px) {
  .mc2_seleccion .mc2_tag { font-size: 0.65rem; }
}


/* =============================================================================
   Panel de cobertura (mc2_panel.div.php)
   Va entre la tabla de posiciones y el selector, a lo ancho.
   Escala azul monocroma. El verde sigue reservado a rentabilidades positivas.
   ========================================================================== */

/* --- Disposición del editor ----------------------------------------------
   Una sola columna. El panel iba a la derecha y ahí los cuatro bloques de chips
   se apilaban en vertical, comiéndose el alto de la pantalla y estrechando las
   tablas. A lo ancho caben en una o dos filas. */
.mc2_editor { display: block; }

/* --- Contenedor del panel ------------------------------------------------ */
.mc2_panel {
  display: block;
  border: 1px solid #ddd;
  border-radius: var(--radius);
  background: #fff;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 0.8rem;
}

.mc2_panel_h {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.9rem;
  margin-bottom: 8px;
}

/* Un eje por línea: el rótulo a la izquierda y sus etiquetas a su derecha, en la
   misma fila. Antes el rótulo iba encima y cada bloque ocupaba dos renglones.
   El ancho del rótulo es fijo para que las etiquetas de los cuatro ejes queden
   alineadas entre sí. El rótulo más largo es «SECTORES Y ACTIVOS»; sin espaciado
   entre letras ocupa menos que antes, así que 12.5em deja margen de sobra para
   que no se parta en dos líneas. Si añades un rótulo más largo, este es el
   número a subir. */
.mc2_panel_ejes { --mc2_cov_rotulo: 12.5em; display: block; }

.mc2_cov {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
}

/* --- Bloques de etiquetas ------------------------------------------------ */
.mc2_cov_l {
  flex: 0 0 var(--mc2_cov_rotulo);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}

.mc2_chips { display: flex; flex-wrap: wrap; gap: 4px; }

.mc2_chip {
  display: inline-block;
  font-size: 0.7rem;
  line-height: 1.6;
  padding: 0 6px;
  border: 1px solid #dfe4e9;
  border-radius: 10px;
  background: #fff;
  color: #9aa5ae;
  white-space: nowrap;
}
.mc2_chip_on {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
}

/* --- Mensajes ------------------------------------------------------------ */
.mc2_msgs { list-style: none; margin: 12px 0 0 0; padding: 0; }
.mc2_msgs li {
  border-left: 3px solid var(--primary-light);
  background: var(--bg2);
  font-size: 0.72rem;
  padding: 4px 8px;
  margin-bottom: 4px;
  line-height: 1.35;
}

.mc2_panel_pie {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.35;
  margin: 12px 0 0 0;
}

/* --- Móvil --------------------------------------------------------------- */
@media (max-width: 780px) {
  /* Sin ancho para un rótulo fijo: vuelve encima de sus etiquetas */
  .mc2_cov { display: block; }
  .mc2_cov_l { margin-bottom: 3px; }
}


/* =============================================================================
   Selector: leyenda y filas ya en cartera
   ========================================================================== */

.mc2_leyenda {
  font-size: 0.8rem;
  text-align: left;
  margin: 8px 3px 3px 3px;
  display: none;
  color: var(--primary);
}

/* Dos motivos ocultan una fila del selector y no se pueden pisar:
   esta clase la ponemos nosotros al añadirla a la cartera; el style.display lo
   pone apmt-legend.js al filtrar por instrumento. El !important mantiene la
   fila oculta aunque la leyenda la vuelva a mostrar. */
.mc2_en_cartera { display: none !important; }


/* =============================================================================
   Ajustes cosméticos v0.2
   ========================================================================== */

/* --- Alineado de los botones de fila -------------------------------------
   .pf_row_action es un <span> con texto y un <img> dentro. Sin esto el icono
   se apoya en la línea base y arrastra el texto, que es lo que descolocaba
   Quitar, Seleccionar y Añadir posición respecto al resto de la fila.
   Se califica con el contenedor para no alterar la clase en el resto del sitio. */
.mc2_seleccion .pf_row_action,
.mc2_agrupada  .pf_row_action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}
.mc2_seleccion .pf_row_action img,
.mc2_agrupada  .pf_row_action img { vertical-align: middle; }

/* Celda de acciones: los tres controles en una línea, alineados al centro */
.mc2_accion { white-space: nowrap; }
.mc2_accion > img,
.mc2_accion > span { vertical-align: middle; }
.mc2_accion .move-up,
.mc2_accion .move-down { cursor: pointer; }

/* Icono de tipo de sistema, en la misma línea que el nombre */
.mc2_ico { vertical-align: middle; margin-right: 2px; }

/* --- Fila de descripción a ancho completo --------------------------------
   La descripción vivía en la celda de Sistema, que es la más estrecha de la
   tabla, y se partía en cuatro renglones. Aquí ocupa el ancho entero y la
   columna Sistema puede quedarse en una línea. */
.mc2_desc_row td {
  padding-top: 0;
  padding-bottom: 8px;
  border-top: none;
  line-height: 1.35;
}
.mc2_desc_row .mc2_desc,
.mc2_desc_row .mc2_nota,
.mc2_desc_row .mc2_hoy { display: inline; }

/* Separadores entre los tres fragmentos, sin caracteres en el HTML */
.mc2_desc_row .mc2_nota::before,
.mc2_desc_row .mc2_hoy::before {
  content: ' · ';
  color: #bbb;
}

/* Separador entre sistemas.
   Cerrada, la fila de sistema lleva su propio borde inferior, que es el único
   separador que hay. Abierta, lo cede a la fila de descripción, para que el par
   se lea como un bloque y no como dos filas sueltas.
   La regla de .mc2_abierta va más abajo, con el resto del despliegue. */
.mc2_agrupada tbody tr[data-sysid] td  { border-bottom: 1px solid #eaeaea; }
.mc2_agrupada tbody tr.mc2_desc_row td { border-bottom: 1px solid #eaeaea; }

/* Hover sobre el par completo */
.mc2_agrupada tbody tr[data-sysid]:hover td,
.mc2_agrupada tbody tr.mc2_desc_row:hover td { background-color: #e6f3ff !important; }

/* El atributo hidden sobre un <tr> lo oculta la hoja del navegador, pero basta
   con que alguien declare display sobre tr para que deje de funcionar. */
.mc2_desc_row[hidden] { display: none !important; }


/* =============================================================================
   Ajustes cosméticos v0.3
   ========================================================================== */

/* --- Alineado vertical ---------------------------------------------------
   apmt.css declara .change-table td { vertical-align: top }. En una tabla de
   una línea por celda da igual, pero aquí las celdas de etiquetas se van a dos
   renglones y todo lo demás se quedaba pegado arriba. Esta era la causa real
   del desalineado de Quitar, Seleccionar y Añadir posición: no era el icono
   dentro del botón, era la celda entera. */
.change-table.mc2_seleccion td,
.change-table.mc2_agrupada  td { vertical-align: middle; }

/* La fila de descripción sí va arriba: es texto corrido bajo su sistema */
.change-table.mc2_agrupada tr.mc2_desc_row td { vertical-align: top; }

/* --- Distintivo de instrumento -------------------------------------------
   Solo en el selector: en la tabla de posiciones el sistema ya está elegido y
   el dato deja de ayudar a decidir.
   Va entre el icono y el nombre, solo texto y color, sin caja: es una etiqueta
   de lectura rápida, no un control. */
.mc2_tipo {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  /* Sin margen a la izquierda: el icono ya trae el suyo y la plantilla no deja
     nodos de texto en blanco entre los dos. A la derecha, el aire que separa el
     distintivo del nombre del sistema. */
  margin: 0 5px 0 0;
  vertical-align: middle;
  white-space: nowrap;
}

/* Los cuatro son los colores de los iconos file-bar-graph_*.svg. Los tres
   primeros ya estaban en apmt.css; el de FD vive dentro del propio SVG, así que
   se declara aquí como variable para tenerlo en un solo sitio. */
:root { --mc2_fd_color: #00c69f; }

.mc2_tipo_FI  { color: var(--fi_color); }
.mc2_tipo_ACC { color: var(--acc_color); }
.mc2_tipo_ETF { color: var(--etf_color); }
.mc2_tipo_FD  { color: var(--mc2_fd_color); }

/* --- Leyenda entre las dos tablas ---------------------------------------- */
.mc2_leyenda { margin: 12px 3px 6px 3px; }


/* =============================================================================
   Ayuda de cartera vacía dentro del editor
   ========================================================================== */

/* El separador era un <p>&nbsp;</p> en la plantilla: 19px de línea más 16+16 de
   margen, unos 51px. Lo elimina el generador desde la v0.4 y aquí queda solo la
   red de seguridad de más abajo.

   Los márgenes propios de los botones se dejan intactos: son los que separan el
   wrap de lo que venga después, y lo que viene después depende del estado de la
   cartera. Vacía, la ayuda; con posiciones, la tabla. Anularlos dejaba el botón
   pegado a la tabla en el segundo caso.

   Así que el único ajuste es el de la tarjeta de ayuda, que aportaba 16px de
   padding superior donde bastan 5. */
.pf_tabs_container .faq-container {
  margin-top: 0;
  margin-bottom: 26px;
  padding-top: 0.3rem;
}

/* La copia de abajo es el último elemento del contenedor y va tras Eliminar
   Cartera, que ya trae 30px de margen propio: ahí no hace falta aire debajo.
   El selector es :last-child y no el hermano adyacente, porque la copia de
   arriba también sigue a un pf_edit_btns_wrap y perdería su separación. */
.pf_tabs_container > .faq-container:last-child { margin-bottom: 0; }

/* Red de seguridad: si quedara desplegado un micartera2.php anterior a v0.4 que
   aún emita el <p>&nbsp;</p> como separador, se anula. */
.pf_tabs_container > .pf_edit_btns_wrap + p { display: none; }


/* =============================================================================
   Distinción entre las dos tablas del editor
   ========================================================================== */

/* La tabla de arriba es la cartera, el sujeto de la pantalla, y se queda con el
   azul sólido, que es como el sitio marca lo que importa. El selector es una
   herramienta que se despliega y se pliega, y va en melocotón.

   AJUSTE MANUAL DE RAFA sobre la propuesta original, que era slategray. El
   melocotón enlaza el botón «Añadir posición» con el panel que abre: pulsas algo
   melocotón y se despliega algo melocotón. Y deja el #cae9ff de las cabeceras de
   grupo como único azul del selector, que era el efecto buscado: la agrupación
   por mecanismo de rotación es lo primero que se ve. */
.change-table.mc2_agrupada thead { background: var(--mc2_accion); color: darkslategray; }
.change-table.mc2_agrupada { border: 1px solid var(--mc2_accion); }


/* =============================================================================
   Activo vigente en la fila de descripción
   ========================================================================== */

/* Mes, icono y alias son una sola unidad de lectura. Partirla deja huérfano un
   «Ago'26:» al final de un renglón, o un alias suelto al principio del siguiente
   sin nada que diga a qué mes pertenece. Con nowrap el navegador baja el bloque
   entero al renglón siguiente en lugar de trocearlo, y como el separador «·»
   viaja dentro del span, el corte ocurre antes de él. */
.mc2_desc_row .mc2_hoy { white-space: nowrap; }

/* Descripción y nota sí parten con normalidad: son texto corrido */
.mc2_desc_row .mc2_desc,
.mc2_desc_row .mc2_nota { white-space: normal; }

/* El icono es del activo, así que va pegado al alias y no a la etiqueta del mes */
.mc2_hoy .mc2_mes { font-weight: 600; margin-right: 4px; }
.mc2_hoy img      { vertical-align: -2px; margin-right: 3px; }

/* Instrumentos del grupo, junto al título de la cabecera. Reutilizan .mc2_tipo,
   así que FI, FD, ACC y ETF llevan aquí el mismo color que en las filas. */
.mc2_grp_tipos { margin-left: 2px; }
.mc2_grp_tipos .mc2_tipo { margin-left: 4px; margin-right: 0; }

/* Icono que despliega la descripción del sistema. Mismo SVG que los tooltips del
   sitio, clase propia: help-icon engancha con el sistema de tooltips y aquí lo
   que hay es una fila que se abre, no un texto flotante. */
.mc2_help {
  cursor: pointer;
  vertical-align: -2px;
  margin-left: 5px;
  opacity: 0.55;
}
.mc2_help:hover { opacity: 1; }
/* Abierta: el icono se queda encendido, así se ve qué filas están desplegadas */
tr.mc2_abierta .mc2_help { opacity: 1; }

/* Y la fila cede su separador a la descripción que tiene debajo. Calificado con
   .mc2_agrupada para ganar a la regla de más arriba, que ahora sí pone borde. */
.mc2_agrupada tbody tr.mc2_abierta td { border-bottom: none; }


/* =============================================================================
   Grupo completado
   ========================================================================== */

/* Sin ningún sistema por añadir. Se apaga a gris y pierde el borde azul: deja de
   ser una sección que revisar y pasa a ser un registro de lo que ya has cogido.
   Gris y no verde: el verde sigue reservado a rentabilidades positivas. */
.change-table.mc2_agrupada tbody tr.mc2_grp_lleno td {
  background: #eceff1;
  color: var(--muted);
  border-top-color: #c3ccd2;
  border-bottom-color: #c3ccd2;
}
.change-table.mc2_agrupada tbody tr.mc2_grp_lleno:hover td { background: #eceff1 !important; }

.mc2_grp_lleno .mc2_grp_t { color: var(--muted); }
.mc2_grp_lleno .mc2_grp_d { color: #8b969d; }
.mc2_grp_lleno .mc2_grp_n { color: var(--muted); opacity: 1; font-weight: 600; }

/* Los distintivos de instrumento pierden saturación con el resto */
.mc2_grp_lleno .mc2_tipo { opacity: 0.45; }


/* =============================================================================
   Botón Añadir posición
   ========================================================================== */

/* Con la cartera vacía el controlador le inyecta un style en línea con el verde,
   y un estilo en línea gana a cualquier regla de aquí, así que ese caso queda
   como está sin necesidad de excepción.

   Con posiciones ya elegidas el botón se quedaba sin ningún tratamiento y era un
   texto más dentro de una fila gris. El melocotón lo enlaza además con la
   cabecera del selector que despliega: pulsas algo melocotón y se abre algo
   melocotón. El borde y el peso 600 lo distinguen de esa cabecera, que es una
   franja plana. */
.pf_row_action.mc2_addpos {
  background-color: var(--mc2_accion);
  border: 1px solid var(--mc2_accion_borde);
  border-radius: var(--radius);
  padding: 3px 8px;
  font-weight: 600;
  color: var(--text);
}

.pf_row_action.mc2_addpos:hover {
  background-color: var(--mc2_accion_hover);
  border-color: var(--mc2_accion_borde2);
}


/* =============================================================================
   Cabecera fija del selector
   ========================================================================== */

/* El problema no es sticky, es el envoltorio: .table-wrap declara
   overflow-x:auto y el navegador resuelve entonces overflow-y como auto, lo que
   convierte al div en contenedor de scroll. Un thead sticky se quedaría pegado a
   ese contenedor, que mide lo mismo que su contenido, así que no se movería.
   Por eso el envoltorio del selector deja de recortar en pantallas anchas. */
@media (min-width: 781px) {
  .mc2_wrap_selector { overflow: visible; }
}

/* Caída por defecto. El valor real lo inyecta mc2_selector.div.php desde
   MC2_CABECERA_FIJA, que es también de donde sale el margen del scroll de
   apertura: un solo número para las dos cosas. Este 0px solo actúa si algún día
   se pinta la tabla sin ese estilo en línea. */
.change-table.mc2_agrupada { --mc2_sticky_top: 0px; }

.change-table.mc2_agrupada thead th {
  position: sticky;
  top: var(--mc2_sticky_top);
  z-index: 3;
  /* El fondo es obligatorio: sin él, las filas se verían por debajo al pasar */
  background: var(--mc2_accion);
  box-shadow: inset 0 -1px 0 var(--mc2_accion_borde);
}

/* En móvil el envoltorio sigue recortando en horizontal, que ahí hace falta, y
   la cabecera vuelve a comportarse como una fila normal. */
@media (max-width: 780px) {
  .change-table.mc2_agrupada thead th { position: static; }
}

/* El nombre de la cartera en el título del panel. Cursiva y peso normal: es un
   dato del usuario dentro de un rótulo, no parte del rótulo. */
.mc2_panel_nom { font-style: italic; font-weight: 400; color: var(--text); }

/* El total vive ahora en el <tfoot> de la propia tabla de posiciones, así que la
   alineación de columnas la garantiza el navegador. Estas reglas solo lo separan
   visualmente del cuerpo. */
.change-table.mc2_seleccion tfoot td { border-bottom: none; }


/* =============================================================================
   Etiqueta acotada: exposición fijada por calendario
   ========================================================================== */

/* Los tres estilos de borde ya estaban ocupados por _abierto, _nd y _mas, y el
   color está reservado para otras cosas. Se usa el subrayado punteado, que en la
   web significa desde siempre «aquí hay una explicación», más cursor de ayuda.

   NO se atenúa ni se reduce. Una etiqueta acotada no es más débil que una
   rotacional: es más segura y con techo. Que un sistema lleve Small Cap en
   diciembre nueve años de nueve es un dato más firme que cualquier chip que
   dependa de la fuerza relativa. Lo que la distingue es el límite, no la
   probabilidad, y pintarla en tono menor diría lo contrario. */
.mc2_tag_est {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}

.mc2_leyenda_est {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
  margin: 6px 3px 0 3px;
}


/* =============================================================================
   Exposición · cobertura de este mes frente a la potencial
   ========================================================================== */

.mc2_cob {
  border: 1px solid #ddd;
  border-radius: var(--radius);
  background: #fff;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 0.8rem;
}
.mc2_cob_h {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.9rem;
  margin-bottom: 8px;
}
/* Separado del contenido por una línea a todo el ancho de la tarjeta, con el
   mismo sangrado negativo que la banda de Zonas, para que las dos horizontales
   del bloque estén alineadas y no queden una corta y otra larga. */
.mc2_cob_pie {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.35;
  border-top: 1px solid #e4e8eb;
  margin: 9px -14px 0 -14px;
  padding: 7px 14px 0 14px;
}

/* Tres estados. El de hoy es el más fuerte porque es el único que afirma un
   hecho presente; el de puede es una posibilidad; el gris, nada. */
.mc2_chip_hoy {
  border-color: var(--primary-dark);
  background: var(--primary-dark);
  color: #fff;
  font-weight: 600;
}
.mc2_chip_hoy b { font-weight: 700; }

/* Fila de tabla de exposición que no es renta variable */
.df_table tr.mc2_norv td,
.change-table tr.mc2_norv td { color: var(--muted); font-style: italic; }

/* Zona y Estrategia son los dos ejes del bloque, y cada uno reparte el 100% de
   la cartera por su cuenta. Lo que los separa es una banda de fondo sobre la
   fila de Zonas, no una raya: la banda dice «esto es un conjunto» y la raya solo
   decía «aquí hay un corte».

   Sangrado negativo para que la banda llegue a los bordes de la tarjeta. Si se
   dejara con el padding del contenedor quedaría un rectángulo gris flotando
   dentro de un recuadro blanco, que se lee como un error de maquetación.

   Los tres rótulos de debajo —Estilo, Sectores y activos, Defensivos— no llevan
   banda porque son tres trozos de un mismo eje, no tres ejes.

   Solo en .mc2_cob: el panel del editor no lleva porcentajes y no la necesita.
   El :not(:last-child) evita la banda si Zonas fuera el único bloque. */
.mc2_cob .mc2_cov[data-eje="zonas"]:not(:last-child) {
  background: var(--bg);
  border-bottom: 1px solid #e4e8eb;
  margin: -2px -14px 0 -14px;
  padding: 5px 14px;
}
.mc2_cob .mc2_cov[data-eje="estilo"]:not(:first-child) {
  margin-top: 6px;
}


/* =============================================================================
   Pestaña Resumen
   ========================================================================== */

/* Fila de total: se identifica por clase, no por ser la última, porque debajo
   van los benchmarks. */
.change-table.mc2_resumen tr.mc2_res_total td {
  border-top: 2px solid var(--primary);
  border-bottom: none;
  background: #f4f9ff;
  font-weight: 700;
}

/* Benchmarks: contexto, no posiciones. En cursiva y gris para que no se lean
   como una fila más de la cartera. */
.change-table.mc2_resumen tr.mc2_res_bmk td {
  background: #fafafa;
  color: var(--muted);
  font-style: italic;
  border-bottom: none;
}
.change-table.mc2_resumen tr.mc2_res_bmk:hover td { background: #fafafa !important; }

/* Etiqueta de un valor que no es renta variable, en las columnas Zona y
   Estrategia. Mismo criterio que en Exposición. */
.mc2_tag_norv { color: var(--muted); border-style: dashed; }

.mc2_res_pie { width: 100%; text-align: right; font-size: 0.7rem; color: var(--muted); margin-top: 4px; }


/* =============================================================================
   Pestaña Comparativa
   ========================================================================== */

.mc2_cmp_lead { font-size: 0.85rem; margin-bottom: 8px; }

.change-table.mc2_cmp td,
.change-table.mc2_cmp th { padding: 1px 6px; }
.change-table.mc2_cmp .mc2_num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Cabecera de grupo: los dos bloques de la tabla de origen, con sus colores */
.change-table.mc2_cmp tr.mc2_cmp_grp th { font-weight: 400; font-size: 0.7rem; color: gray; }
.change-table.mc2_cmp th.mc2_cmp_h_anual { background: var(--bg3); color: #5a3a3a; text-align: center; }
.change-table.mc2_cmp th.mc2_cmp_h_metr  { background: var(--bg4); color: #2c5140; text-align: center; }

/* La cartera cierra el bloque de sus sistemas */
.change-table.mc2_cmp tr.mc2_cmp_cartera td {
  background: #f4f9ff;
  border-top: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  font-weight: 700;
}

/* Los benchmarks son contexto, separados por un hueco */
.change-table.mc2_cmp tr.mc2_cmp_sep td { padding: 0; height: 8px; border: none; background: #fff; }
.change-table.mc2_cmp tr.mc2_cmp_bmk td {
  background: #fafafa; color: var(--muted); font-style: italic; border-bottom: none;
}
.change-table.mc2_cmp tr.mc2_cmp_bmk:hover td { background: #fafafa !important; }

.mc2_cmp_pie {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: 0.7rem; color: var(--muted); margin-top: 5px;
}
.mc2_cmp_nota {
  font-size: 0.72rem; color: var(--muted); line-height: 1.4;
  border-top: 1px solid #e4e8eb; margin-top: 12px; padding-top: 8px;
}

/* Las celdas que no pertenecen a ninguno de los dos grupos de la cabecera no
   llevan ni el rosa de rentabilidades ni el verde de métricas. Se identifican
   por exclusión y no por posición: con el modo personalizar hay una columna más
   a la izquierda, y un :first-child dejaba azul la de encima de Sistema. */
.change-table.mc2_cmp tr.mc2_cmp_grp th:not(.mc2_cmp_h_anual):not(.mc2_cmp_h_metr) {
  background: #fff;
}


/* =============================================================================
   Comparativa · modo personalizar
   ========================================================================== */

.mc2_cmp_barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
/* Texto algo menor que el del botón Añadir posición: este rótulo es más largo y
   al mismo cuerpo dominaba la cabecera de la pestaña, cuando lo que manda ahí es
   la tabla. */
.pf_row_action.mc2_cmp_btn {
  background-color: var(--mc2_accion);
  border: 1px solid var(--mc2_accion_borde);
  border-radius: var(--radius);
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
}
.pf_row_action.mc2_cmp_btn.mc2_cmp_on { background-color: var(--mc2_accion_hover); border-color: var(--mc2_accion_borde2); }
.mc2_cmp_ayuda { font-size: 0.72rem; color: var(--muted); line-height: 1.35; flex: 1 1 260px; }

.change-table.mc2_cmp td.mc2_cmp_chk,
.change-table.mc2_cmp th.mc2_cmp_chk {
  width: 24px;
  text-align: center;
  vertical-align: middle;
  padding: 1px 2px;
}

/* display:block y margen a cero: un input nace inline y se apoya en la línea
   base del texto, que en una fila de una sola línea lo deja un par de píxeles
   por debajo del resto. */
.mc2_cmp_cb {
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

/* Fuera del modo personalizar la casilla se oculta con visibility y no con
   display: así la columna conserva su ancho y la tabla no da un salto lateral
   al entrar y salir del modo. */
.change-table.mc2_cmp .mc2_cmp_cb { visibility: hidden; }
.change-table.mc2_cmp.mc2_cmp_editando .mc2_cmp_cb { visibility: visible; }

/* Color distinto según de dónde venga el sistema: azul del sitio para los que
   ya están en tu cartera, gris para los que añades desde aquí. Así, con varias
   casillas marcadas se ve de un vistazo qué parte del escenario es tu cartera y
   qué parte es hipótesis, sin leer nombre por nombre.

   accent-color tiñe el relleno de la casilla marcada, que es justo cuando la
   distinción hace falta: las de tu cartera nacen marcadas y en azul, y una
   añadida se pone gris en el momento en que la marcas. Sin marcar, las dos se
   ven igual, que es correcto: ahí no aportan nada al escenario. */
.change-table.mc2_cmp tr[data-encartera="1"] .mc2_cmp_cb { accent-color: var(--primary); }
.change-table.mc2_cmp tr[data-encartera="0"] .mc2_cmp_cb { accent-color: var(--mc2_accion); }

/* Fila de un sistema fuera de la cartera: mismo peso visual que las de dentro,
   porque el estado lo dice la casilla y no el color. */
.change-table.mc2_cmp tr.mc2_cmp_extra td { background: #fcfcfd; }

/* Hover en melocotón y no en el azul del resto de la tabla. El fondo propio de
   estas filas tapaba el hover heredado, así que hacía falta declararlo; y ya
   puestos, el melocotón las emparenta con el botón que las ha traído y con el
   color de sus casillas. El azul se queda para lo que es tuyo. */
.change-table.mc2_cmp tr.mc2_cmp_extra:hover td { background: var(--mc2_accion_suave); }

/* Cartera en simulación: el rótulo ya lo dice, el borde lo subraya */
.change-table.mc2_cmp tr.mc2_cmp_simul td {
  border-top-style: dashed;
  border-bottom-style: dashed;
  background: #fffdf2;
}

/* Cabeceras ordenables, solo con el modo activo */
.change-table.mc2_cmp.mc2_cmp_editando th.mc2_ord { cursor: pointer; }
.change-table.mc2_cmp.mc2_cmp_editando th.mc2_ord:hover { text-decoration: underline; }
.change-table.mc2_cmp th.mc2_ord_asc::after  { content: ' \2191'; }
.change-table.mc2_cmp th.mc2_ord_desc::after { content: ' \2193'; }


/* =============================================================================
   Comparativa · barra de origen
   ========================================================================== */

/* sr_celda_anyo() emite <td class="sr_origen" style="--sr-frac: …">, y la barra
   la dibujan pseudo-elementos. Pero en apmt.css esas reglas están calificadas
   con .sys-table, la tabla de sistemas_comparativa.php, así que en una
   .change-table no aplicaban y las celdas salían sin barra.

   Se repiten aquí calificadas con .mc2_cmp en vez de añadir sys-table a la
   tabla: esa clase trae además su propia tipografía, su zebra y su hover, que
   chocarían con change-table. La duplicación es de cuatro declaraciones y queda
   acotada; si algún día se unifican, el sitio a mirar es .sys-table td.sr_origen
   en apmt.css.

   --sr-frac lo escribe PHP en cada celda y es lo que fija dónde cae la frontera
   entre el tramo simulado y el que ya estaba en funcionamiento. */
.change-table.mc2_cmp td.sr_origen {
  position: relative;
  padding-bottom: 6px !important;
  --sr-barw: 70%;
}

.change-table.mc2_cmp td.sr_origen::before,
.change-table.mc2_cmp td.sr_origen::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  bottom: 2px;
  height: 3px;
  border-radius: 1px;
}

.change-table.mc2_cmp td.sr_origen::before {
  width: var(--sr-barw);
  background: var(--primary-light);
}

.change-table.mc2_cmp td.sr_origen::after {
  width: calc(var(--sr-barw) * var(--sr-frac));
  background: var(--primary);
}

/* Los chips que la leyenda usa dentro del texto corrido: mismos colores que los
   de arriba, pero sin el interlineado alto que necesitan en su cuadrícula, que
   dentro de un párrafo separaría los renglones. */
.mc2_cob_pie .mc2_chip { line-height: 1.3; vertical-align: baseline; }

/* micartera.php v1.9 · Cambios · Exposición por Activo de la previsión provisional.
   Mismo marco que los bloques de Exposición (table-wrap + pie-container). */
.mc2_pexp { margin-top: 15px; }
.mc2_pexp .mc2_pexp_prov { color: red; }   /* v1.9.1 · como el aviso de la previsión */
.mc2_pexp .mc2_pexp_nota { font-size: 0.8rem; color: var(--muted); margin: 4px 6px 14px; }   /* v1.9.2 · aire antes de queso y tabla */
.mc2_pexp .mc2_pexp_ico { vertical-align: middle; border-radius: 50%; margin-right: 4px; }
.mc2_pexp .mc2_pexp_cod { display: block; font-size: 0.7rem; color: var(--muted); padding-left: 2.1rem; }
.mc2_pexp td.mc2_pexp_sis { font-size: 0.75rem; white-space: normal; max-width: 14rem; }

/* =============================================================================
   micartera.php · pestañas agrupadas por bloques        bloque mc2_ · v1.10.1
   Convenciones Mi Cartera §J. Añadir AL FINAL de apmt.css. No modifica ninguna
   regla existente: solo cambia el fondo de la pestaña INACTIVA según su bloque.
   Información (Resumen, Estadísticas, Exposición) conserva --pf_noselect.
   :not(.active) es obligatorio: .pf_tabs.mc2_tab_* tiene la misma especificidad
   que .pf_tabs.active y, al ir después, pisaría el fondo de la activa.
   El lime de Editar con la cartera vacía va en style en línea y sigue ganando.
   Fuera: verde y rojo (rentabilidades), púrpura, darkorange y #00bcff (FI, ACC, ETF).
   ========================================================================== */
:root {
  --mc2_tab_mes:  #ffe07a;   /* Mes: Cambios */
  --mc2_tab_herr: var(--mc2_accion);   /* Herramientas: Comparativa, Frontera eficiente · v1.10.1: melocotón de acción (antes rosa #f5b8c4) */
  --mc2_tab_edit: #d5d5d5;   /* Edición: Editar (= --bg_sel) */
}
.pf_tabs.mc2_tab_mes:not(.active)  { background: var(--mc2_tab_mes); }
.pf_tabs.mc2_tab_herr:not(.active) { background: var(--mc2_tab_herr); }
.pf_tabs.mc2_tab_edit:not(.active) { background: var(--mc2_tab_edit); }


/* =============================================================================
   micartera.php v1.11 · pestaña «En euros»                 bloque mce_ · v1.12
   Convenciones Mi Cartera §K. Añadir AL FINAL de apmt.css. Todo va bajo .mce_app
   (mc2_euros.div.php): no toca ninguna regla existente.
   v1.12 · Formato unificado con Resumen, Estadísticas, Exposición, Cambios y
   Comparativa: Calibri, títulos azules en negrita (.mc2_cob_h), tarjetas como
   .mc2_cob, tablas .change-table con calor de createHeatMap, entradilla como
   .mc2_cmp_lead y notas como .mc2_cmp_nota. Sin monoespaciada ni versalitas.
   ========================================================================== */
.mce_app {
  --mce_line: #ddd;
  display: flex; flex-direction: column; gap: 32px;   /* v1.12.6 · más aire entre bloques (antes 18px) */
  font-size: 0.85rem; line-height: 1.35; color: var(--muted);
}
.mce_app *, .mce_app *::before, .mce_app *::after { box-sizing: border-box; }

/* Cabecera: como la entradilla de Comparativa, con título de tarjeta */
.mce_app .mce_head { margin: 0; }
.mce_app .mce_h1 { font-size: 1rem; font-weight: 700; color: var(--primary); margin: 0 0 4px; }
.mce_app .mce_lede { font-size: 0.85rem; margin: 0; color: var(--muted); }

/* Rótulos pequeños: gris, sin versalitas */
.mce_app .mce_lbl, .mce_app .mce_field label, .mce_app .mce_kicker { font-size: 0.75rem; color: var(--muted); font-weight: 400; }

/* Tarjetas: el marco de .mc2_cob */
.mce_app .mce_input, .mce_app .mce_card, .mce_app .mce_resumen {
  background: #fff; border: 1px solid var(--mce_line); border-radius: var(--radius); padding: 10px 14px; margin: 0; min-width: 0;
}
.mce_app .mce_cardtitle, .mce_app .mce_costs_h, .mce_app .mce_resumen .mce_kicker {
  font-weight: 700; color: var(--primary); font-size: 0.9rem; margin: 0 0 8px;
}

/* Panel de entrada */
.mce_app .mce_input { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
.mce_app .mce_field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mce_app .mce_amount { display: flex; align-items: center; gap: 6px; }
.mce_app .mce_amount input {
  font: inherit; font-size: 1.25rem; font-weight: 700; width: 100%; max-width: 200px;
  padding: 3px 8px; border: 1px solid #bbb; border-radius: 4px; color: var(--text); background: #fff;
  font-variant-numeric: tabular-nums;
}
.mce_app .mce_amount span { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.mce_app .mce_costs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; align-content: start; }
.mce_app .mce_costs_h { grid-column: 1 / -1; margin: 0; }
.mce_app .mce_costs input {
  font: inherit; font-size: 0.85rem; padding: 2px 6px; border: 1px solid #bbb; border-radius: 4px;
  width: 100%; background: #fff; color: var(--text); font-variant-numeric: tabular-nums;
}
/* v1.12.5 · El sitio da margin-top: 10px a todo input; aquí separaba el rótulo de su caja */
.mce_app .mce_input input { margin: 0; }
.mce_app input:focus-visible, .mce_app button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mce_app .mce_hint { font-size: 0.75rem; color: var(--muted); margin: 0; }

/* Botones: importes rápidos (azul del sitio) y plazo (melocotón de acción, como Editar) */
.mce_app .mce_presets, .mce_app .mce_btngroup { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mce_app .mce_btn {
  font: inherit; font-size: 0.8rem; padding: 2px 10px; border: 1px solid var(--primary); background: #fff;
  color: var(--primary); border-radius: 4px; cursor: pointer; line-height: 1.4;
}
.mce_app .mce_btn:hover { background: #e6f3ff; }
.mce_app .mce_btn.mce_on { background: var(--primary); color: #fff; font-weight: 700; }
.mce_app .mce_btn.mce_btn_hz { border-color: var(--mc2_accion_borde); color: var(--text); }
.mce_app .mce_btn.mce_btn_hz:hover { background: var(--mc2_accion_suave); }
.mce_app .mce_btn.mce_btn_hz.mce_on { background: var(--mc2_accion); border-color: var(--mc2_accion_borde2); color: var(--text); }
.mce_app .mce_toolbar { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 6px; }
.mce_app .mce_hzgroup .mce_lbl { margin-right: 4px; }

/* Resumen */
.mce_app .mce_resumen { border-left: 3px solid var(--primary); display: flex; flex-direction: column; gap: 2px; }
.mce_app .mce_resumen .mce_kicker { margin-bottom: 4px; }
.mce_app .mce_resumen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mce_app .mce_resumen li { margin: 0; color: var(--text); }
.mce_app .mce_resumen .mce_ir {
  font: inherit; font-weight: 700; color: var(--primary); background: none; border: 0; padding: 0;
  cursor: pointer; margin-right: 4px;
}
.mce_app .mce_resumen .mce_ir::after { content: ' ›'; }
.mce_app .mce_resumen .mce_ir:hover { text-decoration: underline; }

/* Secciones: título azul oscuro con su número; descripción como la entradilla */
.mce_app .mce_sec { display: flex; flex-direction: column; gap: 10px; }
.mce_app .mce_sec > div[hidden] { display: none; }
.mce_app [data-mce="s2_cuerpo"], .mce_app [data-mce="s3_cuerpo"] { display: flex; flex-direction: column; gap: 10px; }   /* v1.12.8 · s3 */
.mce_app .mce_sechead {
  display: flex; align-items: baseline; gap: 6px; border-bottom: 2px solid var(--primary);
  padding-bottom: 2px; break-after: avoid;
}
.mce_app .mce_secnum, .mce_app .mce_sechead h4 { font-size: 1rem; font-weight: 700; color: var(--pf_color); margin: 0; }
/* v1.12.6 · Sin número: un rombo en el color del título */
.mce_app .mce_secnum::before { content: '◆'; font-size: 0.8rem; position: relative; top: -1px; }
.mce_app .mce_secdesc { font-size: 0.85rem; color: var(--muted); margin: 0; }

/* KPIs: celdas de tarjeta con rótulo gris y cifra en negrita */
.mce_app .mce_hero {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--mce_line);
  border: 1px solid var(--mce_line); border-radius: var(--radius); overflow: hidden; break-inside: avoid;
}
.mce_app .mce_kpi { background: #fff; padding: 8px 14px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mce_app .mce_val { font-size: 1.25rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.mce_app .mce_sub { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mce_app .mce_sub.mce_sub_act { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mce_app .mce_neg { color: var(--red); }
.mce_app .mce_pos { color: var(--green); }

/* Tablas: .change-table del sitio. Solo se añade la alineación numérica y el total */
.mce_app .mce_scroll { overflow-x: auto; }
.mce_app .change-table.mce_table { margin: 0; break-inside: avoid; }
.mce_app .change-table.mce_table th,
.mce_app .change-table.mce_table td { padding: 1px 6px; white-space: nowrap; vertical-align: middle; }
.mce_app .change-table.mce_table td { color: var(--text); }
.mce_app .change-table.mce_table th.mce_r,
.mce_app .change-table.mce_table td.mce_r { text-align: right; font-variant-numeric: tabular-nums; }
.mce_app .change-table.mce_table td.mce_wrapcell { white-space: normal; min-width: 160px; }
.mce_app .change-table.mce_table tfoot td {
  background: #f4f9ff; border-top: 2px solid var(--primary); border-bottom: none; font-weight: 700;
}
.mce_app .change-table.mce_table td.mce_neg { color: var(--red); }
.mce_app .change-table.mce_table .mc2_tipo { margin-right: 4px; }
.mce_app .mce_shared { color: var(--primary-dark); font-weight: 700; }
.mce_app .change-table.mce_table tr.mce_gris td, .mce_app .change-table.mce_table td.mce_gris { color: var(--muted); font-style: italic; }
/* v1.12.1 · Iconos: tipo de sistema (.mc2_ico del sitio) y activo, redondo como en Cambios */
.mce_app .mce_ico_act { vertical-align: middle; border-radius: 50%; margin-right: 4px; }
.mce_app .change-table.mce_table td.mce_sis .mc2_ico { margin-right: 4px; }
.mce_app .mce_cod { font-size: 0.7rem; color: var(--muted); font-weight: 400; margin-left: 4px; }

/* Barra de reparto por sistema, con el color de su tipo */
.mce_app .mce_stack { display: flex; height: 20px; border-radius: 3px; overflow: hidden; margin: 2px 0 8px; }
.mce_app .mce_stack div {
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.7rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; border-right: 1px solid #fff; min-width: 0; gap: 4px;
}
/* v1.12.3 · Icono del activo de cada sistema en la cinta · v1.12.4: sin círculo blanco alrededor */
.mce_app .mce_stack_ico { display: inline-flex; flex: none; }
.mce_app .mce_stack_ico img { display: block; margin: 0; border-radius: 50%; }
.mce_app .mce_stack_txt { overflow: hidden; text-overflow: ellipsis; }
/* Cabeceras ordenables, como enableTableSorting2 */
.mce_app .change-table.mce_table th[data-mce-ord] { cursor: pointer; user-select: none; }

/* Qué habría pasado y curva de coste */
.mce_app .mce_mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 8px 0 6px; }
.mce_app .mce_mini > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mce_app .mce_mval { font-size: 1rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
/* v1.12.7 · Mismo peso que .mce_pos/.mce_neg y va después: sin esto, el verde y el rojo se perdían */
.mce_app .mce_mval.mce_pos { color: var(--green); }
.mce_app .mce_mval.mce_neg { color: var(--red); }
.mce_app .mce_canvas { position: relative; height: 300px; width: 100%; }
.mce_app .mce_canvas.mce_canvas_s { height: 240px; }
.mce_app .mce_note { font-size: 0.7rem; margin-top: 6px; }
.mce_app .mce_curva { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr); gap: 10px; align-items: stretch; }
.mce_app .mce_hero.mce_hero_col { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
.mce_app .mce_hero_col .mce_kpi { justify-content: center; }

/* Lectura clave: nota destacada en el azul claro de la fila de total */
.mce_app .mce_insight { border-left: 3px solid var(--primary); background: #f4f9ff; padding: 8px 14px; break-inside: avoid; }
.mce_app .mce_insight.mce_t2 { background: var(--bg2); border-left-color: #c9a800; }
.mce_app .mce_insight p { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--text); }
.mce_app .mce_insight p + p { margin-top: 4px; font-size: 0.85rem; font-weight: 400; color: var(--muted); }

/* Pie: como .mc2_cmp_nota */
.mce_app .mce_foot { border-top: 1px solid var(--mce_line); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.mce_app .mce_foot p { margin: 0; font-size: 0.72rem; color: var(--muted); line-height: 1.4; }
.mce_app .mce_foot .mce_kicker { font-weight: 700; }

@media (max-width: 780px) {
  .mce_app .mce_input, .mce_app .mce_hero, .mce_app .mce_curva { grid-template-columns: 1fr; }
  .mce_app .mce_mini, .mce_app .mce_costs { grid-template-columns: 1fr 1fr; }
}
@media print {
  .mce_app { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mce_app .mce_hero:not(.mce_hero_col) { grid-template-columns: repeat(3, 1fr) !important; }
  .mce_app .mce_curva { grid-template-columns: 1fr 3fr !important; }
  .mce_app .mce_input { grid-template-columns: 1.2fr 1fr !important; }
  .mce_app .mce_canvas { height: 260px; }
  .mce_app .mce_canvas.mce_canvas_s { height: 200px; }
  .mce_app .mce_presets { display: none; }
}


/* =============================================================================
   micartera.php v1.12 · pestaña «Concentración»            bloque mcc_ · v0.1.8
   v0.1.8 · Franja de tipo de las filas a la derecha del nombre; nombres de la tira en el color del tipo.
   v0.1.7 · Matrices: franja con el color del tipo de sistema en las cabeceras y leyenda (.mcc_tipos).
   v0.1.6 · Resalte en ámbar (--mc2_tab_mes y escala del JS) en lugar de melocotón.
   v0.1.5 · El resalte enciende también el nombre del sistema (th.mcc_sel).
   v0.1.4 · Fila separadora sobre «Media».
   v0.1.3 · Fila «Media» al pie de la matriz de correlación.
   v0.1.1 · Matrices: .mcc_sel, pares del sistema bajo el ratón en melocotón.
   v0.1.2 · El resalte conserva el degradado (variables --mcc_sel_bg / --mcc_sel_fg).
   Convenciones Concentración v0.1.10 (§4); maqueta v0.17. Añadir AL FINAL de
   apmt.css. Todo va bajo .mcc_app (mc2_concentracion.div.php): no toca ninguna
   regla existente. Formato del resto de Mi Cartera, como el bloque mce_ (§K.5.b):
   Calibri, títulos azules en negrita, tarjetas como .mc2_cob, tablas
   .change-table y pie como .mc2_cmp_nota. Sin monoespaciada ni versalitas.
   Colores de datos (tira, matrices, rango) en mc2_config.php § 7, no aquí.
   ========================================================================== */
.mcc_app {
  --mcc_line: #ddd;
  display: flex; flex-direction: column; gap: 32px;
  font-size: 0.85rem; line-height: 1.35; color: var(--muted);
}
.mcc_app *, .mcc_app *::before, .mcc_app *::after { box-sizing: border-box; }
.mcc_app [hidden] { display: none !important; }

/* Cabecera y línea de estado */
.mcc_app .mcc_head { margin: 0; }
.mcc_app .mcc_h1 { font-size: 1rem; font-weight: 700; color: var(--primary); margin: 0 0 4px; }
.mcc_app .mcc_lede { font-size: 0.85rem; margin: 0; color: var(--muted); }
.mcc_app .mcc_estado { font-size: 0.75rem; margin: 6px 0 0; color: var(--muted); }
.mcc_app .mcc_aviso { border-left: 3px solid #c9a800; background: var(--bg2); padding: 8px 14px; color: var(--text); font-size: 0.9rem; }
.mcc_app .mcc_cuerpo { display: flex; flex-direction: column; gap: 32px; }

/* Secciones: título con rombo, como mce_ */
.mcc_app .mcc_sec { display: flex; flex-direction: column; gap: 10px; }
.mcc_app .mcc_sechead {
  display: flex; align-items: baseline; gap: 6px; border-bottom: 2px solid var(--primary);
  padding-bottom: 2px; break-after: avoid;
}
.mcc_app .mcc_secnum, .mcc_app .mcc_sechead h4 { font-size: 1rem; font-weight: 700; color: var(--pf_color); margin: 0; }
.mcc_app .mcc_secnum::before { content: '◆'; font-size: 0.8rem; position: relative; top: -1px; }
.mcc_app .mcc_secdesc { font-size: 0.85rem; color: var(--muted); margin: 0 0 8px; }

/* Tarjetas: el marco de .mc2_cob */
.mcc_app .mcc_card { background: #fff; border: 1px solid var(--mcc_line); border-radius: var(--radius); padding: 10px 14px; margin: 0; min-width: 0; }
.mcc_app .mcc_cardtitle { font-weight: 700; color: var(--primary); font-size: 0.9rem; margin: 0 0 6px; }
.mcc_app .mcc_scroll { overflow-x: auto; }
.mcc_app .mcc_nota { font-size: 0.75rem; color: var(--muted); margin: 6px 0 0; }

/* Tablas: .change-table del sitio */
.mcc_app .change-table.mcc_table { margin: 0; break-inside: avoid; }
.mcc_app .change-table.mcc_table th,
.mcc_app .change-table.mcc_table td { padding: 1px 6px; white-space: nowrap; vertical-align: middle; }
.mcc_app .change-table.mcc_table td { color: var(--text); }
.mcc_app .change-table.mcc_table th.mcc_r,
.mcc_app .change-table.mcc_table td.mcc_r { text-align: right; font-variant-numeric: tabular-nums; }
.mcc_app .change-table.mcc_table td.mcc_wrapcell { white-space: normal; min-width: 200px; }
.mcc_app .change-table.mcc_table td.mcc_gris { color: var(--muted); font-style: italic; }
.mcc_app .mcc_chip { display: inline-block; font-size: 0.75rem; padding: 0 5px; margin: 1px 3px 1px 0; border: 1px solid #c9dff2; background: #eef6fc; border-radius: 3px; white-space: nowrap; }
.mcc_app .mcc_chip b { color: var(--primary-dark); }

/* Resumen (§2): anchos fijos, mínimo 760 px con desplazamiento en la tarjeta */
.mcc_app .change-table.mcc_res { table-layout: fixed; min-width: 760px; }
.mcc_app .change-table.mcc_res col.mcc_c1 { width: 17%; }
.mcc_app .change-table.mcc_res col.mcc_c2 { width: 15%; }
.mcc_app .change-table.mcc_res col.mcc_c3 { width: 17%; }
.mcc_app .change-table.mcc_res col.mcc_c4 { width: 200px; }
.mcc_app .change-table.mcc_res th { white-space: normal; }
.mcc_app .change-table.mcc_res td { white-space: normal; padding: 4px 6px; }
.mcc_app .change-table.mcc_res td.mcc_resm { font-weight: 700; }
.mcc_app .change-table.mcc_res td.mcc_resv { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mcc_app .change-table.mcc_res td.mcc_resv small { display: block; font-size: 0.7rem; font-weight: 400; color: var(--muted); line-height: 1.3; }
.mcc_app .mcc_rg { position: relative; width: 170px; height: 12px; margin: 2px 0 3px; }
.mcc_app .mcc_rg span { position: absolute; top: 0; bottom: 0; }
.mcc_app .mcc_rg i { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; }
.mcc_app .mcc_rg_l { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }

/* Tira por sistema (§4.3). Solo desplazamiento horizontal: con overflow-x a secas el
   navegador calcula también overflow-y y el redondeo de subpíxeles sacaba barra vertical */
.mcc_app .mcc_tira_wrap { overflow-x: auto; overflow-y: hidden; padding-bottom: 1px; }
.mcc_app .mcc_tira {
  display: grid; gap: 1px; background: #f0f0f0; min-width: 680px; padding-bottom: 1px;
  border-bottom: 1px solid #ccc; font-size: 0.65rem; color: var(--text);
}
.mcc_app .mcc_tira > div { background: #fff; min-height: 14px; position: relative; }
.mcc_app .mcc_tira [data-k] { cursor: default; }
.mcc_app .mcc_tira .mcc_tl { padding: 0 6px 0 2px; text-align: right; white-space: nowrap; font-weight: 700; line-height: 14px; overflow: hidden; }
.mcc_app .mcc_tira .mcc_tl span { font-weight: 400; color: var(--muted); }
.mcc_app .mcc_tira .mcc_ty { background: transparent; font-size: 0.6rem; color: var(--muted); overflow: visible; white-space: nowrap; line-height: 12px; min-height: 12px; }
.mcc_app .mcc_tira .mcc_tsep { grid-column: 1 / -1; min-height: 6px; }
.mcc_app .mcc_tira .mcc_tbl { min-height: 64px; }
.mcc_app .mcc_tira .mcc_tbl b { position: absolute; left: 2px; top: 1px; font-weight: 700; }
.mcc_app .mcc_tira .mcc_tbl span { position: absolute; right: 4px; transform: translateY(50%); font-size: 0.55rem; color: #888; line-height: 1; }
.mcc_app .mcc_tira .mcc_tbl span.mcc_tmed { color: #222; font-weight: 700; }
.mcc_app .mcc_tira .mcc_tb { min-height: 64px; }
.mcc_app .mcc_tira .mcc_tb i { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; }
.mcc_app .mcc_tira .mcc_tb u { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed #222; z-index: 1; text-decoration: none; }
.mcc_app .mcc_tira .mcc_tr { min-height: 64px; }
.mcc_app .mcc_tira .mcc_tr i { position: absolute; left: 0; right: 0; }
.mcc_app .mcc_tira .mcc_tr s { position: absolute; left: 0; right: 0; border-top: 1px solid #999; text-decoration: none; }
.mcc_app .mcc_leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.75rem; color: var(--muted); margin: 8px 0 0; }
.mcc_app .mcc_leg i { display: inline-block; width: 12px; height: 10px; vertical-align: -1px; margin-right: 5px; }
.mcc_app .mcc_leg i.mcc_leg_med { height: 0; border-top: 1.5px dashed #222; vertical-align: 3px; }

/* Tooltip estructurado: un elemento flotante; fondo y texto los pone el JS */
.mcc_app .mcc_tt {
  position: fixed; z-index: 50; pointer-events: none; display: none; max-width: 340px; padding: 6px 10px;
  border-radius: 4px; font-size: 0.8rem; line-height: 1.4; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.mcc_app .mcc_tt .mcc_tt_h { font-weight: 700; margin: 0 0 4px; padding: 0 0 3px; border-bottom: 1px solid currentColor; }
.mcc_app .mcc_tt dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; margin: 0; }
.mcc_app .mcc_tt dt { opacity: .85; margin: 0; }
.mcc_app .mcc_tt dd { margin: 0; font-weight: 700; }

/* Matrices lado a lado (§4.4); si no caben, la segunda baja */
.mcc_app .mcc_par { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.mcc_app .mcc_par_c { flex: 1 1 420px; }
.mcc_app table.mcc_mx { border-collapse: separate; border-spacing: 2px; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--text); }
.mcc_app table.mcc_mx th { font-weight: 700; font-size: 0.7rem; white-space: nowrap; padding: 2px 6px; }
.mcc_app table.mcc_mx th.mcc_rowh { text-align: right; }
.mcc_app table.mcc_mx th.mcc_colh { writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; height: 92px; padding: 4px 2px; }
.mcc_app table.mcc_mx td { width: 40px; min-width: 40px; height: 28px; text-align: center; border-radius: 2px; }
.mcc_app table.mcc_mx td.mcc_vacia { background: transparent; }
/* v0.1.3 · Fila «Media» al pie de la correlación, separada de la matriz */
.mcc_app table.mcc_mx tr.mcc_media th, .mcc_app table.mcc_mx tr.mcc_media td { border-top: 2px solid var(--primary); }
.mcc_app table.mcc_mx tr.mcc_media td { font-weight: 700; }
/* v0.1.4 · Aire entre la matriz y «Media»: fila vacía, sin color ni alto mínimo de celda */
.mcc_app table.mcc_mx tr.mcc_media_sep td { height: 8px; min-width: 0; width: auto; padding: 0; background: transparent; }
/* v0.1.2 · Pares del sistema bajo el ratón, con su degradado en escala melocotón: el JS deja el
   color de cada celda en --mcc_sel_bg / --mcc_sel_fg. !important: el calor va en el style */
.mcc_app table.mcc_mx td.mcc_sel { background: var(--mcc_sel_bg, var(--mc2_tab_mes)) !important; color: var(--mcc_sel_fg, #222) !important; box-shadow: none !important; }
/* v0.1.5 · Y el nombre del sistema, en la cabecera de su fila y en la de su columna */
/* v0.1.6 · Ámbar de la pestaña Cambios, no melocotón: el melocotón es la correlación negativa */
.mcc_app table.mcc_mx th.mcc_sel { background: var(--mc2_tab_mes); color: #222; border-radius: 2px; }
.mcc_app table.mcc_mx th[data-s] { cursor: default; }
.mcc_app .mcc_escala { display: flex; align-items: center; gap: 8px; font-size: 0.7rem; color: var(--muted); margin: 8px 0 0; }
.mcc_app .mcc_escala .mcc_bar { display: inline-block; width: 160px; height: 10px; }
.mcc_app .mcc_escala .mcc_bar.mcc_bar_neg { width: 40px; }
/* v0.1.7 · Tipo de sistema en las matrices (titular, 2026-10-13, variante B de la maqueta): franja
   con el color del tipo junto al nombre (v0.1.8: a la derecha en las filas, junto a las celdas);
   el texto y el resalte no cambian. Borde y no sombra para
   que salga al imprimir. La cabecera de columna va girada 180°: su borde superior se ve abajo. */
.mcc_app .mcc_tipo_FI  { --mcc_tipo_c: var(--fi_color); }
.mcc_app .mcc_tipo_FD  { --mcc_tipo_c: var(--mc2_fd_color); }
.mcc_app .mcc_tipo_ACC { --mcc_tipo_c: var(--acc_color); }
.mcc_app .mcc_tipo_ETF { --mcc_tipo_c: var(--etf_color); }
.mcc_app table.mcc_mx th.mcc_rowh[class*="mcc_tipo_"] { border-right: 4px solid var(--mcc_tipo_c, #ccc); padding-right: 8px; }
/* v0.1.8 · Tira: el nombre del sistema en el color de su tipo, sin leyenda (titular, 2026-10-13) */
.mcc_app .mcc_tira .mcc_tl .mcc_tn { font-weight: 700; }
.mcc_app .mcc_tira .mcc_tl[class*="mcc_tipo_"] .mcc_tn { color: var(--mcc_tipo_c); }
.mcc_app table.mcc_mx th.mcc_colh[class*="mcc_tipo_"] { border-top: 3px solid var(--mcc_tipo_c, #ccc); }
.mcc_app .mcc_tipos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 0.7rem; color: var(--muted); margin: 6px 0 0; }
.mcc_app .mcc_tipos span { display: inline-flex; align-items: center; gap: 5px; }
.mcc_app .mcc_tipos i { display: inline-block; width: 4px; height: 12px; background: var(--mcc_tipo_c, #ccc); }

/* Cómo se ha calculado: plegable */
.mcc_app details.mcc_met { border-top: 1px solid var(--mcc_line); padding-top: 8px; }
.mcc_app details.mcc_met summary { font-size: 0.9rem; font-weight: 700; color: var(--primary); cursor: pointer; }
.mcc_app details.mcc_met dl { margin: 8px 0 10px; }
.mcc_app details.mcc_met dt { font-weight: 700; color: var(--text); margin: 8px 0 1px; }
.mcc_app details.mcc_met dd { margin: 0; }
.mcc_app details.mcc_met .change-table.mcc_t_sis { width: auto; }

/* Pie: como .mc2_cmp_nota */
.mcc_app .mcc_foot { border-top: 1px solid var(--mcc_line); padding-top: 8px; }
.mcc_app .mcc_foot p { margin: 0; font-size: 0.72rem; color: var(--muted); line-height: 1.4; }

@media print {
  .mcc_app { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mcc_app .mcc_card, .mcc_app table, .mcc_app tr { break-inside: avoid; }
  .mcc_app .mcc_tira_wrap, .mcc_app .mcc_scroll { overflow: visible; }
  .mcc_app .mcc_tira { min-width: 0; }
  .mcc_app .mcc_tt { display: none !important; }
}

/* =============================================================================
   Bloque mc2_ · Duplicar cartera (micartera.php v1.13, mc2_config.php § 8)
   Botón secundario junto a Eliminar Cartera: contorno azul, sin el lime de la
   pestaña ni el rojo de eliminar. Deshabilitado, gris y con su línea debajo.
   ========================================================================== */
button.pf_edit_btns.mc2_dup_btn {
  font-family: inherit;
  line-height: inherit;
  background-color: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
  cursor: pointer;
  pointer-events: auto;
}
button.pf_edit_btns.mc2_dup_btn:hover { background-color: #e8f4ff; }
button.pf_edit_btns.mc2_dup_btn:disabled {
  background-color: #f1f3f5;
  color: var(--muted);
  border-color: #c1c9d1;
  cursor: not-allowed;
}
.mc2_dup_nota {
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 10px;
}


/* =============================================================================
   mc2_ · Indicador de carga (micartera.php v1.16.8; texto 0.52rem en v1.16.11; colores de la barra: variante C; maqueta mcl v0.1,
   D1-D7, D10-D12; V1-V7)
   Estado en #confecciona: mc2_cargando (lo pinta PHP; lo quita loadMonthlyData),
   mc2_lento (a los MC2_CARGA_LENTO_MS) y mc2_error (falló el bloque 2).
   Textos en variables (--mc2-carga-*), de MC2_CARGA_TXT (mc2_config.php § 10).
   Las animaciones de giro y barra son de transform: siguen aunque el cálculo
   ocupe el hilo. Marcado propio: .mc2_carga_prog, .mc2_carga_aviso_g (lento) y
   .mc2_carga_aviso por cartera (error).
   ========================================================================== */
/* 1-2 · Barra y texto de progreso (v1.16.1): fila propia entre los botones de las carteras y
   el recuadro de la cartera. Márgenes negativos: ocupa el hueco que ya dejan los botones, así
   que la cartera no se mueve ni al aparecer ni al irse. La barra es un tramo que recorre una
   pista recortada (overflow), solo con transform: sigue durante el bucle de cálculo. */
.mc2_carga_prog { display: none; }
#confecciona.mc2_cargando .mc2_carga_prog,
#confecciona.mc2_error .mc2_carga_prog {
  display: flex; align-items: center; gap: 10px;
  height: 14px; margin: -12px 0 -2px;   /* 14 − 12 − 2 = 0: no desplaza la cartera */
}
/* v1.16.8 · colores de la variante C (maqueta «Barra de carga · colores», titular): pista melocotón
   claro = lo que falta, relleno --primary = lo cargado, tramo melocotón fuerte que se mueve solo en
   lo que falta. 4 px. Contraste pista/relleno ≈ 4,5:1 (antes, ≈ 1,7:1 con tres azules). */
.mc2_carga_barra {
  --mc2-carga-pista: #fde6d6;     /* melocotón claro, de la familia de #f8cbad de la cabecera */
  --mc2-carga-mov: #f19a62;       /* melocotón fuerte */
  position: relative; flex: 1 1 auto; min-width: 60px; height: 4px;
  overflow: hidden; border-radius: 2px; background: var(--mc2-carga-pista);
}
/* v1.16.3 (V5) · relleno por fases: --mc2-carga-frac (0-1) lo escribe mc2CargaProg(). Solo transform. */
.mc2_carga_barra::after {
  content: ""; position: absolute; inset: 0;
  background: var(--primary);
  transform-origin: left center; transform: scaleX(var(--mc2-carga-frac, 0));
  transition: transform .4s ease-out;
}
/* v1.16.8 · lo que falta: caja del ancho de la barra desplazada hasta el final del relleno; recorta
   el tramo que se mueve, que así solo recorre la parte pendiente. Solo transform: sigue moviéndose
   durante el bucle de cálculo. */
.mc2_carga_resto {
  position: absolute; inset: 0; overflow: hidden;
  transform: translateX(calc(var(--mc2-carga-frac, 0) * 100%));
  transition: transform .4s ease-out;
}
.mc2_carga_resto::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  background: var(--mc2-carga-mov); transform: translateX(-100%);
}
#confecciona.mc2_cargando .mc2_carga_resto::before { animation: mc2_carga_barra 1.3s ease-in-out infinite; }
#confecciona.mc2_error .mc2_carga_barra { background: var(--acc_color); }
#confecciona.mc2_error .mc2_carga_resto,
#confecciona.mc2_error .mc2_carga_barra::after { display: none; }
@keyframes mc2_carga_barra {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(290%); }
}
/* v1.16.10 · Guardar y recargar (#confecciona.mc2_ocupado): la misma fila, solo con el tramo
   melocotón que se mueve; sin relleno azul ni porcentaje (--mc2-carga-frac a 0). Gana a mc2_error
   (barra naranja fija) si la carga anterior había fallado. No atenúa pestañas ni marca celdas. */
#confecciona.mc2_ocupado .mc2_carga_prog {
  display: flex; align-items: center; gap: 10px;
  height: 14px; margin: -12px 0 -2px;
}
#confecciona.mc2_ocupado .mc2_carga_barra { --mc2-carga-frac: 0 !important; background: var(--mc2-carga-pista); }
#confecciona.mc2_ocupado .mc2_carga_barra::after { display: none; }
#confecciona.mc2_ocupado .mc2_carga_resto { display: block; }
#confecciona.mc2_ocupado .mc2_carga_resto::before { animation: mc2_carga_barra 1.3s ease-in-out infinite; }
#confecciona.mc2_ocupado .mc2_carga_prog .mc2_carga_txt { display: block; }   /* más específico que el de mc2_error, que va después */
@media (prefers-reduced-motion: reduce) {
  #confecciona.mc2_ocupado .mc2_carga_resto::before { display: block; animation: none; transform: none; width: 100%; opacity: .6; }
}
@media print {
  #confecciona.mc2_ocupado .mc2_carga_prog { display: none !important; }
}

/* v1.16.6 · IBM Plex Mono propia de la barra, con font-display: optional: si la fuente aún no ha
   llegado al pintar, la barra usa la monoespaciada del sistema durante toda la carga y no cambia a
   mitad (antes, el texto se redibujaba más ancho al llegar la fuente). Mismo fichero que la
   «IBM Plex Mono» del sitio: no hay descarga nueva, y el resto del sitio no cambia. */
@font-face {
  font-family: "mc2 Carga Mono";
  src: url("fonts/IBMPlexMono-Bold.ttf") format("truetype");
  font-weight: 600; font-style: normal;
  font-display: optional;
}
/* v1.16.5 · ancho fijo: el del texto más largo, en caracteres (--mc2-carga-ch, lo calcula PHP con los
   textos de MC2_CARGA_TXT). La letra es monoespaciada, así que cada carácter ocupa 1ch más el
   espaciado; sin esto, la barra encogía o crecía con cada texto («9 de 14» → «10 de 14», fases, %). */
.mc2_carga_txt {
  --mc2-carga-ls: .1em;
  flex: 0 0 auto; padding-left: 16px; white-space: nowrap; overflow: hidden;
  box-sizing: border-box; width: calc(var(--mc2-carga-ch, 30) * (1ch + var(--mc2-carga-ls)) + 16px);
  font-family: "mc2 Carga Mono", ui-monospace, monospace;
  font-size: 0.52rem; font-weight: 600; letter-spacing: var(--mc2-carga-ls); text-transform: uppercase;   /* v1.16.11 · antes 0.6rem */
  color: var(--muted);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23666' stroke-width='2.2' stroke-dasharray='26 12'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") left center / 10px 10px no-repeat;   /* v1.16.11 · antes 11px */
}
#confecciona.mc2_error .mc2_carga_txt { display: none; }
@media (max-width: 480px) {
  .mc2_carga_txt { --mc2-carga-ls: .04em; }
}

/* 3 · Pestañas de cálculo: atenuadas y con anillo; se pueden abrir (D1) */
#confecciona.mc2_cargando .pf_tabs.mc2_dep:not(.active),
#confecciona.mc2_error .pf_tabs.mc2_dep:not(.active) { opacity: .45; }
#confecciona.mc2_cargando .pf_tabs.mc2_dep { cursor: progress; }
#confecciona.mc2_error .pf_tabs.mc2_dep:not(.active) { cursor: not-allowed; }
#confecciona.mc2_cargando .pf_tabs.mc2_dep::after {
  content: "";
  display: inline-block; width: 8px; height: 8px; margin-left: 4px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: mc2_carga_giro .8s linear infinite;
}
@keyframes mc2_carga_giro { to { transform: rotate(360deg); } }

/* Su contenido: aviso de espera y esqueleto en lugar de tablas vacías */
#confecciona.mc2_cargando .mc2_dep_c > *,
#confecciona.mc2_error .mc2_dep_c > * { display: none !important; }
#confecciona.mc2_cargando .mc2_dep_c::before,
#confecciona.mc2_error .mc2_dep_c::before {
  display: block;
  font-size: 0.9rem; color: var(--muted);
}
#confecciona.mc2_cargando .mc2_dep_c::before {
  content: var(--mc2-carga-espera, "");
  padding: 0 0 12px 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%230070c0' stroke-width='2.2' stroke-dasharray='26 12'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") left 2px / 14px 14px no-repeat;
}
#confecciona.mc2_error .mc2_dep_c::before { content: var(--mc2-carga-nodisp, ""); }
#confecciona.mc2_cargando .mc2_dep_c::after {
  content: "";
  display: block; height: 88px;
  background-image:
    linear-gradient(#e3e6ea, #e3e6ea), linear-gradient(#e3e6ea, #e3e6ea),
    linear-gradient(#e3e6ea, #e3e6ea), linear-gradient(#e3e6ea, #e3e6ea),
    linear-gradient(#e3e6ea, #e3e6ea);
  background-size: 62% 10px, 88% 10px, 74% 10px, 81% 10px, 55% 10px;
  background-position: 0 0, 0 18px, 0 36px, 0 54px, 0 72px;
  background-repeat: no-repeat;
  animation: mc2_carga_pulso 1.2s ease-in-out infinite alternate;
}
@keyframes mc2_carga_pulso { from { opacity: 1; } to { opacity: .45; } }

/* 5 · Celdas que rellena el JS: marcador gris mientras están vacías (D4).
   Resumen: partes y peso (6.ª), Aporta y, en el total, de la 6.ª a la 9.ª.
   Editar: métricas del selector. Al rellenarse dejan de estar :empty. */
#confecciona.mc2_cargando table.mc2_resumen tr[data-sys] > td:nth-child(6):empty::after,
#confecciona.mc2_cargando table.mc2_resumen tr[data-sys] > td.mc2_res_aporta:empty::after,
#confecciona.mc2_cargando table.mc2_resumen tr.mc2_res_total > td:nth-child(n+6):empty::after,
#confecciona.mc2_cargando tr[data-sysid] > td[data-hist]:empty::after,
#confecciona.mc2_cargando tr[data-sysid] > td[data-cagr]:empty::after,
#confecciona.mc2_cargando tr[data-sysid] > td[data-dd]:empty::after,
#confecciona.mc2_cargando tr[data-sysid] > td[data-calmar]:empty::after,
#confecciona.mc2_error table.mc2_resumen tr[data-sys] > td:nth-child(6):empty::after,
#confecciona.mc2_error table.mc2_resumen tr[data-sys] > td.mc2_res_aporta:empty::after,
#confecciona.mc2_error table.mc2_resumen tr.mc2_res_total > td:nth-child(n+6):empty::after {
  content: "";
  display: inline-block; width: 3.4em; height: .75em; vertical-align: middle;
  border-radius: 3px; background: #e3e6ea;
}
#confecciona.mc2_cargando table.mc2_resumen td:empty::after,
#confecciona.mc2_cargando tr[data-sysid] > td:empty::after { animation: mc2_carga_pulso 1.2s ease-in-out infinite alternate; }

/* 6 · (v1.16.5) Punto en los botones de las otras carteras: retirado (D8). Se quitaban todos a la vez al
   final, porque las carteras se calculan en un solo bucle, y no informaban de nada. */

/* 7 · Avisos (v1.16.2, V1): lento (D5) en un único .mc2_carga_aviso_g bajo la barra, fuera de las
   carteras, que con red lenta siguen ocultas cuando salta; error, en el aviso de cada cartera. */
.mc2_carga_aviso {
  display: none;
  border-left: 3px solid var(--acc_color); background: var(--bg2);
  padding: 8px 12px; margin: 0 0 12px; font-size: 0.9rem; color: var(--text);
}
.mc2_carga_aviso_g { margin-top: 6px; }   /* la fila de progreso tiene margen inferior negativo */
.mc2_carga_aviso p { margin: 0; }
.mc2_carga_aviso p b { display: block; }
/* v1.16.7 · aviso de lentitud compacto y en una línea (titular): letra más pequeña, menos relleno y
   título en línea. Va después de la regla general y con más especificidad: en v1.16.3 la general
   (display: block) ganaba por orden y el título salía en su propia línea. En móvil puede partirse. */
#confecciona .mc2_carga_aviso_g { padding: 4px 10px; font-size: 0.8rem; }
#confecciona .mc2_carga_aviso_g p b { display: inline; }
#confecciona.mc2_cargando.mc2_lento .mc2_carga_aviso_g,
#confecciona.mc2_error .mc2_carga_aviso:not(.mc2_carga_aviso_g) { display: block; }
.mc2_carga_recargar {
  margin-top: 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.6rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid var(--primary); background: #fff; color: var(--primary);
  border-radius: 3px; cursor: pointer;
}
.mc2_carga_recargar:hover { background: var(--primary); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  #confecciona.mc2_cargando .mc2_carga_resto::before { display: none; }   /* v1.16.3 · el relleno ya dice el avance */
  .mc2_carga_barra::after, .mc2_carga_resto { transition: none; }
  #confecciona.mc2_cargando .pf_tabs.mc2_dep::after,
  #confecciona.mc2_cargando .mc2_dep_c::after,
  #confecciona.mc2_cargando table.mc2_resumen td:empty::after,
  #confecciona.mc2_cargando tr[data-sysid] > td:empty::after { animation: none; }
}
@media print {
  #confecciona .mc2_carga_prog { display: none !important; }
}

/* =============================================================================
   mcv_ · Comparar carteras (micartera.php v1.17, 2026-10-22; mc2_config.php § 12)
   Botón al final de la fila de carteras (#mcv_btn) y vista #mcv, que rellena
   mc2_cmpcart.js. Colores de tipo: los del sitio. Verde y rojo solo en las cifras.
   ========================================================================== */
.pf_btns.mcv_btn { background: #fff; box-shadow: inset 0 0 0 1px var(--pf_color); }
.pf_btns.mcv_btn.active { background: var(--pf_color); color: #fff; }
/* Indicador de carga (§P.4): el botón depende de loadMonthlyData(); atenuado y con anillo, se puede abrir */
#confecciona.mc2_cargando .pf_btns.mc2_dep:not(.active),
#confecciona.mc2_error .pf_btns.mc2_dep:not(.active) { opacity: .45; }
#confecciona.mc2_cargando .pf_btns.mc2_dep { cursor: progress; }
#confecciona.mc2_cargando .pf_btns.mc2_dep::after {
  content: "";
  display: inline-block; width: 8px; height: 8px; margin-left: 4px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: mc2_carga_giro .8s linear infinite;
}

.mcv_app { --mcv_fd: var(--mc2_fd_color, #00c69f); }
.mcv_app .mcv_tit { color: black; margin-bottom: 4px; font-size: 1.05rem; }
.mcv_app .mcv_intro { font-size: 0.9rem; margin: 0 0 6px; }
/* v0.4 · selector de vista: «Por año» / «Riesgo y funcionamiento» */
.mcv_app .mcv_modo { display: inline-flex; margin: 2px 0 8px; border: 1px solid var(--pf_color); border-radius: 6px; overflow: hidden; }
.mcv_app button.mcv_modo_btn { font: inherit; font-size: 0.85rem; font-weight: 600; padding: 3px 10px; border: 0;
  background: #fff; color: var(--pf_color); cursor: pointer; }
.mcv_app button.mcv_modo_btn + button.mcv_modo_btn { border-left: 1px solid var(--pf_color); }
.mcv_app button.mcv_modo_btn.active { background: var(--pf_color); color: #fff; cursor: default; }
.mcv_app td.mcv_max { color: var(--primary); }   /* sin verde: es un estado, no una rentabilidad */
.mcv_app td.mcv_real { text-align: center; }
.mcv_app .mcv_ventana { font-size: 0.85rem; color: var(--primary); font-weight: 600; margin: 0 0 8px; }
.mcv_app .mcv_wrap { width: unset; border: unset; border-radius: unset; padding-bottom: 5px; overflow-x: auto; max-width: 100%; }
.mcv_app table.mcv_tabla { overflow: visible; }   /* df_table lleva overflow: hidden, que anula el sticky de la columna Cartera */
.mcv_app table.mcv_tabla td { white-space: nowrap; }
.mcv_app td.mcv_num { text-align: right; }
.mcv_app td.mcv_pos { color: var(--green); }
.mcv_app td.mcv_neg { color: var(--red); }
.mcv_app td.mcv_calmar { color: var(--primary); text-align: center; }
.mcv_app td.mcv_sis { text-align: center; }   /* nº de sistemas */
/* v0.3 · el número abre la tabla de sistemas de la cartera, bajo la principal */
.mcv_app button.mcv_sis_btn { font: inherit; font-weight: 600; color: var(--primary); background: #fff;
  border: 1px solid var(--primary); border-radius: 4px; padding: 0 7px; min-width: 2.2em; cursor: pointer; }
.mcv_app button.mcv_sis_btn:hover, .mcv_app button.mcv_sis_btn.active { background: var(--primary); color: #fff; }
.mcv_app .mcv_detalle:empty { display: none; }
.mcv_app .mcv_detalle { margin: 8px 0 4px; }
.mcv_app .mcv_det_cab { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mcv_app .mcv_det_tit { color: var(--primary); font-size: 0.9rem; font-weight: 700; }
.mcv_app button.mcv_det_cerrar { font: inherit; font-size: 1rem; line-height: 1; color: var(--muted); background: none;
  border: 1px solid #c8d0d9; border-radius: 4px; padding: 0 6px; cursor: pointer; }
.mcv_app button.mcv_det_cerrar:hover { color: var(--text, #000); border-color: var(--muted); }
.mcv_app table.mcv_det_tabla td, .mcv_app table.mcv_det_tabla th { white-space: nowrap; }
.mcv_app td.mcv_det_sis, .mcv_app table.mcv_det_tabla th:first-child,
.mcv_app table.mcv_det_tabla th[data-k="activo"] { text-align: left; }
.mcv_app td.mcv_det_sis img { vertical-align: middle; margin-right: 4px; }
.mcv_app td.mcv_det_act { text-align: left; }
.mcv_app td.mcv_det_act img { vertical-align: middle; margin-right: 4px; border-radius: 50%; }
/* v0.5.1 · cabeceras: se parten solo entre palabras (sin guiones ni cortes dentro de una palabra). El texto mide
   lo que su palabra más larga (min-content) y ocupa la celda si es más ancha: la frase entera no ensancha la columna. */
.mcv_app th.mcv_ord { white-space: normal; vertical-align: bottom; cursor: pointer; user-select: none; }   /* sin position: pisaría el sticky de Cartera */
.mcv_app th.mcv_ord .mcv_th { display: block; width: min-content; min-width: 100%; white-space: normal; line-height: 1.15; }
/* v0.5.1 · si la tabla entera cabe, cabeceras en una línea (la clase la pone ajustaCabeceras() de mc2_cmpcart.js) */
.mcv_app table.mcv_cab_linea th.mcv_ord .mcv_th { width: auto; white-space: nowrap; }
.mcv_app th.mcv_ord:hover { text-decoration: underline; }
.mcv_app th.mcv_ord.mcv_asc .mcv_th::after  { content: " ▲"; font-size: 0.7em; }
.mcv_app th.mcv_ord.mcv_desc .mcv_th::after { content: " ▼"; font-size: 0.7em; }
.mcv_app .mcv_sep { border-left: 2px solid #c8d0d9; }
.mcv_app th.mcv_nom, .mcv_app td.mcv_nom { text-align: left; font-weight: 600;
  position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 #c8d0d9; }   /* fija al desplazar la tabla */
.mcv_app td.mcv_nom { background: inherit; }   /* el color de la fila (las filas alternas lo llevan en el tr) */
.mcv_app td.mcv_nom label { cursor: pointer; }
.mcv_app td.mcv_nom input[type="checkbox"] { width: auto; height: auto; padding: 0; margin: 0 5px 0 0; vertical-align: middle; cursor: pointer; }   /* la regla general de input da width: 100% */
.mcv_app .mcv_nombre { display: inline-block; vertical-align: middle; max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
.mcv_app tr.mcv_fuera td { color: #9aa3ad; }
.mcv_app tr.mcv_fuera .mcv_franja { opacity: .4; }
.mcv_app td.mcv_fija { font-weight: 600; }
.mcv_app .mcv_marca { color: var(--primary); font-size: 0.75em; vertical-align: 1px; }

/* Franja de tipo de activo: segmentos proporcionales a las partes */
.mcv_app .mcv_franja { display: inline-flex; width: 48px; height: 8px; margin-left: 6px; vertical-align: middle;
  border-radius: 2px; overflow: hidden; background: #eef2f6; }
.mcv_app .mcv_franja .mcv_t { flex: 0 0 auto; height: 100%; }
.mcv_app .mcv_t_FI  { background: var(--fi_color); }
.mcv_app .mcv_t_ACC { background: var(--acc_color); }
.mcv_app .mcv_t_ETF { background: var(--etf_color); }
.mcv_app .mcv_t_FD  { background: var(--mcv_fd); }
.mcv_app .mcv_t_X   { background: #c8d0d9; }

.mcv_app .mcv_leyenda { font-size: 0.75rem; color: var(--muted); margin: 6px 0 10px; line-height: 1.6; }
.mcv_app .mcv_ley_tit { margin-right: 4px; }
.mcv_app .mcv_ley_item { white-space: nowrap; margin-right: 10px; }
.mcv_app .mcv_leyenda .mcv_t { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 0; }

.mcv_app .mcv_como { font-size: 0.8rem; margin: 6px 0; }
.mcv_app .mcv_como summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.mcv_app .mcv_como dl { margin: 6px 0 0; }
.mcv_app .mcv_como dt { font-weight: 600; margin-top: 6px; }
.mcv_app .mcv_como dd { margin: 0 0 0 0; }
.mcv_app .mcv_legal { font-size: 0.7rem; color: var(--muted); margin: 8px 0 0; }
/* v0.6 · rango de fechas y gráficos */
.mcv_app .mcv_rango { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.85rem; margin: 0 0 6px; }
.mcv_app .mcv_rango:empty { display: none; }
.mcv_app .mcv_rango_tit { font-weight: 600; color: var(--primary); }
.mcv_app .mcv_rango label { white-space: nowrap; }
.mcv_app .mcv_rango select { width: auto; font: inherit; padding: 1px 4px; margin: 0; }   /* la regla general de select puede dar 100 % */
.mcv_app button.mcv_rango_comun { font: inherit; font-size: 0.8rem; padding: 1px 8px; border: 1px solid var(--primary);
  border-radius: 4px; background: #fff; color: var(--primary); cursor: pointer; }
.mcv_app button.mcv_rango_comun:disabled { border-color: #c8d0d9; color: #9aa3ad; cursor: default; }
.mcv_app .mcv_graf { margin: 10px 0 4px; }
.mcv_app .mcv_graf_tit { color: var(--primary); font-size: 0.9rem; font-weight: 700; margin: 8px 0 2px; }
.mcv_app .mcv_graf_v { position: relative; height: 320px; }
.mcv_app .mcv_graf_dd { position: relative; height: 170px; }
.mcv_app .mcv_graf_nota { font-size: 0.75rem; color: var(--muted); margin: 4px 0 0; }
@media (max-width: 480px) {
  .mcv_app .mcv_graf_v { height: 260px; }
  .mcv_app .mcv_graf_dd { height: 140px; }
  .mcv_app .mcv_nombre { max-width: 7.5em; }
  .mcv_app .mcv_franja { width: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  #confecciona.mc2_cargando .pf_btns.mc2_dep::after { animation: none; }
}

/* =============================================================================
   mc2_ · Franja de tipos en el botón de cartera (micartera.php v1.18, 2026-10-22; mc2_config.php § 13)
   Botones de cartera (.mc2_pf_btn; no el «+» ni Comparar carteras): ancho mínimo y nombre centrado, y una línea
   de 4 px abajo con un tramo por tipo de sistema (--mc2-tipos, en el style del botón), separada del fondo por
   1 px blanco. Va como imagen de fondo para no meter nada dentro del botón (su texto es el nombre). Más
   específico que .pf_btns.active, cuyo «background» abreviado borraría la imagen.
   ========================================================================== */
.pf_btns.mc2_pf_btn { min-width: 4.5em; text-align: center; box-sizing: border-box; }
.pf_btns_wrap .pf_btns { padding-bottom: 7px; }   /* sitio de la franja; también en «+» y Comparar, para que la fila tenga una sola altura */
.pf_btns.mc2_pf_btn[style*="--mc2-tipos"] {
  background-image: var(--mc2-tipos), linear-gradient(#fff, #fff);
  background-size: 100% 4px, 100% 5px;
  background-position: left bottom, left bottom;
  background-repeat: no-repeat;
}