/* estilos_globales.css Rev. 4.0a */

/* generales para el cuerpo del documento */
body {
    font-family: sans-serif;
    line-height: 1.2;
    padding: 10px;
    margin: 0;
}

/* Estilos para el encabezado de la página */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f0f0f0;
    border-bottom: 2px solid #ccc;
}

.header .logo img {
    height: 50px;
}

.header .user-info {
    font-size: 0.9em;
    text-align: right;
}

.header .user-info a {
    margin-left: 10px;
    text-decoration: none;
    color: #007bff;
}

h1 {
    margin: 0;
}

.header h2 {
    font-size: 1.5rem;
}

.header h3 {
    font-size: 1.2rem;
}

.header h2 a,
.header h3 a {
    font-size: inherit;
    color: inherit;
    text-decoration: none;
}

.sub-header-compact {
    display: flex; /* Mantiene los elementos en la misma línea */
    align-items: center; /* Centra verticalmente los elementos */
    gap: 20px; /* Agrega un espacio entre el título y los botones */
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ccc;
    margin-bottom: 0; /* Asegura que no haya espacio extra debajo */
}

.sub-header-compact h2 {
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    font-weight: normal;
    color: #333;
}

/* Estilos de botones */
.barra-botones-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    background-color: #f5f5f5;
    margin-bottom: 0; /* Esta es la corrección principal: elimina el margen inferior */
}

.botones-izquierda, .botones-derecha {
    display: flex;
    align-items: center;
    gap: 10px;
}

.boton {
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
}

.btn-default {
    background-color: #f0f0f0;
    color: #333;
    border-color: #ccc;
}

.btn-success {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

.btn-success:hover {
    background-color: #218838;
}

.btn-info {
    background-color: #17a2b8;
    color: white;
    border-color: #17a2b8;
}

.btn-info:hover {
    background-color: #138496;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
}

.btn-warning {
    background-color: #ffc107;
    color: #212529;
    border-color: #ffc107;
}

.btn-warning:hover {
    background-color: #e0a800;
}

.btn-editar {
    background-color: #ff9800;
    color: white;
    border-color: #ff9800;
}

/* Estilos de formularios */
.login-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.form-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* Reglas unificadas para todos los campos de texto e inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
select,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* NUEVA LÓGICA DE MARGENES UNIFORMES */
/* Aplicamos un margen inferior de 20px a todos los grupos y filas */
.form-container .form-group,
.form-container .form-row {
    margin-bottom: 20px;
}

/* Y luego eliminamos el margen de las filas de dos columnas */
.form-container .form-row .form-group {
    margin-bottom: 0;
}

/* Hacemos que la última fila del formulario no tenga margen inferior */
.form-container > .form-group:last-of-type,
.form-container > .form-row:last-of-type {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

textarea {
    height: 100px;
    resize: vertical;
}

/* Contenedor para las filas de campos */
.field-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px; /* Espacio entre filas */
    gap: 20px; /* Espacio entre los grupos de campos */
}

/* Estilos para el grupo de Resumen */
.field-resumen {
    flex: 3; /* Ocupa 3 partes de 4, que es el 75% */
}

/* Estilos para el grupo de País */
.field-pais {
    flex: 1; /* Ocupa 1 parte de 4, que es el 25% */
}

/* Opcional: Asegura que el espacio entre ellos sea consistente */
.form-row {
    gap: 20px;
}

/* Si tu campo de resumen tiene una clase específica como 'field-group', también puedes ajustar su estilo. */
.field-group {
    display: flex;
    flex-direction: column;
}

.error-message {
    color: red;
    font-weight: bold;
    margin-bottom: 10px;
}

/* --- Lógica unificada para el diseño de formularios con Flexbox --- */

/* Configuración base para filas de formulario */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Reglas de proporción de columnas (se aplican a la fila principal) */

/* Distribución 50% - 50% y 1/3-1/3-1/3 */
/* La regla .form-row.two-columns .form-group y .form-row.three-columns .form-group
   hace que todos los campos dentro de estas filas ocupen el mismo espacio. */
.form-row.two-columns .form-group,
.form-row.three-columns .form-group {
    flex: 1;
}

/* Distribución 75% - 25% */
.form-row.two-columns-75-25 .form-group.grow-3 {
    flex: 3;
}
.form-row.two-columns-75-25 .form-group.grow-1 {
    flex: 1;
}

/* Para un campo que ocupe el 100% (una columna) */
.form-row .form-group.full-width {
    flex: 1 1 100%;
}

.flex-rubros {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.required-star {
    color: red;
    margin-left: 5px;
}

.nota-obligatorios {
    font-size: 12px;
    color: #666;
    margin-top: -10px;
    margin-bottom: 10px;
}

/* Estilos de tablas */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f0f0f0;
    font-weight: bold;
}

/* Estilos para la vista de árbol */
.hilo-lista {
    font-size: 13px;
    list-style-type: none;
    padding-left: 0;
}

/* Añade un margen arriba para separar del subtítulo */
.lista-clientes {
    margin-top: 15px;
}

/* Regla genérica para los items de la lista, sin margen */
.cliente-item,
.contacto-item,
.hilos-list li {
    position: relative;
    padding-left: 10px;
    margin-left: 20px;
}

.cliente-item {
    font-weight: bold;
    color: #337ab7;
    cursor: pointer;
    margin-bottom: 5px;
}

.contacto-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cliente-item h3,
.contacto-item h4 {
    margin-top: 5px;
    margin-bottom: 3px;
    padding: 0;
}

.contacto-header p {
    margin: 0;
}

.contacto-item {
    font-weight: bold;
    color: #5cb85c;
    margin-top: 2px;
    margin-bottom: 2px;
}

.hilos-list li {
    font-weight: normal;
    color: #555;
    margin-bottom: 4px;
}

/* Estilo para el contenedor principal debajo de la barra de botones */
.main-container,
.main-container p,
.main-container table,
.main-container th,
.main-container td,
.main-container li,
.main-container input,
.main-container label,
.main-container select {
    font-size: 13px;
}

/* Estilo para el contenedor del subtítulo del cliente */
.cliente-subtitulo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f0f0f0;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.subtitulo-bar {
    max-width: 900px; /* Puedes ajustar este valor si lo necesitas */
    margin-left: auto;
    margin-right: auto;
}

/* Estilo para los botones del filtro */
.filtro-botones {
    display: flex;
    gap: 10px;
}

.btn-filtro {
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: background-color 0.2s, border-color 0.2s;
    user-select: none;
}

.btn-filtro:hover {
    background-color: #e9e9e9;
}

.btn-filtro input[type="radio"] {
    display: none;
}

/* Estilo para el botón activo */
.btn-filtro.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.btn-filtro.active:hover {
    background-color: #0056b3;
}

.estado-hilo-abierto {
    color: green;
    font-weight: bold;
}

.estado-hilo-cerrado {
    color: red;
    font-weight: bold;
}

/* --- Estilos para el modal --- */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 8px;
    position: relative;
    font-size: 13px;
}

