/* Compat + ratio wrappers (v1.0.5-slim) */

/* --- ESTILOS BASE --- */
.syscom-desc { 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem; 
  line-height: 1.6; 
  color: #333;
}
.syscom-desc * { 
  box-sizing: border-box; 
}
.syscom-desc img, 
.syscom-desc video, 
.syscom-desc iframe { 
  max-width: 100%; 
  display: block; 
  height: auto; 
}

/* --- TIPOGRAFÍA Y ENCABEZADOS --- */
.syscom-desc h1, .syscom-desc h2, .syscom-desc h3, .syscom-desc h4 {
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  font-weight: 600;
  line-height: 1.3;
  color: #2c3e50; /* Un color oscuro y profesional */
}
.syscom-desc p {
  margin-bottom: 1rem;
}
.syscom-desc strong {
  font-weight: 600;
}

/* --- GRID BÁSICO (para compatibilidad con clases de SYSCOM) --- */
.syscom-desc .row { 
  display: flex; 
  flex-wrap: wrap; 
  margin-left: -12px; 
  margin-right: -12px; 
}
.syscom-desc [class*="col-"] { 
  padding-left: 12px; 
  padding-right: 12px; 
}

/* --- ESTILOS PARA TABLAS RESPONSIVAS --- */
.syscom-desc .table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
}
.syscom-desc table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
}
.syscom-desc th, 
.syscom-desc td {
  padding: 0.8rem;
  border: 1px solid #dee2e6;
  vertical-align: top;
  text-align: left;
}
.syscom-desc thead th {
  background-color: #f8f9fa;
  border-bottom-width: 2px;
  font-weight: 600;
}
.syscom-desc tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.03);
}

/* --- WRAPPERS PARA VIDEOS --- */
/* Wrapper con padding-trick (fallback) */
.syscom-desc .video-16x9 { 
  position: relative; 
  width: 100%; 
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  background-color: #000;
}
.syscom-desc .video-16x9 iframe { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  border: 0; 
}

/* Solución moderna con aspect-ratio */
@supports (aspect-ratio: 16/9) {
  .syscom-desc iframe[src*="youtube.com"], 
  .syscom-desc iframe[src*="youtube-nocookie.com"], 
  .syscom-desc iframe[src*="youtu.be"], 
  .syscom-desc iframe[src*="vimeo.com"] {
    aspect-ratio: 16/9;
    height: auto;
    width: 100%;
  }
  
  /* Anular el wrapper si el navegador soporta aspect-ratio */
  .syscom-desc .video-16x9 {
    padding-top: 0;
    position: static;
    background-color: transparent;
  }
  .syscom-desc .video-16x9 iframe {
    position: static;
  }
}