:root{
    /* Paleta aproximada a la imagen */
    --mi-ink:#2a2a2a;
    --mi-border:#b8b1d8;

    --mi-ped:#6f4aa8;      /* morado encabezados pedagogico */
    --mi-ped-soft:#ece5f7; /* alternado */
    --mi-ped-pill:#6f4aa8;

    --mi-inn:#2f4ea3;      /* azul encabezados innovacion */
    --mi-inn-soft:#dfe7fb; /* alternado */
    --mi-inn-pill:#2f4ea3;

    --mi-prev:#b44a73;     /* rosa encabezados prevencion */
    --mi-prev-soft:#f2dbe4;/* alternado */
    --mi-prev-pill:#b44a73;

    --mi-bg:#ffffff;
    --mi-shadow:0 18px 40px rgba(0,0,0,.25);
  }

  /* ============ BOTON ABRIR ============ */
  .mi-openBtn{
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
  }

  /* ============ MODAL ============ */
  .mi-modal[hidden]{ display:none; }

  .mi-modal{
    position: fixed;
    inset: 0;
    z-index: 9999;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--mi-ink);
  }

  .mi-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
  }

  .mi-panel{
    position: relative;
    margin: 4vh auto;
    /* width: min(1320px, 94vw); */
    width: 91%;
    /* max-height: 92vh; */
    max-height: 93%;
    background: var(--mi-bg);
    border-radius: 14px;
    box-shadow: var(--mi-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .mi-header{
    position: relative;
    padding: 18px 18px 10px 18px;
    border-bottom: 1px solid #eee;
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 10px;
  }

  .mi-brandSpacer{ width:40px; height:40px; }

  .mi-title{
    margin: 0;
    text-align: center;
    letter-spacing: .06em;
    font-weight: 300;
    /* font-size: clamp(22px, 2.4vw, 40px); */
    color: #2f2c68;
  }
  .mi-titleStrong{ font-weight: 700; }

  .mi-close{
    width: 40px;
    height: 40px;
    border: none;
    background: #fff;
    cursor: pointer;
    font-size: 25px;
    line-height: 1;
    font-weight: 600;
  }

  .mi-body{
    padding: 14px 14px 18px 14px;
    overflow: auto;
  }

  .mi-footer{
    padding: 12px 16px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }

  .mi-btn{
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
  }

  /* ============ MATRIZ (layout exacto tipo imagen) ============ */
  .mi-matrixWrap{
    width: 100%;
    overflow-x: auto; /* desktop/tablet: si no cabe, scroll horizontal */
    -webkit-overflow-scrolling: touch;
  }

  .mi-matrix{
    display: flex;
    align-items: flex-start;
    /* gap: 18px; */
    min-width: 1180px; /* asegura layout tipo lámina */
    padding: 6px 4px 10px 4px;
  }

  /* Eje (bloque con etiqueta superior) */
  .mi-eje{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mi-ejeLabel{
    text-align: center;
    font-weight: 700;
    /* font-size: 13px; */
    letter-spacing: .02em;
    padding: 4px 0;
  }
  .mi-ejeLabel--ped{ color: var(--mi-ped); }
  .mi-ejeLabel--inn{ color: var(--mi-inn); }
  .mi-ejeLabel--prev{ color: var(--mi-prev); }

  /* Contenedor de columnas por eje */
  .mi-cols{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 170px; /* ancho aproximado a la imagen */
    gap: 0;
  }

  /* Columna */
  .mi-col{
    display: flex;
    flex-direction: column;
  }

  .mi-colHeader{
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* font-weight: 700; */
    /* font-size: 12px; */
    padding: 8px 8px;
    color: #fff;
    border: 1px solid var(--mi-border);
    border-bottom: none;
  }
  .mi-colHeader--ped{ background: var(--mi-ped); }
  .mi-colHeader--inn{ background: var(--mi-inn); }
  .mi-colHeader--prev{ background: var(--mi-prev); }

  /* Tarjeta */
  .mi-card{
    border: 1px solid var(--mi-border);
    border-top: none;
    min-height: 92px;
    padding: 10px 10px 8px 10px;
    display: grid;
    grid-template-rows: 1fr auto auto;
    gap: 8px;
    background: #fff;
  }

  /* Alternados como en la lámina */
  .mi-card--altPed{ background: var(--mi-ped-soft); }
  .mi-card--altInn{ background: var(--mi-inn-soft); }
  .mi-card--altPrev{ background: var(--mi-prev-soft); }

  .mi-cardText{
    /* font-size: 12px; */
    line-height: 1.2;
    text-align: center;
    color: #2a2a2a;
  }

  .mi-cardType{
    /* font-size: 12px; */
    border-top: 1px solid rgba(0,0,0,.08);
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding: 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Botón tipo "píldora" con ícono */
  .mi-pill{
    height: 18px;
    width: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-decoration: none;
  }
  .mi-pill--ped{ background: var(--mi-ped-pill); }
  .mi-pill--inn{ background: var(--mi-inn-pill); }
  .mi-pill--prev{ background: var(--mi-prev-pill); }

  .mi-pill:focus{
    outline: 2px solid #000;
    outline-offset: 2px;
  }

  .mi-pillIcon{
    width: 18px;
    height: 18px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-image: url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>\
        <path d='M10.59 13.41a1 1 0 0 0 1.41 0l3.54-3.54a1 1 0 0 0-1.41-1.41l-3.54 3.54a1 1 0 0 0 0 1.41z'/>\
        <path d='M8 17a5 5 0 0 1 0-10h3v2H8a3 3 0 1 0 0 6h3v2H8z'/>\
        <path d='M13 7h3a5 5 0 0 1 0 10h-3v-2h3a3 3 0 1 0 0-6h-3V9z'/>\
      </svg>");
  }

  /* Icono “cerebro” pequeño (decorativo) */
.mi-brain{
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  vertical-align: -2px;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* SVG “limpio” (sin <style> y con # escapado a %23) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130.18 127.03'><path fill='%23e67e58' d='M122.19,87.41c-.12,7.04-5.85,11.78-13.14,11.69-1.72,10.2-9.94,15.84-20.05,15.46.6,7.05-3.87,11.89-9.29,12.41-6.44.63-11.66-4.05-11.65-10.88l.12-98.22C68.18,7.48,77.51.18,86.69,0c9.97-.18,18.19,7.23,19.34,17.71,10.16-.08,16.3,7.47,16.32,17l.03,10.44c5.16,3.51,7.64,8.54,7.79,13.89.17,5.9-2.39,11.25-7.77,14.89l-.22,13.47ZM117.59,86.58l.11-15.36c5.24-2.48,8.04-6.92,7.78-12.22-.21-4.23-2.73-9.59-7.97-10.71-3.53-.76-8.17-.58-11.54-.41l-.58,6.6-15.94-.05-.18-13.19c-3.05-3.36-9.07,5.74-11.93,0-.72-1.44-.23-4.41.86-5.25,4.36-3.33,5.77,3.31,10.83,1.45,2.64-11.82-5.32-12.65-.97-16.55,1.63-1.47,4.64-.93,6.12.45,2.1,1.96-.9,4.27-1.16,6.22-1.04,7.88-.62,15.44-.59,23.83h10.11s.32-6.9.32-6.9l14.68.16v-11.99c0-6.15-6.29-11.52-12.44-9.72-4.17,1.22,5.08,8.83.35,11.65-1.62.97-4.64.84-5.59-.38-3.07-3.92,1.21-2.1,1.63-13.33.32-8.67-5.3-15.65-13.63-16.15-7.71-.46-15.12,5.6-15.12,14.25l-.03,71.14c5.74,1.23,10.43-2.67,10.76-8.84.32-6.08-5.41-10-.94-12.24,1.14-.57,4.25-.37,5.24.44s1.19,3.6.53,4.69c-4.17,6.87.41,10.7-5.42,16.17-2.47,2.31-6.04,3.08-10.11,3.51l-.08,22.3c-.01,3.75,2.91,6.39,6.26,6.19,2.86-.17,5.32-2.73,5.34-6.11l.13-19.99,8.3-2.86c1.45-.5,4.14,1.62,4.3,3.47.12,1.46-1.57,4.15-3.23,4.32-1.49.15-3.41-1.07-6.12-2.66l-.41,10.35c3.49,1.66,8.54.8,12.24-1.82,2.33-1.65,4.81-5.82,4.82-9.56l.03-13.01-5.88-.91c-.12-4.01,0-8.2-.83-11.23-1.17-2.54-2.43-5.08-.39-7.14,1.29-1.3,5.15-.78,6.3,1.41,2.09,4-3.62,3.03-2.15,13.86l5.76.6.34,13.03c2.24.38,5.91-.13,7.53-1.4,1.3-1.02,2.57-4.27,2.58-6.1Z'/><path fill='%23e67e58' d='M0,64.51v-9.93c2.37-3.54,4.58-6.47,7.82-10.15l.09-10.73c.08-9.39,7.02-16.06,16.36-16.09C25.35,6.87,34.05-.46,44.15.02c9.66.46,18.01,8.36,18.01,18.95v97.91c-.02,6.68-6.28,10.85-11.91,10.06s-9.54-5.93-9.07-12.54c-9.8.69-18.4-4.97-19.81-15.19-7.78-.02-13.42-5-13.48-12.84l-.09-11.67c-3.23-3.73-5.45-6.64-7.81-10.18ZM22.79,93.81l.26-12.63,5.83-.76c1.69-9.3-5.84-12.33-.51-15.64,1.33-.82,4.6-.01,5.7,1.75.83,1.32-.32,3.77-1.8,5.65l-.65,11.57-5.76.57.03,13.13c0,3.66,2.51,7.88,4.93,9.61,3.18,2.27,7.68,3.25,11.93,2.03.08-3.13-.05-8.01-.25-10.47-2.73,1.49-4.73,2.74-6.3,2.48-2.05-.34-3.27-3.78-2.67-5.49.54-1.53,3.29-2.63,4.67-2.1l7.65,2.89.05,19.71c0,3.79,2.79,6.39,6.26,6.2,2.7-.15,5.39-2.82,5.38-6.06l-.09-22.7c-7.85.5-13.74-4.51-13.57-12.27.15-7.26-5.01-8.6-1.08-12.06,1.26-1.11,4.38-.81,5.8.66,2.88,2.96-1.92,4.25-1.75,11.32.14,5.95,4.6,9.99,10.63,8.95l.06-70.33c0-9.03-6.74-15.69-15.36-15.11-8.03.54-13.83,7.43-13.45,16.11.5,11.44,4.73,9.28,1.81,13.13-.87,1.14-3.96,1.62-5.3.95-1.24-.63-2.34-3.78-1.49-4.9,1.42-1.87,2.59-4.98,1.86-7.08-6.67-2.02-13.16,3.64-13.05,10.71l.18,10.96,14.59-.09.48,7.04,10.07-.43c-.17-8.83.48-15.95-.78-23.55-.34-2.06-2.67-5.25-.31-7,1.5-1.12,4.92-.88,6.22,1.39,2.26,3.96-4.08,3.36-1.87,15.46,3.96,2.17,8.6-5.9,11.7-.45.8,1.41.35,4.2-1,5.39-3.35,2.95-10.6-5.21-10.73-.82l-.38,12.82-15.89.12-.53-6.66c-3.61-.13-8.23-.34-11.71.49-5.43,1.3-7.98,6.89-7.87,11.64s2.72,8.79,7.73,11.24l.25,16.2c.08,5,5.62,8.33,10.07,6.41Z'/></svg>");
}


  /* ============ RESPONSIVO ============ */
  @media (max-width: 900px){
    .mi-cols{ grid-auto-columns: 160px; }
    /* .mi-matrix{ gap: 14px; } */
  }

  /* En móvil, apila ejes (pedagógico, innovación, prevención) para lectura vertical */
  @media (max-width: 640px){
    .mi-panel{
      width: 96vw;
      margin: 2vh auto;
      max-height: 96vh;
    }

    .mi-header{
      grid-template-columns: 34px 1fr 34px;
      padding: 14px 14px 8px 14px;
    }

    .mi-matrix{
      flex-direction: column;
      min-width: 0;
    }

    .mi-cols{
      grid-auto-flow: row;
      grid-template-columns: 1fr;
      grid-auto-columns: unset;
      float: left !important;
    }

    .mi-colHeader{
      height: auto;
      padding: 10px 10px;
    }

    /* En móvil, cada columna se muestra completa (sin requerir scroll horizontal) */
    .mi-matrixWrap{
      overflow-x: visible;
    }
  }