/* Estilos para el botón de cerrar */
.close {
    float: right;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    color: #fc0b03;
}

/* Estilos para el lapicero de edición */
.edit-icon {
    float: right;
    margin-right: 15px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    color: #28a745;
}

/* Estilos para los campos editables del modal */
[contenteditable="true"],
#modalTipoContactoEdit {
    background-color: #f9f9f9;
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
    outline: none;
    width: 150px;
    max-width: 100%;
}

/* Estilos para los botones de acción del modal */
.modal-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.modal-actions .btn {
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
}

.modal-actions .btn-success {
    background-color: #28a745;
    color: white;
}

.modal-actions .btn-danger {
    background-color: #dc3545;
    color: white;
}

.text-right {
    text-align: right;
}

.btn-success:disabled,
.btn-success.disabled {
    background-color: #cccccc !important; /* Un gris claro */
    border-color: #cccccc !important;
    color: #666666 !important; /* Texto en gris oscuro */
    cursor: not-allowed; /* Muestra el cursor de "prohibido" */
}

/* --- Estilos para el modal --- */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
    }
    .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 600px;
        border-radius: 8px;
        position: relative;
        font-size: 13px;
    }
    /* Estilos para el botón de cerrar */
    .close {
        float: right;
        font-size: 15px;
        font-weight: bold;
        cursor: pointer;
        color: #fc0b03;
    }
    /* Estilos para el lapicero de edición */
    .edit-icon {
        float: right;
        margin-right: 15px;
        font-size: 15px;
        font-weight: bold;
        cursor: pointer;
        color: #28a745;
    }
    /* Estilos para los campos editables del modal */
    [contenteditable="true"],
    #modalTipoContactoEdit {
        background-color: #f9f9f9;
        padding: 2px 5px;
        border-radius: 4px;
        border: 1px solid #ccc;
        outline: none;
        width: 150px;
        max-width: 100%;
    }
    /* Estilos para los botones de acción del modal */
    .modal-actions {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }
    .modal-actions .btn {
        padding: 8px 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
        margin-left: 10px;
    }
    .modal-actions .btn-success {
        background-color: #28a745;
        color: white;
    }
    .modal-actions .btn-danger {
        background-color: #dc3545;
        color: white;
    }
    /* Estilo para alinear texto a la derecha */
    .text-right {
        text-align: right;
    }
    
    /* --- ESTO ES LO QUE VIENE DESDE hilo.php --- */
        /* --- Lógica unificada para el diseño de la página de hilo con Flexbox --- */
        .main-content-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 5px;
        }
        
        /* Contenedor principal 75% */
        .main-content-container.two-columns-75-25 .hilo-datos {
            flex: 3;
        }
        
        /* Contenedor de documentos 25% */
        .main-content-container.two-columns-75-25 .hilo-documentos {
            flex: 1;
        }
        
        /* Estilos básicos para el contenedor de documentos */
        .hilo-documentos {
            border-left: 1px solid #ccc;
            padding-left: 20px;
        }
        
        /* Estilos para el nuevo modal de documentos */
        .document-modal {
            display: none; /* Oculto por defecto */
            position: fixed; /* Posición fija */
            z-index: 1000; /* Z-index alto para estar encima de todo */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto; /* Permite scroll si el contenido es grande */
            background-color: rgba(0,0,0,0.4); /* Fondo semi-transparente oscuro */
            align-items: center; /* Centrado vertical */
            justify-content: center; /* Centrado horizontal */
        }
        
        .document-modal.is-visible {
            display: flex; /* Muestra el modal cuando se añade esta clase */
        }

        .document-modal-content {
            background-color: #fefefe;
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Ancho del modal aumentado */
            max-width: 1200px; /* Ancho máximo aumentado */
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
            position: relative;
        }
        
        /* Ajustes para el botón de cierre del modal */
        .document-modal-close {
            color: #d9534f !important; /* Color rojo para el aspa */
            position: absolute !important;
            top: 5px !important;
            right: 15px !important;
            font-size: 28px !important;
            font-weight: bold !important;
            cursor: pointer;
        }

        .document-modal-close:hover,
        .document-modal-close:focus {
            color: #c9302c !important;
            text-decoration: none;
        }

        /* Estilos para el contenedor del visor de documentos */
        .document-viewer-container {
            width: 100%;
            height: 60vh; /* Altura fija para el iframe */
            border: 1px solid #ccc;
            margin-top: 10px;
        }
        
        /* Estilos para el visor */
        .document-viewer-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Estilos para el botón de éxito (Descargar) */
        .btn-success {
            background-color: #28a745 !important;
            color: white !important;
            padding: 8px 12px !important;
            text-align: center;
            border-radius: 5px !important;
            text-decoration: none !important;
            border: none !important;
            cursor: pointer;
        }

        .btn-success:hover {
            background-color: #218838 !important;
        }
        
        /* Estilos para el encabezado del modal con Flexbox */
        .document-details-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
        
        /* Estilos para la ventana modal de subida */
        .modal {
            display: none; /* Oculto por defecto */
            position: fixed; /* Permanece en su lugar, cubriendo la pantalla */
            z-index: 1050; /* Z-index alto para estar encima de todo */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto; /* Habilita el scroll si el contenido es demasiado grande */
            background-color: rgba(0,0,0,0.5); /* Fondo semitransparente */
            justify-content: center; /* Centrado horizontal */
            align-items: center; /* Centrado vertical */
        }
        
        /* Contenido del modal */
        .modal-content {
            background-color: #fefefe;
            padding: 20px;
            border: 1px solid #888;
            border-radius: 8px;
            width: 90%; /* Ajuste para móviles */
            max-width: 500px; /* Ancho máximo en escritorio */
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
            animation-name: animatetop;
            animation-duration: 0.4s;
        }
        
        /* Animación de entrada */
        @keyframes animatetop {
            from {top: -300px; opacity: 0}
            to {top: 0; opacity: 1}
        }
        
        /* Encabezado del modal */
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        
        /* Título del modal */
        .modal-title {
            margin: 0;
            font-size: 1.25rem;
        }
        
        /* Botón de cerrar */
        .close-btn {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .close-btn:hover,
        .close-btn:focus {
            color: #000;
            text-decoration: none;
        }
        
        /* Ajustes específicos para el aspa de cerrar del modal de subida */
        .modal-header .close {
            font-size: 1.7rem; /* Un tamaño más grande y proporcional */
            line-height: 1; /* Para corregir la alineación si es necesario */
        }