/* tabla-comparativa-ia-ml-dl.css - Estilos específicos para la tabla comparativa IA, ML, DL */

.table-responsive {
    overflow-x: auto;
    margin-bottom: 2em;
}

.styled-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.05em;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin: 0 auto 1.5em auto;
}
.styled-table th, .styled-table td {
    padding: 1em 0.8em;
    border: 1px solid #e0e0e0;
    text-align: left;
}
.styled-table th {
    background: #f5f7fa;
    color: #1a237e;
    font-weight: 700;
    text-align: center;
}
.styled-table td:first-child {
    font-weight: 600;
    background: #f0f4f8;
    color: #263238;
    min-width: 160px;
}
.styled-table tr:nth-child(even) td {
    background: #fafbfc;
}
.styled-table tr:hover td {
    background: #e3f2fd;
    transition: background 0.2s;
}

.key-takeaways {
    list-style: none;
    padding: 0;
    margin: 1em 0 2em 0;
}
.key-takeaways li {
    background: #e3f2fd;
    margin-bottom: 0.7em;
    padding: 0.8em 1em;
    border-radius: 6px;
    border-left: 4px solid #1976d2;
    color: #263238;
    font-size: 1em;
}

.callout {
    background: #fffde7;
    border-left: 5px solid #ffd600;
    padding: 1em 1.2em;
    margin: 1.2em 0 2em 0;
    border-radius: 6px;
    color: #795548;
    font-size: 1.05em;
}

.conclusion-block {
    background: #e8f5e9;
    border-left: 5px solid #43a047;
    padding: 1em 1.2em;
    margin: 1.2em 0 2em 0;
    border-radius: 6px;
    color: #1b5e20;
    font-size: 1.08em;
    font-weight: 600;
}

@media (max-width: 700px) {
    .styled-table th, .styled-table td {
        padding: 0.7em 0.4em;
        font-size: 0.98em;
    }
    .styled-table td:first-child {
        min-width: 120px;
    }
}