/* /ai - FamyTree para asistentes de IA (Views/Legales/Ai.cshtml). Cada breakpoint es autocontenido, como en el
   resto de CSS del sitio: una regla nueva va repetida en los 5 bloques. */

/********  XL  *******/
@media screen and (min-width:1600px) {

    #paginaAI {
        position: relative;
        box-sizing: border-box;
        width: 900px;
        max-width: 100%;
        margin: 20px auto 40px;
        padding: 28px 40px;
        background-color: white;
        color: #333;
        font-size: 16px;
        line-height: 1.5;
        border-radius: 4px;
    }

        #paginaAI h1 {
            color: #82a542;
            font-size: 200%;
            margin: 0 0 12px;
        }

        #paginaAI h2 {
            color: #0377aa;
            font-size: 140%;
            margin: 28px 0 10px;
            padding-bottom: 4px;
            border-bottom: 2px solid #eff8e0;
        }

        #paginaAI h3 {
            font-size: 105%;
            margin: 0 0 6px;
        }

        #paginaAI a {
            color: #0377aa;
        }

        #paginaAI code {
            font-family: Consolas, Menlo, monospace;
            font-size: 92%;
            background-color: #f4f4f4;
            padding: 1px 4px;
            border-radius: 3px;
            word-break: break-word;
        }

        #paginaAI ul, #paginaAI ol {
            padding-left: 22px;
        }

        #paginaAI li {
            margin-bottom: 6px;
        }

    .entradillaAI {
        font-size: 110%;
    }

    .funcionAI {
        background-color: #eff8e0;
        border-radius: 4px;
        padding: 12px 14px;
        margin-bottom: 12px;
    }

    .ejemploAI {
        font-style: italic;
        color: #555;
        margin: 6px 0 0;
    }

    .urlConectorAI {
        font-family: Consolas, Menlo, monospace;
        font-size: 110%;
        font-weight: bold;
        background-color: #eaf4fb;
        border-left: 3px solid #0377aa;
        padding: 8px 12px;
        word-break: break-all;
    }

    .tablaAI {
        overflow-x: auto;
    }

        .tablaAI table {
            width: 100%;
            border-collapse: collapse;
        }

        .tablaAI th, .tablaAI td {
            text-align: left;
            vertical-align: top;
            padding: 6px 8px;
            border-bottom: 1px solid #e5e5e5;
        }

        .tablaAI th {
            background-color: #eff8e0;
        }

    #resumenInglesAI {
        margin-top: 30px;
        padding: 4px 14px 10px;
        background-color: #f7f7f7;
        border-radius: 4px;
    }

    .volverAI {
        margin-top: 24px;
        text-align: center;
    }
}

/********  L  *******/
@media screen and (min-width:950px)and (max-width:1600px) {

    #paginaAI {
        position: relative;
        box-sizing: border-box;
        width: 860px;
        max-width: 100%;
        margin: 20px auto 40px;
        padding: 26px 36px;
        background-color: white;
        color: #333;
        font-size: 15px;
        line-height: 1.5;
        border-radius: 4px;
    }

        #paginaAI h1 {
            color: #82a542;
            font-size: 190%;
            margin: 0 0 12px;
        }

        #paginaAI h2 {
            color: #0377aa;
            font-size: 135%;
            margin: 28px 0 10px;
            padding-bottom: 4px;
            border-bottom: 2px solid #eff8e0;
        }

        #paginaAI h3 {
            font-size: 105%;
            margin: 0 0 6px;
        }

        #paginaAI a {
            color: #0377aa;
        }

        #paginaAI code {
            font-family: Consolas, Menlo, monospace;
            font-size: 92%;
            background-color: #f4f4f4;
            padding: 1px 4px;
            border-radius: 3px;
            word-break: break-word;
        }

        #paginaAI ul, #paginaAI ol {
            padding-left: 22px;
        }

        #paginaAI li {
            margin-bottom: 6px;
        }

    .entradillaAI {
        font-size: 110%;
    }

    .funcionAI {
        background-color: #eff8e0;
        border-radius: 4px;
        padding: 12px 14px;
        margin-bottom: 12px;
    }

    .ejemploAI {
        font-style: italic;
        color: #555;
        margin: 6px 0 0;
    }

    .urlConectorAI {
        font-family: Consolas, Menlo, monospace;
        font-size: 110%;
        font-weight: bold;
        background-color: #eaf4fb;
        border-left: 3px solid #0377aa;
        padding: 8px 12px;
        word-break: break-all;
    }

    .tablaAI {
        overflow-x: auto;
    }

        .tablaAI table {
            width: 100%;
            border-collapse: collapse;
        }

        .tablaAI th, .tablaAI td {
            text-align: left;
            vertical-align: top;
            padding: 6px 8px;
            border-bottom: 1px solid #e5e5e5;
        }

        .tablaAI th {
            background-color: #eff8e0;
        }

    #resumenInglesAI {
        margin-top: 30px;
        padding: 4px 14px 10px;
        background-color: #f7f7f7;
        border-radius: 4px;
    }

    .volverAI {
        margin-top: 24px;
        text-align: center;
    }
}

