/* ========================================
   Estilos para Informe PNTs Globales
   ID: 271
   Instancia específica: inst10607
   ======================================== */

/* Ocultar cabecera y columnas innecesarias 
#inst10607 table.totaratable thead,
#inst10607 table.totaratable th.c1,
#inst10607 table.totaratable th.c2,
#inst10607 table.totaratable td.c1,
#inst10607 table.totaratable td.c2 {
    display: none !important;
}
*/

/* Tabla como bloque neutro */
#inst10607 table.totaratable {
    display: block !important;
    width: 100% !important;
    border-collapse: unset !important;
    border-spacing: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

/* tbody como grid de tiles */
#inst10607 table.totaratable tbody {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Cada fila = una tile */
#inst10607 table.totaratable tr {
    display: block !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #e5e7eb !important;
    transition: box-shadow 0.2s ease !important;
}

#inst10607 table.totaratable tr:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
}

/* Celda nombre del curso */
#inst10607 table.totaratable td.c0 {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Imagen de cabecera del tile via ::before */
#inst10607 table.totaratable td.c0::before {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: url('https://ivirmacampus.com/pluginfile.php/1/course/defaultcourseimage/2545/microscopio-lwfi7vnuibs.jpg') center / cover no-repeat !important;
}

/* Ocultar icono original */
#inst10607 table.totaratable td .course_icon {
    display: none !important;
}

/* Etiqueta "CURSO" encima del título */
#inst10607 table.totaratable td.c0 a::before {
    content: 'CURSO' !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #888 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 4px !important;
}

/* Enlace del curso */
#inst10607 table.totaratable td.c0 a {
    display: block !important;
    padding: 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #006d7c !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

#inst10607 table.totaratable td.c0 a:hover {
    text-decoration: underline !important;
    color: #008897 !important;
}

/* Barra de progreso (0%) al pie del tile */
#inst10607 table.totaratable td.c0::after {
    content: '' !important;
    display: block !important;
    height: 4px !important;
    background: #e5e7eb !important;
    margin: 4px 12px 12px !important;
    border-radius: 4px !important;
}

/* Contenedor sin márgenes extra */
#inst10607 .totara-table-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Pie de bloque */
#inst10607 .footer {
    padding: 0 20px 20px !important;
}

#inst10607 .footer a {
    color: #008897 !important;
    text-decoration: none !important;
    font-weight: bold !important;
}

/* Tiles generadas por JS en Global SOPs */
#inst10607 .pnts-filter-bar {
    padding: 12px 15px;
}

#inst10607 .pnts-tiles-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 20px;
}

/* Encabezado tabla */
#inst10607 .nav.nav-tabs {
    padding-bottom: 10px;
}


#inst10607 .pnts-tile {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: box-shadow 0.2s ease;
}

#inst10607 .pnts-tile:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    cursor: pointer;
}

#inst10607 .pnts-tile__img {
    width: 100%;
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    max-height: 150px;
}

#inst10607 .pnts-tile__body {
    padding: 20px 20px 40px;
}

#inst10607 .pnts-tile__type {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

#inst10607 .pnts-tile__link {
    text-decoration: none;
}

#inst10607 .pnts-tile__title {
    font-size: var(--font-size-16);
    font-weight: bold;
    color: #006d7c;
    line-height: 1.4;
    margin: 0 0 10px;
}

#inst10607 .pnts-tile__progress {
    margin-top: 8px;
}

/* Ocultar tabla original */
#inst10607 .totara-table-container,
#inst10607 .rb-report-svggraph {
    display: none !important;
}

/* ========================================
   Styles for Mandatory SOPs
   Instance-specific: inst10360
   ======================================== */


/* Block content backgrounds */
#inst10360 .content.block-content,
.block_current_learningas-tiles {
    background: #ffffff;
}

/* Tab navigation */
#inst10360 .tabtree ul.nav.nav-tabs {
    padding: 12px 15px;
}

/* Learning tiles list */
#inst10360 .block_current_learningas-tiles ul {
    padding: 20px !important;
}

#inst10360 .totara-toolbar.totara-toolbar-bottom {
    align-content: center;
    padding: 5px 10px;
}

#inst10360 .panel-footer {
    background: #ffffff !important;
    border-top: 0 !important;
    border-radius: 0 0 20px 20px !important;
    padding: 0 0 20px 20px !important;
}

#inst10360 .pagination {
    padding-right: 20px; 
}

/* ========================================
   Styles for My PNTs
   Instance-specific: inst10405
   ======================================== */


#inst10405 .totara-table-container .totara-toolbar-top {
    width: 100%;
    display: none;
}

   /* Box shadow y border radius para PNTs Requeridos */
#inst10360 .content.block-content {
    border-radius: 15px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
}

#inst10360 .block .block-header {
    padding-top: 3rem !important;
}

#inst10405 #instance-10405-header {
    padding-top: 10px;
}

#inst10405 .totara-table-container .toolbar-cell {
    padding: 10px 20px !important;
}