/* Estilos generales */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}

.container {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    overflow-x: auto;
}

h1 {
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

/* Barra de búsqueda y acciones */
.search-container {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.search-form {
    flex-grow: 1;
    display: flex;
}

.search-form input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
}

.search-form button {
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

.btn-clear, .btn-new {
    padding: 10px 15px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-clear {
    background-color: #f44336;
}

.btn-new {
    background-color: #2196F3;
}

.btn-exit{
    padding: 10px 15px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: #f81313;
}

/* Mensajes */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.alert-success {
    background-color: #dff0d8;
    color: #3c763d;
    border-color: #d6e9c6;
}

.alert-error {
    background-color: #f2dede;
    color: #a94442;
    border-color: #ebccd1;
}

/* Tabla con ajustes específicos para columnas */
.table-responsive {
    overflow-x: auto;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    table-layout: auto;
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    vertical-align: top; /* Alinear contenido arriba para celdas altas */
}

th {
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
    font-weight: 600;
    color: #495057;
}

/* Ajustes específicos para columnas con mayor altura */
td:nth-child(16), th:nth-child(16) { /* Comentario */
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    min-height: 100px; /* Altura mínima aumentada */
}

td:nth-child(19), th:nth-child(19) { /* Observación */
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    min-height: 120px; /* Altura mínima aumentada */
}

td:nth-child(22), th:nth-child(22) { /* Solución */
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    min-height: 120px; /* Altura mínima aumentada */
}

/* Resto de columnas */
td:nth-child(17), th:nth-child(17) { /* Estado */
    width: 120px;
    min-width: 120px;
}

td:nth-child(18), th:nth-child(18) { /* Técnico */
    width: 150px;
    min-width: 150px;
}

td:nth-child(20), th:nth-child(20) { /* Documento */
    width: 150px;
    min-width: 150px;
}

td:nth-child(21), th:nth-child(21) { /* Fecha Asignado */
    width: 120px;
    min-width: 120px;
}

td:nth-child(24), th:nth-child(24) { /* Acciones */
    width: 120px;
    min-width: 120px;
}

tr:hover {
    background-color: #f5f5f5;
}

/* Estado */
.estado-badge {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    min-width: 80px;
}

.estado-asignado {
    background-color: #FFC107;
    color: #000;
}

.estado-proceso {
    background-color: #17A2B8;
    color: white;
}

.estado-cerrado {
    background-color: #28A745;
    color: white;
}

/* Botones de acción */
.btn-action {
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}

.btn-edit {
    background-color: #FFC107;
    color: #000;
}

.btn-save {
    background-color: #5cb85c;
    color: white;
    display: none;
}

.btn-save:hover {
    background-color: #4cae4c;
}

/* Campos editables - Ajustes para textareas altas */
.editable {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.editable:disabled {
    background-color: #eee;
    border-color: transparent;
}

.editable[type="file"] {
    padding: 3px;
}

/* Textareas específicas para las celdas altas */
textarea.editable {
    min-height: 100px; /* Altura aumentada para comentario */
    resize: vertical;
}

td:nth-child(19) textarea.editable,
td:nth-child(22) textarea.editable {
    min-height: 100px; /* Altura aumentada para observación y solución */
}

/* Mensaje de guardado */
#mensaje-guardado {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #4caf50;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    font-weight: bold;
    z-index: 9999;
}

/* Responsivo */
@media (max-width: 1200px) {
    .container {
        padding: 15px;
    }

    th, td {
        padding: 8px 10px;
        font-size: 13px;
    }
    
    /* Ajustes responsivos para las columnas específicas */
    td:nth-child(16), th:nth-child(16) { /* Comentario */
        width: 200px;
        min-width: 200px;
        max-width: 200px;
        min-height: 80px;
    }

    td:nth-child(19), th:nth-child(19) { /* Observación */
        width: 200px;
        min-width: 200px;
        max-width: 200px;
        min-height: 100px;
    }

    td:nth-child(22), th:nth-child(22) { /* Solución */
        width: 200px;
        min-width: 200px;
        max-width: 200px;
        min-height: 100px;
    }

    /* Resto de columnas en responsive */
    td:nth-child(17), th:nth-child(17) { /* Estado */
        width: 100px;
        min-width: 100px;
    }

    td:nth-child(18), th:nth-child(18) { /* Técnico */
        width: 120px;
        min-width: 120px;
    }

    td:nth-child(20), th:nth-child(20) { /* Documento */
        width: 120px;
        min-width: 120px;
    }

    td:nth-child(21), th:nth-child(21) { /* Fecha Asignado */
        width: 100px;
        min-width: 100px;
    }
}

@media screen and (max-width: 768px) {
    .search-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-form {
        flex-direction: column;
    }
    
    .search-form input {
        border-radius: 4px;
        margin-bottom: 5px;
    }
    
    .search-form button {
        border-radius: 4px;
        width: 100%;
    }
    
    .btn-clear, .btn-new {
        width: 100%;
        justify-content: center;
    }
    
    /* Para móviles, dejamos que las celdas se ajusten automáticamente */
    table, thead, tbody, th, td, tr {
        display: block;
    }
    
    td:nth-child(n), th:nth-child(n) {
        width: 100%;
        box-sizing: border-box;
        min-height: auto !important; /* Reset altura en móvil */
    }
    
    /* Ocultar algunos encabezados en móvil */
    th:nth-child(n+4):not(:nth-child(16)):not(:nth-child(19)):not(:nth-child(22)) {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    td {
        border: none;
        position: relative;
        padding-left: 50%;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    
    td:before {
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
    }
    
    /* Etiquetas para las celdas en móvil */
    td:nth-child(1):before { content: "Ticket"; }
    td:nth-child(2):before { content: "Referencia"; }
    td:nth-child(3):before { content: "Documento"; }
    td:nth-child(16):before { content: "Comentario"; }
    td:nth-child(19):before { content: "Observación"; }
    td:nth-child(22):before { content: "Solución"; }
    
    /* Ajustar textareas en móvil */
    textarea.editable {
        min-height: 80px !important;
    }
} <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editar Incidencia</title>
</head>
<body>
    <div class="modal-overlay">
        <div class="modal">
            <h2>Editar Incidencia #</h2>
            
            <form method="POST" action="index.php?action=editar">
                <input type="hidden" name="id" value="">
                
                <div class="form-group">
                    <label for="estado">Estado:</label>
                    <select name="estado" id="estado" required>
                        <option value="abierto" >Abierto</option>
                        <option value="asignado" >Asignado</option>
                        <option value="en proceso" >En Proceso</option>
                        <option value="cerrado" >Cerrado</option>
                        <option value="cancelado" >Cancelado</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="tecnico">Técnico:</label>
                    <select name="tecnico" id="tecnico">
                        <option value="">Seleccione un técnico</option>
                        <option value="tecnico1" >Técnico 1</option>
                        <option value="tecnico2" >Técnico 2</option>
                        <option value="tecnico3" >Técnico 3</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="observacion">Observación:</label>
                    <textarea name="observacion" id="observacion"></textarea>
                </div>
                
                <div class="form-actions">
                    <button type="submit" class="btn-save">Guardar</button>
                    <a href="index.php" class="btn-cancel">Cancelar</a>
                </div>
            </form>
        </div>
    </div>
</body>
</html>