/********  M  *******/
@media screen and (min-width:650px)and (max-width:950px) {

    #paginaAI {
        position: relative;
        box-sizing: border-box;
        width: 92%;
        max-width: 100%;
        margin: 20px auto 40px;
        padding: 22px 26px;
        background-color: white;
        color: #333;
        font-size: 15px;
        line-height: 1.5;
        border-radius: 4px;
    }

        #paginaAI h1 {
            color: #82a542;
            font-size: 175%;
            margin: 0 0 12px;
        }

        #paginaAI h2 {
            color: #0377aa;
            font-size: 130%;
            margin: 28px 0 10px;
            padding-bottom: 4px;
            border-bottom: 2px solid #eff8e0;
        }

        #paginaAI h3 {
            font-size: 105%;
            margin: 0 0 6px;
        }

        #paginaAI a {
            color: #0377aa;
        }

        #paginaAI code {
            font-family: Consolas, Menlo, monospace;
            font-size: 92%;
            background-color: #f4f4f4;
            padding: 1px 4px;
            border-radius: 3px;
            word-break: break-word;
        }

        #paginaAI ul, #paginaAI ol {
            padding-left: 22px;
        }

        #paginaAI li {
            margin-bottom: 6px;
        }

    .entradillaAI {
        font-size: 110%;
    }

    .funcionAI {
        background-color: #eff8e0;
        border-radius: 4px;
        padding: 12px 14px;
        margin-bottom: 12px;
    }

    .ejemploAI {
        font-style: italic;
        color: #555;
        margin: 6px 0 0;
    }

    .urlConectorAI {
        font-family: Consolas, Menlo, monospace;
        font-size: 110%;
        font-weight: bold;
        background-color: #eaf4fb;
        border-left: 3px solid #0377aa;
        padding: 8px 12px;
        word-break: break-all;
    }

    .tablaAI {
        overflow-x: auto;
    }

        .tablaAI table {
            width: 100%;
            border-collapse: collapse;
        }

        .tablaAI th, .tablaAI td {
            text-align: left;
            vertical-align: top;
            padding: 6px 8px;
            border-bottom: 1px solid #e5e5e5;
        }

        .tablaAI th {
            background-color: #eff8e0;
        }

    #resumenInglesAI {
        margin-top: 30px;
        padding: 4px 14px 10px;
        background-color: #f7f7f7;
        border-radius: 4px;
    }

    .volverAI {
        margin-top: 24px;
        text-align: center;
    }
}

