/* ============================================================
   RESPONSIVE - SISTEMA DE AUTOGESTION
   Colegio de Abogados de la Provincia de Misiones
   Basado en el enfoque responsive del Colegio de Psicopedagogos.
   Adaptado a la maquetacion Bootstrap 2 (row / spanN) existente.
   Incluir DESPUES de bootstrap-responsive.css y mis_estilos.css:
   <link href="mis_estilos/responsive-cademis.css" rel="stylesheet" />
   ============================================================ */

/* === BASE === */
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* === BOTON MENU MOVIL (oculto en escritorio) === */
.btn-menu-mobile {
    display: none;
    width: 100%;
    margin-bottom: 15px;
    padding: 12px 15px;
    background-color: #006dcc;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.btn-menu-mobile:hover,
.btn-menu-mobile:focus {
    background-color: #04c;
    color: #fff;
}

.btn-menu-mobile i {
    margin-right: 6px;
}

/* El boton de menu movil se inserta como primer hijo del .row, por lo que
   el menu (#menuLateral / .span4) deja de ser :first-child y Bootstrap le
   agrega un margen izquierdo de gutter que descuadra el layout de 2 columnas
   en escritorio. Reponemos el margen a 0 (el menu es la columna izquierda). */
.row > #menuLateral {
    margin-left: 0;
}

/* ============================================================
   MOVIL (< 768px)
   ============================================================ */
@media only screen and (max-width: 767px) {

    body {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Refuerzo: aseguramos el contenedor fluido en movil aunque alguna pagina
       vuelva a cargar bootstrap.css despues de bootstrap-responsive.css y le
       reimponga el ancho fijo de 940px (bug clasico que deja el layout ancho
       y el contenido diminuto en el celular). Esta hoja se carga la ultima. */
    .container {
        width: auto !important;
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .contenido {
        padding: 12px 12px 18px;
        opacity: 1;
    }

    /* Cabecera / logo */
    .contenido > .row-fluid > .span10 {
        margin-top: 0 !important;
        text-align: center;
    }

    .contenido img.img-rounded {
        max-width: 100%;
        height: auto;
    }

    /* Mostrar el boton de menu */
    .btn-menu-mobile {
        display: block !important;
    }

    /* MENU LATERAL: oculto por defecto, se muestra al tocar el boton.
       #menuLateral es el <div class="span4"> que envuelve al menu. */
    #menuLateral {
        display: none;
    }

    #menuLateral.activo {
        display: block !important;
    }

    /* Quitar margenes negativos del sidenav en movil */
    .bs-docs-sidenav {
        margin: 0 0 15px 0 !important;
    }

    .bs-docs-sidenav > li > a {
        width: auto !important;
        padding: 12px 15px;
        font-size: 15px;
    }

    /* Enlaces del menu mas tactiles */
    .nav-list > li > a {
        padding: 12px 15px;
    }

    /* TABLAS: permitir scroll horizontal sin romper la maqueta.
       display:block mantiene el render de tabla pero permite overflow. */
    .contenido .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .contenido .table td,
    .contenido .table th {
        white-space: normal;
    }

    /* En las tablas de 2 columnas (etiqueta / valor) la 1ra celda
       actua como titulo del dato */
    .contenido .table td:first-child {
        font-weight: bold;
        width: 40%;
    }

    /* FORMULARIOS: evitar el zoom en iOS y areas tactiles mayores */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px !important;
        padding: 10px !important;
        width: 100%;
        max-width: 100%;
    }

    /* BOTONES a ancho completo (excepto grupos de botones) */
    .btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        padding: 12px 15px;
        min-height: 44px;
    }

    .btn-group > .btn,
    .btn-toolbar .btn {
        display: inline-block;
        width: auto;
    }

    /* Titulos mas compactos */
    h1 { font-size: 22px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }

    /* Alertas */
    .alert {
        padding: 10px;
        font-size: 14px;
    }

    /* Modales (ej. recuperar contrasena en el login) legibles en movil.
       Sobrescribe anchos fijos en linea con !important. */
    .modal {
        width: 92% !important;
        left: 4% !important;
        right: 4% !important;
        margin-left: 0 !important;
    }

    .modal-body {
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* ============================================================
   TABLET (768px - 979px)
   ============================================================ */
@media only screen and (min-width: 768px) and (max-width: 979px) {
    .bs-docs-sidenav {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ============================================================
   IMPRESION
   ============================================================ */
@media print {
    .no_imprimir,
    .btn-menu-mobile,
    #menuLateral,
    .btn,
    button {
        display: none !important;
    }

    body {
        background: #fff !important;
        padding: 0;
    }

    .contenido {
        box-shadow: none;
        border: none;
        opacity: 1;
        padding: 0;
    }
}