/********  S  *******/
@media screen and (min-width:500px)and (max-width:650px) {

    #paginaAI {
        position: relative;
        box-sizing: border-box;
        width: 96%;
        max-width: 100%;
        margin: 20px auto 40px;
        padding: 18px 18px;
        background-color: white;
        color: #333;
        font-size: 15px;
        line-height: 1.5;
        border-radius: 4px;
    }

        #paginaAI h1 {
            color: #82a542;
            font-size: 160%;
            margin: 0 0 12px;
        }

        #paginaAI h2 {
            color: #0377aa;
            font-size: 125%;
            margin: 28px 0 10px;
            padding-bottom: 4px;
            border-bottom: 2px solid #eff8e0;
        }

        #paginaAI h3 {
            font-size: 105%;
            margin: 0 0 6px;
        }

        #paginaAI a {
            color: #0377aa;
        }

        #paginaAI code {
            font-family: Consolas, Menlo, monospace;
            font-size: 92%;
            background-color: #f4f4f4;
            padding: 1px 4px;
            border-radius: 3px;
            word-break: break-word;
        }

        #paginaAI ul, #paginaAI ol {
            padding-left: 22px;
        }

        #paginaAI li {
            margin-bottom: 6px;
        }

    .entradillaAI {
        font-size: 110%;
    }

    .funcionAI {
        background-color: #eff8e0;
        border-radius: 4px;
        padding: 12px 14px;
        margin-bottom: 12px;
    }

    .ejemploAI {
        font-style: italic;
        color: #555;
        margin: 6px 0 0;
    }

    .urlConectorAI {
        font-family: Consolas, Menlo, monospace;
        font-size: 110%;
        font-weight: bold;
        background-color: #eaf4fb;
        border-left: 3px solid #0377aa;
        padding: 8px 12px;
        word-break: break-all;
    }

    .tablaAI {
        overflow-x: auto;
    }

        .tablaAI table {
            width: 100%;
            border-collapse: collapse;
        }

        .tablaAI th, .tablaAI td {
            text-align: left;
            vertical-align: top;
            padding: 6px 8px;
            border-bottom: 1px solid #e5e5e5;
        }

        .tablaAI th {
            background-color: #eff8e0;
        }

    #resumenInglesAI {
        margin-top: 30px;
        padding: 4px 14px 10px;
        background-color: #f7f7f7;
        border-radius: 4px;
    }

    .volverAI {
        margin-top: 24px;
        text-align: center;
    }
}

/********  XS  *******/
@media screen and (max-width:500px) {

    #paginaAI {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 20px auto 40px;
        padding: 14px 12px;
        background-color: white;
        color: #333;
        font-size: 15px;
        line-height: 1.5;
        border-radius: 4px;
    }

        #paginaAI h1 {
            color: #82a542;
            font-size: 150%;
            margin: 0 0 12px;
        }

        #paginaAI h2 {
            color: #0377aa;
            font-size: 120%;
            margin: 28px 0 10px;
            padding-bottom: 4px;
            border-bottom: 2px solid #eff8e0;
        }

        #paginaAI h3 {
            font-size: 105%;
            margin: 0 0 6px;
        }

        #paginaAI a {
            color: #0377aa;
        }

        #paginaAI code {
            font-family: Consolas, Menlo, monospace;
            font-size: 92%;
            background-color: #f4f4f4;
            padding: 1px 4px;
            border-radius: 3px;
            word-break: break-word;
        }

        #paginaAI ul, #paginaAI ol {
            padding-left: 22px;
        }

        #paginaAI li {
            margin-bottom: 6px;
        }

    .entradillaAI {
        font-size: 110%;
    }

    .funcionAI {
        background-color: #eff8e0;
        border-radius: 4px;
        padding: 12px 14px;
        margin-bottom: 12px;
    }

    .ejemploAI {
        font-style: italic;
        color: #555;
        margin: 6px 0 0;
    }

    .urlConectorAI {
        font-family: Consolas, Menlo, monospace;
        font-size: 110%;
        font-weight: bold;
        background-color: #eaf4fb;
        border-left: 3px solid #0377aa;
        padding: 8px 12px;
        word-break: break-all;
    }

    .tablaAI {
        overflow-x: auto;
    }

        .tablaAI table {
            width: 100%;
            border-collapse: collapse;
        }

        .tablaAI th, .tablaAI td {
            text-align: left;
            vertical-align: top;
            padding: 6px 8px;
            border-bottom: 1px solid #e5e5e5;
        }

        .tablaAI th {
            background-color: #eff8e0;
        }

    #resumenInglesAI {
        margin-top: 30px;
        padding: 4px 14px 10px;
        background-color: #f7f7f7;
        border-radius: 4px;
    }

    .volverAI {
        margin-top: 24px;
        text-align: center;
    }
}